@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/schibsted-grotesk-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/schibsted-grotesk-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/schibsted-grotesk-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/schibsted-grotesk-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/schibsted-grotesk-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--bg: #141614;
--bg-2: #191A19;
--surface: #1e211e;
--surface-2: #262a26;
--line: #2f342f;
--line-bright: #414841;
--text: #e9ece6;
--muted: #9ba59a;
--dim: #8e948d;
--accent: #4C9A2A;
--logo-acik: #74c447;
--accent-dim: #7d9c68;
--accent-soft: rgba(76, 154, 42, 0.13);
--forest: #1E4620;
--coral: #ce7a73;
--coral-zemin: #ba574f;
--amber: #c9924a;
--steam-blue: #7fa8c4;
--violet: #a99bbf;
--pink: #c48fa2;
--maske: #000;
--radius: 14px;
--radius-sm: 8px;
--font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Schibsted Grotesk', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--edge: inset 0 1px 0 rgba(255, 255, 255, 0.055);
--shadow-card:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 1px 2px rgba(0, 0, 0, 0.5),
0 14px 34px -16px rgba(0, 0, 0, 0.9);
--shadow-lift:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 2px 4px rgba(0, 0, 0, 0.55),
0 26px 56px -22px rgba(0, 0, 0, 0.95),
0 0 44px -20px var(--accent-soft);
--shadow-float:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 4px 10px -4px rgba(0, 0, 0, 0.6),
0 40px 80px -28px rgba(0, 0, 0, 0.95);
--surface-grad: linear-gradient(180deg, var(--surface-2), var(--surface) 62%);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
background-color: var(--bg);
color-scheme: dark;
scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
@media (max-width: 820px) {
html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
body.modal-open, body.tour-open, body.dialog-open { overflow: hidden; }
body {
background:
radial-gradient(1100px 500px at 75% -10%, rgba(76, 154, 42, 0.06), transparent 60%),
radial-gradient(900px 600px at -10% 30%, rgba(194, 91, 82, 0.05), transparent 55%),
linear-gradient(var(--bg-2), var(--bg));
background-attachment: fixed;
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent); color: #0f1a0a; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.game-card:focus-visible, .lfg-card:focus-visible, .fav-btn:focus-visible { outline-offset: 5px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; display: block; }
.topbar {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 28px;
padding: 14px 28px;
background: rgba(7, 9, 11, 0.88);
backdrop-filter: blur(9px);
border-bottom: 1px solid var(--line);
}
.topbar::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg, transparent 5%, rgba(76, 154, 42, 0.35) 50%, transparent 95%);
pointer-events: none;
}
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
@property --kesim { syntax: '<percentage>'; inherits: true; initial-value: 75%; }
.logo-isaret { width: 32px; height: 32px; flex-shrink: 0; overflow: visible; }
.logo-isaret path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.logo-isaret .li-ic { stroke: color-mix(in srgb, var(--accent) 78%, var(--text)); }
.logo-isaret .li-cekirdek { fill: var(--text); transition: transform 0.55s var(--panel-yay); transform-origin: 16px 16px; }
.logo-isaret .li-nokta { fill: var(--logo-acik); transition: transform 0.55s var(--panel-yay); }
.logo:hover .li-nokta, .logo:focus-visible .li-nokta { transform: translate(-3.9px, 3.9px); }
.logo:hover .li-cekirdek, .logo:focus-visible .li-cekirdek { transform: scale(1.18); }
.logo-text {
--kesim: 75%;
font-family: var(--font-display); font-weight: 800;
font-size: 17px; letter-spacing: 0.04em; white-space: nowrap;
background: linear-gradient(110deg, var(--text) 0 calc(var(--kesim) - 9%), var(--logo-acik) calc(var(--kesim) + 3%), var(--accent) calc(var(--kesim) + 22%));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-text em { font-style: normal; color: transparent; }
.logo-text.small { font-size: 14px; }
.logo-alt { gap: 9px; text-decoration: none; width: fit-content; }
.logo-alt .logo-isaret { width: 24px; height: 24px; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.logo-text { background: none; color: var(--text); }
.logo-text em { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
.logo-isaret .li-nokta, .logo-isaret .li-cekirdek { transition: none; }
}
@keyframes sweep { to { transform: rotate(360deg); } }
.topnav { display: flex; gap: 4px; }
.topnav a {
padding: 8px 14px; border-radius: 999px;
font-weight: 500; font-size: 14.5px; color: var(--muted);
transition: color 0.18s, background 0.18s, transform 0.18s;
}
.topnav a:hover { color: var(--text); background: var(--surface); transform: translateY(-1px); }
.topnav a.active { color: var(--accent); background: var(--accent-soft); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.menu-toggle {
display: none; align-items: center; justify-content: center; flex-shrink: 0;
width: 38px; height: 38px; border-radius: 10px;
border: 1px solid var(--line-bright); background: var(--surface); color: var(--text);
transition: border-color 0.2s, color 0.2s;
}
.menu-toggle:hover { border-color: var(--accent-dim); color: var(--accent); }
.menu-toggle svg { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-toggle.open { color: var(--accent); border-color: var(--accent-dim); }
.menu-toggle.open svg { transform: rotate(90deg); }
.search-mini {
position: relative;
display: flex; align-items: center; gap: 8px;
background: var(--surface); border: 1px solid var(--line);
border-radius: 999px; padding: 8px 14px; color: var(--dim);
transition: border-color 0.2s, box-shadow 0.2s;
}
.search-mini:focus-within { border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent); }
.search-mini input {
background: none; border: none; outline: none; color: var(--text);
width: 150px; font-size: 14px;
}
.search-mini input::placeholder { color: var(--dim); }
.search-mini kbd {
font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--dim);
border: 1px solid var(--line-bright); border-radius: 5px; background: var(--bg-2);
padding: 1px 6px 2px; line-height: 1; pointer-events: none;
transition: opacity 0.15s;
}
.search-mini:focus-within kbd { opacity: 0; }
.search-drop {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
width: 348px; max-height: 400px; overflow-y: auto; overscroll-behavior: contain;
background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: 14px;
padding: 6px; box-shadow: var(--shadow-card), 0 0 0 1px rgba(76, 154, 42, 0.05);
animation: dropIn 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.search-drop .game-combo-item { border-radius: 9px; }
.search-drop-all {
display: block; text-align: center; font-family: var(--font-mono); font-size: 11.5px;
font-weight: 700; letter-spacing: 0.06em; color: var(--accent-dim);
padding: 10px; margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px;
transition: color 0.15s, background 0.15s;
}
.search-drop-all:hover, .search-drop-all.active { color: var(--accent); background: var(--surface-2); }
.slot-dots { display: inline-flex; gap: 3px; margin-right: 3px; }
.slot-dots i {
width: 7px; height: 7px; border-radius: 2px;
background: rgba(127, 168, 196, 0.14); border: 1px solid rgba(127, 168, 196, 0.4);
}
.slot-dots i.filled { background: var(--steam-blue); border-color: var(--steam-blue); box-shadow: 0 0 6px color-mix(in srgb, var(--steam-blue) 55%, transparent); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla-baglanti {
position: fixed; left: 14px; top: 10px; z-index: 300;
padding: 10px 16px; border-radius: 10px;
background: var(--accent); color: var(--bg); font-weight: 700; font-size: 14px; text-decoration: none;
box-shadow: var(--shadow-float);
transform: translateY(-160%); transition: transform 0.25s var(--panel-yay);
}
.atla-baglanti:focus { transform: none; outline: 2px solid var(--logo-acik); outline-offset: 2px; }
#app:focus { outline: none; }
.js-yok {
max-width: 520px; margin: 120px auto; padding: 22px 26px; text-align: center; line-height: 1.6;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text);
}
.js-yok span { color: var(--muted); font-size: 14px; }
.to-top {
position: fixed; right: 22px; bottom: 22px; z-index: 90;
width: 46px; height: 46px; border-radius: 50%;
background: rgba(17, 24, 29, 0.92); border: 1px solid var(--line-bright); color: var(--accent);
display: grid; place-items: center; backdrop-filter: blur(8px);
opacity: 0; transform: translateY(16px); pointer-events: none;
box-shadow: var(--shadow-card);
visibility: hidden;
transition: opacity 0.25s, transform 0.25s, border-color 0.2s, box-shadow 0.2s, visibility 0.25s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.to-top:hover { border-color: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); }
.to-top:active { transform: translateY(0) scale(0.94); }
@media (max-width: 820px) {
.to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 42px; height: 42px; }
}
.shots img { cursor: zoom-in; }
.lightbox {
position: fixed; inset: 0; z-index: 150;
background: rgba(4, 6, 7, 0.93); backdrop-filter: blur(7px);
display: grid; place-items: center; padding: 30px;
animation: fadeIn 0.2s both; cursor: zoom-out;
}
.lightbox img {
max-width: min(1240px, 94vw); max-height: 85vh; border-radius: 12px;
border: 1px solid var(--line-bright); cursor: default;
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
animation: popIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.lightbox img { max-width: min(1240px, 100%); }
.lightbox .modal-close, .lightbox-nav { z-index: 1; }
.lightbox .modal-close { position: fixed; top: 18px; right: 18px; width: 38px; height: 38px; }
.lightbox-nav {
position: fixed; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: rgba(17, 24, 29, 0.85); border: 1px solid var(--line-bright); color: var(--text);
font-size: 18px; display: grid; place-items: center;
transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.lightbox-nav:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-50%) scale(1.08); }
.lightbox-nav.prev { left: 18px; }
.lightbox-nav.next { right: 18px; }
@media (max-width: 560px) {
.lightbox { padding: 16px; }
.lightbox-nav, .lightbox-nav:hover { top: auto; bottom: 12px; transform: none; }
.lightbox-nav.prev { left: calc(50% - 110px); }
.lightbox-nav.next { right: calc(50% - 110px); }
}
.lightbox-count {
position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted);
}
@media (max-width: 560px) { .lightbox-count { bottom: 27px; } }
@media (prefers-reduced-motion: no-preference) {
.section.reveal-pending { opacity: 0; transform: translateY(26px); }
.section.revealed {
opacity: 1; transform: none;
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
}
.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch button#lang-switch-btn {
position: relative; display: flex; align-items: center; gap: 6px;
height: 38px; flex-shrink: 0; padding: 0 12px 0 11px;
background: var(--surface); border: 1px solid var(--line-bright); border-radius: 999px; color: var(--muted);
font-family: var(--font-mono); transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s;
}
.lang-switch button#lang-switch-btn svg:first-child { flex-shrink: 0; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lang-switch button#lang-switch-btn:hover svg:first-child { transform: rotate(160deg); }
.lang-switch button#lang-switch-btn:hover,
.lang-switch button#lang-switch-btn[aria-expanded="true"] {
border-color: var(--accent-dim); color: var(--accent); background: var(--accent-soft);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.lang-switch button#lang-switch-btn em {
font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: inherit;
}
.lang-chev { flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lang-switch button#lang-switch-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-switch-menu[hidden] { display: none; }
@media (max-width: 560px) {
.topbar .lang-switch { position: static; }
.topbar .lang-switch-menu { left: 12px; right: 12px; min-width: 0; top: calc(100% + 6px); }
.topbar .lang-switch-menu::before { display: none; }
}
.lang-switch-menu {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
background: var(--surface-2); border: 1px solid var(--line-bright); border-radius: var(--radius-sm);
padding: 10px; min-width: 258px;
box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(76, 154, 42, 0.06);
animation: dropIn 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
overflow: hidden;
}
.lang-switch-menu::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.lang-switch-head {
font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--dim); padding: 2px 2px 9px;
}
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hesap-dil .lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 380px) { .hesap-dil .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lang-chip {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
padding: 10px 11px; border-radius: 9px; border: 1px solid var(--line);
background: var(--surface); overflow: hidden;
transition: border-color 0.18s, background 0.18s, transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.18s;
}
.lang-chip::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
background: radial-gradient(120px 60px at 0% 0%, color-mix(in srgb, var(--lc) 22%, transparent), transparent);
transition: opacity 0.18s;
}
@media (hover: hover) { .lang-chip:hover { border-color: color-mix(in srgb, var(--lc) 55%, var(--line-bright)); transform: translateY(-2px); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--lc) 50%, transparent); } }
@media (hover: hover) { .lang-chip:hover::before { opacity: 1; } }
.lang-chip:active { transform: translateY(0); }
.lang-chip.active {
border-color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, var(--surface));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lc) 40%, transparent);
}
.lang-chip.active::before { opacity: 1; }
.lang-chip-code {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
color: var(--lc); position: relative;
}
.lang-chip-name { font-size: 13px; font-weight: 600; color: var(--muted); position: relative; }
.lang-chip.active .lang-chip-name { color: var(--text); }
.lang-chip-check {
position: absolute; top: 9px; right: 9px; color: var(--lc);
opacity: 0; transform: scale(0.5); transition: opacity 0.18s, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.lang-chip.active .lang-chip-check { opacity: 1; transform: scale(1); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 1px solid var(--line-bright); border-radius: 999px;
background: var(--surface-grad); color: var(--text);
padding: 9px 20px; font-size: 14px; font-weight: 700;
white-space: nowrap;
position: relative; overflow: hidden;
box-shadow: var(--edge), 0 1px 2px rgba(0, 0, 0, 0.4);
transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent-dim); box-shadow: 0 8px 24px -10px var(--accent-soft); }
.btn:active { transform: translateY(0) scale(0.96); }
.btn-primary {
background: var(--accent); color: #0f1a0a; border-color: var(--accent);
box-shadow: 0 4px 24px -6px rgba(76, 154, 42, 0.5);
}
.btn-primary:hover { background: #5cb134; border-color: #5cb134; box-shadow: 0 8px 32px -6px rgba(76, 154, 42, 0.65); }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
.btn-danger:hover { border-color: var(--coral); color: var(--coral); box-shadow: none; background: color-mix(in srgb, var(--coral) 12%, transparent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ping {
position: absolute; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(76, 154, 42, 0.55), transparent 70%);
transform: scale(0); animation: pingExpand 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.btn-primary .btn-ping { background: radial-gradient(circle, rgba(26, 18, 6, 0.35), transparent 70%); }
@keyframes pingExpand { to { transform: scale(2.6); opacity: 0; } }
.confetti-piece {
position: fixed; top: 0; left: 0; width: 8px; height: 8px; margin: -4px;
border-radius: 2px; pointer-events: none; z-index: 300;
animation: confettiFly 0.85s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes confettiFly {
0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.confetti-piece { display: none; }
}
#auth-area { display: flex; align-items: center; gap: 10px; }
.mod-link {
position: relative; display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px; font-size: 16px;
background: var(--surface); border: 1px solid var(--line); flex-shrink: 0;
transition: border-color 0.2s, transform 0.15s;
}
.mod-link:hover { border-color: var(--coral); transform: translateY(-1px); }
.mod-link em {
position: absolute; top: -6px; right: -6px; font-style: normal;
background: var(--coral); color: #0f1a0a; font-family: var(--font-mono); font-size: 10px; font-weight: 800;
border-radius: 999px; min-width: 17px; height: 17px; display: flex; align-items: center; justify-content: center;
padding: 0 3px; box-shadow: 0 0 0 2px var(--bg);
}
.user-chip {
display: flex; align-items: center; gap: 10px;
background: var(--surface); border: 1px solid var(--line);
border-radius: 999px; padding: 6px 14px 6px 6px;
}
.user-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-dim));
color: #0f1a0a; font-weight: 800; font-size: 13px;
display: grid; place-items: center; font-family: var(--font-mono);
flex-shrink: 0; object-fit: cover;
}
img.user-avatar { background: var(--bg-2); }
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-edit-btn {
position: absolute; bottom: -2px; right: -2px;
width: 26px; height: 26px; border-radius: 50%;
background: var(--surface); border: 1px solid var(--line-bright); color: var(--text);
font-size: 12px; display: grid; place-items: center;
transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.avatar-edit-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
.user-chip span { font-weight: 700; font-size: 14px; }
.user-chip button {
background: none; border: none; color: var(--dim); font-size: 12.5px; font-weight: 600;
transition: color 0.15s;
}
.user-chip button:hover { color: var(--coral); }
.user-chip-link { display: flex; align-items: center; gap: 10px; transition: opacity 0.15s; }
.user-chip-link:hover { opacity: 0.8; }
main { min-height: 70vh; display: flow-root; }
body:not(.cizildi) .footer { visibility: hidden; }
.page { max-width: 1280px; margin: 0 auto; padding: 0 28px 80px; animation: pageIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero, .detail-hero { animation: pageIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
.page, .hero, .detail-hero { animation: none; }
}
.hero {
position: relative; overflow: hidden;
padding: 84px 28px 60px;
border-bottom: 1px solid var(--line);
}
.hero-grid {
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(76, 154, 42, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(76, 154, 42, 0.045) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse 80% 90% at 50% 10%, black, transparent 75%);
}
.hero-inner {
max-width: 1280px; margin: 0 auto; position: relative;
display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 48px; align-items: center;
}
.hero-kicker {
font-size: 13.5px; font-weight: 500;
letter-spacing: 0.01em; color: var(--muted);
display: flex; align-items: center; gap: 9px;
animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-kicker::before {
content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
background: var(--accent);
}
.hero h1 {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(34px, 5vw, 62px); line-height: 1.04;
letter-spacing: -0.032em; margin: 18px 0 20px;
animation: rise 0.7s 0.08s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero h1 .stroke {
color: var(--accent);
}
.hero p.lead {
color: var(--muted); font-size: 17.5px; max-width: 560px;
animation: rise 0.7s 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.hero-search {
margin-top: 30px; display: flex; gap: 10px; max-width: 560px;
animation: rise 0.7s 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-search input {
flex: 1; background: var(--surface); border: 1px solid var(--line-bright);
border-radius: 999px; padding: 15px 24px; color: var(--text); font-size: 16px;
outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hero-search .btn { padding: 15px 28px; font-size: 15px; }
.hero-chips {
margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px;
animation: rise 0.7s 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.chip {
border: 1px solid var(--line-bright); background: rgba(17, 24, 29, 0.7);
color: var(--muted); border-radius: 999px; padding: 7px 15px;
font-size: 13px; font-weight: 600;
transition: all 0.16s;
}
@media (hover: hover) { .chip:hover { color: var(--accent); border-color: var(--accent-dim); transform: translateY(-2px); background: var(--accent-soft); } }
.chip:active { transform: translateY(-2px) scale(0.94); }
.chip.active { color: #0f1a0a; background: var(--accent); border-color: var(--accent); }
.radar-visual {
aspect-ratio: 1; max-width: 400px; width: 100%; margin-left: auto;
border-radius: 50%; position: relative;
border: 1.5px solid rgba(76, 154, 42, 0.4);
background:
radial-gradient(circle, rgba(76, 154, 42, 0.06), transparent 70%),
repeating-radial-gradient(circle at center, transparent 0 24.5%, rgba(76, 154, 42, 0.18) 24.5% 25%);
box-shadow: 0 0 80px color-mix(in srgb, var(--accent) 8%, transparent), inset 0 0 60px color-mix(in srgb, var(--accent) 5%, transparent);
animation: rise 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.radar-visual::before, .radar-visual::after {
content: ''; position: absolute; background: rgba(76, 154, 42, 0.16);
}
.radar-visual::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar-visual::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar-beam {
position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
background: conic-gradient(from 0deg, transparent 0deg, rgba(76, 154, 42, 0.05) 30deg, rgba(76, 154, 42, 0.3) 90deg, transparent 90.6deg);
animation: sweep 8s linear infinite;
}
.radar-blip {
position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
background: var(--accent); opacity: 0.15;
animation: blipIz 8s linear infinite;
}
.radar-blip.coral { background: var(--coral);  }
@keyframes blipIz { 0%, 5% { opacity: 1; } 70%, 100% { opacity: 0.15; } }
.radar-blip.gercek { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; cursor: pointer; z-index: 2; transition: transform 0.18s; }
.radar-blip.gercek::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
.radar-blip.gercek:hover { animation: none; opacity: 1; transform: scale(1.35); }
.radar-blip.gercek b {
position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translate(-50%, 4px) scale(0.74);
white-space: nowrap; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text);
background: var(--surface-2); border: 1px solid var(--line-bright); border-radius: 7px; padding: 4px 10px;
opacity: 0; pointer-events: none; transition: opacity 0.16s, transform 0.16s;
}
.radar-blip.gercek:hover b { opacity: 1; transform: translate(-50%, 0) scale(0.74); }
.radar-blip.sus { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent-dim); }
.radar-blip.sus.coral { background: var(--coral); }
@media (prefers-reduced-motion: reduce) {
.radar-beam { animation: none; }
.radar-blip { animation: none; opacity: 0.8; }
.radar-blip.sus { opacity: 0.45; }
}
.radar-label {
position: absolute; font-family: var(--font-mono); font-size: 10px;
color: var(--accent-dim); letter-spacing: 0.12em; white-space: nowrap;
}
.statbar {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
margin-top: 44px; max-width: 680px;
border: 1px solid var(--line); border-radius: var(--radius);
background: rgba(17, 24, 29, 0.55); backdrop-filter: blur(6px);
padding: 18px 4px; position: relative;
animation: rise 0.7s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.statbar::before {
content: ''; position: absolute; top: -1px; left: 14px; right: 14px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(76, 154, 42, 0.5), transparent);
}
.stat { padding: 2px 12px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { border-left: none; }
.stat .stat-num {
font-family: var(--font-mono); font-weight: 800; font-size: 26px; color: var(--accent);
font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
line-height: 1.15;
}
.stat .stat-label {
font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere;
}
.section { margin-top: 56px; }
.section-head {
display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px;
flex-wrap: wrap; row-gap: 6px;
}
.section-head h2 {
font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.015em;
}
.section-head .accent { color: inherit; }
.section-head .see-all {
margin-left: auto; font-size: 13.5px; font-weight: 600;
color: var(--muted); transition: color 0.15s, transform 0.15s;
display: inline-flex; align-items: center; gap: 6px;
}
.see-all:hover { color: var(--accent); transform: translateX(3px); }
.section-head .tag-mono {
font-size: 13px; color: var(--dim);
}
.card-row {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.card-row.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-card {
background: var(--surface-grad); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--shadow-card);
transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s, box-shadow 0.22s;
animation: cardIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
#app.gecissiz .page, #app.gecissiz .lfg-card:not(.is-new), #app.gecissiz .game-card,
.lfg-grid.sessiz > .lfg-card:not(.is-new) { animation: none; }
.game-card:hover {
transform: translateY(-6px);
border-color: var(--accent-dim);
box-shadow: var(--shadow-lift);
}
.card-cover { position: relative; aspect-ratio: 460 / 215; overflow: hidden; background: var(--bg-2); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.game-card:hover .card-cover img { transform: scale(1.06); }
.card-cover::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.13) 50%, transparent 58%);
transform: translateX(-130%); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.game-card:hover .card-cover::after { transform: translateX(130%); }
.cover-art {
width: 100%; height: 100%; display: grid; place-items: center; position: relative; overflow: hidden;
}
.cover-art::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 22px 22px;
}
.cover-art b {
font-family: var(--font-display); font-weight: 800; font-size: 34px;
color: rgba(255, 255, 255, 0.92); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
position: relative; z-index: 1;
}
.cover-art small {
position: absolute; bottom: 8px; right: 12px; z-index: 1;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.55); text-transform: uppercase;
}
.cover-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 52px); z-index: 2; }
.fav-btn {
position: absolute; top: 8px; right: 8px; z-index: 2;
width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(7, 9, 11, 0.65); backdrop-filter: blur(6px);
color: rgba(255, 255, 255, 0.75); display: grid; place-items: center;
transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.fav-btn:hover { color: var(--coral); border-color: rgba(194, 91, 82, 0.5); transform: scale(1.08); }
.fav-btn.on { color: var(--coral); border-color: rgba(194, 91, 82, 0.55); background: rgba(194, 91, 82, 0.14); }
.fav-btn.pop { animation: favPop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes favPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fav-big {
display: inline-flex; align-items: center; gap: 8px;
color: var(--muted);
}
.fav-big.on { color: var(--coral); border-color: rgba(194, 91, 82, 0.5); }
.fav-big.on:hover { border-color: var(--coral); }
.fav-big.pop svg { animation: favPop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.fav-big em { font-style: normal; font-family: var(--font-mono); font-size: 12px; opacity: 0.7; margin-left: 2px; }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.detail-actions .steam-link { margin-top: 0; }
.badge {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
padding: 4px 9px; border-radius: 6px; letter-spacing: 0.06em;
backdrop-filter: blur(6px);
}
.badge-free { background: rgba(76, 154, 42, 0.92); color: #0f1a0a; }
.badge-new { background: rgba(194, 91, 82, 0.92); color: #fff; }
.badge-soon { background: rgba(201, 146, 74, 0.94); color: #0f1a0a; }
.badge-sinyal {
display: inline-flex; align-items: center; gap: 6px;
background: color-mix(in srgb, var(--bg) 84%, transparent); color: var(--logo-acik);
border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
.badge-sinyal::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: var(--logo-acik); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-title {
font-weight: 700; font-size: 15.5px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.card-genres { color: var(--dim); font-size: 12.5px; margin-top: -6px; }
.card-meta { display: flex; align-items: center; gap: 8px; row-gap: 6px; margin-top: auto; flex-wrap: wrap; }
.card-meta .score-pill, .card-meta .pill-players { white-space: nowrap; }
.score-pill {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 12.5px; font-weight: 800;
padding: 4px 10px; border-radius: 7px;
}
.score-steam { background: rgba(127, 168, 196, 0.12); color: var(--steam-blue); }
.score-site { background: var(--accent-soft); color: var(--accent); }
.score-site.empty { color: var(--dim); background: rgba(140, 160, 160, 0.08); }
.score-pill svg { flex-shrink: 0; }
.pill-players {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.pill-players i {
width: 6px; height: 6px; border-radius: 50%; background: var(--coral);
}
.live-dot {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--accent); vertical-align: middle;
}
.steam-link { margin-top: 20px; }
.shots {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 28px;
}
.shots img {
width: 100%; aspect-ratio: 16/9; object-fit: cover;
border-radius: var(--radius-sm); border: 1px solid var(--line);
transition: transform 0.25s, border-color 0.25s;
}
.shots img:hover { transform: scale(1.03); border-color: var(--accent-dim); }
.platform-dots { margin-left: auto; display: flex; gap: 4px; }
.pdot {
width: 22px; height: 22px; border-radius: 6px;
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 8.5px; font-weight: 800;
background: var(--bg-2); border: 1px solid var(--line);
transition: transform 0.15s;
}
.game-card:hover .pdot { transform: translateY(-1px); }
.browse-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; margin-top: 40px; }
.filters-toggle { display: none; }
.filters { position: sticky; top: 86px; align-self: start; display: flex; flex-direction: column; gap: 26px; }
.filter-group h3 {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.filter-group h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.filter-list { display: flex; flex-direction: column; gap: 3px; }
.filter-item {
display: flex; align-items: center; gap: 10px;
background: none; border: none; text-align: left;
color: var(--muted); padding: 7px 10px; border-radius: var(--radius-sm);
font-size: 14px; font-weight: 500; width: 100%;
transition: background 0.15s, color 0.15s, padding-left 0.15s;
}
.filter-item:hover { background: var(--surface); color: var(--text); padding-left: 14px; }
.filter-item:active { padding-left: 16px; }
.filter-item.active { background: var(--accent-soft); color: var(--accent); color: color-mix(in srgb, var(--accent) 80%, var(--text)); font-weight: 700; }
.filter-item .dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.filter-item .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--dim); }
.genre-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.browse-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.browse-top h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.result-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--dim); }
.sort-select {
margin-left: auto; background: var(--surface); color: var(--text);
border: 1px solid var(--line-bright); border-radius: 999px;
padding: 9px 18px; font-size: 13.5px; font-weight: 600; outline: none; cursor: pointer;
transition: border-color 0.2s;
}
.sort-select:hover, .sort-select:focus { border-color: var(--accent-dim); }
.browse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.empty-state {
grid-column: 1 / -1; text-align: center; padding: 80px 20px; color: var(--dim);
}
.empty-state .big { font-family: var(--font-display); font-size: 20px; color: var(--muted); margin-bottom: 8px; }
.empty-state h1.big { margin: 0 0 8px; font-weight: inherit; line-height: inherit; }
.ana-sayfa .section .empty-state { padding: 28px 20px 8px; }
.empty-radar {
width: 76px; height: 76px; margin: 0 auto 24px; border-radius: 50%;
border: 2px solid var(--line-bright); position: relative; overflow: hidden;
}
.empty-radar::before {
content: ''; position: absolute; inset: 14px; border: 1px solid var(--line-bright); border-radius: 50%;
}
.empty-radar-sweep {
position: absolute; inset: 0;
background: conic-gradient(from 0deg, rgba(164, 154, 141, 0.22), transparent 70deg, transparent);
animation: sweep 5.5s linear infinite;
}
.empty-radar-dot {
position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px;
border-radius: 50%; background: var(--dim);
}
.load-more-wrap { display: flex; justify-content: center; margin-top: 30px; }
.load-more small { color: var(--dim); font-weight: 500; }
.detail-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.detail-backdrop {
position: absolute; inset: -40px;
background-size: cover; background-position: center;
filter: blur(42px) saturate(1.3) brightness(0.42);
transform: scale(1.1);
}
.detail-backdrop::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(7, 9, 11, 0.4), var(--bg));
}
.detail-inner {
position: relative; max-width: 1280px; margin: 0 auto;
padding: 56px 28px 44px;
display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start;
}
.detail-cover {
border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--line-bright); box-shadow: var(--shadow-card);
aspect-ratio: 460 / 215; background: var(--bg-2);
animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.detail-cover img, .detail-cover .cover-art { width: 100%; height: 100%; object-fit: cover; }
.detail-info { animation: rise 0.6s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.detail-info .breadcrumbs {
font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: 0.08em; margin-bottom: 12px;
}
.breadcrumbs a:hover { color: var(--accent); }
.detail-info h1 {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;
letter-spacing: -0.028em; margin-bottom: 14px;
}
.detail-info .desc { color: var(--muted); font-size: 16.5px; max-width: 640px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.detail-facts {
display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px;
font-size: 13.5px; color: var(--muted);
}
.detail-facts b { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--dim); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 3px; }
.platform-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.platform-tag {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--line-bright); border-radius: 999px;
padding: 7px 14px; font-size: 13px; font-weight: 600; background: rgba(11, 16, 19, 0.6);
}
.platform-tag .dot { width: 9px; height: 9px; border-radius: 50%;  }
.score-board {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
max-width: 1280px; margin: -20px auto 0; padding: 0 28px; position: relative; z-index: 2;
}
.dial-card {
background: var(--surface-grad); border: 1px solid var(--line);
border-radius: var(--radius); padding: 20px;
display: flex; align-items: center; gap: 18px;
box-shadow: var(--shadow-card);
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
animation: rise 0.6s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.dial-card:hover { border-color: var(--line-bright); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.dial { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.dial svg { transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.dial .track { stroke: var(--bg-2); }
.dial .bar { transition: stroke-dashoffset 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dial-value {
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--font-mono); font-weight: 800; font-size: 17px;
}
.dial-card h4 { font-size: 14px; font-weight: 700; }
.dial-card p { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.detail-columns { display: grid; grid-template-columns: 1fr 320px; gap: 40px; margin-top: 48px; }
.similar-list { display: flex; flex-direction: column; gap: 12px; }
.similar-item {
display: flex; gap: 12px; align-items: center;
background: var(--surface-grad); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 8px; box-shadow: var(--edge);
transition: border-color 0.18s, transform 0.18s;
}
.similar-item:hover { border-color: var(--accent-dim); transform: translateX(4px); }
.similar-item .thumb {
width: 96px; aspect-ratio: 460/215; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--bg-2);
}
.similar-item .thumb img, .similar-item .thumb .cover-art { width: 100%; height: 100%; object-fit: cover; }
.similar-item .thumb .cover-art b { font-size: 13px; }
.similar-item .thumb .cover-art small { display: none; }
.similar-item h5 { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.similar-item .sub { font-size: 11.5px; color: var(--dim); font-family: var(--font-mono); }
.side-title {
font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--dim); margin-bottom: 14px;
display: flex; align-items: center; gap: 10px;
}
.side-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(4, 6, 7, 0.78); backdrop-filter: blur(8px);
display: grid; place-items: center; padding: 20px;
animation: fadeIn 0.2s both;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
width: 100%; max-width: 420px; max-height: 90vh;
background: var(--surface-grad); border: 1px solid var(--line-bright);
border-radius: 18px; padding: 30px;
box-shadow: var(--shadow-float);
animation: popIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
position: relative;
overflow-y: auto; overscroll-behavior: contain;
}
.modal:focus { outline: none; }
@keyframes popIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
.modal-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
font-size: 15px; transition: all 0.15s;
}
.modal-close:hover { color: var(--coral); border-color: var(--coral); transform: rotate(90deg); }
.modal h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.modal-close ~ h2:first-of-type { padding-right: 34px; }
.modal .modal-sub { color: var(--dim); font-size: 13.5px; margin-bottom: 20px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 22px; background: var(--bg-2); border-radius: 999px; padding: 5px; }
.auth-tabs button {
flex: 1; border: none; background: none; color: var(--muted);
padding: 9px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
transition: all 0.18s;
}
.auth-tabs button.active { background: var(--accent); color: #0f1a0a; }
.field { margin-bottom: 14px; }
.field label {
display: block; font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px;
}
.field input {
width: 100%; background: var(--bg-2); border: 1px solid var(--line-bright);
border-radius: 10px; padding: 12px 16px; color: var(--text); font-size: 15px; outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.invalid { border-color: var(--coral) !important; box-shadow: 0 0 0 3px rgba(194, 91, 82, 0.16) !important; }
.select-wrap:has(> select.invalid) .select-btn { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(194, 91, 82, 0.16); }
.field-error-msg {
display: flex; align-items: center; gap: 6px; margin-top: 7px;
color: var(--coral); font-size: 12px; font-weight: 700;
animation: fieldErrorIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.field-error-msg::before {
content: ''; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;
background: var(--coral);
-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='17' r='0.5'/%3E%3C/svg%3E");
mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='17' r='0.5'/%3E%3C/svg%3E");
}
@keyframes fieldErrorIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
.shake { animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.form-error {
background: rgba(194, 91, 82, 0.1); border: 1px solid rgba(194, 91, 82, 0.35);
color: var(--coral); font-size: 13px; font-weight: 600;
border-radius: 9px; padding: 10px 14px; margin-bottom: 14px;
}
.report-modal-icon {
width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: rgba(194, 91, 82, 0.12); color: var(--coral); margin-bottom: 14px;
animation: popIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.report-target-tag {
display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px;
color: var(--dim); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
padding: 5px 12px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.04em;
}
.report-target-tag b { color: var(--text); font-weight: 700; text-transform: none; letter-spacing: 0; }
.report-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
.report-chip {
font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
background: var(--bg-2); border: 1px solid var(--line-bright); color: var(--muted);
transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
}
@media (hover: hover) { .report-chip:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-1px); } }
.report-chip.active { background: rgba(194, 91, 82, 0.16); border-color: var(--coral); color: var(--coral); }
.auth-forgot-link {
display: inline-block; margin: -16px 0 8px -6px; padding: 6px; font-size: 12.5px; font-weight: 600;
color: var(--muted); transition: color 0.15s;
}
.auth-forgot-link:hover { color: var(--accent); }
.otp-input {
font-family: var(--font-mono); font-size: 22px !important; font-weight: 700;
letter-spacing: 0.5em; text-align: center; padding-left: 24px !important;
}
.verify-links {
display: flex; justify-content: space-between; margin-top: 16px; font-size: 12.5px; font-weight: 600;
}
.verify-links a { color: var(--muted); transition: color 0.15s; }
.verify-links a:hover { color: var(--accent); }
.verify-badge {
display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; flex-shrink: 0;
background: rgba(201, 146, 74, 0.1); border: 1px solid rgba(201, 146, 74, 0.35);
color: var(--amber); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
border-radius: 999px; transition: border-color 0.2s, transform 0.15s;
}
.verify-badge:hover { border-color: var(--amber); transform: translateY(-1px); }
.uzak-badge { background: color-mix(in srgb, var(--coral) 10%, transparent); border-color: color-mix(in srgb, var(--coral) 40%, transparent); color: var(--coral); }
.uzak-badge:hover { border-color: var(--coral); }
.uzak-badge svg { width: 15px; height: 15px; }
.account-email-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: 10px;
padding: 12px 16px; font-size: 14px; color: var(--text);
}
.account-email-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-email-row .tag-mono { flex-shrink: 0; }
.bekleyen-eposta {
margin: 4px 0 16px; padding: 12px 14px; border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-left: 3px solid var(--amber);
background: color-mix(in srgb, var(--amber) 7%, transparent);
}
.bekleyen-eposta b { display: block; color: var(--amber); font-size: 13.5px; margin-bottom: 4px; }
.bekleyen-eposta p { color: var(--muted); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.bekleyen-eposta strong { color: var(--text); }
.dialog-backdrop { z-index: 160; }
.dialog { max-width: 420px; }
.dialog h2 { margin-bottom: 6px; }
.dialog .modal-sub { margin-bottom: 20px; }
.dialog .field { margin-bottom: 20px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.modal.dialog .dialog-actions .btn { width: auto; flex: 1 1 auto; margin-top: 0; white-space: nowrap; }
.page.yonetim { max-width: 1040px; padding-top: 40px; padding-bottom: 72px; }
.yon-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 22px; }
.yon-ust h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.yon-ust p { color: var(--muted); font-size: 14.5px; margin-top: 7px; }
.yon-yenile { flex-shrink: 0; }
.yon-yenile svg { transition: transform 0.5s var(--panel-yay); }
.yon-yenile:hover svg { transform: rotate(-120deg); }
.yon-yenile.donuyor svg { animation: yonDon 0.8s linear infinite; }
@keyframes yonDon { to { transform: rotate(-360deg); } }
.yon-serit {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
background: var(--surface-grad); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 26px;
}
.yon-bolum {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
padding: 16px 18px 15px; text-align: left; color: var(--text); cursor: pointer;
background: transparent; border: 0; border-left: 1px solid var(--line);
transition: background 0.2s;
}
.yon-bolum:first-child { border-left: 0; }
.yon-bolum::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent);
transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--panel-yay);
}
.yon-bolum:hover { background: rgba(255, 255, 255, 0.025); }
.yon-bolum[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.yon-bolum[aria-selected="true"]::before { transform: scaleX(1); }
.yon-bolum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.yon-bolum-ad { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.yon-bolum[aria-selected="true"] .yon-bolum-ad { color: var(--text); }
.yon-bolum.dikkat .yon-bolum-ad::after, .yon-bolum.acil .yon-bolum-ad::after {
content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
}
.yon-bolum.acil .yon-bolum-ad::after { background: var(--coral); animation: yonNabiz 1.8s ease-out infinite; }
@keyframes yonNabiz {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 60%, transparent); }
100% { box-shadow: 0 0 0 7px transparent; }
}
.yon-bolum-sayi {
font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums; transition: transform 0.25s var(--panel-yay);
}
.yon-bolum-sayi svg { width: 30px; height: 30px; stroke-width: 2.6; color: var(--accent); margin: 3px 0 1px; }
.yon-bolum:hover .yon-bolum-sayi { transform: translateY(-2px); }
.yon-bolum small { font-size: 12.5px; color: var(--dim); }
.yon-bolum.acil small { color: var(--coral); font-weight: 600; }
.yon-bolum.tamam small { color: var(--accent-dim); }
.yon-panel { min-height: 240px; outline: none; }
.yon-panel.giris { animation: yonGiris 0.35s var(--panel-yay) both; }
@keyframes yonGiris { from { opacity: 0; transform: translateY(6px); } }
.yon-filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.yon-filtre .chip em { font-style: normal; font-variant-numeric: tabular-nums; opacity: 0.75; margin-left: 4px; }
.yon-liste { display: flex; flex-direction: column; gap: 12px; }
.yon-liste[aria-busy="true"]:empty { min-height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: yonYukle 1.2s linear infinite; }
@keyframes yonYukle { to { background-position: -200% 0; } }
.yon-bos {
display: flex; align-items: center; gap: 12px; padding: 20px; color: var(--muted); font-size: 14px;
border: 1px dashed var(--line-bright); border-radius: var(--radius);
}
.yon-bos span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: var(--accent); background: var(--accent-soft); }
.yon-alt-baslik { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.yon-alt-baslik::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.yon-rozet {
font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
color: var(--muted); background: var(--bg-2); border: 1px solid var(--line);
}
.yon-rozet.uyari { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.sikayet {
position: relative; padding: 15px 18px 14px 22px;
background: var(--surface-grad); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--edge);
transition: border-color 0.2s, opacity 0.28s, transform 0.28s var(--panel-yay);
}
.sikayet::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); }
.sikayet.tur-message::before { background: var(--coral); }
.sikayet.tur-profil::before { background: var(--violet); }
.sikayet:hover { border-color: var(--line-bright); }
.sikayet.kapaniyor { opacity: 0; transform: translateX(16px); }
.sikayet-ust { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.sikayet-tur { font-weight: 700; }
.sikayet-baglam { color: var(--muted); }
.sikayet-ust time { margin-left: auto; font-size: 12px; color: var(--dim); }
.sikayet-ust a, .sikayet-kisi a { font-weight: 700; color: var(--text); transition: color 0.15s; }
.sikayet-ust a:hover, .sikayet-kisi a:hover { color: var(--accent); }
.sikayet-alinti {
margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: var(--bg-2);
font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.sikayet-yok { margin: 10px 0; font-size: 13px; color: var(--dim); font-style: italic; }
.sikayet-kisi { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; }
.sikayet-sebepler { display: flex; flex-direction: column; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
.sikayet-sebepler li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; font-size: 13.5px; }
.sikayet-sebepler b { color: var(--coral); font-weight: 600; overflow-wrap: anywhere; }
.sikayet-sebepler span { font-size: 12.5px; color: var(--dim); }
.sikayet-foto { display: flex; align-items: center; gap: 12px; white-space: normal; }
.sikayet-foto .user-avatar { width: 64px; height: 64px; border-radius: 12px; font-size: 20px; object-fit: cover; }
.sikayet-foto span { font-weight: 700; }
.sikayet-eylem { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.sikayet-eylem .btn { gap: 6px; }
.sikayet-eylem .yon-yoksay { margin-left: auto; font-size: 13px; color: var(--muted); text-decoration-color: var(--line-bright); transition: color 0.15s, text-decoration-color 0.15s; }
.sikayet-eylem .yon-yoksay:hover { color: var(--text); text-decoration-color: currentColor; }
.sikayet.kapali { padding-top: 12px; padding-bottom: 12px; background: transparent; box-shadow: none; }
.sikayet.kapali::before { opacity: 0.4; }
.sikayet-ozet { margin: 6px 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sikayet-sonuc { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; }
.sikayet-sonuc b { color: var(--accent); }
.sikayet-sonuc.islem-yoksay b, .sikayet-sonuc.islem-eski b { color: var(--muted); }
.sikayet-sonuc.islem-uzaklastir b { color: var(--amber); }
.sikayet-sonuc.islem-ban b { color: var(--coral); }
.sikayet-sonuc span { color: var(--dim); }
.ist { display: flex; flex-direction: column; gap: 18px; }
.ist-ozet {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
background: var(--surface-grad); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--edge);
}
.ist-sayi { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-left: 1px solid var(--line); }
.ist-sayi:first-child { border-left: 0; }
.ist-sayi span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ist-sayi b { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.ist-kart { padding: 16px 18px 14px; background: var(--surface-grad); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--edge); }
.ist-alan { position: relative; height: 200px; margin: 8px 0 0 38px; }
.ist-izgara { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.ist-izgara span { position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ist-sutunlar { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--adet), minmax(0, 1fr)); gap: 2px; }
.ist-sutun { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; border-radius: 4px; transition: background 0.15s; }
.ist-sutun.aktif { background: rgba(255, 255, 255, 0.04); }
.ist-sutun i { display: block; width: 100%; max-width: 24px; background: var(--accent); border-radius: 4px 4px 0 0; transition: background 0.15s; }
.ist-sutun.bugun i { background: repeating-linear-gradient(135deg, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 55%, var(--surface)) 4px 7px); }
.ist-sutun.aktif i { background: var(--logo-acik); }
.ist-ipucu {
position: absolute; top: 4px; z-index: 2; transform: translateX(-50%); pointer-events: none;
display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; white-space: nowrap;
background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: 10px; box-shadow: var(--shadow-float);
font-size: 12.5px; color: var(--muted);
}
.ist-ipucu b { font-size: 13px; color: var(--text); }
.ist-ipucu[hidden] { display: none; }
.ist-eksen { display: flex; justify-content: space-between; margin: 6px 0 0 38px; font-size: 11.5px; color: var(--dim); }
.ist-tablo { margin-top: 12px; }
.ist-tablo summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--muted); transition: color 0.15s; }
.ist-tablo summary::-webkit-details-marker { display: none; }
.ist-tablo summary:hover { color: var(--accent); }
.ist-tablo-kap { max-height: 280px; overflow: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; }
.ist-tablo table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ist-tablo th, .ist-tablo td { padding: 7px 12px; text-align: right; border-bottom: 1px solid var(--line); }
.ist-tablo th:first-child, .ist-tablo td:first-child { text-align: left; }
.ist-tablo thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; }
.ist-listeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ist-liste { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ist-liste li { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; overflow: hidden; border-radius: 8px; font-size: 13.5px; }
.ist-pay { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--accent-soft); }
.ist-ad { position: relative; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ist-liste b { position: relative; font-variant-numeric: tabular-nums; }
.ist-bos { font-size: 13.5px; color: var(--dim); }
.ist-not { font-size: 12.5px; color: var(--dim); }
@media (max-width: 720px) {
.ist-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ist-sayi:nth-child(3) { border-left: 0; }
.ist-sayi:nth-child(n + 3) { border-top: 1px solid var(--line); }
.ist-listeler { grid-template-columns: minmax(0, 1fr); }
.ist-alan { height: 160px; }
}
.yaptirim .field { margin-bottom: 14px; }
.yaptirim-etiket { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.yaptirim-sure { display: flex; flex-wrap: wrap; gap: 8px; }
.yon-ara {
display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 6px 6px 14px;
background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: 12px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.yon-ara:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.yon-ara-ikon { display: flex; color: var(--dim); }
.yon-ara input { flex: 1; min-width: 0; padding: 8px 0; background: none; border: 0; outline: 0; color: var(--text); font-size: 15px; }
.uye-satir {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 16px;
padding: 12px 16px; background: var(--surface-grad); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--edge);
transition: border-color 0.2s;
}
.uye-satir:hover { border-color: var(--line-bright); }
.uye-kim { display: flex; align-items: center; gap: 12px; min-width: 0; }
.uye-kim .user-avatar { width: 38px; height: 38px; font-size: 14px; flex-shrink: 0; }
.uye-ad { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.uye-ad > span { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; }
.uye-ad a { transition: color 0.15s; }
.uye-ad a:hover { color: var(--accent); }
.uye-ad small { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uye-steam { display: inline-flex; color: var(--steam-blue); }
.uye-durum { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.uye-durum .mod-state { margin-left: 0; padding: 3px 10px; font-size: 12px; }
.uye-eylem { display: flex; gap: 6px; }
.uye-not { font-size: 12.5px; color: var(--dim); }
.uye-sinyal { grid-column: 1 / -1; padding-top: 10px; border-top: 1px dashed var(--line); }
.uye-sinyal summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--muted); transition: color 0.15s; }
.uye-sinyal summary::-webkit-details-marker { display: none; }
.uye-sinyal summary:hover { color: var(--accent); }
.uye-sinyal[open] summary { margin-bottom: 8px; }
.mod-admin-tag {
font-size: 11px; font-weight: 700; color: var(--accent);
border: 1px solid var(--accent-dim); border-radius: 999px; padding: 1px 7px; vertical-align: middle;
}
.mod-state { margin-left: auto; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 5px 12px; border: 1px solid transparent; }
.mod-state.suspended { color: var(--amber); background: rgba(201, 146, 74, 0.12); border-color: rgba(201, 146, 74, 0.4); }
.mod-state.banned { color: var(--coral); background: rgba(194, 91, 82, 0.12); border-color: rgba(194, 91, 82, 0.4); }
.mod-post {
display: flex; align-items: center; gap: 12px; margin-bottom: 7px; padding: 9px 12px;
background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
}
.mod-post-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mod-post-info b { font-size: 13.5px; }
.mod-post-info span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-post .btn { margin-left: auto; flex-shrink: 0; }
.maint-box {
display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-bottom: 26px; padding: 16px 18px;
background: var(--surface-grad); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--edge);
}
.maint-box.on { border-color: rgba(201, 146, 74, 0.45); background: rgba(201, 146, 74, 0.06); }
.maint-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.maint-box.on .maint-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(201, 146, 74, 0.16); }
.maint-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.maint-info b { font-size: 14.5px; }
.maint-info span { font-size: 12.5px; color: var(--dim); }
.maint-box .btn { margin-left: auto; flex-shrink: 0; }
.saglik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.saglik-madde {
display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
background: var(--surface-grad); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--edge);
transition: border-color 0.2s, transform 0.25s var(--panel-yay);
}
.saglik-madde:hover { transform: translateY(-2px); }
.saglik-isaret { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.saglik-madde.tamam .saglik-isaret { color: var(--accent); background: var(--accent-soft); }
.saglik-madde.uyari { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.saglik-madde.uyari .saglik-isaret { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.saglik-madde b { font-size: 14px; }
.saglik-madde p { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.saglik-madde:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hata-baslik { margin-top: 26px; }
.hata-liste { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.hata-satir {
padding: 12px 16px; background: var(--surface-grad); border: 1px solid var(--line); border-radius: 12px;
box-shadow: var(--edge); transition: border-color 0.2s;
}
.hata-satir:hover { border-color: var(--line-bright); }
.hata-ust { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hata-tur {
flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent);
}
.hata-tur.sunucu { color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, transparent); }
.hata-mesaj { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
.hata-meta { margin-top: 5px; font-family: var(--font-mono); font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.hata-ayrinti { margin-top: 8px; }
.hata-ayrinti summary { cursor: pointer; width: fit-content; font-size: 12.5px; color: var(--muted); transition: color 0.15s; }
.hata-ayrinti summary:hover { color: var(--text); }
.hata-ayrinti pre {
margin-top: 8px; padding: 10px 12px; max-height: 220px; overflow: auto; border-radius: 8px; background: var(--bg-2);
font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 720px) {
.uye-satir { grid-template-columns: minmax(0, 1fr); }
.uye-durum { justify-content: flex-start; }
.uye-durum:empty { display: none; }
.saglik { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
.page.yonetim { padding-top: 26px; }
.yon-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yon-bolum:nth-child(odd) { border-left: 0; }
.yon-bolum:nth-child(n + 3) { border-top: 1px solid var(--line); }
.yon-bolum:last-child:nth-child(odd) { grid-column: 1 / -1; }
.yon-bolum-sayi { font-size: 28px; }
.yon-ust { align-items: flex-start; }
.sikayet-eylem .yon-yoksay { margin-left: 0; }
}
@media (max-width: 560px) {
.maint-box .btn { margin-left: 0; width: 100%; }
.mod-post { flex-wrap: wrap; }
.mod-post .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.yon-panel.giris, .yon-yenile.donuyor svg, .yon-bolum.acil .yon-bolum-ad::after, .yon-liste[aria-busy="true"]:empty { animation: none; }
}
.select-wrap { position: relative; }
.select-wrap > select {
position: absolute; opacity: 0; pointer-events: none;
width: 100%; height: 100%; left: 0; top: 0; margin: 0;
}
.select-btn {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; text-align: left;
background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: 10px;
color: var(--text); padding: 12px 14px; font-size: 15px; font-family: inherit;
transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.select-btn:hover { border-color: var(--accent-dim); }
.select-wrap.open .select-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chev { flex-shrink: 0; color: var(--muted); transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.select-wrap.open .select-chev { transform: rotate(180deg); color: var(--accent); }
.select-btn.is-sort {
border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600;
background: var(--surface-grad); width: auto; gap: 8px;
}
.select-list {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
background: var(--surface-2); border: 1px solid var(--line-bright); border-radius: 11px;
padding: 5px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
box-shadow: var(--shadow-float);
animation: dropIn 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.select-wrap:has(> .is-sort) .select-list { left: auto; min-width: max-content; }
.select-wrap:has(> .is-sort) .select-option { white-space: nowrap; }
.select-wrap.flip .select-list { top: auto; bottom: calc(100% + 6px); }
.select-list[hidden] { display: none; }
.select-list.yuzen, .game-combo-results.yuzen { position: fixed; top: auto; right: auto; bottom: auto; z-index: 160; }
.select-option {
padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: var(--text);
cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
transition: background 0.12s, color 0.12s;
}
.select-option:hover, .select-option.active { background: var(--surface); }
.select-option.selected { color: var(--accent); font-weight: 600; }
.select-option.selected::after {
content: ''; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--text);
-webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
box-shadow: 0 0 0 1000px var(--bg-2) inset;
caret-color: var(--text);
transition: background-color 9999s ease-in-out 0s;
}
.field-check {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.45; color: var(--muted); cursor: pointer;
}
.field-check > label { position: relative; padding-left: 29px; cursor: pointer; }
.field-check > label > input[type="checkbox"] { position: absolute; left: 0; top: 1px; margin: 0; }
.field-check input[type="checkbox"],
label input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
flex-shrink: 0; width: 19px; height: 19px; margin: 1px 0 0;
border: 1.5px solid var(--line-bright); border-radius: 5px;
background: var(--bg-2); cursor: pointer; position: relative;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.field-check input[type="checkbox"]:hover,
label input[type="checkbox"]:hover { border-color: var(--accent-dim); }
.field-check input[type="checkbox"]:checked,
label input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.field-check input[type="checkbox"]:checked::after,
label input[type="checkbox"]:checked::after {
content: ''; position: absolute; inset: 0;
background: #0f1a0a;
-webkit-mask: center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
mask: center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
.field-check input[type="checkbox"]:focus-visible,
label input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#delete-account-form .field-check input[type="checkbox"]:checked { background: var(--coral); border-color: var(--coral); }
#delete-account-form .field-check input[type="checkbox"]:checked::after { background: #1f100e; }
#delete-account-form .field-check input[type="checkbox"]:hover { border-color: var(--coral); }
.avatar-pick { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.avatar-preview {
width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
background: var(--bg-2); border: 1px solid var(--line-bright);
display: grid; place-items: center; box-shadow: var(--edge);
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview span { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); text-align: center; padding: 0 8px; }
.avatar-pick-actions { min-width: 0; }
.avatar-pick-actions .hint { font-size: 12px; color: var(--dim); margin-top: 8px; }
#birth-form .hint { font-size: 12.5px; color: var(--muted); margin: -6px 0 16px; line-height: 1.5; }
.account-section-divider { height: 1px; background: var(--line); margin: 22px 0 16px; }
.account-section-heading { font-family: var(--font-display); font-size: 15px; margin-bottom: 10px; color: var(--text); }
.account-section-heading.danger { color: var(--coral); }
.danger-zone {
margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.danger-zone .account-section-heading { margin-bottom: 8px; }
.danger-zone .modal-sub { margin-bottom: 12px; }
.modal .btn { width: 100%; padding: 13px; font-size: 15px; margin-top: 6px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.modal .btn-row { margin-top: 6px; }
.modal .btn-row .btn { width: auto; margin-top: 0; flex: 1; }
.modal .btn-row .btn-danger { flex: 0 0 auto; }
@media (max-width: 480px) {
.modal .btn-row .btn-danger { flex: 1 1 100%; white-space: normal; }
}
.chat-messages {
height: 330px; overflow-y: auto; overscroll-behavior: contain;
display: flex; flex-direction: column; gap: 3px;
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 14px; margin-bottom: 12px;
}
.chat-empty { margin: auto; color: var(--dim); font-size: 13px; text-align: center; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; animation: cardIn 0.22s both; }
.chat-row.chained { margin-top: -1px; }
.chat-row + .chat-row:not(.chained) { margin-top: 9px; }
.chat-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { width: 26px; flex-shrink: 0; }
.chat-avatar .user-avatar { width: 26px; height: 26px; font-size: 10px; }
.chat-bubble {
background: var(--surface-2); border: 1px solid var(--line);
border-radius: 13px; padding: 7px 11px 5px; min-width: 0;
}
.chat-row.mine .chat-bubble { background: var(--accent-soft); border-color: rgba(76, 154, 42, 0.3); }
.chat-row:not(.chained) .chat-bubble { border-bottom-left-radius: 4px; }
.chat-row.mine:not(.chained) .chat-bubble { border-bottom-left-radius: 13px; border-bottom-right-radius: 4px; }
.chat-author {
display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
color: var(--accent-dim); letter-spacing: 0.06em; margin-bottom: 2px;
}
.chat-row.mine .chat-author { color: var(--accent); }
.chat-bubble p { font-size: 14px; line-height: 1.45; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-meta { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 2px; }
.chat-meta time { font-family: var(--font-mono); font-size: 9.5px; color: var(--dim); }
.chat-form { display: flex; gap: 8px; align-items: center; }
.chat-form input {
flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: 999px;
padding: 11px 16px; color: var(--text); font-size: 14px; outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-send {
width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent); color: #0d1a08; border: none; cursor: pointer;
box-shadow: var(--edge); transition: transform 0.15s, filter 0.15s;
}
.chat-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.chat-send:active { transform: translateY(0) scale(0.94); }
.chat-send svg { margin-left: -1px; }
@media (max-width: 480px) {
.chat-messages { height: 46vh; }
.chat-row { max-width: 94%; }
}
#toast-root { position: fixed; bottom: 84px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
background: var(--surface); border: 1px solid var(--accent-dim);
border-left: 4px solid var(--accent);
color: var(--text); font-size: 14px; font-weight: 600;
padding: 13px 20px; border-radius: 10px;
box-shadow: var(--shadow-card);
animation: toastIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
max-width: min(420px, calc(100vw - 48px)); overflow-wrap: anywhere;
}
@media (max-width: 560px) {
#toast-root { left: 12px; right: 12px; }
.toast { max-width: none; }
}
@media (min-width: 821px) { body.panel-acik #toast-root { right: calc(var(--panel-gen) + 24px); } }
@media (max-width: 820px) { body.panel-acik #toast-root { bottom: 140px; } }
.toast.error { border-color: var(--coral); border-left-color: var(--coral); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } }
.toast.out { transition: opacity 0.3s, transform 0.3s; opacity: 0; transform: translateX(40px); }
.loading { display: grid; place-items: center; padding: 100px 20px; }
.loading .radar-mini {
width: 54px; height: 54px; border-radius: 50%;
border: 2px solid var(--accent-dim); position: relative; overflow: hidden;
}
.loading .radar-mini::after {
content: ''; position: absolute; inset: 0;
background: conic-gradient(from 0deg, rgba(76, 154, 42, 0.5), transparent 80deg);
animation: sweep 1.1s linear infinite;
}
.loading p { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--dim); }
.skeleton {
background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
background-size: 300% 100%;
animation: skeletonShimmer 1.6s ease-in-out infinite;
border-radius: 6px;
}
@keyframes skeletonShimmer {
0% { background-position: 140% 0; }
100% { background-position: -40% 0; }
}
.skeleton-card {
border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface);
}
.skeleton-card .skeleton-cover { aspect-ratio: 460 / 215; border-radius: 0; }
.skeleton-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.skeleton-line { height: 11px; }
.skeleton-line.w30 { width: 30%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w55 { width: 55%; }
.skeleton-line.w70 { width: 70%; }
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; background-position: 50% 0; }
}
.footer { border-top: 1px solid var(--line); margin-top: 40px; background: rgba(11, 16, 19, 0.5); position: relative; }
.footer::before {
content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-dim) 50%, transparent);
opacity: 0.5;
}
.footer-inner {
max-width: 1280px; margin: 0 auto; padding: 40px 28px 28px;
display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 32px;
}
.footer-inner p { color: var(--dim); font-size: 13px; max-width: 480px; margin-top: 10px; }
.footer-brand p { max-width: 300px; }
.footer-note { max-width: 320px; font-size: 12px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a {
color: var(--muted); font-size: 13.5px; font-weight: 500; width: fit-content;
position: relative; transition: color 0.15s, transform 0.15s;
}
.footer-links a::before {
content: ''; position: absolute; left: -14px; top: 50%; width: 5px; height: 1px;
background: var(--accent); opacity: 0; transform: translate(-4px, -50%); transition: opacity 0.15s, transform 0.15s;
}
.footer-links a:hover { color: var(--accent); transform: translateX(4px); }
.footer-links a:hover::before { opacity: 1; transform: translate(0, -50%); }
.footer-col { display: flex; flex-direction: column; }
.footer-live {
display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); font-weight: 600;
}
.footer-live-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
background: var(--accent);
}
#footer-live-count { font-family: var(--font-mono); color: var(--accent); }
.footer-live.bos { color: var(--muted); font-weight: 500; }
.footer-live.bos .footer-live-dot { background: var(--line-bright); }
.footer-bottom {
border-top: 1px solid var(--line); padding: 16px 28px; text-align: center;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--dim);
}
@media (max-width: 860px) {
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 561px) and (max-width: 860px) {
.footer-inner > .footer-col:nth-child(2) { grid-row: span 2; }
}
@media (max-width: 560px) {
.footer-inner { grid-template-columns: 1fr; gap: 28px; }
}
.lfg-top {
display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
padding: 44px 0 26px; flex-wrap: wrap;
}
.lfg-top h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.05; }
.lfg-top h1 .accent { color: inherit; }
.lfg-top-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--dim); margin-top: 10px; overflow-wrap: anywhere; }
.lfg-top .btn { flex-shrink: 0; }
.lfg-search-form input {
width: 100%; background: var(--bg-2); border: 1px solid var(--line-bright);
border-radius: 10px; padding: 10px 14px; color: var(--text); font-size: 14px; outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.lfg-search-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lfg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lfg-grid.home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lfg-card {
background: var(--surface-grad); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--shadow-card);
animation: cardIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.25s;
position: relative;
}
.lfg-card.is-new { animation: cardIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both, newSignalPing 1.8s 0.4s ease-out both; }
@keyframes newSignalPing {
0% { border-color: var(--accent); box-shadow: var(--shadow-card), 0 0 0 0 rgba(76, 154, 42, 0.55); }
70% { border-color: var(--accent-dim); box-shadow: var(--shadow-card), 0 0 0 18px rgba(76, 154, 42, 0); }
100% { border-color: var(--line); box-shadow: var(--shadow-card); }
}
.lfg-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--accent), transparent 60%);
opacity: 0; transition: opacity 0.25s;
}
.lfg-card:hover { transform: translateY(-4px); border-color: var(--accent-dim); box-shadow: var(--shadow-lift); }
.lfg-card:hover::before { opacity: 1; }
.lfg-cover { position: relative; aspect-ratio: 460 / 160; overflow: hidden; background: var(--bg-2); }
.lfg-cover img, .lfg-cover .cover-art { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.lfg-card:hover .lfg-cover img { transform: scale(1.05); }
.lfg-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface), transparent 55%); }
.lfg-platform {
position: absolute; top: 10px; left: 10px; z-index: 2;
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
background: rgba(7, 9, 11, 0.85); border: 1px solid; border-radius: 999px;
padding: 4px 10px; backdrop-filter: blur(6px);
}
.lfg-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 11px; flex: 1; min-width: 0; }
.lfg-game { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.lfg-game a:hover { color: var(--accent); }
.lfg-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.lfg-badge {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-bright); color: var(--muted);
}
.lfg-badge.mode { color: var(--accent); border-color: rgba(76, 154, 42, 0.35); background: var(--accent-soft); }
.lfg-badge.mic-on { color: var(--coral); border-color: rgba(194, 91, 82, 0.4); }
.lfg-badge.mic-maybe { color: var(--amber); border-color: rgba(201, 146, 74, 0.4); }
.lfg-badge.mic-off { color: var(--dim); }
.lfg-badge.slots { color: var(--steam-blue); border-color: rgba(127, 168, 196, 0.35); }
.lfg-badge.lang { color: var(--violet); border-color: rgba(169, 155, 191, 0.38); }
.lfg-text { font-size: 13.5px; color: var(--muted); line-height: 1.55; flex: 1; overflow-wrap: break-word; }
.lfg-facts { display: flex; gap: 22px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 10px; }
.lfg-facts b {
display: block; font-family: var(--font-mono); font-size: 10px; color: var(--dim);
letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 2px;
}
.lfg-facts div { font-size: 13px; font-weight: 600; overflow-wrap: break-word; }
.lfg-contact {
background: var(--bg-2); border: 1px dashed var(--line-bright); border-radius: 9px;
padding: 8px 12px; font-size: 13px;
display: flex; align-items: center; gap: 10px;
}
.lfg-contact b {
color: var(--accent); cursor: pointer; font-family: var(--font-mono); font-size: 12.5px; word-break: break-all;
transition: color 0.15s; display: inline-block;
}
.lfg-contact b:hover { text-decoration: underline; }
.lfg-contact b.copied { color: var(--text); animation: copyPop 0.3s ease; }
@keyframes copyPop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.lfg-contact.gated button {
background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 0;
transition: color 0.15s;
}
.lfg-contact.gated button:hover { color: var(--accent); }
.lfg-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 13px; flex-wrap: wrap; }
.lfg-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.lfg-who b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.lfg-who time { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); }
.lfg-foot-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.lfg-join, .lfg-chat { padding: 8px 16px !important; font-size: 12.5px !important; white-space: nowrap; }
.lfg-chat { color: var(--steam-blue) !important; border-color: rgba(127, 168, 196, 0.35) !important; }
.lfg-chat:hover { border-color: var(--steam-blue) !important; box-shadow: 0 8px 24px -10px rgba(127, 168, 196, 0.4) !important; }
.lfg-joined { font-size: 12px; color: var(--muted); }
.lfg-joined .tag-mono { font-size: 10px; }
.lfg-side { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.lfg-side-item {
display: flex; align-items: center; gap: 11px;
background: var(--surface-grad); border: 1px solid var(--line); border-radius: 11px;
padding: 9px 12px; box-shadow: var(--edge);
transition: border-color 0.18s, transform 0.18s;
}
.lfg-side-item:hover { border-color: var(--accent-dim); transform: translateX(4px); }
.lfg-side-info { display: flex; flex-direction: column; line-height: 1.3; }
.lfg-side-info b { font-size: 13px; }
.lfg-side-info small { font-size: 11px; color: var(--dim); font-family: var(--font-mono); }
.lfg-side-empty { font-size: 13px; color: var(--dim); padding: 4px 0 8px; }
.lfg-side .btn { margin-top: 6px; font-size: 13px; }
.modal-wide {
max-width: 620px; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .span-2 { grid-column: span 2; }
.field select, .field textarea {
width: 100%; background: var(--bg-2); border: 1px solid var(--line-bright);
border-radius: 10px; padding: 12px 16px; color: var(--text); font-size: 15px; outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field label small { text-transform: none; letter-spacing: 0; color: var(--dim); opacity: 0.8; }
.birth-row { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 8px; }
.birth-row .select-wrap { margin: 0; }
@media (max-width: 380px) {
.birth-row { grid-template-columns: 1fr 1fr; }
.birth-row > *:nth-child(2) { grid-column: 1 / -1; order: -1; }
}
.game-combo { position: relative; }
.game-combo-input { position: relative; }
.game-combo-input svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.game-combo-input input { padding-left: 42px !important; }
.game-combo-results {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: 12px;
max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-card);
animation: rise 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.game-combo-item {
display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer;
transition: background 0.12s;
}
.game-combo-item:hover, .game-combo-item.active { background: var(--surface-2); }
.game-combo-thumb {
width: 46px; aspect-ratio: 460 / 215; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--bg);
}
.game-combo-thumb img, .game-combo-thumb .cover-art { width: 100%; height: 100%; object-fit: cover; }
.game-combo-thumb .cover-art b { font-size: 11px; }
.game-combo-thumb .cover-art small { display: none; }
.game-combo-info { min-width: 0; }
.game-combo-info b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-combo-info span { font-size: 11.5px; color: var(--dim); font-family: var(--font-mono); }
.game-combo-empty, .game-combo-loading { padding: 16px; font-size: 13px; color: var(--dim); text-align: center; }
.chip.chip-primary { color: #0f1a0a; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.chip.chip-primary:hover { background: #5cb134; color: #0f1a0a; }
.profile-avatar { width: 64px; height: 64px; font-size: 22px; }
.ban-badge {
display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 8px;
font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
color: var(--coral); background: rgba(194, 91, 82, 0.12); border: 1px solid rgba(194, 91, 82, 0.35);
border-radius: 999px; padding: 3px 10px;
}
@media (max-width: 640px) {
.statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
.stat:nth-child(odd) { border-left: none; }
}
.profile-reviews { display: flex; flex-direction: column; gap: 10px; }
.profile-review { display: block; }
.profile-review .review-head { margin-bottom: 6px; }
.profile-review .review-head b { font-size: 14px; }
.profile-review time { font-family: var(--font-mono); font-size: 11px; color: var(--dim); }
.profile-review .review-text { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
@media (max-width: 1100px) {
.card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-row:not(.wide) > :nth-child(4n+5):nth-last-child(-n+3),
.card-row:not(.wide) > :nth-child(4n+6):nth-last-child(-n+2),
.card-row:not(.wide) > :nth-child(4n+7):last-child { display: none; }
.card-row.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lfg-grid.home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-inner { grid-template-columns: 1fr; }
.radar-visual { display: none; }
.detail-inner { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 28px; }
.detail-cover { max-width: 460px; }
.detail-columns { grid-template-columns: 1fr; }
}
.bottomnav { display: none; }
@media (max-width: 820px) {
body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.bottomnav {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
background: rgba(7, 9, 11, 0.92); backdrop-filter: blur(14px);
border-top: 1px solid var(--line-bright);
padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
}
.bottomnav a, .bottomnav .bn-sohbet {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 4px; border-radius: 10px; color: var(--dim);
font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
transition: color 0.18s, transform 0.18s;
}
.bottomnav a:active, .bottomnav .bn-sohbet:active { transform: scale(0.94); }
.bottomnav .bn-sohbet { position: relative; background: none; border: none; cursor: pointer; line-height: inherit; }
body.panel-acik .bottomnav a.active { color: var(--dim); }
body.panel-acik .bottomnav a.active svg { filter: none; }
.bottomnav .bn-sohbet svg { width: 21px; height: 21px; }
.bottomnav .bn-sohbet em { top: 0; left: calc(50% + 4px); }
.bottomnav a.active, .bottomnav .bn-sohbet.active { color: var(--accent); }
.bottomnav a.active svg, .bottomnav .bn-sohbet.active svg { filter: drop-shadow(0 0 8px var(--accent-soft)); }
.menu-toggle { display: inline-flex; }
.topnav {
display: none; position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; gap: 2px; padding: 10px 16px 16px;
background: rgba(7, 9, 11, 0.97); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); z-index: 60;
}
.topnav.open { display: flex; animation: rise 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.topnav a { padding: 12px 14px; }
.search-mini input { width: 90px; }
.card-row, .card-row.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.browse-layout { grid-template-columns: minmax(0, 1fr); }
.lfg-grid, .lfg-grid.home { grid-template-columns: minmax(0, 1fr); }
.form-grid { grid-template-columns: 1fr; }
.form-grid .span-2 { grid-column: auto; }
.filters { position: static; }
.hero { padding: 56px 20px 40px; }
.page { padding: 0 20px 60px; }
.detail-inner { padding-left: 20px; padding-right: 20px; grid-template-columns: 1fr; }
.score-board { padding: 0 20px; }
.filters-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; background: var(--surface); border: 1px solid var(--line-bright);
border-radius: 12px; padding: 13px 16px; color: var(--text); font-weight: 700; font-size: 14px;
margin-bottom: 16px; transition: border-color 0.2s;
}
.filters-toggle:hover { border-color: var(--accent-dim); }
.filters-toggle .chev { transition: transform 0.2s; flex-shrink: 0; }
.filters-toggle.open .chev { transform: rotate(180deg); }
.filters-count {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 800;
background: var(--accent); color: #0f1a0a; border-radius: 999px; padding: 2px 8px; margin-left: 8px;
}
.filters { display: none; }
.filters.open { display: flex; margin-bottom: 4px; }
}
@media (max-width: 520px) {
.card-row, .card-row.wide, .browse-grid { grid-template-columns: minmax(0, 1fr); }
.hero-search { flex-direction: column; }
.statbar { gap: 22px; }
.topbar { padding: 12px 16px; gap: 12px; }
.logo-text { font-size: 14.5px; }
.search-mini { display: none; }
.section-head .tag-mono { display: none; }
}
@media (max-width: 400px) {
.topbar { gap: 8px; }
.topbar-actions { gap: 8px; }
.logo-text { display: none; }
}
.tour-overlay { position: fixed; inset: 0; z-index: 500; font-family: var(--font-body); }
.tour-overlay.tour-out { animation: fadeOut 0.18s both; pointer-events: none; }
.tour-overlay.tour-out .tour-card { animation: fadeOut 0.18s both; }
@keyframes fadeOut { to { opacity: 0; } }
.tour-click-guard { position: fixed; inset: 0; cursor: default; }
.tour-dim { position: fixed; inset: 0; background: rgba(4, 6, 7, 0.82); backdrop-filter: blur(2px); animation: fadeIn 0.3s both; }
.tour-spotlight {
position: fixed; pointer-events: none; border-radius: 10px;
top: var(--tour-top); left: var(--tour-left); width: var(--tour-w); height: var(--tour-h);
box-shadow: 0 0 0 1px rgba(76, 154, 42, 0.5), 0 0 0 9999px rgba(4, 6, 7, 0.82);
animation: tourSpotIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tourSpotIn { from { opacity: 0; } }
.tour-spotlight .tc {
position: absolute; width: 20px; height: 20px; border: 2.5px solid var(--accent);
filter: drop-shadow(0 0 6px var(--accent-soft)); animation: tourCornerPulse 1.6s ease-in-out infinite;
}
.tc.tl { top: -6px; left: -6px; border-right: none; border-bottom: none; border-radius: 7px 0 0 0; }
.tc.tr { top: -6px; right: -6px; border-left: none; border-bottom: none; border-radius: 0 7px 0 0; }
.tc.bl { bottom: -6px; left: -6px; border-right: none; border-top: none; border-radius: 0 0 0 7px; }
.tc.br { bottom: -6px; right: -6px; border-left: none; border-top: none; border-radius: 0 0 7px 0; }
@keyframes tourCornerPulse {
0%, 100% { opacity: 0.75; } 50% { opacity: 1; filter: drop-shadow(0 0 10px var(--accent)); }
}
.tour-card {
position: fixed; background: var(--surface-2); border: 1px solid var(--line-bright);
border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(76, 154, 42, 0.06);
animation: tourCardIn 0.4s 0.05s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
overflow: hidden;
}
.tour-card > * { position: relative; z-index: 1; }
@keyframes tourCardIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
.tour-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tour-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
color: var(--accent-dim); text-transform: uppercase; white-space: nowrap;
}
.tour-eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: var(--accent);
}
.tour-eyebrow b { color: var(--dim); font-weight: 700; }
.tour-blips { display: flex; gap: 5px; flex-shrink: 0; }
.tour-blip { width: 5px; height: 5px; border-radius: 50%; background: var(--line-bright); transition: background 0.25s, transform 0.25s, box-shadow 0.25s; }
.tour-blip.active { background: var(--accent);  transform: scale(1.6); animation: tourBlipPulse 1.8s ease-in-out infinite; }
.tour-blip.done { background: var(--accent-dim); }
@keyframes tourBlipPulse { 0%, 100% {  } 50% {  } }
.tour-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 9px; line-height: 1.25; }
.tour-card p { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 20px; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tour-skip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--dim);
padding: 8px 13px; border-radius: 999px; border: 1px solid transparent;
transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
}
.tour-skip svg { transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tour-skip:hover { color: var(--text); border-color: var(--line-bright); background: var(--bg-2); transform: translateX(2px); }
.tour-skip:hover svg { transform: translateX(3px); }
.tour-skip:active { transform: translateX(2px) scale(0.95); }
.tour-actions .btn { padding: 10px 20px; font-size: 13.5px; }
.verify-links a.is-locked {
color: var(--dim); pointer-events: none; text-decoration: none; cursor: default;
font-variant-numeric: tabular-nums;
}
.top-icon {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 11px; color: var(--muted);
border: 1px solid var(--line-bright); background: var(--surface);
transition: color 0.18s, border-color 0.18s, transform 0.12s;
}
.top-icon:hover { color: var(--text); border-color: var(--accent); }
.top-icon:active { transform: scale(0.94); }
.top-icon em {
position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
background: var(--coral-zemin); color: #fff; border-radius: 999px;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; font-style: normal;
border: 2px solid var(--bg);
}
.modal.notif-modal { max-width: 460px; }
.notif-head { display: flex; align-items: baseline; gap: 12px; }
.notif-head .modal-sub { margin: 0; flex: 1; }
.link-btn {
background: none; border: none; color: var(--accent); cursor: pointer;
font-size: 12.5px; font-weight: 600; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.notif-push-btn { width: 100%; margin: 12px 0 4px; }
.notif-list { margin-top: 14px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.notif-item {
display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px;
transition: background 0.15s;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.notif-item .user-avatar { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
.notif-dot {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
background: var(--surface-2); border: 1px solid var(--line-bright);
}
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-body b { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text); }
.notif-body time { font-family: var(--font-mono); font-size: 10px; color: var(--dim); }
.page.narrow { max-width: 680px; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.page-head h1 { flex: 1; font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.dm-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.dm-row {
display: flex; align-items: center; gap: 12px; padding: 12px;
border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
transition: border-color 0.18s, transform 0.12s;
}
.dm-row:hover { border-color: var(--accent); transform: translateX(2px); }
.dm-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-row-body b { font-size: 14.5px; }
.dm-row-body small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.dm-row-meta time { font-family: var(--font-mono); font-size: 10px; color: var(--dim); }
.dm-badge {
min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
background: var(--accent); color: #0d1a08; border-radius: 999px;
font-family: var(--font-mono); font-size: 10px; font-weight: 700; font-style: normal;
}
.dm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dm-back {
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; border: 1px solid var(--line-bright); color: var(--muted); font-size: 17px;
}
.dm-back:hover { color: var(--text); border-color: var(--accent); }
.dm-peer { display: flex; align-items: center; gap: 10px; }
.dm-peer b { font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.dm-gate {
display: flex; flex-direction: column; align-items: center; gap: 10px;
text-align: center; color: var(--dim); font-size: 13px; padding: 14px;
border: 1px dashed var(--line-bright); border-radius: var(--radius-sm);
}
.dm-gate p { margin: 0; }
.friend-row {
display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-top: 6px;
border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
}
.friend-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.friend-who b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn.btn-sm { padding: 7px 12px; font-size: 12.5px; width: auto; margin: 0; }
.friend-empty { color: var(--dim); font-size: 13px; padding: 14px 2px; }
.profile-social { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
@media (max-width: 560px) {
.friend-row { flex-wrap: wrap; }
.friend-actions { width: 100%; justify-content: flex-end; }
.page-head h1 { font-size: 22px; }
.notif-list { max-height: 60vh; }
}
:root {
--ust: 72px;
--alt: 0px;
--panel-gen: 340px;
--panel-yay: cubic-bezier(0.16, 1, 0.3, 1);
--panel-sure: 0.55s;
}
.panel-tab {
position: fixed; right: 0; top: 50%; z-index: 60;
transform: translateY(-50%);
display: flex; flex-direction: column; align-items: center; gap: 11px;
width: 38px; padding: 15px 0 17px;
border: 1px solid var(--line-bright); border-right: none;
border-radius: 12px 0 0 12px;
background: var(--surface-grad); color: var(--muted); cursor: pointer;
box-shadow: var(--shadow-card);
transition:
right var(--panel-sure) var(--panel-yay),
width 0.3s var(--panel-yay),
color 0.2s, border-color 0.2s, box-shadow 0.3s;
}
.panel-tab::before {
content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px;
background: var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
opacity: 0; transform: scaleY(0.2);
transition: opacity 0.25s, transform 0.4s var(--panel-yay);
}
.panel-tab:hover { color: var(--text); width: 44px; box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-bright)); }
.panel-tab:hover::before, .panel-tab.open::before { opacity: 1; transform: none; }
.panel-tab:active { width: 40px; }
.panel-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel-tab.open { right: var(--panel-gen); color: var(--accent); }
.panel-tab-ikon svg { width: 17px; height: 17px; display: block; transition: transform 0.45s var(--panel-yay); }
.panel-tab:hover .panel-tab-ikon svg { transform: rotate(-12deg) scale(1.12); }
.panel-tab.open .panel-tab-ikon svg { transform: scaleX(-1); }
.panel-tab-yazi {
writing-mode: vertical-rl; transform: rotate(180deg);
font-family: var(--font-body); font-size: 12px; font-weight: 600;
letter-spacing: 0.02em; line-height: 1;
}
.panel-tab em, .bn-sohbet em {
position: absolute; min-width: 18px; height: 18px; padding: 0 5px;
display: flex; align-items: center; justify-content: center;
background: var(--coral-zemin); color: #fff; border-radius: 999px;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; font-style: normal;
border: 2px solid var(--bg);
animation: rozet-nabiz 2.4s ease-out infinite;
}
.panel-tab em { top: -8px; left: -8px; }
@keyframes rozet-nabiz {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 60%, transparent); }
70%, 100% { box-shadow: 0 0 0 9px transparent; }
}
.panel {
position: fixed; top: var(--ust); right: 0; bottom: var(--alt); z-index: 59;
width: var(--panel-gen);
display: flex; flex-direction: column; overflow: hidden;
background:
radial-gradient(130% 55% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
var(--bg-2);
border-left: 1px solid var(--line-bright);
box-shadow: var(--shadow-float);
transform: translateX(calc(100% + 48px));
visibility: hidden;
transition: transform var(--panel-sure) var(--panel-yay), visibility 0s linear var(--panel-sure);
}
.panel.open {
transform: none; visibility: visible;
transition: transform var(--panel-sure) var(--panel-yay), visibility 0s;
}
.panel-tarama {
position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; z-index: 3;
overflow: hidden; pointer-events: none;
}
.panel-tarama::after {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%;
background: linear-gradient(180deg, transparent, var(--accent) 55%, transparent);
box-shadow: 0 0 12px var(--accent);
transform: translateY(-110%);
}
.panel.giris .panel-tarama::after { animation: panel-tara 1.1s 0.12s var(--panel-yay) both; }
@keyframes panel-tara { to { transform: translateY(270%); } }
.panel-head {
position: relative; isolation: isolate;
display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 60px;
padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line);
}
.panel-head::after {
content: ''; position: absolute; z-index: -1; right: -56px; top: -84px;
width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
background: repeating-radial-gradient(circle, transparent 0 17px, color-mix(in srgb, var(--accent) 16%, transparent) 17px 18px);
-webkit-mask: radial-gradient(circle, black 25%, transparent 70%);
mask: radial-gradient(circle, black 25%, transparent 70%);
opacity: 0.8;
}
.panel.giris .panel-head::after { animation: halka-ac 1.2s var(--panel-yay) both; }
@keyframes halka-ac { from { transform: scale(0.4); opacity: 0; } }
.panel-head b {
flex: 1; min-width: 0; font-family: var(--font-display); font-size: 16px; font-weight: 800;
letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel.giris .panel-head b { animation: panel-satir 0.5s 0.1s var(--panel-yay) both; }
.panel-kisi {
display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
color: inherit; text-decoration: none; border-radius: 8px; padding: 3px 6px 3px 3px;
transition: background 0.18s;
}
.panel-kisi:hover { background: var(--surface); }
.panel-kisi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-kisi .user-avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
.panel-back, .panel-close {
width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
background: none; border: 1px solid transparent; color: var(--dim); cursor: pointer; font-size: 15px;
transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.35s var(--panel-yay);
}
.panel-back[hidden] { display: none; }
.panel-back:hover, .panel-close:hover { color: var(--text); border-color: var(--line-bright); background: var(--surface); }
.panel-back:hover { transform: translateX(-3px); }
.panel-close:hover { transform: rotate(90deg); }
.panel-back:focus-visible, .panel-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.panel-body {
flex: 1; overflow-y: auto; overscroll-behavior: contain;
display: flex; flex-direction: column; min-height: 0;
}
.panel-body.yon-ileri { animation: panel-ileri 0.42s var(--panel-yay) both; }
.panel-body.yon-geri { animation: panel-geri 0.42s var(--panel-yay) both; }
@keyframes panel-ileri { from { opacity: 0; transform: translateX(32px); } }
@keyframes panel-geri { from { opacity: 0; transform: translateX(-32px); } }
.panel-body.kademeli .panel-row,
.panel-body.kademeli .panel-section {
animation: panel-satir 0.5s var(--panel-yay) both;
animation-delay: calc(var(--i, 0) * 45ms + 160ms);
}
@keyframes panel-satir { from { opacity: 0; transform: translateX(22px); } }
.panel-iskelet { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; }
.panel-iskelet i {
display: block; height: 40px; border-radius: 10px;
background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 45%, var(--surface) 90%);
background-size: 220% 100%;
animation: iskelet-akis 1.3s ease-in-out infinite;
}
.panel-iskelet i:nth-child(2) { width: 86%; }
.panel-iskelet i:nth-child(3) { width: 72%; }
.panel-iskelet i:nth-child(4) { width: 80%; }
@keyframes iskelet-akis { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.panel-loading, .panel-empty {
padding: 32px 22px; text-align: center; color: var(--dim); font-size: 13px; line-height: 1.6;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.panel-empty-radar {
width: 64px; height: 64px; border-radius: 50%; position: relative; overflow: hidden;
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
background: repeating-radial-gradient(circle, transparent 0 9px, color-mix(in srgb, var(--accent) 18%, transparent) 9px 10px);
}
.panel-empty-radar::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent 22%);
animation: radar-don 2.6s linear infinite;
}
@keyframes radar-don { to { transform: rotate(360deg); } }
.panel-section {
display: flex; align-items: center; gap: 8px;
padding: 16px 18px 7px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
}
.panel-section::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.panel-section span {
order: 2; color: var(--accent-dim); letter-spacing: 0.04em;
padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px;
}
.panel-row {
position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
padding: 9px 16px 9px 18px; background: none; border: none; color: inherit; text-align: left;
font: inherit;
}
.panel-row.tiklanir::before {
content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0;
background: var(--accent); transform: translateY(-50%);
transition: height 0.3s var(--panel-yay);
}
.panel-row.tiklanir { cursor: pointer; transition: background 0.18s; }
.panel-row.tiklanir:hover, .panel-row.tiklanir:focus-visible { background: var(--surface); outline: none; }
.panel-row.tiklanir:hover::before, .panel-row.tiklanir:focus-visible::before { height: 60%; }
.panel-row.tiklanir:active { background: var(--surface-2); }
.panel-row .user-avatar {
width: 34px; height: 34px; font-size: 12px; flex-shrink: 0;
transition: box-shadow 0.25s, transform 0.35s var(--panel-yay);
}
.panel-row.tiklanir:hover .user-avatar { transform: scale(1.06); box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3.5px var(--accent); }
.panel-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-ok {
color: var(--dim); font-size: 18px; line-height: 1; opacity: 0; transform: translateX(-6px);
transition: opacity 0.2s, transform 0.3s var(--panel-yay), color 0.2s;
}
.panel-row.tiklanir:hover .panel-ok { opacity: 1; transform: none; color: var(--accent); }
.panel-chat {
flex: 1; overflow-y: auto; overscroll-behavior: contain;
padding: 14px 12px; display: flex; flex-direction: column; gap: 3px;
}
.panel-chat .chat-row { max-width: 94%; }
.panel-chat .chat-bubble p { font-size: 13px; }
.panel-chat .chat-row.yeni { animation: balon-gel 0.38s var(--panel-yay) both; }
.panel-chat .chat-row.mine.yeni { transform-origin: bottom right; }
@keyframes balon-gel { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.panel-form {
display: flex; gap: 8px; padding: 12px; flex-shrink: 0;
border-top: 1px solid var(--line);
background: color-mix(in srgb, var(--bg) 55%, var(--bg-2));
}
.panel-form input {
flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line-bright);
border-radius: 999px; padding: 10px 15px; color: var(--text); font: inherit; font-size: 13.5px; outline: none;
transition: border-color 0.2s, box-shadow 0.25s;
}
.panel-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.panel-form .chat-send { width: 40px; height: 40px; flex-shrink: 0; transition: transform 0.3s var(--panel-yay), filter 0.2s; }
.panel-form .chat-send:hover { transform: translateX(2px) rotate(-8deg); }
.panel-form .chat-send:active { transform: scale(0.9); }
.panel .dm-gate { margin: 14px; }
.panel-ekip-kapak {
width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; overflow: hidden;
border: 1px solid var(--line-bright); background: var(--bg-2);
transition: transform 0.35s var(--panel-yay), box-shadow 0.25s;
}
.panel-ekip-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.panel-ekip-kapak .cover-art { width: 100%; height: 100%; display: grid; place-items: center; }
.panel-ekip-kapak .cover-art b { font-size: 11px; }
.panel-ekip-kapak .cover-art small { display: none; }
.panel-row.tiklanir:hover .panel-ekip-kapak { transform: scale(1.06) rotate(-2deg); box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3.5px var(--accent); }
.panel-ekip-sayi {
min-width: 22px; height: 22px; padding: 0 7px 0 5px; border-radius: 999px; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
color: var(--accent-dim); border: 1px solid var(--line); transition: color 0.2s, border-color 0.2s;
}
.panel-ekip-sayi svg { width: 12px; height: 12px; }
.panel-row.tiklanir:hover .panel-ekip-sayi { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.panel-ekip-baslik { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-width: 0; }
.panel-ekip-baslik .panel-ekip-kapak { width: 30px; height: 30px; border-radius: 8px; }
.panel-ekip-baslik .panel-kisi-ad > span {
white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.18;
}
@property --serit-sol { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --serit-sag { syntax: '<length>'; inherits: true; initial-value: 0px; }
.ekip-serit {
position: relative; flex-shrink: 0; border-bottom: 1px solid var(--line);
--serit-sol: 0px; --serit-sag: 0px; transition: --serit-sol 0.25s, --serit-sag 0.25s;
}
.ekip-serit.sol-var { --serit-sol: 40px; }
.ekip-serit.sag-var { --serit-sag: 40px; }
.panel-ekip-uyeler {
display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 44px;
-webkit-mask-image: linear-gradient(90deg, transparent, var(--maske) var(--serit-sol), var(--maske) calc(100% - var(--serit-sag)), transparent);
mask-image: linear-gradient(90deg, transparent, var(--maske) var(--serit-sol), var(--maske) calc(100% - var(--serit-sag)), transparent);
}
.panel-ekip-uyeler::-webkit-scrollbar { display: none; }
.serit-ok {
position: absolute; top: 50%; z-index: 1; width: 28px; height: 28px; padding: 0;
display: grid; place-items: center; border-radius: 50%; cursor: pointer;
border: 1px solid var(--line-bright); background: var(--bg-2); color: var(--muted);
opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.8);
transition: opacity 0.2s, transform 0.25s var(--panel-yay), color 0.15s, border-color 0.15s, background 0.15s;
}
.serit-ok.sol { left: 6px; }
.serit-ok.sag { right: 6px; }
.ekip-serit.sol-var .serit-ok.sol, .ekip-serit.sag-var .serit-ok.sag { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.serit-ok:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--surface); }
.serit-ok.sol:hover { transform: translateY(-50%) translateX(-2px); }
.serit-ok.sag:hover { transform: translateY(-50%) translateX(2px); }
.serit-ok:active { transform: translateY(-50%) scale(0.88); }
@media (prefers-reduced-motion: reduce) { .ekip-serit, .serit-ok, .ekip-foto { transition: none; } }
.ekip-uye-kap {
display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 999px;
border: 1px solid var(--line); background: var(--bg-2); transition: border-color 0.18s, background 0.18s;
}
.ekip-uye-kap:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); }
.ekip-uye-kap.sahip { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ekip-uye {
display: inline-flex; align-items: center; gap: 6px; max-width: 150px; padding: 3px 10px 3px 3px;
color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600; transition: color 0.18s;
}
.ekip-uye span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ekip-uye:hover, .ekip-uye-kap.sahip .ekip-uye { color: var(--text); }
.ekip-uye .user-avatar { width: 22px; height: 22px; font-size: 9px; flex-shrink: 0; }
.ekip-cikar {
display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 3px; padding: 0;
border: none; border-radius: 50%; background: transparent; color: var(--dim);
font-size: 10px; line-height: 1; cursor: pointer; transition: color 0.15s, background 0.15s;
}
.ekip-cikar:hover, .ekip-cikar:focus-visible { color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, transparent); outline: none; }
.panel-ekip-kural {
display: flex; align-items: flex-start; gap: 7px; margin: 0 auto 12px; padding: 8px 12px; flex-shrink: 0;
max-width: 100%; color: var(--dim); font-size: 11.5px; line-height: 1.45;
border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--amber) 5%, transparent);
}
.panel-ekip-kural svg { flex-shrink: 0; margin-top: 1px; color: var(--amber); opacity: 0.8; }
.panel-ekip-kural a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; }
.panel-ekip-kural a:hover { color: var(--accent); }
.dm-ekip-baglam {
display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 14px; flex-shrink: 0;
font-size: 12px; line-height: 1.45; color: var(--muted); background: var(--accent-soft);
border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.dm-ekip-baglam svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.dm-sayfa .dm-ekip-baglam { border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 10px; margin-bottom: 10px; }
body.panel-acik .to-top { right: calc(var(--panel-gen) + 22px); }
.to-top { transition: opacity 0.25s, transform 0.25s, border-color 0.2s, box-shadow 0.2s, right var(--panel-sure) var(--panel-yay); }
@media (max-width: 820px) {
.panel-tab { display: none; }
.panel { width: min(100%, 420px); }
body.panel-acik .to-top { opacity: 0; pointer-events: none; }
}
@media (max-width: 560px) {
.panel { width: 100%; border-left: none; }
}
@media (prefers-reduced-motion: reduce) {
.panel, .panel-tab, .to-top { transition-duration: 0.01ms !important; }
.panel *, .panel::after, .panel-tab em, .bn-sohbet em { animation: none !important; }
}
.avatar-durum { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-durum > i {
position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
background: var(--line-bright); border: 2px solid var(--bg-2);
transition: background 0.3s, transform 0.4s var(--panel-yay);
}
.avatar-durum.acik > i { background: var(--accent); transform: scale(1.08); }
.avatar-durum.acik > i::after {
content: ''; position: absolute; inset: -2px; border-radius: 50%;
border: 2px solid var(--accent); opacity: 0;
animation: durum-ping 2.8s ease-out infinite;
}
@keyframes durum-ping {
0% { opacity: 0.7; transform: scale(0.8); }
70%, 100% { opacity: 0; transform: scale(2.2); }
}
.friend-row .avatar-durum > i { border-color: var(--bg); }
.panel-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.panel-alt {
font-size: 11.5px; color: var(--dim); line-height: 1.35;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
transition: color 0.25s;
}
.panel-alt:empty { display: none; }
.panel-alt.cevrimici { color: var(--accent-dim); }
.panel-alt.yaziyor { color: var(--accent); font-style: italic; animation: yaziyor-soluk 1.4s ease-in-out infinite; }
@keyframes yaziyor-soluk { 50% { opacity: 0.55; } }
.panel-kisi-ad, .dm-peer-ad, .friend-ad { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.panel-kisi-ad > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-kisi-ad small, .dm-peer-ad small, .friend-ad small { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.friend-ad b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yeni-mesaj-kap { position: relative; height: 0; flex: 0 0 0; margin: 0; z-index: 3; }
.yeni-mesaj {
position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
background: var(--surface-2); color: var(--accent); font-size: 12.5px; font-weight: 700; white-space: nowrap;
box-shadow: var(--shadow-float); cursor: pointer; animation: balon-gel 0.3s var(--panel-yay, ease-out) both;
transition: background 0.18s, transform 0.18s;
}
.yeni-mesaj:hover, .yeni-mesaj:focus-visible { background: var(--accent-soft); transform: translateX(-50%) translateY(-2px); outline: none; }
.dm-eski-kap { display: flex; justify-content: center; margin: 2px 0 10px; flex: none; }
.dm-eski {
padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
}
.dm-eski:disabled { opacity: 0.55; cursor: progress; }
@media (hover: hover) {
.dm-eski:not(:disabled):hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-1px); }
}
.dm-eski:focus-visible { color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.yaziyor-satir {
align-self: flex-start; display: flex; align-items: flex-end; gap: 9px; margin: 10px 0 2px;
animation: balon-gel 0.35s var(--panel-yay, ease-out) both;
}
.yaziyor-satir + .yaziyor-satir { margin-top: 6px; }
.yaziyor-balon {
display: inline-flex; gap: 4px; align-items: center;
padding: 11px 14px; border-radius: 16px 16px 16px 5px;
background: var(--surface); border: 1px solid var(--line);
}
.yaziyor-balon i {
width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
animation: yaziyor-zipla 1.2s ease-in-out infinite;
}
.yaziyor-balon i:nth-child(2) { animation-delay: 0.15s; }
.yaziyor-balon i:nth-child(3) { animation-delay: 0.3s; }
@keyframes yaziyor-zipla {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-4px); opacity: 1; background: var(--accent); }
}
.chat-meta { display: inline-flex; align-items: center; gap: 4px; }
.panel-oneriler { position: relative; }
.panel-oneriler::before {
content: ''; position: absolute; inset: 6px 10px 4px; border-radius: 12px; pointer-events: none;
border: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent);
background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.panel-oneri { gap: 9px; padding-right: 12px; }
.panel-oneri-kim { display: inline-flex; border-radius: 50%; }
.panel-oneri-kim .user-avatar { width: 34px; height: 34px; font-size: 12px; }
.panel-oneri .btn-sm { padding: 6px 10px; font-size: 12px; gap: 5px; flex-shrink: 0; }
.panel-oneri .btn-sm svg { width: 12px; height: 12px; }
.panel-oneri-gizle {
width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; cursor: pointer;
background: none; border: 1px solid transparent; color: var(--dim); font-size: 12px;
transition: color 0.18s, border-color 0.18s, transform 0.3s var(--panel-yay);
}
.panel-oneri-gizle:hover { color: var(--coral); border-color: var(--line-bright); transform: rotate(90deg); }
.btn.gonderildi, .btn.gonderildi:disabled {
background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
box-shadow: none; opacity: 1;
}
[data-oneri].cikiyor { animation: oneri-cik 0.32s ease-in forwards; }
@keyframes oneri-cik { to { opacity: 0; transform: translateX(24px); } }
.panel-oneriler .side-title span, .panel-oneriler .panel-section span { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
.avatar-durum.acik > i::after, .yaziyor-balon i { animation: none !important; }
}
.auth-or {
display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em;
font-family: var(--font-mono);
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn.btn-steam {
display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
background: #1b2838; color: #c7d5e0; border: 1px solid #2a475e;
}
.btn.btn-steam:hover { background: #22364a; border-color: var(--steam-blue); color: #fff; }
.btn.btn-steam svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s; }
.btn.btn-steam:hover svg { transform: rotate(-12deg) scale(1.08); }
.account-steam-row svg, #steam-link-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
#steam-link-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.auth-steam-note {
margin: 9px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); text-align: center;
}
.account-steam-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.account-steam-row > div { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13.5px; }
.account-steam-row svg { flex-shrink: 0; color: var(--steam-blue); }
.account-steam-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lfg-more-wrap { display: flex; justify-content: center; margin-top: 22px; }
.lfg-more-wrap:empty { display: none; }
.lfg-more { min-width: 220px; }
.page.profil { max-width: 1160px; padding-top: 32px; }
.profil-kart {
position: relative; z-index: 2; isolation: isolate;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface-grad); box-shadow: var(--shadow-card);
padding: 0 28px;
animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.profil-kapak {
position: relative; z-index: 0; height: 132px; margin: 0 -28px; overflow: hidden; isolation: isolate;
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
-webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 100%);
mask-image: linear-gradient(180deg, #000 38%, transparent 100%);
background:
repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 16px),
radial-gradient(120% 170% at 10% 0%, hsl(var(--ton) 40% 27%), transparent 62%),
linear-gradient(135deg, hsl(var(--ton) 34% 17%), hsl(calc(var(--ton) + 20) 38% 10%));
}
.profil-kapak img {
position: absolute; z-index: -1; inset: -40%; width: 180%; height: 180%; max-width: none; object-fit: cover;
filter: blur(34px) saturate(1.35) brightness(0.62);
}
.profil-ust { position: relative; display: flex; align-items: flex-end; gap: 20px; margin-top: -50px; padding-bottom: 24px; }
.profil .profile-avatar {
width: 108px; height: 108px; font-size: 34px;
box-shadow: 0 0 0 5px var(--surface-2), 0 14px 32px -12px rgba(0, 0, 0, 0.85);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.profil .profile-avatar-wrap:hover .profile-avatar {
transform: scale(1.03);
box-shadow: 0 0 0 5px var(--surface-2), 0 0 0 7px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 35%, transparent);
}
.profil .avatar-edit-btn { bottom: 4px; right: 4px; width: 30px; height: 30px; box-shadow: 0 0 0 3px var(--surface-2); }
.profil-kim { flex: 1; min-width: 0; padding-bottom: 2px; }
.profil-kim h1 {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 38px); font-weight: 800;
letter-spacing: -0.015em; line-height: 1.08; overflow-wrap: anywhere;
}
.profil-kim .ban-badge { margin-left: 0; }
.profil-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin-top: 9px; font-size: 13.5px; color: var(--muted);
}
.profil-tarih { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.profil-tarih svg { width: 14px; height: 14px; color: var(--dim); }
.profil-cip {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
padding: 3px 10px 3px 8px; border-radius: 999px;
border: 1px solid var(--line-bright); background: color-mix(in srgb, var(--bg) 45%, transparent);
font-size: 12.5px; color: var(--text); white-space: nowrap;
transition: border-color 0.2s, background 0.2s;
}
.profil-cip span { overflow: hidden; text-overflow: ellipsis; }
.profil-cip svg { width: 13px; height: 13px; flex-shrink: 0; }
.profil-cip.steam { color: var(--steam-blue); border-color: color-mix(in srgb, var(--steam-blue) 38%, transparent); }
.profil-cip.steam:hover { background: color-mix(in srgb, var(--steam-blue) 10%, transparent); }
.profil-cip i { font-style: normal; font-weight: 800; color: var(--accent); }
.profil-eylem { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-self: flex-end; padding-bottom: 4px; }
.profil-eylem .profile-social { margin: 0; }
.profil-eylem .btn svg { flex-shrink: 0; }
.ps-ikon {
display: grid; place-items: center; flex-shrink: 0;
width: 40px; height: 40px; border-radius: 12px;
color: var(--accent-dim); background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
transition: color 0.2s, background 0.2s, transform 0.4s var(--panel-yay);
}
.ps-ikon svg { width: 19px; height: 19px; }
.profil-oyunlar {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin: 0 -28px; padding: 12px 28px 14px; border-top: 1px solid var(--line);
}
.profil-oyunlar > span {
margin-right: 6px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.profil-oyunlar em {
display: inline-flex; align-items: baseline; gap: 6px; font-style: normal;
padding: 3px 10px; border-radius: 999px; font-size: 12px;
background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
}
.profil-oyunlar em b { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; color: var(--steam-blue); font-variant-numeric: tabular-nums; }
.profil-sinyaller { margin-top: 34px; }
.profil-bolum { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.profil-bolum-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; }
.profil-bolum .profil-bolum-bas h2.side-title {
flex: 1 1 auto; display: flex; align-items: center; gap: 12px; margin: 0; white-space: nowrap;
font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
}
.profil-bolum-bas .link-btn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--accent); transition: color 0.18s, transform 0.25s var(--panel-yay); }
.profil-bolum-bas .link-btn:hover { color: var(--logo-acik); transform: translateX(2px); }
.lfg-grid.profil-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .lfg-grid.profil-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .lfg-grid.profil-kartlar { grid-template-columns: minmax(0, 1fr); } }
.profil-bos-kutu {
display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px;
border: 1px dashed var(--line-bright); border-radius: var(--radius);
background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.profil-bos-kutu p { flex: 1; min-width: 140px; margin: 0; font-size: 14px; color: var(--muted); }
.profil-bos-kutu .ps-ikon { width: 36px; height: 36px; border-radius: 10px; color: var(--dim); background: var(--surface-2); border-color: var(--line); }
.profil-bos-kutu .ps-ikon svg { width: 17px; height: 17px; }
.profil-bos-kutu .btn { margin: 0; }
.profil-favoriler { margin-top: 38px; animation-delay: 0.12s; }
.profil-raf { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 14px; }
.fav-kart { display: flex; flex-direction: column; gap: 2px; min-width: 0; outline: none; animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.fav-kapak {
position: relative; display: block; aspect-ratio: 460 / 215; overflow: hidden; border-radius: 10px;
background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--edge);
transition: transform 0.3s var(--panel-yay), box-shadow 0.3s, border-color 0.2s;
}
.fav-kapak img, .fav-kapak .cover-art { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--panel-yay); }
.fav-kapak .cover-art b { font-size: 26px; }
.fav-kart:hover .fav-kapak { transform: translateY(-3px); border-color: var(--line-bright); box-shadow: var(--shadow-lift); }
.fav-kart:hover .fav-kapak img { transform: scale(1.05); }
.fav-kart:focus-visible .fav-kapak { outline: 2px solid var(--accent); outline-offset: 2px; }
.fav-kapak .fav-btn { top: 6px; right: 6px; width: 28px; height: 28px; opacity: 0; transform: scale(0.9); transition: opacity 0.2s, transform 0.2s, color 0.15s, border-color 0.15s, background 0.15s; }
.fav-kart:hover .fav-btn, .fav-kart:focus-within .fav-btn { opacity: 1; transform: none; }
@media (hover: none) { .fav-kapak .fav-btn { opacity: 1; transform: none; } }
.fav-ad { margin-top: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.fav-kart:hover .fav-ad { color: var(--accent); }
.fav-kart small { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profil-bolum h2.side-title { margin: 0 0 12px; }
@media (max-width: 760px) {
.page.profil { padding-top: 18px; }
.profil-kart { padding: 0 18px; }
.profil-kapak { height: 100px; margin: 0 -18px; }
.profil-ust { flex-wrap: wrap; gap: 12px 16px; margin-top: -40px; padding-bottom: 18px; }
.profil .profile-avatar { width: 84px; height: 84px; font-size: 27px; }
.profil .avatar-edit-btn { width: 28px; height: 28px; bottom: 2px; right: 2px; }
.profil-eylem { order: 3; width: 100%; justify-content: flex-start; padding-bottom: 0; }
.profil-oyunlar { margin: 0 -18px; padding: 12px 18px 14px; }
.profil-raf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.profil-oyunlar > span { width: 100%; margin: 0 0 2px; }
.profil-sinyaller { margin-top: 26px; }
}
@media (max-width: 520px) {
.profil-ust { flex-direction: column; align-items: flex-start; gap: 10px; }
.profil-kim { width: 100%; }
.profil-kim h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.profil-kart, .profil-bolum, .fav-kart { animation: none; }
.ps-ikon { transition: none; }
}
.sss { max-width: 820px; padding-bottom: 64px; }
.sss-liste { display: flex; flex-direction: column; gap: 10px; animation: rise 0.5s 0.05s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sss-madde {
border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
transition: border-color 0.2s, background 0.2s;
}
.sss-madde:hover { border-color: var(--line-bright); }
.sss-madde[open] { background: var(--surface-2); border-color: var(--line-bright); }
.sss-madde summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 15px 18px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text);
border-radius: var(--radius-sm);
}
.sss-madde summary::-webkit-details-marker { display: none; }
.sss-madde summary::after {
content: ''; flex: none; width: 9px; height: 9px; margin-right: 3px;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg) translateY(-3px); transition: transform 0.2s, border-color 0.2s;
}
.sss-madde summary:hover::after { border-color: var(--accent); }
.sss-madde[open] summary::after { transform: rotate(-135deg) translateY(-3px); border-color: var(--accent); }
.sss-madde p { padding: 0 18px 16px; font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }
.sss-alt { margin-top: 22px; font-size: 14.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sss-liste { animation: none; } .sss-madde summary::after { transition: none; } }
.iletisim { max-width: 980px; padding-bottom: 64px; }
.iletisim-bas { padding: 44px 0 22px; animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.iletisim-bas h1 {
font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); font-weight: 800;
letter-spacing: -0.02em; line-height: 1.05;
}
.iletisim-bas p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.iletisim-kunye {
position: relative; overflow: hidden; isolation: isolate;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface-grad); box-shadow: var(--shadow-card);
padding: 22px 26px 8px;
animation: rise 0.5s 0.05s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.iletisim-kunye::after {
content: ''; position: absolute; z-index: -1; right: -120px; bottom: -150px;
width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
background: repeating-radial-gradient(circle, transparent 0 27px, color-mix(in srgb, var(--accent) 9%, transparent) 27px 28px);
-webkit-mask: radial-gradient(circle, black 15%, transparent 68%);
mask: radial-gradient(circle, black 15%, transparent 68%);
}
.iletisim-kunye .side-title { margin: 0 0 6px; }
.kunye { display: flex; flex-direction: column; margin: 6px 0 12px; }
.kunye > div {
display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 16px;
padding: 11px 0; border-top: 1px solid var(--line);
transition: background 0.2s, padding 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.kunye > div:first-child { border-top: 0; }
.kunye > div:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); padding-left: 8px; }
.kunye dt {
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--dim); padding-top: 3px;
}
.kunye dd { margin: 0; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
.kunye a, .metin-baglanti {
color: var(--accent); font-weight: 600; text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
transition: background-size 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s;
}
.kunye a:hover, .metin-baglanti:hover { background-size: 100% 1px; color: var(--text); }
.metin-baglanti { display: inline-block; margin-top: 10px; font-size: 14px; }
.iletisim-izgara {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px;
}
.iletisim-bolum {
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 18px 20px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
transition: border-color 0.2s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.iletisim-bolum:nth-child(2) { animation-delay: 0.08s; }
.iletisim-bolum:nth-child(3) { animation-delay: 0.14s; }
.iletisim-bolum:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.iletisim-bolum h2 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
.iletisim-bolum p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.iletisim-bolum .btn { margin-top: auto; }
.iletisim-bolum .metin-baglanti { margin-top: auto; }
.yasal-baslik { font-family: var(--font-display); color: var(--text); font-size: 17px; margin-bottom: 8px; }
.veri-sorumlusu > .kunye { margin-top: 10px; max-width: 560px; }
@media (max-width: 860px) {
.iletisim-izgara { grid-template-columns: minmax(0, 1fr); }
.iletisim-kunye { padding: 18px 18px 6px; }
.kunye > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.iletisim-bas, .iletisim-kunye, .iletisim-bolum { animation: none; }
.iletisim-bolum:hover { transform: none; }
}
#alarm-alani:empty { display: none; }
#alarm-alani { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.alarm-serit {
display: flex; align-items: center; gap: 12px;
padding: 11px 12px 11px 14px; border-radius: var(--radius-sm);
border: 1px dashed var(--line-bright); background: color-mix(in srgb, var(--surface) 75%, transparent);
transition: border-color 0.25s, background 0.25s;
}
.alarm-serit:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-bright)); }
.alarm-serit.kurulu {
border-style: solid; border-color: color-mix(in srgb, var(--accent) 40%, transparent);
background: var(--accent-soft);
}
.alarm-zil { display: grid; place-items: center; flex-shrink: 0; color: var(--muted); transition: color 0.2s; }
.alarm-zil svg { width: 18px; height: 18px; }
.alarm-serit.kurulu .alarm-zil { color: var(--accent); animation: zil-salla 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; transform-origin: 50% 10%; }
.alarm-metin { flex: 1; min-width: 0; font-size: 14px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.alarm-serit .btn { flex-shrink: 0; }
@keyframes zil-salla {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(16deg); } 40% { transform: rotate(-12deg); }
60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); }
}
.alarm-liste { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.alarm-liste > span {
margin-right: 4px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.alarm-cip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.alarm-cip i { font-style: normal; font-size: 15px; line-height: 1; color: var(--dim); transition: color 0.18s, transform 0.2s; }
.alarm-cip:hover i { color: var(--coral); transform: rotate(90deg); }
.alarm-form {
display: flex; flex-direction: column; align-items: center; gap: 10px;
margin: 26px auto 0; padding-top: 22px; max-width: 440px;
border-top: 1px solid var(--line);
}
.alarm-form label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); text-align: left; }
.alarm-form label svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent); }
.alarm-form-satir { display: flex; gap: 8px; width: 100%; }
.alarm-form-satir input {
flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px;
border: 1px solid var(--line-bright); background: var(--bg-2); color: var(--text); font: inherit; font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.alarm-form-satir input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.alarm-yan { margin-top: 14px; }
.alarm-yan .alarm-serit { flex-wrap: wrap; }
.alarm-yan .alarm-metin { flex-basis: calc(100% - 34px); }
.alarm-yan .alarm-serit .btn { width: 100%; }
@media (max-width: 520px) {
.alarm-serit { flex-wrap: wrap; }
.alarm-metin { flex-basis: calc(100% - 34px); }
.alarm-serit .btn { width: 100%; }
.alarm-form-satir { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.alarm-serit.kurulu .alarm-zil { animation: none; }
}
.search-mini:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
@media (max-width: 820px) {
.user-chip button, .lfg-contact.gated button, .lfg-game a, .breadcrumbs a,
.footer-links a, .see-all, .kunye a, .metin-baglanti {
display: inline-flex; align-items: center; min-height: 28px;
}
.user-chip button { padding-inline: 6px; }
}
.chat-messages {
gap: 2px; padding: 14px 14px 10px; border: none; border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2) 82%, transparent);
box-shadow: inset 0 0 0 1px var(--line);
}
.chat-gun { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.chat-gun:first-child { margin-top: 2px; }
.chat-gun::before, .chat-gun::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.chat-gun span {
padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--muted);
background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.chat-row { max-width: 84%; gap: 9px; align-items: flex-start; }
.chat-row + .chat-row:not(.chained) { margin-top: 0; }
.chat-row.grup-ust:not(:first-child) { margin-top: 12px; }
.chat-gun + .chat-row.grup-ust { margin-top: 0; }
.chat-row.chained { margin-top: 0; }
.chat-avatar { width: 30px; }
.chat-avatar .user-avatar { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 2px var(--bg-2); }
.chat-bubble {
position: relative; border: none; border-radius: 18px; padding: 8px 13px 7px;
background: var(--surface-2); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
transition: filter 0.15s;
}
.chat-row.mine .chat-bubble {
border: none;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, var(--surface-2)), color-mix(in srgb, var(--accent) 24%, var(--surface-2)));
}
.chat-row:hover .chat-bubble { filter: brightness(1.06); }
.chat-row:not(.mine).chained .chat-bubble { border-top-left-radius: 6px; }
.chat-row:not(.mine):not(.grup-alt) .chat-bubble { border-bottom-left-radius: 6px; }
.chat-row.mine.chained .chat-bubble { border-top-right-radius: 6px; }
.chat-row.mine:not(.grup-alt) .chat-bubble { border-bottom-right-radius: 6px; }
.chat-row:not(.chained) .chat-bubble, .chat-row.mine:not(.chained) .chat-bubble { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.chat-row.grup-ust:not(.grup-alt):not(.mine) .chat-bubble { border-bottom-left-radius: 6px; }
.chat-row.grup-ust:not(.grup-alt).mine .chat-bubble { border-bottom-right-radius: 6px; }
.chat-author {
font-family: var(--font-body, inherit); font-size: 12px; font-weight: 700; letter-spacing: 0;
color: var(--accent); margin-bottom: 1px;
}
.chat-bubble p { font-size: 14.5px; line-height: 1.45; color: var(--text); }
.chat-meta { gap: 5px; margin-top: 3px; }
.chat-meta time { font-family: var(--font-mono); font-size: 10px; color: color-mix(in srgb, var(--text) 55%, transparent); }
.chat-form, .panel-form { gap: 8px; }
.chat-form input, .panel-form input {
height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14.5px;
background: var(--surface); border: 1px solid var(--line-bright);
}
.chat-form input:hover, .panel-form input:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-bright)); }
.chat-send { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) {
.chat-bubble, .chat-meta { transition: none; }
}
.lfg-card { border-color: color-mix(in srgb, var(--line) 80%, transparent); }
.lfg-card:hover { transform: translateY(-3px); }
.lfg-cover { aspect-ratio: 460 / 150; }
.lfg-platform {
color: var(--pc, var(--muted)); border: 1px solid color-mix(in srgb, var(--pc, var(--muted)) 40%, transparent);
font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}
.lfg-body { gap: 9px; padding: 14px 16px 16px; }
.lfg-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lfg-ust .lfg-game { font-size: 16px; min-width: 0; }
.lfg-slot {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-top: 2px;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.lfg-slot .slot-dots { display: inline-flex; gap: 3px; }
.lfg-slot .slot-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-bright); }
.lfg-slot .slot-dots i.filled { background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
.lfg-slot .slot-dots.sik { gap: 2px; }
.lfg-slot .slot-dots.sik i { width: 5px; height: 5px; }
.lfg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: var(--muted); }
.lfg-meta .ayrac { font-style: normal; color: var(--line-bright); }
.lfg-meta svg { vertical-align: -1px; }
.lfg-meta .mic-on { color: var(--coral); }
.lfg-meta .mic-maybe { color: var(--amber); }
.lfg-ekipte { color: var(--accent); font-weight: 700; }
.lfg-text { font-size: 14px; color: color-mix(in srgb, var(--text) 82%, transparent); }
.lfg-card .lfg-facts {
display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; border: none;
}
.lfg-facts div { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.lfg-facts dt { color: var(--dim); font-weight: 500; }
.lfg-facts dt::after { content: ':'; }
.lfg-facts dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.lfg-card .lfg-contact {
background: color-mix(in srgb, var(--bg-2) 70%, transparent); border: none; border-radius: 10px;
padding: 8px 12px; font-size: 13px; color: var(--dim);
}
.lfg-card .lfg-foot { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding-top: 12px; flex-wrap: nowrap; }
.lfg-card .lfg-foot .user-avatar { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
.lfg-card .lfg-foot-actions { flex-wrap: nowrap; align-items: center; gap: 6px; }
.lfg-card .lfg-foot { flex-wrap: wrap; row-gap: 10px; }
.lfg-card .lfg-foot { margin-top: auto; column-gap: 8px; }
.lfg-card .lfg-who { flex: 1 1 4.5em; min-width: 4.5em; }
.lfg-card { container: kart / inline-size; }
@container kart (max-width: 300px) {
.lfg-card .lfg-foot { column-gap: 6px; }
.lfg-card .lfg-foot .user-avatar { width: 26px; height: 26px; font-size: 10px; }
.lfg-card .lfg-foot .lfg-join, .lfg-card .lfg-foot .lfg-chat { padding-inline: 10px; }
.lfg-card .lfg-foot .kart-menu-btn { width: 30px; height: 30px; }
.lfg-card .lfg-foot-actions { gap: 4px; }
}
.lfg-card .lfg-chat { color: #0d1a08 !important; border-color: transparent !important; }
.lfg-bekliyor { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.lfg-joined { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--dim); }
.ekip-yigin { display: inline-flex; flex-shrink: 0; padding-left: 8px; }
.ekip-foto {
position: relative; display: inline-flex; margin-left: -6px; border-radius: 50%;
box-shadow: 0 0 0 2px var(--surface); transition: transform 0.2s var(--panel-yay), box-shadow 0.2s;
}
.ekip-foto .user-avatar { width: 24px; height: 24px; font-size: 9px; }
.ekip-foto:hover, .ekip-foto:focus-visible { z-index: 1; transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent); outline: none; }
.ekip-adlar { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ekip-kalan { color: var(--muted); font-weight: 600; }
.kart-menu-kap { position: relative; }
.kart-menu-btn {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kart-menu-btn:hover, .kart-menu-kap.acik .kart-menu-btn { background: var(--surface-2); color: var(--text); border-color: var(--line-bright); }
.kart-menu {
position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 190px;
display: flex; flex-direction: column; padding: 5px;
background: var(--surface); border: 1px solid var(--line-bright); border-radius: 12px;
box-shadow: var(--shadow-float); animation: popIn 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.kart-menu[hidden] { display: none; }
.kart-menu [role="menuitem"] {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 9px 11px; border-radius: 8px; border: none; background: none; cursor: pointer;
font: inherit; font-size: 13.5px; color: var(--text); transition: background 0.12s, color 0.12s;
}
.kart-menu [role="menuitem"]:hover, .kart-menu [role="menuitem"]:focus-visible { background: var(--surface-2); outline: none; }
.kart-menu [role="menuitem"].tehlike { color: var(--coral); }
.kart-menu [role="menuitem"] svg { flex-shrink: 0; }
.pill-players.tahmini { color: var(--dim); }
.pill-players.tahmini i { display: none; }
.sinyal-modal .sf-alt .btn, .iletisim-modal .sf-alt .btn, .oyun-sonrasi .btn,
.notif-modal .btn, .iletisim-modal.tesekkur .btn { width: auto; margin: 0; }
.modal.oyun-sonrasi { max-width: 520px; }
.os-liste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.os-satir {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kisi arkadas";
align-items: center; gap: 6px 12px; padding: 12px; border-radius: 12px;
background: color-mix(in srgb, var(--bg-2) 70%, transparent);
}
.os-kisi { grid-area: kisi; display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.os-kisi .user-avatar { width: 40px; height: 40px; font-size: 13px; flex-shrink: 0; }
.os-kisi b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-kisi:hover b { color: var(--accent); }
.os-arkadas { grid-area: arkadas; justify-self: end; }
.os-etiket { font-size: 12.5px; color: var(--dim); }
.os-etiket.ok { color: var(--accent); }
.os-bos { color: var(--dim); font-size: 14px; }
.os-alt { display: flex; justify-content: flex-end; margin-top: 16px; }
.modal.notif-modal { max-width: 470px; padding: 24px 22px 18px; }
.notif-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 36px; margin-bottom: 6px; }
.notif-ust h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.notif-sayi {
min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
background: var(--accent); color: #0d1a08; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
}
.notif-ust .link-btn { text-decoration: none; font-size: 13px; }
.notif-ust .link-btn:hover { text-decoration: underline; }
.notif-push-kart {
display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px;
background: var(--accent-soft); font-size: 13px; color: var(--text);
}
.notif-push-kart svg { flex-shrink: 0; color: var(--accent); width: 18px; height: 18px; }
.notif-push-kart span { flex: 1; }
.notif-list { margin-top: 8px; max-height: 60vh; gap: 0; }
.notif-grup + .notif-grup { margin-top: 8px; }
.notif-grup h3 { margin: 10px 4px 4px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.notif-grup ul { list-style: none; margin: 0; padding: 0; }
.notif-satir .notif-item { position: relative; align-items: center; gap: 12px; padding: 10px 28px 10px 8px; color: var(--text); text-decoration: none; }
.notif-item.unread { background: transparent; box-shadow: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-gorsel { position: relative; flex-shrink: 0; }
.notif-gorsel .user-avatar { width: 40px; height: 40px; font-size: 13px; }
.notif-rozet, .notif-ikon { display: grid; place-items: center; border-radius: 50%; color: #0d1a08; }
.notif-rozet { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; box-shadow: 0 0 0 2px var(--surface); }
.notif-ikon { width: 40px; height: 40px; }
.tur-mesaj { background: var(--steam-blue); }
.tur-kisi { background: var(--accent); }
.tur-ekip { background: var(--violet); }
.tur-zil { background: var(--coral); }
.notif-ikon.tur-zil { color: #1a1206; }
.notif-body { gap: 3px; }
.notif-metin { font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--text) 85%, transparent); }
.notif-metin strong { color: var(--text); font-weight: 700; }
.notif-item.unread .notif-metin { color: var(--text); }
.notif-body time { font-family: inherit; font-size: 12px; color: var(--dim); }
.notif-item.unread time { color: var(--accent); font-weight: 600; }
.notif-nokta { position: absolute; right: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--accent); }
.notif-eylem { display: flex; gap: 6px; padding: 0 8px 10px 60px; }
.notif-bos { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 10px; text-align: center; color: var(--dim); font-size: 13.5px; }
.notif-bos .notif-ikon { background: var(--surface-2); color: var(--muted); margin-bottom: 4px; }
.notif-bos b { color: var(--text); font-size: 15px; }
.modal.sinyal-modal { max-width: 640px; padding: 28px 28px 0; }
.modal.iletisim-modal { max-width: 560px; }
.sinyal-form, .iletisim-form { display: flex; flex-direction: column; gap: 4px; }
.sf-bolum { border: none; margin: 0; padding: 14px 0 6px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); min-width: 0; }
.sf-bolum:first-of-type { border-top: none; padding-top: 4px; }
.sf-bolum legend { padding: 0; margin-bottom: 10px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
.sf-bolum legend small, .sf-etiket small { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--dim); }
.sf-alan { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; min-width: 0; position: relative; }
.sf-etiket { font-size: 13px; font-weight: 600; color: var(--muted); }
.sf-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.sinyal-form input:not([type="radio"]), .sinyal-form textarea, .iletisim-form input, .iletisim-form textarea {
width: 100%; background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: 10px;
padding: 11px 14px; color: var(--text); font: inherit; font-size: 14.5px; outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.sinyal-form textarea, .iletisim-form textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.sinyal-form input:not([type="radio"]):focus, .sinyal-form textarea:focus, .iletisim-form input:focus, .iletisim-form textarea:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.sinyal-form input:not([type="radio"]):hover, .sinyal-form textarea:hover, .iletisim-form input:hover, .iletisim-form textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-bright)); }
.sf-karakter { align-self: flex-end; font-family: var(--font-mono); font-size: 11px; color: var(--dim); margin-top: -2px; }
.secim-grup { display: flex; flex-wrap: wrap; gap: 6px; }
.secim { position: relative; cursor: pointer; }
.secim input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secim span {
display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px;
border: 1px solid var(--line-bright); background: var(--bg-2); color: var(--muted);
font-size: 13px; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
@media (hover: hover) { .secim:hover span { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-bright)); color: var(--text); } }
.secim input:checked + span { background: var(--accent); border-color: var(--accent); color: #0d1a08; }
.secim input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.secim:active span { transform: scale(0.96); }
.sf-sayac-kutu { display: flex; align-items: stretch; height: 44px; }
.sf-sayac-kutu button {
width: 44px; flex-shrink: 0; border: 1px solid var(--line-bright); background: var(--surface-2);
color: var(--text); font-size: 18px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sf-sayac-kutu button:first-child { border-radius: 10px 0 0 10px; }
.sf-sayac-kutu button:last-child { border-radius: 0 10px 10px 0; }
.sf-sayac-kutu button:active { background: var(--accent); color: #0d1a08; }
@media (hover: hover) { .sf-sayac-kutu button:hover { background: var(--accent); color: #0d1a08; } }
.sinyal-form .sf-sayac-kutu input {
border-radius: 0; border-left: none; border-right: none; text-align: center;
font-family: var(--font-mono); font-weight: 700; -moz-appearance: textfield; appearance: textfield;
}
.sf-sayac-kutu input::-webkit-outer-spin-button, .sf-sayac-kutu input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-alt {
display: flex; align-items: center; justify-content: flex-end; gap: 10px;
position: sticky; bottom: 0; z-index: 5; margin: 6px -28px 0; padding: 14px 28px 18px;
background: linear-gradient(to top, var(--surface) 72%, transparent);
}
.iletisim-modal .sf-alt { margin: 6px 0 0; padding: 6px 0 0; position: static; background: none; justify-content: space-between; }
.if-not { font-size: 12.5px; color: var(--dim); }
.if-ipucu { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.if-ipucu:empty { display: none; }
.tuzak { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.iletisim-modal.tesekkur { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.if-onay {
width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
background: var(--accent); color: #0d1a08; animation: popIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
.if-ref { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.if-ref b { font-family: var(--font-mono); color: var(--text); letter-spacing: 0.04em; }
@media (max-width: 560px) {
.modal.sinyal-modal { padding: 22px 18px 0; }
.sf-alt { margin: 6px -18px 0; padding: 12px 18px 16px; }
.sf-iki { grid-template-columns: minmax(0, 1fr); }
.os-satir { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kisi" "arkadas"; }
.os-arkadas { justify-self: start; }
.notif-eylem { padding-left: 8px; }
.iletisim-modal .sf-alt { flex-direction: column-reverse; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
.kart-menu, .if-onay { animation: none; }
}
@media (min-width: 1100px) {
main, .footer { transition: padding-right var(--panel-sure) var(--panel-yay); }
body.panel-acik main, body.panel-acik .footer { padding-right: calc(var(--panel-gen) + 20px); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
main, .footer { transition: none; }
}
@media (min-width: 821px) {
.page { padding-inline: max(28px, min(58px, calc(58px - (100vw - 1280px) / 2))); }
}
.notif-push-not { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.sf-bolum legend { float: left; width: 100%; }
.sf-bolum legend + * { clear: both; }
.chat-row.mine .chat-avatar { display: none; }
.user-chip { min-width: 0; }
.user-chip-link { min-width: 0; }
.user-chip span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
.user-chip { padding: 4px 6px 4px 4px; gap: 4px; }
.user-chip-link span { display: none; }
}
.koleksiyonlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.koleksiyon {
display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 0;
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
color: var(--text); text-decoration: none;
transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.koleksiyon:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-bright)); background: var(--surface-2); transform: translateY(-2px); }
.koleksiyon:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.koleksiyon-kapaklar { display: flex; flex-shrink: 0; }
.koleksiyon-kapaklar > span {
width: 34px; height: 46px; border-radius: 7px; overflow: hidden; margin-left: -14px;
border: 2px solid var(--surface); background: var(--bg-2);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); transition: margin 0.25s, transform 0.25s;
}
.koleksiyon-kapaklar > span:first-child { margin-left: 0; transform: rotate(-6deg); }
.koleksiyon-kapaklar > span:last-child { transform: rotate(6deg); }
.koleksiyon:hover .koleksiyon-kapaklar > span { margin-left: -8px; }
.koleksiyon:hover .koleksiyon-kapaklar > span:first-child { margin-left: 0; }
.koleksiyon-kapaklar img, .koleksiyon-kapaklar .cover-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.koleksiyon-kapaklar .cover-art b { font-size: 11px; }
.koleksiyon-kapaklar .cover-art small { display: none; }
.koleksiyon-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.koleksiyon-metin b { font-family: var(--font-display); font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.koleksiyon-metin small { font-size: 12.5px; color: var(--dim); }
.koleksiyon-ok { flex-shrink: 0; color: var(--dim); transition: transform 0.2s, color 0.2s; }
.koleksiyon:hover .koleksiyon-ok { color: var(--accent); transform: translateX(3px); }
@media (max-width: 1100px) { .koleksiyonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .koleksiyonlar { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
.koleksiyon, .koleksiyon-kapaklar > span, .koleksiyon-ok { transition: none; }
}
@media (max-width: 560px) {
.ana-sayfa .lfg-grid.home > :nth-child(n+4) { display: none; }
.ana-sayfa .card-row {
display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: -16px; padding: 4px 16px 10px; scroll-padding-inline: 16px;
}
.ana-sayfa .card-row::-webkit-scrollbar { display: none; }
.ana-sayfa .card-row > * { flex: 0 0 72%; scroll-snap-align: start; display: flex !important; }
}
@media (max-width: 340px) {
.topbar { padding-inline: 10px; gap: 6px; }
.topbar-actions { gap: 6px; }
.lang-switch button#lang-switch-btn { padding: 0 9px; gap: 4px; }
.lang-switch button#lang-switch-btn .lang-chev { display: none; }
.user-chip button { padding-inline: 4px; }
}
@media (max-width: 300px) {
.topbar .logo { display: none; }
.lang-switch button#lang-switch-btn em { display: none; }
}
@media (max-width: 560px) {
.profil-izgara, .hero-inner { grid-template-columns: minmax(0, 1fr); }
}
.talep-kutu { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.talep-bos { color: var(--dim); font-size: 14px; padding: 18px 0; }
.talep-kart {
display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
background: var(--surface-grad); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: inset 3px 0 0 var(--line-bright), var(--edge); transition: border-color 0.2s;
}
.talep-kart:hover { border-color: var(--line-bright); }
.talep-kart.konu-ihlal { box-shadow: inset 3px 0 0 var(--coral), var(--edge); }
.talep-kart.konu-kvkk { box-shadow: inset 3px 0 0 var(--amber), var(--edge); }
.talep-kart:not(.durum-acik) { opacity: 0.72; }
.talep-ust { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
.talep-konu { font-weight: 700; color: var(--text); }
.talep-ref { font-family: var(--font-mono); font-size: 12px; color: var(--muted); background: var(--bg-2); padding: 2px 7px; border-radius: 6px; }
.talep-durum { font-size: 12px; font-weight: 600; color: var(--dim); }
.talep-kart.durum-acik .talep-durum { color: var(--accent); }
.talep-ust time { margin-left: auto; font-size: 12px; color: var(--dim); }
.talep-sure { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--bg-2); color: var(--muted); }
.talep-sure.acil { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.talep-sure.gecti { background: color-mix(in srgb, var(--coral) 18%, transparent); color: var(--coral); }
.talep-kim { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.talep-kim b { color: var(--text); }
.talep-uyari { color: var(--amber); }
.talep-mesaj { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); background: var(--bg-2); border-radius: 10px; padding: 12px 14px; margin: 0; }
.talep-mesaj.kisa { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.talep-devam { align-self: flex-start; margin-top: -4px; font-size: 13px; }
.talep-alt { display: flex; flex-wrap: wrap; gap: 8px; }
.talep-alt [aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-soft); }
.talep-yanit { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); animation: talepYanitAc 0.18s ease-out; }
.talep-yanit[hidden] { display: none; }
.talep-yanit-kime { font-size: 13px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.talep-yanit textarea {
width: 100%; min-height: 128px; resize: vertical; background: var(--bg-2); border: 1px solid var(--line-bright);
border-radius: 10px; padding: 11px 14px; color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.5; outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.talep-yanit textarea:hover { border-color: var(--muted); }
.talep-yanit textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.talep-yanit-not { font-size: 12.5px; line-height: 1.5; color: var(--dim); margin: 0; }
.talep-yanit-alt { display: flex; flex-wrap: wrap; gap: 8px; }
.talep-yanitlar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.talep-yanitlar li { border-left: 3px solid var(--accent-dim); padding: 2px 0 2px 12px; transition: border-color 0.2s; }
.talep-yanitlar li:hover { border-left-color: var(--logo-acik); }
.talep-yanit-ust { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.talep-yanit-metin { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); margin: 0; }
@keyframes talepYanitAc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .talep-yanit { animation: none; } }
.os-arkadas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .os-arkadas { justify-content: flex-start; } }
.page.narrow { padding-top: 40px; }
@media (max-width: 560px) { .page.narrow { padding-top: 22px; } }
.dm-sayfa .chat-messages { height: clamp(320px, calc(100vh - 330px), 760px); height: clamp(320px, calc(100dvh - 330px), 760px); }
@media (max-width: 820px) { .dm-sayfa .chat-messages { height: clamp(280px, calc(100dvh - 300px), 760px); } }
.dm-sayfa .chat-messages[hidden] { display: none; }
.dm-sayfa .chat-messages[data-kapali] { height: clamp(220px, calc(100dvh - 400px), 760px); }
@media (max-width: 820px) { .dm-sayfa .chat-messages[data-kapali] { height: clamp(200px, calc(100dvh - 380px), 760px); } }
.tur-daha { width: 100%; margin-top: 2px; }
.tur-daha summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 2px; transition: color 0.15s;
}
.tur-daha summary::-webkit-details-marker { display: none; }
.tur-daha summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.tur-daha[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.tur-daha summary:hover { color: var(--accent); }
.tur-daha summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.tur-daha .genre-cloud { margin-top: 6px; }
.sinyal-sayfa { max-width: 560px; padding-top: 36px; }
.geri-baglanti {
display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; transition: color 0.15s, transform 0.15s;
}
.geri-baglanti:hover { color: var(--accent); transform: translateX(-2px); }
.sinyal-tek .lfg-card { animation: cardIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sinyal-tek-not { margin-top: 14px; font-size: 12.5px; color: var(--dim); text-align: center; }
.sinyal-sayfa .empty-state { margin-top: 30px; }
.profil-ban-sebep { margin: 6px 0 0; font-size: 13px; color: var(--coral); overflow-wrap: anywhere; }
.auth-uyari { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }
.auth-uyari svg { flex-shrink: 0; margin-top: 1px; }
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 400px) {
.lfg-top h1 { font-size: clamp(23px, 7.4vw, 28px); }
}
@media (max-width: 560px) {
.sinyal-modal .sf-alt { flex-wrap: wrap; background: linear-gradient(to top, var(--surface) calc(100% - 12px), transparent); }
.sinyal-modal .sf-alt .btn { flex: 1 1 auto; white-space: normal; text-wrap: balance; line-height: 1.25; }
}
body { background: transparent; }
body::before {
content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: transform;
background:
radial-gradient(1100px 500px at 75% -10%, rgba(76, 154, 42, 0.06), transparent 60%),
radial-gradient(900px 600px at -10% 30%, rgba(194, 91, 82, 0.05), transparent 55%),
linear-gradient(var(--bg-2), var(--bg));
}
.topbar { backdrop-filter: none; background: rgba(9, 11, 13, 0.97); }
.fav-btn { backdrop-filter: none; background: rgba(7, 9, 11, 0.82); }
.badge, .lfg-platform, .to-top, .statbar { backdrop-filter: none; }
.lfg-platform { background: rgba(7, 9, 11, 0.92); }
.statbar { background: rgba(17, 24, 29, 0.8); }
.modal-backdrop { backdrop-filter: none; background: rgba(4, 6, 7, 0.86); }
@media (max-width: 820px) {
.bottomnav { backdrop-filter: none; background: rgba(9, 11, 13, 0.98); }
.topnav { backdrop-filter: none; }
}
.hero.durgun::before, .hero.durgun::after, .hero.durgun .radar-beam, .hero.durgun .radar-blip,
.hero::before, .hero::after { animation: none; }
.browse-grid > .game-card { content-visibility: auto; contain-intrinsic-size: auto 290px; }
.chat-row { position: relative; }
.dm-durum {
align-self: flex-end; margin: 3px 6px 2px 0; font-size: 11.5px; font-weight: 500; color: var(--dim);
animation: fadeIn 0.25s both;
}
.dm-durum.okundu { color: color-mix(in srgb, var(--accent) 75%, var(--text)); }
.kisi-menu .kart-menu { top: calc(100% + 6px); bottom: auto; }
.kisi-menu .kart-menu-btn { width: 32px; height: 32px; }
.panel-kisi-menu:empty { display: none; }
.panel-kisi-menu .kart-menu-btn { border-color: transparent; color: var(--dim); }
.panel-kisi-menu .kart-menu-btn:hover, .panel-kisi-menu .kart-menu-kap.acik .kart-menu-btn { color: var(--text); border-color: var(--line-bright); }
.dm-head .kisi-menu { margin-left: auto; }
.profile-social { align-items: center; }
.arkadas-rozet {
display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px;
font-size: 12.5px; font-weight: 600; color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.panel-head::after { display: none; }
.side-title, .filter-group h3, .field label, .detail-facts b, .lfg-facts b,
.profil-oyunlar > span, .kunye dt, .alarm-liste > span, .panel-section, .auth-or, .tour-eyebrow,
.lang-switch-head {
font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12.5px;
}
.side-title { color: var(--muted); }
.panel-head { z-index: 5; }
.bottomnav a { font-family: var(--font-body); letter-spacing: 0; }
@supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--text) 16%, transparent);
border: 3px solid transparent; border-radius: 999px; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 30%, transparent); }
}
@supports not selector(::-webkit-scrollbar) {
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 20%, transparent) transparent; }
}
.panel-oneriler::before { display: none; }
.sinyal-form { display: flex; flex-direction: column; gap: 14px; }
.sinyal-form textarea { min-height: 64px; resize: vertical; }
.sf-ayrinti { border-top: 1px solid var(--line); padding-top: 12px; }
.sf-ayrinti > summary {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
font-weight: 600; font-size: 14px; color: var(--muted); padding: 4px 2px; border-radius: 6px;
transition: color 0.15s;
}
.sf-ayrinti > summary::-webkit-details-marker { display: none; }
.sf-ayrinti > summary::before {
content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg); transition: transform 0.2s;
}
.sf-ayrinti[open] > summary::before { transform: rotate(45deg); }
.sf-ayrinti > summary:hover, .sf-ayrinti[open] > summary { color: var(--text); }
.sf-ayrinti > summary small { font-weight: 500; color: var(--dim); }
.sf-ayrinti[open] > summary { margin-bottom: 12px; }
.sf-ayrinti > .sf-alan, .sf-ayrinti > .sf-iki { margin-bottom: 14px; }
.kisi-link { color: inherit; text-decoration: none; border-radius: 6px; }
.kisi-link:hover, .kisi-link:hover b { color: var(--accent); }
.kisi-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kisi-foto { display: inline-flex; border-radius: 50%; transition: box-shadow 0.15s, transform 0.15s; }
.kisi-foto:hover { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.04); }
.lfg-joined .kisi-link { color: var(--muted); }
.lfg-joined .kisi-link:hover { color: var(--accent); }
a.chat-author { display: inline-block; text-decoration: none; }
a.chat-author:hover { text-decoration: underline; }
.chat-author.silinmis { display: inline-block; color: var(--dim); font-style: italic; }
.filter-diger { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.filter-diger > summary {
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
font-weight: 600; font-size: 13.5px; color: var(--muted); padding: 4px 2px; transition: color 0.15s;
}
.filter-diger > summary::-webkit-details-marker { display: none; }
.filter-diger > summary::before {
content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg); transition: transform 0.2s;
}
.filter-diger[open] > summary::before { transform: rotate(45deg); }
.filter-diger > summary:hover, .filter-diger[open] > summary { color: var(--text); }
.filter-diger[open] > summary { margin-bottom: 14px; }
.lfg-top-sub { font-family: var(--font-body); letter-spacing: 0; font-size: 13.5px; }
.sinyal-form > .sf-alan { margin-bottom: 0; }
.bottomnav .bn-sohbet { font-family: var(--font-body); letter-spacing: 0; }
@media (max-width: 420px) {
.notif-ust { flex-wrap: wrap; row-gap: 0; }
.notif-ust h2 { flex-basis: 100%; }
.notif-ust .link-btn { padding: 6px 0; margin: -2px 0 -4px; }
}
.lfg-who .kisi-link, .lfg-joined .kisi-link { display: inline-block; padding: 5px 2px; margin: -5px -2px; }
.lfg-joined .ekip-adlar .kisi-link { display: inline; }
.chat-row:not(.grup-alt) .chat-bubble .chat-meta { display: none; }
.chat-row.grup-alt .chat-yan-saat { display: none; }
.chat-yan {
position: absolute; top: 50%; left: calc(100% + 4px); transform: translateY(-50%);
display: flex; align-items: center; gap: 6px;
opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.chat-row.mine .chat-yan { left: auto; right: calc(100% + 4px); }
.chat-row, .panel-chat .chat-row { max-width: min(84%, calc(100% - 76px)); }
.chat-row.secili .chat-yan, .chat-row:focus-within .chat-yan { opacity: 1; pointer-events: auto; }
@media (hover: hover) { .chat-row:hover .chat-yan { opacity: 1; pointer-events: auto; } }
.chat-yan-saat { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.chat-eylem {
flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center; border: 1px solid transparent; background: none; color: var(--dim); cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.chat-eylem:hover, .chat-eylem:focus-visible { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 35%, transparent); background: color-mix(in srgb, var(--coral) 10%, transparent); outline: none; }
.chat-eylem:active { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) { .chat-yan { transition: none; } }
.cover-art { container-type: inline-size; }
@container (max-width: 140px) {
.cover-art small { display: none; }
.cover-art b { font-size: min(34px, 46cqw); }
}
.game-combo-input input[readonly] { color: var(--muted); cursor: default; }
.game-combo-input:has(input[readonly]) { opacity: 0.8; }
.hero.hero-sade { padding: 96px 24px 76px; text-align: center; }
.hero.hero-sade::after { display: none; }
.hero.hero-sade::before {
width: 960px; height: 560px; top: -320px; left: 50%; right: auto; transform: translateX(-50%);
background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 17%, transparent), transparent 66%);
}
.hero-sade .hero-grid { mask-image: radial-gradient(ellipse 62% 75% at 50% 0%, black, transparent 78%); }
.hero-sade .hero-inner { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 840px; }
.hero-etiket {
display: inline-flex; align-items: center; gap: 10px;
font-size: 13.5px; font-weight: 600; color: var(--muted);
animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-etiket i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.hero-etiket i::after {
content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
animation: nabiz 2.4s ease-out infinite;
}
@keyframes nabiz { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.8); opacity: 0; } }
.hero-sade h1 { font-size: clamp(38px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.036em; margin: 24px 0 18px; }
.hero-sade p.lead { margin: 0 auto; max-width: 600px; font-size: 18px; line-height: 1.55; }
.hero-sade .hero-search {
margin-top: 36px; width: 100%; max-width: 640px;
display: flex; align-items: center; gap: 6px; padding: 7px 7px 7px 20px;
background: var(--surface); border: 1px solid var(--line-bright); border-radius: 999px;
box-shadow: 0 14px 44px -22px rgba(0, 0, 0, 0.9);
transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-sade .hero-search:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-bright)); }
.hero-sade .hero-search:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft), 0 14px 44px -22px rgba(0, 0, 0, 0.9);
}
.hero-search-ikon { color: var(--dim); flex-shrink: 0; transition: color 0.2s; }
.hero-sade .hero-search:focus-within .hero-search-ikon { color: var(--accent); }
.hero-sade .hero-search input {
flex: 1; min-width: 0; background: none; border: none; border-radius: 0; box-shadow: none;
padding: 12px 8px; font-size: 16.5px; color: var(--text);
}
.hero-sade .hero-search input:focus { border: none; box-shadow: none; }
.hero-sade .hero-search .btn { padding: 13px 26px; font-size: 15px; flex-shrink: 0; }
.hero-ikincil {
margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 12px;
color: var(--dim); font-size: 14px;
animation: rise 0.7s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-ikincil .btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 560px) {
.hero.hero-sade { padding: 56px 16px 44px; }
.hero-sade p.lead { font-size: 16px; }
.hero-sade .hero-search {
display: grid; grid-template-columns: auto minmax(0, 1fr); padding: 6px; border-radius: 22px; margin-top: 28px;
}
.hero-search-ikon { margin-left: 12px; }
.hero-sade .hero-search .btn { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.hero-etiket, .hero-ikincil { animation: none; }
.hero-etiket i::after { animation: none; opacity: 0; }
}
.hero-sade .hero-metin { width: 100%; }
@media (min-width: 981px) {
.hero.hero-sade { text-align: left; padding: 88px 28px 80px; }
.hero.hero-sade::before { left: 74%; }
.hero-sade .hero-grid { mask-image: radial-gradient(ellipse 80% 90% at 60% 10%, black, transparent 75%); }
.hero-sade .hero-inner {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: center;
gap: 48px; max-width: 1200px;
}
.hero-sade h1 { font-size: clamp(40px, 4.5vw, 66px); }
.hero-sade .hero-metin { display: flex; flex-direction: column; align-items: flex-start; }
.hero-sade p.lead { margin: 0; }
.hero-sade .hero-ikincil { justify-content: flex-start; }
.hero-sade .radar-visual { display: block; }
}
@media (max-width: 980px) {
.hero-sade .hero-inner { position: relative; }
.hero-sade .hero-metin { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero-sade .radar-visual {
display: block; position: absolute; z-index: 0; left: 50%; top: 50%; margin: 0;
width: min(540px, 125vw); max-width: none; transform: translate(-50%, -50%);
opacity: 0.2; animation: none; pointer-events: none;
}
}
.hero-sade p.hero-ikincil { display: block; margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.hero-ikincil a {
color: var(--accent); font-weight: 700; white-space: nowrap;
text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 2px;
transition: text-decoration-color 0.18s, color 0.18s;
}
.hero-ikincil a:hover, .hero-ikincil a:focus-visible { text-decoration-color: currentColor; outline: none; }
.hero-ikincil a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.detail-info .breadcrumbs, .search-drop-all, .game-combo-info span, .similar-item .sub,
.lfg-side-info small, .lfg-who time, .notif-body time, .dm-row-meta time, .chat-meta time,
.chat-yan-saat, .chat-author, .footer-bottom, .loading p,
.report-target-tag, .verify-badge, .pill-players, .score-pill, .lfg-slot, .profil-oyunlar em b,
.review-who time, .profile-review time, .tour-eyebrow, .tour-skip, #footer-live-count, .badge {
font-family: var(--font-body); letter-spacing: normal; text-transform: none;
font-variant-numeric: tabular-nums;
}
.detail-info .breadcrumbs { font-size: 13px; }
.detail-info .breadcrumbs span { color: var(--muted); }
.footer-bottom { font-size: 12.5px; }
.loading p { font-size: 13.5px; }
.lfg-who time, .notif-body time, .dm-row-meta time { font-size: 11.5px; }
.lfg-side-info small, .similar-item .sub { font-size: 12px; }
.search-drop-all { font-size: 13px; }
.report-target-tag { font-size: 12.5px; }
.badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; }
.user-avatar, .dial-value { font-family: var(--font-display); letter-spacing: -0.01em; }
.pill-players .pill-kisi { flex-shrink: 0; opacity: 0.9; }
.pill-players:not(.tahmini) .pill-kisi { color: var(--coral); }
.pill-players i { display: none; }
.search-drop .game-combo-info b { color: var(--text); transition: color 0.15s; }
.search-drop .game-combo-item:hover .game-combo-info b,
.search-drop .game-combo-item.active .game-combo-info b { color: var(--accent); }
.benzer-baslik { margin-top: 36px; }
.benzer-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.benzer-izgara .similar-item { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.benzer-izgara .similar-item:hover { transform: translateY(-3px); }
.benzer-izgara .similar-item .thumb { width: 100%; border-radius: 0; }
.benzer-izgara .similar-item > span:last-child { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.benzer-izgara .similar-item h5 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfg-side .see-all {
display: block; text-align: center; margin-top: 4px; padding: 8px;
font-size: 13.5px; font-weight: 600; color: var(--accent);
}
.lfg-side .see-all:hover { transform: none; text-decoration: underline; text-underline-offset: 4px; }
.alarm-serit { border-style: solid; border-color: var(--line); }
@media (max-width: 980px) {
.detail-columns > aside { order: -1; }
}
@media (max-width: 720px) {
.benzer-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 600px) {
.score-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px; }
.dial-card { flex-direction: column; text-align: center; gap: 8px; padding: 14px 6px; }
.dial-card .dial { width: 58px; height: 58px; }
.dial-card .dial svg { width: 58px; height: 58px; }
.dial-card .dial-value { font-size: 14px; }
.dial-card h4 { font-size: 12px; line-height: 1.25; }
.dial-card p { display: none; }
}
.browse-ust .sort-select, .browse-ust .custom-select { flex-shrink: 0; }
@media (max-width: 820px) {
.topnav, .topnav.open { display: none; }
.search-mini { display: none; }
.topbar.arama-acik .search-mini {
display: flex; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; z-index: 61;
background: var(--bg-2); box-shadow: var(--shadow-card); padding: 10px 16px;
animation: rise 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.topbar.arama-acik .search-mini input { width: auto; flex: 1; min-width: 0; font-size: 16px; }
.topbar.arama-acik .search-mini kbd { display: none; }
.topbar.arama-acik .search-drop { left: 0; right: 0; width: auto; }
.topbar.arama-acik #arama-ac { color: var(--accent); border-color: var(--accent-dim); }
}
.topnav a { white-space: nowrap; }
@media (min-width: 821px) and (max-width: 1279px) {
.topbar { gap: 18px; padding-inline: 20px; }
.topnav a { padding: 8px 11px; }
.topbar-actions { gap: 10px; }
.user-chip { padding: 4px 12px 4px 4px; }
.user-chip-link > span:not(.user-avatar) { display: none; }
}
@media (min-width: 821px) and (max-width: 1100px) {
#arama-ac { display: inline-flex; }
.search-mini { display: none; }
.topbar.arama-acik .search-mini {
display: flex; position: absolute; top: calc(100% + 8px); right: 20px; width: min(380px, calc(100vw - 40px)); z-index: 61;
background: var(--bg-2); box-shadow: var(--shadow-card); padding: 10px 16px;
animation: rise 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.topbar.arama-acik .search-mini input { width: auto; flex: 1; min-width: 0; }
.topbar.arama-acik .search-drop { left: 0; right: 0; width: auto; }
.topbar.arama-acik #arama-ac { color: var(--accent); border-color: var(--accent-dim); }
}
@media (max-width: 820px) {
#logout-btn, .user-chip-link > span:not(.user-avatar) { display: none; }
.user-chip { padding: 3px; }
}
@media (max-width: 560px), (min-width: 821px) and (max-width: 1100px) {
.verify-badge { width: 38px; padding: 0; justify-content: center; }
.verify-badge .verify-yazi { display: none; }
}
.topbar-actions, #auth-area { min-width: 0; }
@media (max-width: 400px) {
.footer-brand .logo-text { display: inline; }
}
@media (min-width: 821px) {
#lfg-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (min-width: 600px) and (max-width: 820px) {
.lfg-grid, .lfg-grid.home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.browse-grid .card-body { padding: 10px 10px 12px; gap: 7px; }
.browse-grid .card-title { font-size: 14px; line-height: 1.25; -webkit-line-clamp: 2; }
.browse-grid .card-genres { font-size: 11.5px; margin-top: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-grid .cover-badges { max-width: calc(100% - 50px); flex-wrap: wrap; }
.browse-grid .platform-dots { display: none; }
.browse-grid .cover-badges { top: 6px; left: 6px; gap: 4px; }
.browse-grid .badge { font-size: 10.5px; padding: 2px 7px; }
.browse-grid .fav-btn { transform: scale(0.85); transform-origin: top right; }
}
@media (max-width: 560px) {
.friend-actions { width: auto; margin-left: auto; }
.friend-who { flex: 1 1 auto; }
.panel-oneriler .friend-row { flex-wrap: nowrap; }
.panel-oneriler .friend-who { flex: 1 1 0; }
.panel-oneriler .friend-ad small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row:has(.dm-badge) { flex-wrap: nowrap; }
.friend-row:has(.dm-badge) .friend-who { flex: 1 1 0; }
.friend-row:has(.dm-badge) .friend-ad small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-who .dm-badge { flex-shrink: 0; }
}
.hesap-degis { margin-top: 2px; }
.hesap-degis > summary {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
font-size: 13.5px; font-weight: 700; color: var(--accent); padding: 4px 0;
transition: color 0.15s;
}
.hesap-degis > summary::-webkit-details-marker { display: none; }
.hesap-degis > summary::after {
content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px); transition: transform 0.2s;
}
.hesap-degis[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.hesap-degis > summary:hover { color: var(--text); }
.hesap-degis[open] > form { margin-top: 10px; animation: rise 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.modal .btn-row .btn-sm { white-space: normal; flex: 1 1 auto; }
.danger-zone.btn-row .btn { flex: 1 1 0; }
.danger-zone .btn-danger { color: var(--coral); }
.danger-zone .btn-danger:hover { background: color-mix(in srgb, var(--coral) 10%, transparent); }
@media (max-width: 820px) {
.footer-bottom { text-align: left; padding: 16px 84px 18px 20px; }
}
@media (max-width: 560px) {
.user-chip-link span.user-avatar { display: grid; }
}
.pill-players, .score-pill { font-variant-numeric: normal; }
.lfg-contact > span { color: var(--dim); font-size: 12.5px; font-weight: 600; }
@media (max-width: 820px) {
.lfg-top + .browse-layout { margin-top: 6px; }
}
@media (max-width: 560px) {
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
}
.report-target-tag { display: inline-block; }
.chat-row time, .chat-bubble time, .chat-meta time { font-family: var(--font-body); letter-spacing: normal; }
@media (max-width: 820px) {
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select) { font-size: 16px; }
}