/* ============ DEĞİŞKENLER ============ */
:root {
    --bg: #050505;
    --bg-deep: #000000;
    --bg-elevated: #121212;
    --bg-card: #161616;
    --bg-hover: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.10);
    --border-light: rgba(255, 255, 255, 0.18);
    --text: #f5f5f5;
    --text-muted: #a8a8a8;
    --text-faint: #6e6e6e;

    --accent: #3ee7ff;
    --accent-2: #7af0ff;
    --accent-deep: #14b8d4;
    --accent-glow: rgba(62, 231, 255, 0.28);
    --accent-glow-strong: rgba(62, 231, 255, 0.5);

    --gold: #ffc857;
    --gold-2: #ffb020;
    --gold-glow: rgba(255, 200, 87, 0.28);

    --violet: #8b7bff;
    --violet-glow: rgba(139, 123, 255, 0.25);

    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.13);
    --danger: #ff5f6d;
    --danger-bg: rgba(255, 95, 109, 0.13);
    --warning: #ffc857;
    --warning-bg: rgba(255, 200, 87, 0.13);
    --info: #4fd0ff;
    --info-bg: rgba(79, 208, 255, 0.13);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 30px;

    --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 12px 38px rgba(0, 0, 0, 0.55), 0 0 30px var(--accent-glow);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }

::selection { background: var(--accent); color: #111; }
html[data-theme="light"] ::selection { color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.gradient-text {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============ ARKA PLAN DEKORU ============ */
.bg-decor {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 1px 1px, rgba(62, 231, 255, 0.07) 1px, transparent 0) 0 0 / 38px 38px,
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(62, 231, 255, 0.14), transparent 60%),
        linear-gradient(180deg, var(--bg-deep), var(--bg) 40%);
    animation: bgGridDrift 36s linear infinite;
}
@keyframes bgGridDrift {
    to {
        background-position: 38px 38px, 0 0, 0 0;
    }
}
/* Soft blob — CSS filter:blur YOK (GPU’yu her frame yakıyordu) */
.bg-decor::before, .bg-decor::after {
    content: '';
    position: absolute;
    width: min(72vw, 640px);
    height: min(72vw, 640px);
    border-radius: 50%;
    pointer-events: none;
}
.bg-decor::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 55%, transparent) 0%, transparent 70%);
    opacity: 0.55;
    top: -18%;
    left: -12%;
    animation: auroraA 26s var(--ease) infinite alternate;
}
.bg-decor::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--violet) 50%, transparent) 0%, transparent 70%);
    opacity: 0.42;
    bottom: -20%;
    right: -14%;
    animation: auroraB 32s var(--ease) infinite alternate;
}
@keyframes auroraA {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(80px, 60px, 0) scale(1.08); }
}
@keyframes auroraB {
    0%   { transform: translate3d(0, 0, 0) scale(1.06); }
    100% { transform: translate3d(-90px, -50px, 0) scale(1); }
}

/* ============ AUTH SAYFALARI ============ */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Login/kayıt: animasyon + cam blur kapalı — donma burada başlıyordu */
body:has(.auth-shell) .bg-decor,
body:has(.auth-shell) .bg-decor::before,
body:has(.auth-shell) .bg-decor::after {
    animation: none !important;
}
body:has(.auth-shell) .brand-cursor {
    animation: none;
    opacity: 1;
}
body:has(.auth-shell) .auth-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--glass), linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 42px 38px;
    box-shadow: var(--shadow-lg), 0 0 40px var(--accent-glow), var(--shadow-inset);
    backdrop-filter: blur(20px);
    animation: cardIn 0.5s var(--ease) both;
}

body.auth-login {
    background: var(--bg-deep);
}
body.auth-login .bg-decor {
    background: #000;
}
body.auth-login .bg-decor::before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    opacity: 0.8;
    animation: none;
    background: url('/assets/login-bg.jpg') center / cover no-repeat;
    filter: grayscale(1) contrast(1.08);
}
body.auth-login .bg-decor::after {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    opacity: 1;
    animation: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.64) 100%);
}
body.auth-login .brand-cursor {
    animation: brandCursorBlink 0.85s steps(1) infinite;
    opacity: 1;
}
body.auth-login .auth-shell {
    padding: 28px 18px;
}
body.auth-login .auth-split {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    background: var(--glass), linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 40px var(--accent-glow), var(--shadow-inset);
}
body.auth-login .auth-split-form {
    padding: 40px 42px 32px;
}
body.auth-login .auth-split-form .brand {
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 22px;
    gap: 12px;
}
body.auth-login .brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.auth-login .brand-tagline {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    min-height: 1.2em;
}
body.auth-login .auth-split-form h1 {
    text-align: left;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--text);
    margin-bottom: 6px;
}
body.auth-login .auth-split-form .subtitle {
    text-align: left;
    margin-bottom: 24px;
}
body.auth-login .auth-split-form .auth-footer {
    text-align: left;
}
body.auth-login .btn-primary {
    border-radius: 999px;
}
body.auth-login .password-wrap {
    position: relative;
}
body.auth-login .password-wrap input {
    padding-right: 48px;
}
body.auth-login .password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
body.auth-login .password-toggle:hover {
    color: var(--accent);
    background: var(--bg-hover);
}
body.auth-login .password-toggle .eye-slash {
    display: none;
}
body.auth-login .password-toggle.is-showing .eye-slash {
    display: block;
}
body.auth-login .auth-split-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px;
    background:
        radial-gradient(circle at 50% 45%, var(--accent-glow), transparent 62%),
        linear-gradient(180deg, rgba(14, 24, 26, 0.4), rgba(5, 9, 11, 0.2));
}
body.auth-login .auth-logo-orb {
    width: min(78%, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 35%, var(--accent-2) 0%, var(--accent-deep) 58%, #2a2a2a 100%);
    box-shadow: 0 0 0 10px var(--accent-glow), 0 18px 40px rgba(0, 0, 0, 0.35);
}
body.auth-login .auth-logo-orb img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    background: transparent;
}
@media (max-width: 820px) {
    body.auth-login .auth-split {
        grid-template-columns: 1fr;
    }
    body.auth-login .auth-split-visual {
        order: -1;
        padding: 28px 20px 8px;
    }
    body.auth-login .auth-logo-orb {
        width: min(56%, 220px);
    }
    body.auth-login .auth-split-form {
        padding: 20px 24px 28px;
    }
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
}
.sidebar .brand {
    margin-bottom: 12px;
}
.brand-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 20px var(--accent-glow);
}
.net-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: 0 0 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-shrink: 0;
}
.net-switch-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 8px 6px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.net-switch-btn:hover { color: var(--text); background: var(--bg-hover); }
.net-switch-btn.active {
    background: var(--accent-glow);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
html[data-network="sonoyuncu"] .net-switch-btn.active {
    color: #ff9a4a;
    background: rgba(255, 122, 46, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 122, 46, 0.35);
}

.brand-name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    min-height: 1.2em;
    min-width: 7.5ch;
}
.brand-type {
    background: linear-gradient(180deg, #fff 10%, #9a9a9a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}
.brand-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    border-radius: 1px;
    background: var(--accent);
    vertical-align: -0.12em;
    animation: brandCursorBlink 0.85s steps(1) infinite;
    flex-shrink: 0;
}
@keyframes brandCursorBlink {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-cursor { animation: none; opacity: 1; }
}

.auth-card h1 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}
.auth-card .subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 28px;
}

.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ============ FORM / MESAJ KUTULARI (tema uyumlu) ============ */
:root {
    --input-bg: color-mix(in srgb, var(--bg-elevated) 92%, var(--bg-card));
    --input-bg-hover: color-mix(in srgb, var(--bg-elevated) 80%, var(--accent) 6%);
    --input-border: var(--border-light);
    --input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color-scheme: dark;
}
html[data-theme="light"] {
    --input-bg: color-mix(in srgb, var(--bg-elevated) 88%, #fff 12%);
    --input-bg-hover: color-mix(in srgb, var(--bg-elevated) 70%, var(--accent) 8%);
    --input-border: rgba(40, 50, 70, 0.18);
    --input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    color-scheme: light;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
textarea,
select {
    width: 100%;
    max-width: 100%;
    padding: 11px 14px;
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm);
    color: var(--text) !important;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: var(--input-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    caret-color: var(--accent);
}
textarea {
    resize: vertical;
    min-height: 84px;
    line-height: 1.45;
}
select {
    padding-right: 36px;
    cursor: pointer;
    background-color: var(--input-bg) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px) !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}
select:hover,
select:focus {
    background-color: var(--input-bg-hover) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px) !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}
select option,
select optgroup {
    background: var(--bg-card);
    color: var(--text);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):hover,
textarea:hover,
select:hover {
    background: var(--input-bg-hover) !important;
    background-color: var(--input-bg-hover) !important;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--input-border)) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow), var(--input-shadow) !important;
    background: var(--input-bg) !important;
}
input::placeholder,
textarea::placeholder {
    color: var(--text-faint) !important;
    opacity: 1;
}
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Chrome autofill beyazını ez */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--accent);
    box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    transition: background-color 99999s ease-out;
}

/* Dosya seçici */
input[type="file"] {
    padding: 10px 12px !important;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card) 80%, var(--accent) 8%);
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
input[type="file"]::file-selector-button:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

/* Arama / number gibi dar alanlar width:100% istemeyebilir */
.pack-toolbar input,
.skin-page-jump input,
.sidebar-search input,
.theme-switcher select,
.theme-select-inline,
.share-link-row input,
.share-add-row input,
.key-input-row input,
.cr-search-row input,
.slot-stake-wrap input {
    width: auto;
}
.pack-toolbar input[type="search"],
.share-link-row input,
.share-add-row input,
.cr-search-row input,
.key-input-row input {
    width: 100%;
}
.theme-switcher select,
.theme-select-inline {
    width: 100%;
}
.theme-select-inline { width: auto; min-width: 110px; }

.field input,
.field select,
.field textarea {
    width: 100%;
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--text-muted);
}
.auth-footer a { color: var(--accent-2); font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }

/* ============ BUTONLAR ============ */
.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.18s var(--ease), filter 0.18s, box-shadow 0.18s, background 0.18s;
    white-space: nowrap;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.6s var(--ease);
    pointer-events: none;
}
.btn:hover:not(:disabled)::after { transform: translateX(120%); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-deep) 100%);
    color: #111;
    box-shadow: 0 6px 22px var(--accent-glow), var(--shadow-inset);
    font-weight: 800;
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px var(--accent-glow-strong);
}

.btn-block { width: 100%; }

.btn-secondary {
    background: var(--glass);
    color: var(--text);
    border: 1px solid var(--border-light);
    backdrop-filter: blur(10px);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(255, 95, 109, 0.28);
}
.btn-danger:hover:not(:disabled) {
    background: rgba(255, 95, 109, 0.22);
    border-color: var(--danger);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm); }

/* ============ UYARI / TOAST ============ */
.alert {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}
.alert-error { background: var(--danger-bg); color: #ff8a92; border: 1px solid rgba(248, 95, 106, 0.25); }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(52, 211, 153, 0.25); }
.alert-info { background: var(--info-bg); color: var(--info); border: 1px solid rgba(79, 176, 255, 0.25); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(245, 185, 66, 0.25); }

.toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2400;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 28px));
    pointer-events: none;
}
.sr-toast {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-light);
    background: var(--glass), linear-gradient(165deg, var(--bg-card), var(--bg-elevated));
    box-shadow: var(--shadow-lg), var(--shadow-inset);
    backdrop-filter: blur(16px);
    color: var(--text);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.2s var(--ease, ease), transform 0.2s var(--ease, ease);
    pointer-events: auto;
}
.sr-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.sr-toast-bar {
    width: 4px;
    flex-shrink: 0;
    background: var(--accent);
}
.sr-toast-success .sr-toast-bar { background: var(--success); }
.sr-toast-error .sr-toast-bar { background: var(--danger); }
.sr-toast-warning .sr-toast-bar { background: var(--warning); }
.sr-toast-info .sr-toast-bar { background: var(--info); }
.sr-toast-text {
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 600;
}

/* ============ ONAY / GİRDİ DİYALOG ============ */
body.ui-dialog-open { overflow: hidden; }
.ui-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: uiDialogIn 0.18s var(--ease, ease) both;
}
.ui-dialog-root.closing {
    animation: uiDialogOut 0.16s var(--ease, ease) both;
}
.ui-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
    backdrop-filter: blur(7px);
}
.ui-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 22px 22px 18px;
    border-radius: var(--radius-xl, 18px);
    border: 1px solid var(--border-light);
    background: var(--glass), linear-gradient(170deg, var(--bg-card), var(--bg-elevated));
    box-shadow: var(--shadow-lg), var(--shadow-inset);
    backdrop-filter: blur(20px);
    color: var(--text);
}
.ui-dialog-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}
.ui-dialog-msg {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
}
.ui-dialog-field { margin: 14px 0 0; }
.ui-dialog-input {
    width: 100%;
}
.ui-dialog-input.ui-dialog-input-err {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent) !important;
}
.ui-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
@keyframes uiDialogIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes uiDialogOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ UYGULAMA KABUĞU (Sidebar + İçerik) ============ */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 254px;
    flex-shrink: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-elevated) 94%, transparent),
        color-mix(in srgb, var(--bg-deep) 96%, transparent)
    );
    border-right: 1px solid var(--border);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    padding: 22px 16px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.sidebar .brand { justify-content: flex-start; margin-bottom: 18px; padding-left: 4px; flex-shrink: 0; }

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
    margin-bottom: 8px;
}

.sidebar-bottom {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-deep) 88%, transparent) 30%);
}

.nav-group {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.nav-group-last {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.nav-section-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 700;
    margin: 10px 10px 6px;
}
.nav-group:first-child .nav-section-label {
    margin-top: 2px;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    transition: background 0.2s var(--ease), color 0.2s, transform 0.2s var(--ease);
    cursor: pointer;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text); transform: translateX(3px); }
.nav-link.active {
    background: linear-gradient(100deg, var(--accent-glow), transparent);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow-strong);
}
.nav-link .icon { font-size: 16px; width: 18px; text-align: center; }
.nav-link .nav-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: var(--nav-ico) center / contain no-repeat;
    mask: var(--nav-ico) center / contain no-repeat;
}
.nav-link .nav-ico-svg {
    background: none;
    -webkit-mask: none;
    mask: none;
}
.nav-link .nav-ico-svg svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.sidebar-footer {
    margin-top: 0;
    border-top: 0;
    padding-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #05130f;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-info .name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info .role { font-size: 11.5px; color: var(--text-muted); }

.main {
    flex: 1;
    min-width: 0;
    padding: 32px 40px 60px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header h1 {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.035em;
    background: linear-gradient(120deg, var(--text) 20%, var(--accent) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-header .subtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

/* ============ KART ============ */
.card {
    position: relative;
    background:
        var(--glass),
        linear-gradient(170deg, var(--bg-card), var(--bg-elevated));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow), var(--shadow-inset);
    backdrop-filter: blur(14px);
}
.card + .card { margin-top: 20px; }
.card-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.card-desc { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.55; }

/* ============ TAKİP KARTLARI (Discord embed hissi) ============ */
.tracker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.tracker-card {
    background: var(--glass), linear-gradient(165deg, var(--bg-card), var(--bg-elevated));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow), var(--shadow-inset);
    backdrop-filter: blur(12px);
    transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
    position: relative;
    overflow: hidden;
}
.tracker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--gold), transparent);
    opacity: 0.55;
}
.tracker-card::after {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    pointer-events: none;
    transition: opacity 0.25s;
}
.tracker-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.tracker-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
    position: relative;
}
.tracker-card-head .head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tracker-card-head h3 { font-size: 16.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracker-card-head .owner-tag {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}

.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--border-light);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 14px var(--accent-glow);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-elevated);
}
.player-avatar-lg {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: 2px solid var(--border-light);
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 22px var(--accent-glow);
    object-fit: cover;
    background: var(--bg-elevated);
}

.game-stat {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--game-accent, var(--gold)) 9%, transparent),
        rgba(0, 0, 0, 0.22));
    border: 1px solid var(--border);
    border-left: 3px solid var(--game-accent, var(--gold));
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    margin-bottom: 9px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s var(--ease);
}
.game-stat:hover {
    border-color: color-mix(in srgb, var(--game-accent, var(--gold)) 45%, transparent);
    border-left-color: var(--game-accent, var(--gold));
    transform: translateX(2px);
}
.game-stat::after {
    content: '';
    position: absolute;
    right: -24px;
    top: -24px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, color-mix(in srgb, var(--game-accent, var(--gold)) 24%, transparent), transparent 70%);
    pointer-events: none;
}
.game-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 8px;
}
.game-stat-head .game-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--game-accent, var(--gold));
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.game-stat-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.game-stat-icon.inline {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    vertical-align: -3px;
    display: inline-block;
}
.game-stat-value {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent);
    text-shadow: 0 0 18px var(--accent-glow);
}
.game-stat-sub { font-size: 12px; color: var(--text-muted); }
.game-stat-time { font-size: 11px; color: var(--text-faint); }

.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }
.trend-flat { color: var(--text-muted); }

.tracker-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.tracker-card-foot .meta { font-size: 11.5px; color: var(--text-faint); }
.tracker-card-foot .actions { display: flex; gap: 6px; }

.empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, 0.16);
}
.empty-state .emoji {
    font-size: 46px;
    margin-bottom: 14px;
    display: block;
    filter: drop-shadow(0 6px 16px var(--accent-glow));
    animation: floaty 3.4s ease-in-out infinite;
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.empty-state h3 { font-size: 16px; color: var(--text); margin-bottom: 6px; }

/* ============ AKTİVASYON KİLİDİ ============ */
.activation-card {
    max-width: 480px;
    margin: 40px auto;
    text-align: center;
    padding: 36px 32px;
}
.activation-card .emoji { font-size: 44px; margin-bottom: 10px; display: block; }
.activation-card h2 { font-size: 19px; margin-bottom: 8px; }
.activation-card p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; line-height: 1.6; }
.key-input-row { display: flex; gap: 8px; }
.key-input-row input { text-transform: uppercase; letter-spacing: 0.05em; text-align: center; font-weight: 700; }

/* ============ FORM (Yeni takip) ============ */
.game-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 6px;
}
.game-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.game-checkbox:hover { border-color: var(--border-light); }
.game-checkbox.checked { border-color: var(--accent); background: var(--accent-glow); }
.game-checkbox input { accent-color: var(--accent); }
.game-checkbox-visual {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 12px 14px;
    min-height: 150px;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.25));
    transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.game-checkbox-visual::before {
    content: '';
    position: absolute;
    inset: -40% 50% 50% -40%;
    background: radial-gradient(circle, color-mix(in srgb, var(--game-accent, var(--accent)) 45%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.game-checkbox-visual:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--game-accent, var(--accent)) 50%, transparent);
}
.game-checkbox-visual:hover::before { opacity: 0.5; }
.game-checkbox-visual input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.game-checkbox-visual .game-check-icon {
    width: 66px;
    height: 66px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s var(--ease), filter 0.3s;
    position: relative;
}
.game-checkbox-visual span {
    position: relative;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.game-checkbox-visual:hover .game-check-icon {
    transform: scale(1.12) translateY(-2px);
    filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--game-accent, var(--accent)) 55%, transparent));
}
.game-checkbox-visual.checked {
    border-color: var(--game-accent, var(--accent));
    background: linear-gradient(170deg,
        color-mix(in srgb, var(--game-accent, var(--accent)) 22%, transparent),
        rgba(0, 0, 0, 0.28));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--game-accent, var(--accent)) 45%, transparent),
                0 12px 30px color-mix(in srgb, var(--game-accent, var(--accent)) 25%, transparent);
}
.game-checkbox-visual.checked::after {
    content: '✓';
    position: absolute;
    top: 9px;
    right: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    color: #04120e;
    background: var(--game-accent, var(--accent));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--game-accent, var(--accent)) 60%, transparent);
}
.game-checkbox-visual.checked .game-check-icon { transform: scale(1.08); }
.game-checkbox-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.hint { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

/* ============ SEKMELER + TABLOLAR (Admin) ============ */
.tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 22px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--glass);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-inset);
    flex-wrap: wrap;
}
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius-xl);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s, background 0.25s var(--ease), box-shadow 0.25s;
}
.tab-btn .tab-icon { font-size: 14px; }
.tab-btn:hover { color: var(--text); background: var(--bg-hover); }
.tab-btn.active {
    color: #04120e;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 20px var(--accent-glow);
}

.panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--glass), linear-gradient(170deg, var(--bg-card), var(--bg-elevated));
    box-shadow: var(--shadow), var(--shadow-inset);
    backdrop-filter: blur(14px);
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.panel-title { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.panel-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.panel-search {
    min-width: 200px;
    padding: 9px 14px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
.panel-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.panel-note {
    padding: 14px 22px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    border-bottom: 1px solid var(--border);
}
.panel-note code {
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--accent-2);
}

.table-wrap {
    overflow-x: auto;
}
.card .table-wrap, .history-section .table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
    text-align: left;
    padding: 13px 18px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-faint);
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    position: sticky;
    top: 0;
}
tbody td {
    padding: 13px 18px;
    border-top: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: middle;
}
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--bg-hover); }
tbody tr.row-banned { background: rgba(255, 95, 109, 0.05); }
tbody tr.row-banned:hover { background: rgba(255, 95, 109, 0.1); }

.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: #04120e;
    background: linear-gradient(135deg, var(--accent), var(--gold));
}
.cell-head {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    object-fit: cover;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}
.cell-user-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cell-user-text strong { font-size: 13.5px; font-weight: 700; }
.cell-user-text small { font-size: 11px; color: var(--text-faint); }
.cell-muted { color: var(--text-muted); font-size: 12.5px; }
.cell-empty { text-align: center; color: var(--text-faint); padding: 34px 18px !important; }
.cell-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    font-weight: 800;
    font-size: 12.5px;
}
.cell-games { display: flex; flex-wrap: wrap; gap: 5px; max-width: 320px; white-space: normal; }
.key-code {
    padding: 4px 10px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-light);
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 12.5px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-admin { background: var(--accent-glow); color: var(--accent-2); }
.badge-user { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-light); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: var(--info-bg); color: var(--info); }

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}
.stat-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--glass), linear-gradient(170deg, var(--bg-card), var(--bg-elevated));
    box-shadow: var(--shadow), var(--shadow-inset);
    backdrop-filter: blur(14px);
    transition: transform 0.25s var(--ease), border-color 0.25s;
}
.stat-tile:hover { transform: translateY(-3px); border-color: var(--border-light); }
.stat-tile::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tile-tone, var(--accent-glow)), transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}
.stat-tile-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-light);
    position: relative;
}
.stat-tile-body { position: relative; min-width: 0; }
.stat-tile .num {
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.1;
}
.stat-tile .label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

.stat-tile.tone-accent  { --tile-tone: color-mix(in srgb, var(--accent) 30%, transparent); }
.stat-tile.tone-accent .num { color: var(--accent); }
.stat-tile.tone-success { --tile-tone: rgba(52, 211, 153, 0.3); }
.stat-tile.tone-success .num { color: var(--success); }
.stat-tile.tone-info    { --tile-tone: rgba(79, 208, 255, 0.3); }
.stat-tile.tone-info .num { color: var(--info); }
.stat-tile.tone-danger  { --tile-tone: rgba(255, 95, 109, 0.3); }
.stat-tile.tone-danger .num { color: var(--danger); }
.stat-tile.tone-gold    { --tile-tone: rgba(255, 200, 87, 0.3); }
.stat-tile.tone-gold .num { color: var(--gold); }

/* ============ MODAL ============ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 7, 10, 0.65);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}
.modal {
    background: var(--glass), linear-gradient(170deg, var(--bg-card), var(--bg-elevated));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 28px;
    width: 100%;
    max-width: 460px;
    box-shadow: var(--shadow-lg), var(--shadow-inset);
    backdrop-filter: blur(20px);
    animation: cardIn 0.3s var(--ease) both;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.modal-head h3 { font-size: 17px; font-weight: 800; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.admin-limit-modal { max-width: 520px; }
.admin-wh-list {
    display: grid;
    gap: 6px;
    margin: 6px 0 4px;
    max-height: 220px;
    overflow: auto;
}
.admin-wh-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.admin-limit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.admin-limit-grid .field { margin: 0; }
.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.checkbox-row input { width: auto; margin: 0; }

/* ============ YARDIMCI ============ */
.loading-spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,0.25);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    color: var(--text-muted);
    gap: 10px;
}

.mobile-topbar { display: none; }

@media (max-width: 860px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        z-index: 90;
        transition: left 0.2s ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { left: 0; }
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 80;
    }
    .main { padding: 20px; }
}

/* ============ GERİ SAYIM ROZETİ / PANEL ============ */
.countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 18px var(--accent-glow);
    white-space: nowrap;
}
.countdown-badge .dot,
.countdown-panel .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent-glow);
    animation: pulseDot 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
.countdown-badge .zaman { color: var(--gold); font-variant-numeric: tabular-nums; }
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.header-actions {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}
.countdown-panel {
    min-width: 220px;
    padding: 12px 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, transparent), var(--bg-card) 45%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: 0 0 22px var(--accent-glow);
}
.countdown-panel.refreshing {
    border-color: var(--gold);
    box-shadow: 0 0 22px var(--gold-glow);
}
.countdown-panel-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.countdown-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}
.countdown-zaman {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.countdown-bar {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden;
}
.countdown-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: 999px;
    transition: width 0.9s linear;
}
.countdown-hint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-faint);
}

/* ============ PROFİL HERO (Panelim) ============ */
.profile-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 28px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
        linear-gradient(225deg, rgba(139,123,255,0.1), transparent 45%),
        linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
    box-shadow: var(--shadow), var(--shadow-inset);
    backdrop-filter: blur(16px);
}
.follow-modal-body.ayar-modal-body {
    overflow: auto;
    padding: 0;
}
.ayar-form textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    font-family: inherit;
}
.ayar-form label .hint {
    font-weight: 600;
    float: right;
}
.profile-hero-ayar {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}
.profile-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--violet), var(--gold), transparent);
    opacity: 0.6;
}
.profile-hero-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -40px;
    top: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    pointer-events: none;
}
.profile-hero-main {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    position: relative;
    flex-wrap: wrap;
}
.profile-avatar-xl {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    color: #05130f;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    box-shadow: 0 8px 28px var(--accent-glow);
    flex-shrink: 0;
}
.profile-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 4px;
}
.profile-name {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.profile-meta { display: grid; gap: 6px; }
.profile-meta-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
}
.profile-meta-row .meta-key {
    min-width: 72px;
    color: var(--text-faint);
    font-weight: 600;
}
.profile-meta-row .meta-val { color: var(--text); font-weight: 600; }
.profile-meta-row .meta-val.muted { color: var(--text-muted); font-weight: 500; }

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    position: relative;
}
.profile-stat {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.18);
}
.profile-stat .num {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--accent);
}
.profile-stat .num-unit {
    font-size: 13px;
    font-weight: 700;
    margin-left: 2px;
    color: var(--text-muted);
}
.profile-stat .label {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}
.profile-players {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    position: relative;
}
.profile-player-chip {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-2);
}
.profile-player-chip.more { color: var(--gold); background: var(--warning-bg); }

.game-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--game-accent, var(--accent)) 35%, var(--border));
    background: color-mix(in srgb, var(--game-accent, var(--accent)) 12%, transparent);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
}
.game-badge-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
.game-badge-tiny { padding: 3px 9px 3px 4px; font-size: 11px; }
.game-badge-tiny .game-badge-icon { width: 17px; height: 17px; border-radius: 5px; }
.player-list-games {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.history-game-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 700px) {
    .profile-stats { grid-template-columns: 1fr; }
    .countdown-panel { width: 100%; }
    .profile-name { font-size: 22px; }
}

/* ============ KONUK ÜST BARI ============ */
.guest-shell { min-height: 100vh; display: flex; flex-direction: column; }
.guest-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 26px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}
.guest-topbar .brand { margin-bottom: 0; }
.guest-actions { display: flex; gap: 8px; }
.discord-tag { color: var(--info); font-weight: 600; }

/* ============ CRAFTRISE PROFİLİ ============ */
.cr-search-card { max-width: 560px; }
.cr-search-row { display: flex; gap: 8px; }
.cr-search-row input {
    flex: 1;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
}
.cr-search-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.cr-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 26px;
    margin-bottom: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    border-left: 5px solid var(--rank-color, var(--accent));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rank-color, var(--accent)) 18%, transparent), transparent 45%),
        linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
    box-shadow: var(--shadow);
}
.cr-hero-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    right: -60px;
    top: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--rank-color, var(--accent)) 35%, transparent), transparent 70%);
    pointer-events: none;
}
.cr-hero-avatar {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    object-fit: cover;
    border: 2px solid var(--border-light);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 28px color-mix(in srgb, var(--rank-color, var(--accent)) 45%, transparent);
    flex-shrink: 0;
    position: relative;
}
.cr-hero-main { flex: 1; min-width: 240px; position: relative; }
.cr-hero-name {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}
.cr-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cr-rank-badge {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--rank-color, var(--accent));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--rank-color, var(--accent)) 50%, transparent);
}
.cr-social {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border-light);
    background: var(--bg-elevated);
    color: var(--text-muted);
}
.cr-social-discord { color: #8b9dff; border-color: #4752c4; }

.cr-tp-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cr-tp-value {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--accent);
    text-shadow: 0 0 22px var(--accent-glow);
}
.cr-tp-value small { font-size: 14px; color: var(--text-muted); font-weight: 700; }
.cr-tp-next { font-size: 12.5px; color: var(--text-muted); }
.cr-progress {
    height: 7px;
    background: rgba(255,255,255,0.07);
    border-radius: 999px;
    margin-top: 10px;
    overflow: hidden;
    max-width: 420px;
}
.cr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: 999px;
}
.cr-progress-label { margin-top: 5px; font-size: 11.5px; color: var(--text-faint); }
.cr-source-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-2);
}
.cr-source-link:hover { text-decoration: underline; }

.cr-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.cr-game-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: transform 0.15s, border-color 0.15s;
}
.cr-game-card:hover { transform: translateY(-2px); border-color: var(--border-light); }
.cr-game-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cr-game-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s var(--ease);
}
.cr-game-card:hover .cr-game-icon { transform: scale(1.1) rotate(-4deg); }
.cr-game-name {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--gold);
    text-transform: uppercase;
}
.cr-game-metrics { display: grid; gap: 5px; }
.cr-game-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
}
.cr-game-metric span { color: var(--text-muted); }
.cr-game-metric b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }

.cr-empty-games { margin-top: 18px; }
.cr-empty-games summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.cr-empty-games summary:hover { color: var(--accent-2); }

/* ============ PROFİL PAYLAŞIMI ============ */
.share-card { margin-top: 20px; }
.share-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.share-option {
    text-align: left;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.share-option strong { display: block; font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.share-option span { font-size: 12px; color: var(--text-muted); }
.share-option:hover { border-color: var(--border-light); }
.share-option.active {
    border-color: var(--accent);
    background: var(--accent-glow);
}
.share-option.active strong { color: var(--accent); }

.share-link-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.share-link-row input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--accent-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}
.share-viewers { margin-top: 20px; }
.share-viewers > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.share-add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.share-add-row input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
}
.share-add-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.viewer-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.viewer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: var(--bg-elevated);
    font-size: 12.5px;
    font-weight: 700;
}
.viewer-remove {
    border: none;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    font-family: inherit;
}
.viewer-remove:hover { color: var(--danger); }
.profile-bio {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 520px;
}

/* ============ YORUMLAR ============ */
.comments-card { margin-top: 20px; }
.comment-form { display: flex; gap: 12px; margin-bottom: 20px; }
.comment-form-main { flex: 1; }
.comment-form textarea {
    width: 100%;
    font-size: 13.5px;
    min-height: 62px;
}
.comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}
.comment-counter { font-size: 11.5px; color: var(--text-faint); }
.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 15px;
    color: #05130f;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    flex-shrink: 0;
    overflow: hidden;
}
.comment-login-note {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-light);
    color: var(--text-muted);
    font-size: 13.5px;
    margin-bottom: 18px;
}
.comment-login-note a { color: var(--accent-2); font-weight: 700; }
.comment-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.comment-body { flex: 1; min-width: 0; }
.comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.comment-head strong { font-size: 13.5px; font-weight: 800; }
.comment-head a,
.announce-author,
a.owner-card {
    color: inherit;
    text-decoration: none;
}
.comment-head a:hover,
.announce-author:hover,
a.owner-card:hover .owner-name {
    color: var(--accent);
}
a.comment-avatar-link {
    color: inherit;
    flex-shrink: 0;
}
.comment-time { font-size: 11.5px; color: var(--text-faint); }
.comment-body p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
    word-break: break-word;
}
.comment-delete {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}
.comment-delete:hover { color: var(--danger); }
.comment-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
}

@media (max-width: 640px) {
    .cr-hero { padding: 20px; }
    .cr-hero-name { font-size: 24px; }
    .cr-hero-avatar { width: 72px; height: 72px; }
    .share-link-row .btn { flex: 1; }
}

/* ============ KARŞILAŞTIRMA SAYFASI ============ */
.compare-form {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 12px;
    align-items: end;
}
.compare-form .field { margin-bottom: 0; }
@media (max-width: 760px) {
    .compare-form { grid-template-columns: 1fr; }
}

.compare-vs-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    color: var(--gold);
    padding-bottom: 11px;
}

.compare-result-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 24px;
}
@media (max-width: 760px) {
    .compare-result-grid { grid-template-columns: 1fr; }
}

.compare-player-card {
    background: var(--glass), linear-gradient(165deg, var(--bg-card), var(--bg-elevated));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.compare-player-card.kazanan {
    border-color: rgba(255, 200, 87, 0.6);
    box-shadow: 0 0 0 1px var(--gold-glow), 0 0 36px var(--gold-glow);
}
.compare-player-card.kazanan::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.compare-player-card.kazanan .player-avatar-lg {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 26px var(--gold-glow);
}
.compare-player-card .isim { font-size: 17px; font-weight: 800; margin: 12px 0 4px; }
.compare-player-card .deger { font-size: 30px; font-weight: 900; color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); margin: 10px 0 2px; }
.compare-player-card .alt-deger { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.compare-vs-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.compare-vs-mid .vs-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #05130f;
    font-size: 14px;
    box-shadow: 0 0 22px var(--accent-glow);
}
.compare-fark { font-size: 12px; color: var(--text-muted); text-align: center; }


/* ============ OYUNCULAR / DETAY ============ */
.player-add-card { max-width: 760px; }
.player-list { display:flex; flex-direction:column; gap:11px; }
.player-list-item {
    position: relative;
    overflow: hidden;
    display:flex; align-items:center; gap:15px; padding:16px 18px;
    background: var(--glass), linear-gradient(165deg,var(--bg-card),var(--bg-elevated));
    border:1px solid var(--border); border-radius:var(--radius-lg);
    box-shadow: var(--shadow-inset);
    backdrop-filter: blur(12px);
    transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.player-list-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), var(--gold));
    opacity: 0;
    transition: opacity 0.25s;
}
.player-list-item:hover {
    transform:translateY(-3px);
    border-color:color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow:var(--shadow-glow);
}
.player-list-item:hover::before { opacity: 1; }
.player-list-item:hover .player-list-arrow { transform: translateX(4px); color: var(--accent); }
.player-list-arrow { transition: transform 0.25s var(--ease), color 0.25s; }
.player-list-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.player-list-main strong { font-size:15px; }
.player-list-main span { font-size:12px; color:var(--text-muted); }
.player-list-stat { text-align:right; min-width:90px; }
.player-list-stat small { display:block; color:var(--text-faint); font-size:10px; }
.player-list-stat b { font-size:14px; color:var(--accent); }
.player-list-arrow { font-size:26px; color:var(--text-faint); }
.player-detail-title { display:flex; align-items:center; gap:14px; }
.player-detail-title .player-avatar-lg { flex-shrink:0; }
.history-section { margin-top:20px; }
.history-section:first-child { margin-top:0; }
.history-section-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.history-section-head strong { font-size:14px; }
.history-section-head span { color:var(--text-faint); font-size:11px; }
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th, .data-table td { padding:11px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.data-table th { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.data-table td { color:var(--text); }
.data-table tr:last-child td { border-bottom:0; }
.pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:14px; }
.page-btn {
    min-width:34px; height:34px; border:1px solid var(--border); background:var(--bg-elevated);
    color:var(--text-muted); border-radius:8px; cursor:pointer; font-weight:700;
}
.page-btn:hover, .page-btn.active { border-color:var(--accent); color:var(--accent); background:var(--bg-hover); }
.page-dots { color:var(--text-faint); padding:0 4px; }
/* ============ GRAFİKLER ============ */
.chart-block {
    --chart-accent: var(--accent);
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.chart-block:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.chart-title { display: flex; align-items: center; gap: 10px; }
.chart-title strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.chart-title-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}
.chart-period {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
}

.chart-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.chart-summary-item {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.26);
}
.chart-summary-item span {
    display: block;
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 600;
    margin-bottom: 3px;
}
.chart-summary-item b {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.chart-summary-item b.up { color: var(--success); }
.chart-summary-item b small {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    margin-left: 3px;
}

.chart-frame {
    position: relative;
    padding: 18px 14px 10px 46px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(to top, color-mix(in srgb, var(--chart-accent) 8%, transparent), transparent 65%),
        rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.chart-grid {
    position: absolute;
    inset: 18px 14px 34px 46px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.chart-grid span {
    position: relative;
    display: block;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.chart-grid span::before {
    content: attr(data-v);
    position: absolute;
    left: -40px;
    top: -7px;
    width: 34px;
    text-align: right;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.bar-chart {
    position: relative;
    height: 220px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 2px;
}
.bar-chart::-webkit-scrollbar { height: 6px; }

.chart-col {
    position: relative;
    flex: 1;
    min-width: 34px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}
.chart-bar-wrap {
    width: 100%;
    max-width: 30px;
    height: var(--h);
    display: flex;
    align-items: flex-end;
    animation: barRise 0.65s var(--ease) both;
    animation-delay: var(--delay);
}
@keyframes barRise {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
.chart-bar-wrap { transform-origin: bottom; }
.chart-bar {
    width: 100%;
    height: 100%;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--chart-accent) 35%, transparent),
        var(--chart-accent));
    box-shadow: 0 0 16px color-mix(in srgb, var(--chart-accent) 35%, transparent);
    transition: filter 0.2s, transform 0.2s var(--ease);
}
.chart-col:hover .chart-bar { filter: brightness(1.25); transform: scaleX(1.08); }
.chart-col.peak .chart-bar {
    background: linear-gradient(to top, var(--chart-accent), var(--gold));
    box-shadow: 0 0 22px var(--gold-glow);
}
.chart-label {
    font-size: 9.5px;
    color: var(--text-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.chart-tooltip {
    position: absolute;
    bottom: calc(var(--h) + 24px);
    left: 50%;
    transform: translate(-50%, 6px);
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(4, 10, 12, 0.96);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s var(--ease);
    z-index: 5;
    text-align: center;
    white-space: nowrap;
}
.chart-tooltip b {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: var(--chart-accent);
    font-variant-numeric: tabular-nums;
}
.chart-tooltip span { font-size: 10px; color: var(--text-muted); }
.chart-col:hover .chart-tooltip { opacity: 1; transform: translate(-50%, 0); }

.chart-empty {
    padding: 34px 22px;
    text-align: center;
    color: var(--text-faint);
    font-size: 13px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.18);
}
.compare-actions { display:flex; gap:8px; margin-top:16px; }

/* ============ KAFA ÜSTÜ TAÇ ============ */
.tac-kafa {
    position: relative;
    display: inline-block;
    margin-top: 26px;
}
.tac-taci {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    transition: transform 0.3s var(--ease), filter 0.3s;
}
.tac-ikon {
    font-size: 26px;
    filter: grayscale(1) brightness(0.55);
    transition: filter 0.3s, transform 0.3s var(--ease);
}
.tac-adet {
    margin-top: -3px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(4, 10, 12, 0.92);
    font-size: 11px;
    font-weight: 900;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.tac-taci.dolu .tac-ikon { filter: none; }
.tac-taci.dolu .tac-adet {
    color: var(--gold);
    border-color: rgba(255, 200, 87, 0.5);
}
.tac-taci.lider {
    transform: translateX(-50%) translateY(-3px);
}
.tac-taci.lider .tac-ikon {
    filter: drop-shadow(0 5px 16px var(--gold-glow));
    animation: tacSalinim 2.6s ease-in-out infinite;
}
.tac-taci.lider .tac-adet {
    color: #04120e;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    border-color: transparent;
    box-shadow: 0 4px 16px var(--gold-glow);
}
@keyframes tacSalinim {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-5px) rotate(5deg); }
}

.tac-mini { font-size: 12px; margin-left: 3px; filter: drop-shadow(0 2px 6px var(--gold-glow)); }

/* ============ FARK GÖSTERGELERİ ============ */
.fark-kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
    min-width: 128px;
}
.fark-etiket {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.fark-sayi {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.fark-alt {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fark-kutu.p1 { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.fark-kutu.p1 .fark-sayi { color: var(--accent); }
.fark-kutu.p2 { border-color: rgba(255, 200, 87, 0.4); }
.fark-kutu.p2 .fark-sayi { color: var(--gold); }
.fark-kutu.esit .fark-sayi { color: var(--text-faint); }

.fark-deger {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.fark-deger small {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fark-deger.p1 { color: var(--accent); }
.fark-deger.p2 { color: var(--gold); }
.fark-esit { color: var(--text-faint); font-size: 12px; }

@media (max-width: 620px) {
    .fark-kutu { min-width: 100%; }
    .tac-ikon { font-size: 22px; }
}
.compare-live-head {
    margin-top:22px; padding:14px 18px; border:1px solid var(--border); border-radius:var(--radius);
    background:var(--bg-card); display:flex; align-items:center; justify-content:space-between; gap:15px;
}
.compare-live-head strong { display:inline-block; margin-right:8px; }
.compare-live-head small { display:block; color:var(--text-muted); font-size:11px; margin-top:4px; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 10px var(--success); margin-right:7px; }
.compare-next { color:var(--gold); font-weight:800; font-size:13px; white-space:nowrap; }
.compare-rule { max-width:130px; text-align:center; color:var(--text-muted); font-size:11px; line-height:1.4; }
.compare-baseline { margin-top:10px; color:var(--text-faint); font-size:11px; }
.compare-history-card { margin-top:18px; }
.compare-waiting, .compare-empty { text-align:center; padding:28px 15px; color:var(--text-muted); }
.compare-waiting .emoji, .compare-empty span { display:block; font-size:30px; margin-bottom:8px; }
.compare-waiting strong, .compare-empty strong { display:block; color:var(--text); margin-bottom:5px; }
.compare-waiting small, .compare-empty small { display:block; font-size:12px; }

@media (max-width: 760px) {
    .player-list-stat { display:none; }
    .compare-live-head { align-items:flex-start; flex-direction:column; }
    .compare-actions { flex-direction:column; }
    .compare-actions .btn { width:100%; }
    .player-detail-title h1 { font-size:20px; }
}

/* ============ SIDEBAR ARAMA ============ */
.sidebar-search-wrap {
    position: relative;
    margin: 0 0 10px;
    flex-shrink: 0;
}
.sidebar-search {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.sidebar-search input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sidebar-search input::placeholder {
    color: var(--text-faint);
    opacity: 1;
}
.sidebar-search input:focus {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.sidebar-search button {
    width: 38px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    cursor: pointer;
    font-size: 16px;
}
.sidebar-search button:hover { background: var(--accent-glow); }
.sidebar-search-results {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    z-index: 40;
    display: none;
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-elevated);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    padding: 6px;
}
.sidebar-search-results.open { display: grid; gap: 2px; }
.sidebar-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
}
.sidebar-search-item:hover,
.sidebar-search-item.active { background: var(--bg-hover); }
.sidebar-search-avatar {
    width: 28px; height: 28px; border-radius: 9px;
    overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    font-size: 12px; font-weight: 800;
}
.sidebar-search-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-search-meta { min-width: 0; flex: 1; }
.sidebar-search-name {
    font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-search-sub {
    font-size: 11px; color: var(--text-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-search-empty {
    padding: 10px 12px; font-size: 12px; color: var(--text-muted);
}
.sidebar-search-cr {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 4px;
}

/* ============ ANASAYFA ============ */
.home-main {
    position: relative;
    padding-bottom: 88px !important;
}
.home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
    min-height: calc(100vh - 180px);
}
.home-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 60vh;
}
.announce-board {
    width: min(640px, 100%);
    background: var(--glass), linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--shadow-inset);
    padding: 22px 24px;
}
.announce-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}
.announce-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 800;
    margin-bottom: 4px;
}
.announce-board h1 {
    font-size: 28px;
    letter-spacing: -0.03em;
}
.announce-pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
    animation: pulseDot 1.8s ease-out infinite;
    margin-top: 8px;
}
@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
.announce-list { display: grid; gap: 12px; max-height: 420px; overflow: auto; }
.announce-item {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
}
.announce-item h3 { font-size: 15px; margin-bottom: 6px; }
.announce-item p { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.announce-item time { display:block; margin-top: 8px; font-size: 11px; color: var(--text-faint); }
.announce-empty { text-align:center; color: var(--text-muted); padding: 36px 12px; }

.discord-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, #5865F2, #4752c4);
    color: #fff !important;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 30px rgba(88, 101, 242, 0.35);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.discord-join-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(88, 101, 242, 0.5);
}
.discord-join-icon {
    display: inline-flex;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;
}

.home-leaderboards {
    display: grid;
    gap: 14px;
    align-content: start;
}
.home-lb-block {
    display: grid;
    gap: 10px;
}
.lb-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
}
.lb-card-tall {
    height: min(560px, calc(100vh - 200px));
    max-height: min(560px, calc(100vh - 200px));
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.lb-card-tall .lb-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
}
.discord-side-card {
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(88,101,242,0.18), transparent 55%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 12px;
}
.discord-side-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.discord-side-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #5865F2; color: #fff;
    flex: 0 0 auto;
}
.discord-side-title { font-size: 13px; font-weight: 800; }
.discord-side-sub { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.discord-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.discord-stat {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
}
.discord-stat b { color: var(--text); font-size: 13px; }
.discord-stat-dot {
    width: 8px; height: 8px; border-radius: 50%;
}
.discord-stat-dot.online { background: #23a559; box-shadow: 0 0 0 3px rgba(35,165,89,0.18); }
.discord-stat-dot.members { background: #b5bac1; }
.discord-channel-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 4px;
}
.discord-channel-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.discord-channel-list li:hover { background: var(--bg-hover); color: var(--text); }
.discord-ch-prefix {
    width: 16px; text-align: center; opacity: 0.85; font-weight: 700; font-size: 12px;
}
.discord-ch-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.discord-side-cta { justify-self: stretch; text-align: center; }
.lb-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.lb-title { font-size: 13px; font-weight: 800; }
.lb-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb-row {
    display: grid;
    grid-template-columns: 22px 22px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 5px 6px;
    border-radius: 10px;
}
.lb-row:hover { background: var(--bg-hover); }
.lb-rank {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    text-align: center;
}
.lb-avatar {
    width: 22px; height: 22px; border-radius: 6px;
    image-rendering: pixelated;
}
.lb-name {
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-score {
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.lb-diff {
    margin: -2px 6px 4px 52px;
    font-size: 10px;
    color: var(--text-faint);
}
.lb-empty { color: var(--text-muted); font-size: 12px; padding: 10px; text-align: center; }

.home-marquee {
    position: fixed;
    left: 254px;
    right: 0;
    bottom: 0;
    height: 56px;
    display: flex;
    align-items: stretch;
    background: rgba(5, 12, 14, 0.92);
    border-top: 1px solid var(--border-light);
    backdrop-filter: blur(14px);
    z-index: 40;
    overflow: hidden;
}
.home-marquee-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.home-marquee-track {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.marquee-seq {
    display: flex;
    gap: 10px;
    width: max-content;
    animation: marqueeRTL 40s linear infinite;
    padding-left: 12px;
}
.marquee-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}
.marquee-chip img {
    width: 24px; height: 24px; border-radius: 7px;
    image-rendering: pixelated;
}
.marquee-empty {
    padding: 0 16px;
    color: var(--text-muted);
    font-size: 13px;
}
@keyframes marqueeRTL {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.home-fade-in {
    animation: cardIn 0.45s var(--ease) both;
}

@media (max-width: 1100px) {
    .home-layout { grid-template-columns: 1fr; }
    .lb-card-tall {
        height: min(480px, 70vh);
        max-height: min(480px, 70vh);
    }
    .home-leaderboards {
        grid-template-columns: 1fr;
    }
    .home-marquee { left: 0; }
}
@media (max-width: 700px) {
    .home-leaderboards { grid-template-columns: 1fr; }
    .home-center { min-height: auto; }
    .announce-board h1 { font-size: 22px; }
}

/* ============ VERIFIED / CROWN ============ */
.verified-badge { display:inline-flex; vertical-align:middle; margin-left:6px; line-height:0; }
.verified-inline { color: var(--text); font-weight:900; }
.crown-inline { display:inline; margin-right:4px; }
.badge-info { background: rgba(255,255,255,0.08); color: var(--text); border:1px solid var(--border-light); }
html[data-theme="light"] .badge-info { background: rgba(0,0,0,0.06); }

/* ============ THEME SWITCH ============ */
.theme-switcher {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}
.theme-switcher label {
    display:block; font-size:10px; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:var(--text-faint); margin-bottom:6px;
}
.theme-switcher select, .theme-select-inline {
    width:100%; background:var(--bg-elevated); color:var(--text);
    border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:13px;
}
.theme-select-inline { width:auto; min-width:110px; }

/* Ocean Dark */
html[data-theme="ocean"] {
    --bg:#020812; --bg-deep:#01050d; --bg-elevated:#071222; --bg-card:#0a1730;
    --bg-hover: rgba(64,156,255,0.1);
    --border: rgba(120,170,255,0.12); --border-light: rgba(120,170,255,0.22);
    --text:#eaf3ff; --text-muted:#8aa4c7; --text-faint:#5a7396;
    --accent:#4ea1ff; --accent-2:#6bb6ff; --accent-deep:#1d6fd6;
    --accent-glow: rgba(78,161,255,0.28); --accent-glow-strong: rgba(78,161,255,0.5);
    --gold:#7ec8ff; --violet:#5b8cff;
    --themed-logo-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(183deg) saturate(6) brightness(0.92);
    --themed-mark-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(183deg) saturate(5.5) brightness(0.95);
}
html[data-theme="ocean"] .bg-decor {
    background:
        radial-gradient(circle at 1px 1px, rgba(78,161,255,0.05) 1px, transparent 0) 0 0 / 38px 38px,
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(78,161,255,0.14), transparent 60%),
        linear-gradient(180deg, var(--bg-deep), var(--bg) 40%);
}

/* Light — kirli krem / soft paper */
html[data-theme="light"] {
    --bg:#ece7df; --bg-deep:#e2dcd2; --bg-elevated:#f7f3ec; --bg-card:#f3efe6;
    --bg-hover: rgba(40,60,90,0.06);
    --border: rgba(40,50,70,0.12); --border-light: rgba(40,50,70,0.18);
    --text:#1c2430; --text-muted:#5d6a7a; --text-faint:#7d8896;
    --accent:#1f7aef; --accent-2:#3d8fff; --accent-deep:#155dba;
    --accent-glow: rgba(31,122,239,0.18); --accent-glow-strong: rgba(31,122,239,0.32);
    --gold:#c9921a; --violet:#6a5cff;
    --shadow: 0 10px 28px rgba(40,35,25,0.08);
    --shadow-lg: 0 22px 48px rgba(40,35,25,0.12);
    --themed-logo-filter: grayscale(1) contrast(1.1) sepia(1) hue-rotate(188deg) saturate(8) brightness(0.55);
    --themed-mark-filter: grayscale(1) contrast(1.1) sepia(1) hue-rotate(188deg) saturate(7) brightness(0.58);
}
html[data-theme="light"] .bg-decor {
    background:
        radial-gradient(circle at 1px 1px, rgba(40,50,70,0.06) 1px, transparent 0) 0 0 / 36px 36px,
        radial-gradient(ellipse 70% 50% at 50% -5%, rgba(31,122,239,0.08), transparent 55%),
        linear-gradient(180deg, #e4dfd5, #ece7df 45%);
}
html[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, rgba(247,243,236,0.98), rgba(236,231,223,0.98));
}
html[data-theme="ocean"] .sidebar {
    background: linear-gradient(180deg, rgba(7,18,34,0.96), rgba(2,8,18,0.96));
}
html[data-theme="midnight"] .sidebar {
    background: linear-gradient(180deg, rgba(12,14,22,0.97), rgba(5,6,10,0.97));
}
html[data-theme="forest"] .sidebar {
    background: linear-gradient(180deg, rgba(13,31,22,0.97), rgba(4,16,10,0.97));
}
html[data-theme="sunset"] .sidebar {
    background: linear-gradient(180deg, rgba(29,18,12,0.97), rgba(14,8,5,0.97));
}
html[data-theme="slate"] .sidebar {
    background: linear-gradient(180deg, rgba(26,30,36,0.97), rgba(12,14,16,0.97));
}
html[data-theme="mono"] .sidebar {
    background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(0,0,0,0.98));
}
html[data-theme="light"] .discord-join-btn { color:#fff !important; }

/* Midnight */
html[data-theme="midnight"] {
    --bg:#05060a; --bg-deep:#020308; --bg-elevated:#0c0e16; --bg-card:#10131d;
    --bg-hover: rgba(160,180,255,0.08);
    --border: rgba(140,150,190,0.12); --border-light: rgba(140,150,190,0.22);
    --text:#eef0f7; --text-muted:#9aa3b8; --text-faint:#6b7388;
    --accent:#8b9cff; --accent-2:#a8b4ff; --accent-deep:#5c6bcf;
    --accent-glow: rgba(139,156,255,0.22); --accent-glow-strong: rgba(139,156,255,0.4);
    --gold:#d4b06a; --violet:#7a86ff;
    --themed-logo-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(210deg) saturate(4.2) brightness(0.95);
    --themed-mark-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(210deg) saturate(4) brightness(0.97);
}
html[data-theme="midnight"] .bg-decor {
    background:
        radial-gradient(circle at 1px 1px, rgba(139,156,255,0.04) 1px, transparent 0) 0 0 / 40px 40px,
        radial-gradient(ellipse 70% 50% at 20% 0%, rgba(92,107,207,0.18), transparent 55%),
        linear-gradient(180deg, var(--bg-deep), var(--bg) 45%);
}

/* Forest */
html[data-theme="forest"] {
    --bg:#07140e; --bg-deep:#04100a; --bg-elevated:#0d1f16; --bg-card:#12281c;
    --bg-hover: rgba(90,200,140,0.1);
    --border: rgba(110,180,140,0.14); --border-light: rgba(110,180,140,0.24);
    --text:#e8f6ee; --text-muted:#8fb9a2; --text-faint:#5f8570;
    --accent:#3ecf8e; --accent-2:#62e0a8; --accent-deep:#239a64;
    --accent-glow: rgba(62,207,142,0.22); --accent-glow-strong: rgba(62,207,142,0.4);
    --gold:#c9b35a; --violet:#4db6a0;
    --themed-logo-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(88deg) saturate(5.2) brightness(0.9);
    --themed-mark-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(88deg) saturate(5) brightness(0.92);
}
html[data-theme="forest"] .bg-decor {
    background:
        radial-gradient(circle at 1px 1px, rgba(62,207,142,0.05) 1px, transparent 0) 0 0 / 38px 38px,
        radial-gradient(ellipse 75% 55% at 80% -5%, rgba(35,154,100,0.2), transparent 55%),
        linear-gradient(180deg, var(--bg-deep), var(--bg) 45%);
}

/* Sunset */
html[data-theme="sunset"] {
    --bg:#140c08; --bg-deep:#0e0805; --bg-elevated:#1d120c; --bg-card:#241710;
    --bg-hover: rgba(255,140,70,0.1);
    --border: rgba(220,140,90,0.14); --border-light: rgba(220,140,90,0.24);
    --text:#fff2e8; --text-muted:#c9a894; --text-faint:#8f7363;
    --accent:#ff7a45; --accent-2:#ff9a6b; --accent-deep:#d45520;
    --accent-glow: rgba(255,122,69,0.24); --accent-glow-strong: rgba(255,122,69,0.42);
    --gold:#ffc15e; --violet:#ff8f6b;
    --themed-logo-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(348deg) saturate(6.2) brightness(0.95);
    --themed-mark-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(348deg) saturate(5.8) brightness(0.97);
}
html[data-theme="sunset"] .bg-decor {
    background:
        radial-gradient(circle at 1px 1px, rgba(255,122,69,0.05) 1px, transparent 0) 0 0 / 38px 38px,
        radial-gradient(ellipse 80% 55% at 50% -8%, rgba(212,85,32,0.22), transparent 58%),
        linear-gradient(180deg, var(--bg-deep), var(--bg) 45%);
}

/* Slate */
html[data-theme="slate"] {
    --bg:#121417; --bg-deep:#0c0e10; --bg-elevated:#1a1e24; --bg-card:#20262e;
    --bg-hover: rgba(180,195,210,0.08);
    --border: rgba(160,175,190,0.12); --border-light: rgba(160,175,190,0.22);
    --text:#edf1f5; --text-muted:#9aa7b5; --text-faint:#6d7a88;
    --accent:#6eb6ff; --accent-2:#8fc5ff; --accent-deep:#3d8fd6;
    --accent-glow: rgba(110,182,255,0.2); --accent-glow-strong: rgba(110,182,255,0.38);
    --gold:#d2b56a; --violet:#7aa2ff;
    --themed-logo-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(175deg) saturate(3.4) brightness(0.95);
    --themed-mark-filter: grayscale(1) contrast(1.08) sepia(1) hue-rotate(175deg) saturate(3.2) brightness(0.97);
}
html[data-theme="slate"] .bg-decor {
    background:
        radial-gradient(circle at 1px 1px, rgba(160,175,190,0.05) 1px, transparent 0) 0 0 / 36px 36px,
        radial-gradient(ellipse 70% 50% at 10% 0%, rgba(61,143,214,0.14), transparent 55%),
        linear-gradient(180deg, var(--bg-deep), var(--bg) 45%);
}

/* Siyah Beyaz */
html[data-theme="mono"] {
    --bg:#0a0a0a; --bg-deep:#000000; --bg-elevated:#141414; --bg-card:#1a1a1a;
    --bg-hover: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.12); --border-light: rgba(255,255,255,0.22);
    --text:#f5f5f5; --text-muted:#a8a8a8; --text-faint:#6e6e6e;
    --accent:#ffffff; --accent-2:#e8e8e8; --accent-deep:#cfcfcf;
    --accent-glow: rgba(255,255,255,0.14); --accent-glow-strong: rgba(255,255,255,0.28);
    --gold:#d0d0d0; --violet:#bdbdbd;
    --themed-logo-filter: grayscale(1) contrast(1.25);
    --themed-mark-filter: grayscale(1) contrast(1.2);
}
html[data-theme="mono"] .bg-decor {
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0) 0 0 / 32px 32px,
        linear-gradient(180deg, #000, #0a0a0a 48%, #111);
}
html[data-theme="mono"] .brand-name .brand-type,
html[data-theme="mono"] .nav-link.active {
    color: #fff;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
}
html[data-theme="mono"] .btn-primary {
    background: #fff;
    color: #000;
    border-color: #fff;
}
html[data-theme="mono"] .btn-primary:hover:not(:disabled) {
    filter: brightness(0.92);
}

.auth-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
}
.auth-card .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.comment-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.game-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
    justify-items: stretch;
    margin-bottom: 8px;
}
.game-checkbox-visual {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    gap: 14px;
    min-height: 168px;
    padding: 20px 14px 18px !important;
}
.game-check-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto;
}
.game-checkbox-visual .game-check-icon {
    width: 68px !important;
    height: 68px !important;
    object-fit: contain;
    margin: 0 auto !important;
    display: block;
}
.game-check-name {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    min-height: 2.6em;
}

.tickets-layout { display: grid; gap: 18px; }
.ticket-create-card { max-width: 720px; }
.ticket-section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ticket-section-head h2 { font-size: 16px; margin: 0; }
.ticket-chip .ticket-title { margin-top: 0; }
.admin-ticket-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.admin-shell {
    display: grid;
    gap: 12px;
}
.admin-panel-modern { min-height: 120px; }

/* ============ OWNERS / ANNOUNCE META ============ */
.announce-meta {
    display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px;
}
.announce-author { font-size:12px; font-weight:700; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; }
.mini-avatar {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated));
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}
.mini-avatar img,
.comment-avatar-img,
.user-avatar-img,
.owner-avatar img {
    filter: none !important;
}
.mini-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.owners-empty { color:var(--text-muted); font-size:13px; }

/* ============ LB TOP100 ============ */
.lb-network-head {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ff9a4a;
    margin: 0 0 10px;
}
html[data-network="sonoyuncu"] .lb-switch-btn.active {
    color: #ff9a4a;
    border-color: rgba(255, 122, 46, 0.45);
    background: rgba(255, 122, 46, 0.14);
}

.lb-switch {
    display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;
}
.lb-switch-btn {
    border:1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color:var(--text-muted);
    border-radius:999px;
    padding:6px 10px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}
.lb-switch-btn.active {
    color: var(--bg-deep);
    background: var(--accent);
    border-color: transparent;
}

/* ============ COMPARE TABS ============ */
.compare-tabs {
    display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 10px;
}
.compare-tab {
    position:relative;
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    padding:10px 34px 10px 12px;
    border-radius:14px;
    border:1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor:pointer;
    text-align:left;
}
.compare-tab.active {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.compare-tab small { color:var(--text-faint); font-size:11px; }
.compare-tab-vs { font-weight:800; font-size:13px; }
.compare-tab-close {
    position:absolute; top:6px; right:8px;
    width:22px; height:22px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--text-faint); font-size:12px;
}
.compare-tab-close:hover { color:var(--danger); background:var(--danger-bg); }

/* ============ TICKETS ============ */
.ticket-grid, .ticket-admin-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:12px;
    padding: 12px 14px 16px;
}
.ticket-chip, .ticket-admin-chip {
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    background: rgba(255,255,255,0.03);
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    overflow:hidden;
}
.ticket-chip.open, .ticket-admin-chip.open { border-color: rgba(255,200,87,0.35); }
.ticket-chip-top { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:0; flex-wrap:wrap; }
.ticket-title { font-weight:800; font-size:13px; margin-bottom:0; word-break:break-word; }
.ticket-chip p, .ticket-admin-chip p, .ticket-body {
    margin:0; color:var(--text-muted); font-size:12.5px; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
    word-break:break-word;
}
.ticket-meta { font-size:11px; color:var(--text-faint); }
.ticket-note {
    margin-top:0; padding:8px 10px; border-radius:10px; background:var(--info-bg);
    color:var(--info); font-size:12px; word-break:break-word;
}
.ticket-note.muted { background: rgba(255,255,255,0.04); color: var(--text-muted); }
.ticket-chip time, .ticket-reply time { font-size:11px; color:var(--text-faint); white-space:nowrap; }
.ticket-actions { display:grid; gap:8px; margin-top:2px; min-width:0; }
.ticket-actions > .btn { width:100%; justify-content:center; }

/* ============ LOGO / BRAND ============ */
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 0;
    object-fit: contain;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0 10px var(--accent-glow));
}
.auth-logo-orb img {
    filter: drop-shadow(0 0 18px var(--accent-glow));
}
.sidebar .brand-logo,
.mobile-topbar .brand-logo {
    animation: brandLogoSpin 7.5s linear infinite;
    transform-origin: 50% 50%;
}
.sidebar .brand:hover .brand-logo,
.mobile-topbar .brand:hover .brand-logo {
    animation-duration: 1.35s;
}
@keyframes brandLogoSpin {
    to { transform: rotate(360deg); }
}
.mobile-topbar .brand-logo { width:28px; height:28px; border-radius:0; }
.auth-logo.brand-logo { width:48px; height:48px; border-radius:0; }

/* ============ VERIFIED / CROWN POLISH ============ */
.sr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: auto;
    flex: 0 0 auto;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 0;
    overflow: visible;
}
.sr-badge svg,
.sr-badge img {
    height: 20px !important;
    width: auto !important;
    max-height: 20px;
    object-fit: contain;
    display: block;
}
.verified-badge,
.crown-badge,
.supporter-badge,
.early-badge,
.vip-badge,
.bughunter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: auto;
    flex: 0 0 auto;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 0;
    filter: none;
}
.verified-badge svg,
.crown-badge svg,
.supporter-badge svg,
.early-badge svg,
.vip-badge svg,
.bughunter-badge svg,
.supporter-badge img,
.early-badge img,
.vip-badge img,
.bughunter-badge img {
    height: 20px !important;
    width: auto !important;
    max-height: 20px;
    object-fit: contain;
    display: block;
}

/* ============ THEME SURFACE FIXES ============ */
html[data-theme="light"] body,
html[data-theme="light"] .main,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .announce-board,
html[data-theme="light"] .lb-card,
html[data-theme="light"] .home-marquee {
    color: var(--text);
}
html[data-theme="ocean"] body,
html[data-theme="ocean"] .main,
html[data-theme="ocean"] .sidebar,
html[data-theme="ocean"] .card,
html[data-theme="ocean"] .panel {
    color: var(--text);
}
html[data-theme="ocean"] .card,
html[data-theme="ocean"] .panel,
html[data-theme="ocean"] .announce-board,
html[data-theme="ocean"] .lb-card {
    background: linear-gradient(180deg, #0c1a33, #091426);
    border-color: var(--border-light);
}
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .announce-board,
html[data-theme="light"] .lb-card,
html[data-theme="light"] .auth-card {
    background: linear-gradient(180deg, #f7f3ec, #efe9df);
    border-color: rgba(40,50,70,0.12);
    box-shadow: var(--shadow);
}
html[data-theme="light"] .home-marquee {
    background: rgba(236,231,223,0.95);
}

/* ============ OWNERS FANCY ============ */
.owners-board {
    position:relative; overflow:hidden;
    width:min(640px,100%);
    padding:22px 20px 18px;
    border-radius: 22px;
    border:1px solid var(--border-light);
    background:
        radial-gradient(circle at 20% 0%, rgba(255,200,87,0.12), transparent 45%),
        radial-gradient(circle at 80% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%),
        rgba(255,255,255,0.03);
}
.owners-glow {
    position:absolute; inset:-40%; pointer-events:none;
    background: conic-gradient(from 90deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent), transparent 40%);
    animation: ownersSpin 12s linear infinite;
}
@keyframes ownersSpin { to { transform: rotate(360deg); } }
.owners-label {
    position:relative; z-index:1;
    font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold); margin-bottom:14px; text-align:center;
}
.owners-list { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.founder-list { display:grid; gap:8px; }
.founder-row {
    display:grid;
    grid-template-columns: 1fr 1fr auto;
    gap:8px;
    align-items:center;
}
.founder-row input {
    width:100%;
    min-width:0;
}
.owner-card {
    min-width:120px;
    display:block;
    color: inherit;
    text-decoration: none;
    padding:14px 16px 12px;
    border-radius:18px;
    border:1px solid var(--border-light);
    background: rgba(0,0,0,0.18);
    text-align:center;
    backdrop-filter: blur(8px);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.owner-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
.owner-avatar {
    width:42px; height:42px; margin:0 auto 8px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:18px;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    color:#06110e;
    overflow: hidden;
}
.owner-avatar .mini-avatar {
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    border-radius: 50%;
    background: transparent;
    color: #06110e;
    font-size: 16px;
}
.owner-name { font-weight:800; font-size:14px; }
.owner-tag { margin-top:4px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); font-weight:800; }

/* ============ COINS / SHOP / MASS ============ */
.coin-pill {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; border-radius:999px;
    background: rgba(255,200,87,0.12); color: var(--gold);
    border:1px solid rgba(255,200,87,0.3);
    font-size:12px; font-weight:800;
}
.coin-pill-lg { font-size:18px; padding:8px 16px; }
.coin-inline { display:block; color:var(--gold); margin-top:2px; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.shop-card .shop-price { font-size:28px; font-weight:900; color:var(--gold); margin:10px 0; }
.shop-section-label {
    margin-top: 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.shop-badge-card { text-align: left; }
.shop-badge-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border-light);
}
.shop-badge-icon .sr-badge { margin-left: 0; height: 22px; }
.shop-badge-icon .sr-badge svg,
.shop-badge-icon .sr-badge img { height: 22px !important; width: auto !important; }
.shop-badge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.mass-status-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.mass-chip {
    padding:8px 12px; border-radius:999px; border:1px solid var(--border);
    background:rgba(255,255,255,0.04); font-size:12px; font-weight:700;
}

/* ============ TICKET REPLIES ============ */
.ticket-thread { margin-top:2px; display:grid; gap:6px; min-width:0; }
.ticket-reply {
    padding:8px 10px; border-radius:10px; background:rgba(255,255,255,0.04);
    border:1px solid var(--border); font-size:12px; min-width:0; word-break:break-word;
}
.ticket-reply.admin { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ticket-reply-head {
    display:flex; justify-content:space-between; align-items:baseline; gap:8px;
    margin-bottom:4px;
}
.ticket-reply strong { display:inline; margin-bottom:0; font-size:11px; color:var(--text-muted); }
.ticket-reply-form {
    display:flex; flex-wrap:wrap; gap:6px; margin-top:0; min-width:0; align-items:stretch;
}
.ticket-reply-form input, .admin-reply-input {
    flex:1 1 140px; min-width:0; width:100%;
}
.ticket-reply-form .btn {
    flex:0 0 auto;
    white-space:nowrap;
}
.admin-panel-modern { border-radius:18px; overflow:hidden; }
.cr-progress-unknown .cr-progress-fill {
    background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 8px, transparent 8px, transparent 14px);
    opacity:0.55;
}

.admin-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid var(--border-light);
    background:
        radial-gradient(ellipse 70% 80% at 100% 0%, var(--accent-glow), transparent 55%),
        linear-gradient(135deg, color-mix(in srgb, var(--bg-elevated) 90%, transparent), var(--bg-card));
}
.admin-hero h1 { margin: 4px 0 6px; font-size: 28px; }
.admin-hero-eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
}
.admin-hero-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.admin-workspace {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.admin-rail {
    position: sticky;
    top: 14px;
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}
.admin-rail-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
.admin-rail-btn span { width: 18px; text-align: center; }
.admin-rail-btn:hover { background: var(--bg-hover); color: var(--text); }
.admin-rail-btn.active {
    background: linear-gradient(100deg, var(--accent-glow), transparent);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.admin-stage {
    min-width: 0;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
    padding: 12px;
    min-height: 420px;
}
.admin-ticket-cats { display: grid; gap: 14px; }
.admin-cat-panel { border-left: 3px solid var(--accent); }
.theme-switcher-extra { margin-top: 8px; }
.lobby-music-btn.is-muted { opacity: .7; }

@media (max-width: 980px) {
    .admin-workspace { grid-template-columns: 1fr; }
    .admin-rail {
        position: static;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

.admin-shell {
    border:1px solid var(--border-light);
    border-radius:18px;
    background: rgba(255,255,255,0.02);
    padding:12px;
}
.admin-tabs {
    display:flex; flex-wrap:wrap; gap:6px;
    margin:0 0 12px; padding:8px;
    border-radius:14px;
    background: rgba(0,0,0,0.12);
    border:1px solid var(--border);
}
.admin-tabs .tab-btn {
    border-radius:10px !important;
    font-size:12px;
    padding:8px 12px;
}
.ticket-admin-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:12px;
    padding:14px;
}
.ticket-admin-chip {
    padding:12px;
    border-radius:14px;
    border:1px solid var(--border);
    background: rgba(255,255,255,0.03);
}
.ticket-admin-chip .ticket-title { font-weight:800; margin:6px 0; }
html[data-theme="light"] .admin-shell,
html[data-theme="light"] .admin-tabs {
    background: rgba(40,35,25,0.04);
}

.nav-badge {
    margin-left:auto;
    min-width:18px; height:18px; padding:0 5px;
    border-radius:999px; font-size:10px; font-weight:900;
    display:inline-flex; align-items:center; justify-content:center;
    background:#ff4d6d; color:#fff; line-height:1;
}
.nav-badge[hidden] {
    display: none !important;
}
.supporter-badge,
.early-badge,
.vip-badge,
.bughunter-badge {
    display:inline-flex; align-items:center; justify-content:center;
    height:20px; width:auto; flex:0 0 auto;
    vertical-align:middle; margin-left:4px; line-height:0;
    filter: none;
}
.supporter-badge img,
.early-badge img,
.vip-badge img,
.bughunter-badge img { height:20px !important; width:auto !important; max-height:20px; object-fit:contain; display:block; }
.early-inline,
.vip-inline,
.bughunter-inline,
.supporter-inline { color: var(--text); font-weight:800; }
.badge-early,
.badge-bughunter {
    background: rgba(255,255,255,0.08);
    color: var(--text);
    border: 1px solid var(--border-light);
}
html[data-theme="light"] .badge-early,
html[data-theme="light"] .badge-bughunter {
    background: rgba(0,0,0,0.06);
}
.announce-welcome {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255,255,255,0.02));
}
.ad-board {
    margin-top:14px; padding:16px; border-radius:18px;
    border:1px dashed var(--border-light);
    background: rgba(255,255,255,0.03);
}
.ad-board-label {
    font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-faint); margin-bottom:10px;
}
.ad-board-slot {
    text-align:center; padding:22px 14px; border-radius:14px;
    background: rgba(0,0,0,0.12);
}
.ad-board-slot strong { display:block; font-size:16px; margin-bottom:6px; }
.ad-board-slot p { margin:0; color:var(--text-muted); font-size:13px; max-width:420px; margin-inline:auto; }
.linked-cr { color:var(--accent); display:block; }
html[data-theme="light"] .ad-board-slot { background: rgba(40,35,25,0.05); }

.app-footer {
    display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between;
    padding:12px 20px; border-top:1px solid var(--border);
    color:var(--text-faint); font-size:12px; background: rgba(0,0,0,0.12);
}
.app-footer a { color:var(--text-muted); font-weight:700; text-decoration:none; }
.app-footer a:hover { color:var(--accent); }
.site-legal {
    margin: 0;
    padding: 0;
    border-top: 0;
    font-size: 11px;
    color: var(--text-faint);
}
.site-legal a { color:inherit; text-decoration:none; font-weight:700; }
.site-legal a:hover { color:var(--accent); }
.company-card p { margin: 8px 0; color: var(--text-muted); line-height:1.55; }
.guest-shell .app-footer { margin-top:auto; }

.avatar-img, .profile-avatar-xl.avatar-img, img.profile-avatar-xl {
    object-fit: cover; display:block;
}
.avatar-upload-wrap {
    position:relative; cursor:pointer; display:inline-block;
}
.avatar-upload-hint {
    position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
    font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    padding:3px 8px; border-radius:999px;
    background: rgba(0,0,0,0.55); color:#fff; opacity:0; transition: opacity .15s;
    pointer-events:none; white-space:nowrap;
}
.avatar-upload-wrap:hover .avatar-upload-hint { opacity:1; }
.avatar-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.user-avatar { overflow:hidden; }
.user-avatar-img { width:100%; height:100%; object-fit:cover; display:block; }

.bet-log { display:grid; gap:8px; margin-top:10px; }
.bet-log-row {
    padding:10px 12px; border-radius:12px; border:1px solid var(--border);
    background: rgba(255,255,255,0.03);
}
.bet-log-row.win { border-color: rgba(46,204,113,0.45); background: rgba(46,204,113,0.08); }
.bet-log-row.lose { border-color: rgba(255,77,109,0.4); background: rgba(255,77,109,0.07); }
.bet-log-row.pending { border-color: rgba(255,200,87,0.35); }
.bet-log-main { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; }
.bet-log-badge {
    margin-left:auto; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
}
.bet-log-row.win .bet-log-badge { color:#2ecc71; }
.bet-log-row.lose .bet-log-badge { color:#ff4d6d; }
.bet-log-row.pending .bet-log-badge { color:var(--gold); }
.bet-log-detail, .bet-log-meta { margin-top:4px; font-size:12px; color:var(--text-muted); }

/* ============ SKIN PAYLASIM ============ */
.skin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.skin-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
}
.skin-tab {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.skin-tab.active {
    background: var(--accent);
    color: var(--bg-deep);
}
.skin-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 700;
}
.skin-counts span {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
}
.skin-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    min-height: 120px;
}
.skin-grid-2row {
    grid-template-rows: repeat(2, auto);
}
.skin-card {
    display: grid;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    user-select: none;
}
.skin-canvas-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 50% at 50% 80%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
        linear-gradient(180deg, #14181c, #0a0c0e);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
}
.skin-canvas-wrap:active { cursor: grabbing; }
.skin-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.skin-card-meta .hint { font-size: 10px; }
.skin-card .btn { font-size: 11px; padding: 4px 8px; }
@media (max-width: 1400px) {
    .skin-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .skin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .skin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}
.skin-status {
    margin: -6px 0 12px;
    min-height: 1.2em;
}
.skin-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.skin-page-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.skin-page-jump input {
    width: 64px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.25);
    color: var(--text);
}
.skin-preview-2d {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    padding: 8px;
    background: transparent;
    position: relative;
    z-index: 1;
}
.skin-preview-2d.skin-preview-behind {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
}
.skin-preview-2d.skin-broken {
    opacity: 0.35;
    filter: grayscale(1);
}
.skin-canvas-wrap.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.04) 48%, transparent 66%),
        linear-gradient(180deg, #161b20, #0b0d10);
    background-size: 200% 100%, auto;
    animation: skinShimmer 1.1s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes skinShimmer {
    0% { background-position: 100% 0, 0 0; }
    100% { background-position: -100% 0, 0 0; }
}
.skin-canvas.skin-canvas-wait {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    pointer-events: none;
}
.skin-canvas.skin-canvas-ready {
    opacity: 1;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}
.skin-canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    background: transparent;
    touch-action: none;
}
.skin-card-name {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.skin-card-loading {
    position: absolute;
    inset: auto 8px 8px auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.55;
    animation: pulseDot 1.2s ease-in-out infinite;
    z-index: 3;
}
.skin-grid-low .skin-canvas-wrap {
    background: #101418;
}

.skin-modal[hidden] { display: none !important; }
.skin-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
}
.skin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.62);
}
.skin-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-elevated, #14181e);
    display: grid;
    gap: 12px;
}
.skin-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
}
.skin-modal-preview {
    aspect-ratio: 1;
    border-radius: 12px;
    background: #0c0f12;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.skin-modal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    padding: 12px;
}
.skin-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.skin-modal-open { overflow: hidden; }

/* Hafif mod — ağır animasyonları kapat */
html.sr-lite .bg-decor::before,
html.sr-lite .bg-decor::after,
html.sr-lite .announce-pulse,
html.sr-lite .owners-glow,
html.sr-lite .marquee-seq,
html.sr-lite .floaty,
html.sr-lite [class*="fade-in"],
html.sr-lite .home-fade-in,
html.sr-lite .card,
html.sr-lite .skin-canvas-wrap.is-loading::after {
    animation: none !important;
}
html.sr-lite .bg-decor {
    opacity: 0.35;
}
html.sr-lite .bg-decor::before,
html.sr-lite .bg-decor::after {
    display: none;
}
html.sr-lite .btn::after { display: none; }
html.sr-lite * {
    scroll-behavior: auto !important;
}
/* Cam blur — düşük GPU’larda sürekli yeniden boyama */
html.sr-lite .auth-card,
html.sr-lite .card,
html.sr-lite .sidebar,
html.sr-lite .mobile-topbar,
html.sr-lite .sr-support-panel,
html.sr-lite .ui-dialog,
html.sr-lite .notif-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
    html .bg-decor::before,
    html .bg-decor::after,
    html .marquee-seq,
    html .owners-glow,
    html .sidebar .brand-logo,
    html .mobile-topbar .brand-logo {
        animation: none !important;
    }
}

/* ============ CANLI DESTEK (RiseBot) ============ */
.sr-support {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1400;
    font-family: inherit;
}
.sr-support-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    color: var(--bg-deep, #061014);
    font-weight: 800;
    font-size: 13px;
    padding: 12px 16px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.sr-support-fab.is-open { opacity: 0; pointer-events: none; }
.sr-support-fab-ico { font-size: 16px; line-height: 1; }
.sr-support-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(360px, calc(100vw - 24px));
    height: min(520px, calc(100vh - 40px));
    display: grid;
    grid-template-rows: auto 1fr auto auto auto;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-elevated, #12171d);
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    overflow: hidden;
}
.sr-support-panel[hidden] { display: none !important; }
.sr-support-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
}
.sr-support-title { font-weight: 800; font-size: 14px; }
.sr-support-sub { font-size: 11px; color: var(--text-muted); }
.sr-support-head-actions { display: flex; gap: 4px; }
.sr-support-iconbtn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
}
.sr-support-iconbtn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.sr-support-msgs {
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sr-support-bubble {
    max-width: 88%;
    padding: 9px 11px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.sr-support-bubble a { color: var(--accent); font-weight: 700; }
.sr-support-bot {
    align-self: flex-start;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.sr-support-user {
    align-self: flex-end;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-bottom-right-radius: 4px;
}
.sr-support-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 14px;
}
.sr-support-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: pulseDot 1s ease-in-out infinite;
}
.sr-support-dots i:nth-child(2) { animation-delay: 0.15s; }
.sr-support-dots i:nth-child(3) { animation-delay: 0.3s; }
.sr-support-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 8px;
}
.sr-support-quick button {
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.sr-support-quick button:hover {
    color: var(--text);
    border-color: var(--accent);
}
.sr-support-form {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}
.sr-support-form input {
    flex: 1;
    min-width: 0;
    font-size: 13px;
}
.sr-support-foot {
    padding: 0 12px 10px;
    font-size: 11px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.sr-support-foot a { color: var(--text-muted); }
.sr-support-foot a:hover { color: var(--accent); }
@media (max-width: 520px) {
    .sr-support { right: 10px; bottom: 10px; }
    .sr-support-fab-txt { display: none; }
    .sr-support-panel { width: calc(100vw - 20px); height: min(70vh, 560px); }
}

/* ============ BİLGİ BANKASI ============ */
.kb-header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kb-toolbar { display: grid; gap: 12px; margin-bottom: 18px; }
.kb-toolbar input[type="search"] {
    width: 100%;
    max-width: 520px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--input-bg, rgba(255,255,255,0.04));
    color: var(--text);
    font: inherit;
}
.kb-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-cat-btn {
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kb-cat-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.kb-cat-btn.active {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.kb-layout { display: grid; gap: 22px; }
.kb-section-title {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--text);
}
.kb-list { display: grid; gap: 8px; }
.kb-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card, rgba(255,255,255,0.03)) 88%, transparent);
    padding: 0;
    overflow: hidden;
}
.kb-item summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kb-item summary::-webkit-details-marker { display: none; }
.kb-item summary::after {
    content: '+';
    font-weight: 800;
    color: var(--text-muted);
    flex-shrink: 0;
}
.kb-item[open] summary::after { content: '−'; }
.kb-item[open] summary {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.kb-body {
    padding: 12px 16px 4px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-muted);
    white-space: normal;
}
.kb-body a { color: var(--accent); font-weight: 700; }
.kb-item-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 12px;
}

/* ============ SLOT ============ */
.slot-balance {
    font-size: 18px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
}
.slot-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 16px;
    align-items: start;
}
.slot-machine {
    padding: 20px;
    display: grid;
    gap: 16px;
}
.slot-reels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
        linear-gradient(180deg, #12161c, #0a0c10);
    border: 1px solid var(--border);
}
.slot-reels.is-win { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.slot-reels.is-lose { opacity: 0.92; }
.slot-reel {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    font-size: clamp(42px, 8vw, 64px);
    transition: transform 0.2s ease;
    overflow: hidden;
}
.slot-reel.is-spinning { filter: blur(1px); }
.slot-reel.is-stop { transform: scale(1.06); }
.slot-sym {
    line-height: 1;
    user-select: none;
    display: grid;
    place-items: center;
    width: 72%;
    height: 72%;
}
.slot-mode-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    pointer-events: none;
}
.slot-pay-sym,
.slot-pay-two,
.slot-hist-reels {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.slot-pay-sym .slot-mode-icon,
.slot-pay-two .slot-mode-icon {
    width: 22px;
    height: 22px;
}
.slot-hist-reels .slot-mode-icon {
    width: 20px;
    height: 20px;
}
.slot-result {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    min-height: 1.4em;
}
.slot-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.slot-stake-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}
.slot-stake-wrap input {
    width: 88px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.25);
    color: var(--text);
    font-weight: 800;
}
.slot-quick { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.slot-spin-btn {
    min-width: 120px;
    font-size: 15px;
    font-weight: 900;
    padding: 10px 22px;
}
.slot-hint { text-align: center; }
.slot-side { display: grid; gap: 12px; }
.slot-paytable { display: grid; gap: 6px; }
.slot-pay-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.slot-pay-sym { letter-spacing: 0; }
.slot-history { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.slot-hist-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.slot-hist-row.win .slot-hist-net { color: #2ecc71; }
.slot-hist-row.lose .slot-hist-net { color: #ff4d6d; }
.slot-hist-reels { letter-spacing: 0; }
@media (max-width: 900px) {
    .slot-layout { grid-template-columns: 1fr; }
}

/* Discord ID lookup */
.dc-result {
    overflow: hidden;
    padding: 0;
    max-width: 640px;
    position: relative;
}
.dc-banner {
    position: relative;
    height: 140px;
    z-index: 0;
    display: block;
    background: linear-gradient(135deg, rgba(88,101,242,0.35), transparent 70%),
        var(--bg-elevated);
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: inherit;
}
.dc-banner-actions { display: none; }
.dc-dl-target { cursor: pointer; }
.dc-dl-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 3;
    pointer-events: none;
}
.dc-dl-target:hover .dc-dl-overlay,
.dc-dl-target:focus-visible .dc-dl-overlay { opacity: 1; }
.dc-sr-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    text-decoration: none;
    color: var(--text);
}
.dc-sr-link:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dc-sr-link-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.dc-sr-link-user {
    font-weight: 800;
    color: var(--accent);
    flex: 1;
}
.dc-sr-link-go {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
.dc-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: -52px;
}
.dc-avatar-frame {
    position: relative;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    display: block;
    border-radius: 50%;
    text-decoration: none;
    color: inherit;
    overflow: visible;
}
.dc-avatar-frame .dc-dl-overlay {
    border-radius: 50%;
    inset: 4px;
}
.dc-pp-dl { display: none; }
.dc-body {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 18px;
    padding: 16px 22px 22px;
    margin-top: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    background: var(--bg-card);
}
.dc-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--bg-card);
    background: var(--bg-elevated);
    object-fit: cover;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.dc-avatar-deco {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    left: -8%;
    top: -8%;
    pointer-events: none;
    z-index: 2;
    object-fit: contain;
}
.dc-meta { flex: 1; min-width: 200px; padding-top: 4px; }
.dc-name {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dc-tag { color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
.dc-id-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.dc-id-row code {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
.dc-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    min-height: 28px;
}
.dc-badge-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}
.dc-badge-verified {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.dc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}
.dc-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
}
.dc-pill-ok {
    color: #2ecc71;
    border-color: rgba(46,204,113,0.35);
    background: rgba(46,204,113,0.1);
}
.dc-pill-muted { color: var(--text-muted); }
.dc-dl {
    margin: 0 0 16px;
    display: grid;
    gap: 8px;
}
.dc-dl dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    font-weight: 700;
}
.dc-dl dd { margin: 2px 0 0; font-weight: 600; }
.dc-site {
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.dc-site-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dc-site-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}
.dc-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    font-weight: 700;
}
.dc-site-name {
    font-size: 16px;
    font-weight: 800;
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
.dc-site-name a { color: var(--accent); text-decoration: none; }
.dc-site-name a:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .dc-avatar-col { margin-top: -40px; }
    .dc-body { padding-top: 12px; }
}

/* Instagram-style profile follow */
.profile-ig-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}
.profile-ig-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text);
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.profile-ig-stat.static { cursor: default; }
.profile-ig-stat:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.profile-ig-stat strong {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}
.profile-ig-stat span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}
.profile-follow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 4px;
}

.follow-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.follow-modal[hidden] { display: none !important; }
.follow-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}
.follow-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: min(70vh, 560px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.follow-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.follow-modal-body {
    overflow: auto;
    padding: 6px 0;
}
.follow-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text);
}
.follow-user-row:hover { background: rgba(255,255,255,0.04); }
.follow-user-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}
.follow-user-av.letter { border: 1px solid var(--border); }
.follow-user-name { font-weight: 700; }

.ayar-modal {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ayar-modal[hidden] { display: none !important; }
.ayar-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}
.ayar-modal-card {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    max-height: min(80vh, 640px);
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.ayar-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}
.ayar-modal-body { padding: 14px; }
.ayar-form .field { margin-bottom: 14px; }
.ayar-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ayar-avatar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.profile-avatar-btn {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
}
.profile-avatar-btn .avatar-edit-hint {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.profile-avatar-btn:hover .avatar-edit-hint { opacity: 1; }
.profile-avatar-link {
    display: inline-block;
    border-radius: 50%;
    text-decoration: none;
}

.follow-req-list { display: grid; gap: 8px; margin-top: 10px; }
.follow-req-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
}
.follow-req-user {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    min-width: 0;
}
.follow-req-user img,
.follow-req-user .letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.follow-req-user .letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-size: 12px;
}
.follow-req-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Topbar + notifications */
.desktop-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 22px 0;
    position: relative;
    z-index: 40;
}
.desktop-topbar-spacer { flex: 1; }
.topbar-right { position: relative; }
.notif-wrap { position: relative; }
.notif-btn { position: relative; font-size: 18px; }
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
}
.notif-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 480px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    z-index: 50;
}
.notif-panel[hidden] {
    display: none !important;
}
.notif-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.notif-panel-body { overflow: auto; }
.notif-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.notif-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
}
.notif-title { font-weight: 700; font-size: 13px; }
.notif-body { font-size: 12px; color: var(--text-muted); }
.notif-time { font-size: 11px; color: var(--text-faint); font-weight: 700; }
.notif-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.notif-archive { margin: 8px 12px 12px; border: 1px solid var(--border); border-radius: 8px; }
.notif-archive summary {
    cursor: pointer;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-muted);
}
.notif-archive-list { border-top: 1px solid var(--border); }

.profile-count-top {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    padding: 0 6px;
}
.profile-count-top:disabled { opacity: 0.45; cursor: default; }
.profile-count-top strong { font-size: 18px; font-weight: 800; line-height: 1.1; }
.profile-count-top span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.profile-header-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.settings-entry { margin-top: 16px; }
.settings-panel { margin-top: 14px; }
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.share-options.compact { gap: 8px; }
.share-options.compact .share-option span { display: none; }
@media (max-width: 800px) {
    .settings-grid { grid-template-columns: 1fr; }
    .desktop-topbar { display: none; }
}
.notif-wrap-fixed,
.notif-wrap.notif-open {
    position: fixed !important;
    top: 56px;
    right: 12px;
    z-index: 10050;
    display: block !important;
}
.notif-wrap-fixed .notif-btn,
.notif-wrap.notif-open .notif-btn { display: none; }
@media (min-width: 801px) {
    #notifBtnMobile { display: none; }
    .notif-wrap-fixed,
    .notif-wrap.notif-open {
        top: 12px;
        right: 22px;
    }
}

/* Texture packs */
.pack-inline-hint {
    margin: -6px 0 14px;
    font-size: 13px;
    line-height: 1.45;
}
.pack-inline-hint code {
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
}
.pack-rar-warn { color: var(--warning, #f0c040); }
.pack-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 14px;
}
.pack-toolbar input[type="search"] {
    flex: 1;
    min-width: 160px;
}
.pack-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.pack-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
    min-width: 0;
}
.pack-tile-media {
    aspect-ratio: 1;
    background: #0d1116;
    border-bottom: 1px solid var(--border);
}
.pack-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: auto;
}
.pack-card-img-empty {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 42px;
    opacity: 0.55;
}
.pack-tile-body {
    padding: 10px 12px 12px;
    display: grid;
    gap: 4px;
}
.pack-tile-title {
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pack-tile-meta {
    font-size: 11px;
}
.pack-tile-meta a {
    color: var(--accent);
    text-decoration: none;
}
.pack-tile-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.pack-upload-form {
    display: grid;
    gap: 12px;
}
.pack-upload-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pack-upload-modal-card {
    width: min(460px, 100%);
}
.pack-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
@media (max-width: 1100px) {
    .pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.coord-page { display:grid; gap:14px; }
.coord-query-form {
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:12px;
    align-items:end;
    padding:16px 18px 8px;
}
.coord-query-form .field { min-width: 0; }
.coord-query-form select,
.coord-query-form input[type="number"],
.coord-query-form .btn {
    width: 100%;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
}
.coord-query-actions { display:flex; align-items:end; }
.coord-query-actions .btn { width: 100%; }
.coord-result {
    margin: 8px 18px 18px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent-glow) 40%, var(--bg-elevated));
    display: grid;
    gap: 10px;
}
.coord-result-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.coord-result-label { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.coord-result-name { font-size:22px; font-weight:800; margin-top:2px; }
.coord-distance-box {
    min-width: 140px;
    text-align: right;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.coord-distance-box span {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.coord-distance-box strong {
    display: block;
    margin-top: 2px;
    font-size: 20px;
    color: var(--accent);
}
.coord-pass-gizle {
    border: 0;
    background: var(--bg-hover);
    color: var(--text);
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.coord-pass-gizle.is-open { letter-spacing: 0; }
.coord-pass-gizle:hover { background: var(--bg-elevated); }
.coord-cred { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.coord-cred > div {
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    padding:10px 12px; border-radius:12px; background: var(--bg-card); border:1px solid var(--border-light);
}
.coord-cred code { font-size:14px; }
.coord-chips { display:flex; flex-wrap:wrap; gap:6px; }
.coord-chip {
    font-size:12px; font-weight:700;
    padding:4px 8px; border-radius:999px;
    background: var(--bg-hover); border:1px solid var(--border);
}
.coord-chip b { color: var(--accent); margin-right:4px; }
.coord-world-grid {
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:10px;
}
.coord-world-cell {
    padding:10px;
    border-radius:12px;
    border:1px solid var(--border);
    background: var(--bg-card);
    min-width: 0;
}
.coord-world-name { font-size:12px; font-weight:800; margin-bottom:8px; }
.coord-xy { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.coord-xy input {
    width: 100%;
    min-width: 0;
    height: 38px;
    box-sizing: border-box;
}
.coord-hesap-modal { max-width:720px; width:min(720px, 100%); }
.coord-modal-body { display:grid; gap:12px; padding:4px 2px 8px; }
@media (max-width: 800px) {
    .coord-query-form { grid-template-columns: 1fr 1fr; }
    .coord-query-actions { grid-column: 1 / -1; }
    .coord-cred { grid-template-columns: 1fr; }
    .coord-world-grid { grid-template-columns: 1fr 1fr; }
}