@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap);

.h-100p {
    height: 100%;
}

.h-16px {
    height: 16px;
}

.h-18px {
    height: 18px;
}

.h-1px {
    height: 1px;
}

.h-24px {
    height: 24px;
}

.h-32px {
    height: 32px;
}

.h-40px {
    height: 40px;
}

.h-50px {
    height: 50px;
}

.h-8px {
    height: 8px;
}

.m-0 {
    margin: 0;
}

.m-0-0-15px-0 {
    margin: 0 0 15px 0;
}

.m-0-0-20px-0 {
    margin: 0 0 20px 0;
}

.m-1rem-0 {
    margin: 1rem 0;
}

.m-20px-0 {
    margin: 20px 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-0_5rem {
    margin-bottom: 0.5rem;
}

.mb-10px {
    margin-bottom: 10px;
}

.mb-12px {
    margin-bottom: 12px;
}

.mb-15px {
    margin-bottom: 15px;
}

.mb-16px {
    margin-bottom: 16px;
}

.mb-1px {
    margin-bottom: 1px;
}

.mb-20px {
    margin-bottom: 20px !important;
}

.mb-24px {
    margin-bottom: 24px;
}

.mb-25px {
    margin-bottom: 25px !important;
}

.mb-2px {
    margin-bottom: 2px;
}

.mb-30px {
    margin-bottom: 30px;
}

.mb-32px {
    margin-bottom: 32px;
}

.mb-40px {
    margin-bottom: 40px;
}

.mb-48px {
    margin-bottom: 48px;
}

.mb-4px {
    margin-bottom: 4px;
}

.mb-5px {
    margin-bottom: 5px;
}

.mb-6px {
    margin-bottom: 6px;
}

.mb-8px {
    margin-bottom: 8px;
}

.ml-0 {
    margin-left: 0;
}

.ml-4px {
    margin-left: 4px;
}

.ml-6px {
    margin-left: 6px;
}

.ml-8px {
    margin-left: 8px;
}

.mr-0 {
    margin-right: 0;
}

.mr-4px {
    margin-right: 4px;
}

.mr-6px {
    margin-right: 6px;
}

.mr-8px {
    margin-right: 8px;
}

.mt-0_5rem {
    margin-top: 0.5rem;
}

.mt-10px {
    margin-top: 10px;
}

.mt-15px {
    margin-top: 15px !important;
}

.mt-16px {
    margin-top: 16px;
}

.mt-20px {
    margin-top: 20px;
}

.mt-24px {
    margin-top: 24px;
}

.mt-2px {
    margin-top: 2px, ;
}

.mt-2rem {
    margin-top: 2rem;
}

.mt-30px {
    margin-top: 30px;
}

.mt-50px {
    margin-top: 50px;
}

.mt-5px {
    margin-top: 5px !important;
}

.p-0 {
    padding: 0;
}

.p-0-40px {
    padding: 0 40px;
}

.p-10px {
    padding: 10px;
}

.p-10px-16px {
    padding: 10px 16px;
}

.p-10px-20px {
    padding: 10px 20px;
}

.p-10px-40px-40px {
    padding: 10px 40px 40px;
}

.p-12px {
    padding: 12px;
}

.p-12px-30px {
    padding: 12px 30px;
}

.p-12px-8px {
    padding: 12px 8px;
}

.p-15px {
    padding: 15px;
}

.p-15px-40px-15px-15px {
    padding: 15px 40px 15px 15px;
}

.p-16px {
    padding: 16px;
}

.p-20px {
    padding: 20px;
}

.p-24px {
    padding: 24px;
}

.p-2px-20px {
    padding: 2px 20px;
}

.p-30px {
    padding: 30px;
}

.p-32px {
    padding: 32px;
}

.p-40px {
    padding: 40px;
}

.p-6px-12px {
    padding: 6px 12px;
}

.p-8px-16px {
    padding: 8px 16px;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-15px {
    padding-bottom: 15px;
}

.pl-1_5rem {
    padding-left: 1.5rem;
}

.pl-20px {
    padding-left: 20px;
}

.pl-24px {
    padding-left: 24px;
}

.pl-30px {
    padding-left: 30px;
}

.pr-45px {
    padding-right: 45px;
}

.pt-24px {
    padding-top: 24px;
}

.pt-40px {
    padding-top: 40px;
}

.w-100p {
    width: 100%;
}

.w-16px {
    width: 16px;
}

.w-18px {
    width: 18px;
}

.w-24px {
    width: 24px;
}

.w-32px {
    width: 32px;
}

.w-40px {
    width: 40px;
}

.w-4px {
    width: 4px;
}

.w-8px {
    width: 8px;
}

:root {
    --primary-color: #ff6b35;
    --primary-rgb: 255, 107, 53;
    --primary-hover: #e55a2b;
    --secondary-color: #2563eb;
    --secondary-rgb: 37, 99, 235;
    --success-color: #10b981;
    --success-rgb: 16, 185, 129;
    --warning-color: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --danger-color: #ef4444;
    --danger-rgb: 239, 68, 68;
    --info-color: #0062ff;
    --sell-color: #dc2626;
    --sell-hover: #b91c1c;
    --buy-color: #00c22a;
    --buy-hover: #d97706;
    --buy-hover-color: #009921;
    --google-color: #db4437;
    --google-hover: #c23321;
    --bg-primary: #ffffff;
    --bg-primary-rgb: 255, 255, 255;
    --bg-secondary: #f8fafc;
    --bg-secondary-rgb: 248, 250, 252;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-primary-rgb: 30, 41, 59;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --glass-bg: var(--bg-secondary);
    --glass-border: var(--border-color);
    --glass-blur: none;
    --glow-primary: 0 4px 12px rgba(var(--primary-rgb), 0.1);
    --base-font-size: 13px;
    --small-font-size: 11px;
    --mini-font-size: 12px;
    --midi-font-size: 14px;
    --normal-font-size: 15px;
    --large-font-size: 16px;
    --xlarge-font-size: 17px;
    --xxlarge-font-size: 18px;
    --big-font-size: 20px;
    --biger-font-size: 22px;
    --biggest-font-size: 24px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-primary-rgb: 15, 23, 42;
    --bg-secondary: #1e293b;
    --bg-secondary-rgb: 30, 41, 59;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-primary-rgb: 248, 250, 252;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: var(--base-font-size);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 15% 25%, rgba(var(--primary-rgb), 0.15) 0%, transparent 40%), radial-gradient(circle at 85% 75%, rgba(var(--secondary-rgb), 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(var(--success-rgb), 0.08) 0%, transparent 60%), var(--theme-gradient, linear-gradient(135deg, var(--bg-primary) 20%, var(--bg-secondary) 80%));
    z-index: -3;
    animation: colorFlow 20s ease-in-out infinite;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(3px 3px at 25% 20%, rgba(var(--primary-rgb), 0.6), transparent), radial-gradient(2px 2px at 75% 30%, rgba(var(--secondary-rgb), 0.6), transparent), radial-gradient(4px 4px at 15% 70%, rgba(var(--success-rgb), 0.5), transparent), radial-gradient(2px 2px at 85% 80%, rgba(var(--warning-rgb), 0.6), transparent), radial-gradient(6px 1px at 40% 40%, rgba(var(--primary-rgb), 0.4), transparent), radial-gradient(1px 6px at 60% 60%, rgba(var(--secondary-rgb), 0.4), transparent), radial-gradient(1px 1px at 30% 85%, rgba(var(--success-rgb), 0.7), transparent), radial-gradient(1px 1px at 70% 15%, rgba(var(--warning-rgb), 0.7), transparent);
    background-size: 800px 600px, 600px 800px, 700px 500px, 900px 700px, 400px 400px, 500px 500px, 300px 300px, 400px 300px;
    animation: floatingGaming 25s linear infinite;
    z-index: -2;
    will-change: transform;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1.2em;
    font-weight: 600;
    align-items: center;
    gap: 0.5rem;
}

.f1 {
    font-size: var(--small-font-size);
}

.f4 {
    font-size: var(--midi-font-size);
}

.bg-main-color {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color) !important;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

.bg-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background: conic-gradient(from 0deg at 30% 30%, transparent 0deg, rgba(var(--primary-rgb), 0.08) 45deg, transparent 90deg, rgba(var(--secondary-rgb), 0.08) 180deg, transparent 225deg, rgba(var(--success-rgb), 0.06) 270deg, transparent 315deg);
    animation: meshRotate 40s linear infinite;
    will-change: transform;
}

@keyframes colorFlow {

    0%,
    100% {
        background: radial-gradient(circle at 15% 25%, rgba(var(--primary-rgb), 0.15) 0%, transparent 40%), radial-gradient(circle at 85% 75%, rgba(var(--secondary-rgb), 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(var(--success-rgb), 0.08) 0%, transparent 60%), linear-gradient(135deg, var(--bg-primary) 20%, var(--bg-secondary) 80%);
    }

    33% {
        background: radial-gradient(circle at 75% 15%, rgba(var(--secondary-rgb), 0.15) 0%, transparent 40%), radial-gradient(circle at 25% 85%, rgba(var(--warning-rgb), 0.12) 0%, transparent 40%), radial-gradient(circle at 80% 60%, rgba(var(--primary-rgb), 0.08) 0%, transparent 60%), linear-gradient(225deg, var(--bg-primary) 20%, var(--bg-secondary) 80%);
    }

    66% {
        background: radial-gradient(circle at 60% 80%, rgba(var(--success-rgb), 0.15) 0%, transparent 40%), radial-gradient(circle at 40% 20%, rgba(var(--secondary-rgb), 0.12) 0%, transparent 40%), radial-gradient(circle at 20% 40%, rgba(var(--warning-rgb), 0.08) 0%, transparent 60%), linear-gradient(45deg, var(--bg-primary) 20%, var(--bg-secondary) 80%);
    }
}

@keyframes floatingGaming {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    25% {
        transform: translate3d(-30px, -20px, 0) rotate(1deg);
    }

    50% {
        transform: translate3d(20px, -40px, 0) rotate(-1deg);
    }

    75% {
        transform: translate3d(-10px, 30px, 0) rotate(0.5deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes meshRotate {
    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}

[data-theme="dark"] body::before {
    background: radial-gradient(circle at 15% 25%, rgba(var(--primary-rgb), 0.2) 0%, transparent 40%), radial-gradient(circle at 85% 75%, rgba(var(--secondary-rgb), 0.18) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(var(--success-rgb), 0.12) 0%, transparent 60%), linear-gradient(135deg, var(--bg-primary) 20%, var(--bg-secondary) 80%);
}

[data-theme="dark"] body::after {
    background-image: radial-gradient(3px 3px at 25% 20%, rgba(var(--primary-rgb), 0.8), transparent), radial-gradient(2px 2px at 75% 30%, rgba(var(--secondary-rgb), 0.8), transparent), radial-gradient(4px 4px at 15% 70%, rgba(var(--success-rgb), 0.7), transparent), radial-gradient(2px 2px at 85% 80%, rgba(var(--warning-rgb), 0.8), transparent), radial-gradient(6px 1px at 40% 40%, rgba(var(--primary-rgb), 0.6), transparent), radial-gradient(1px 6px at 60% 60%, rgba(var(--secondary-rgb), 0.6), transparent), radial-gradient(1px 1px at 30% 85%, rgba(var(--success-rgb), 0.9), transparent), radial-gradient(1px 1px at 70% 15%, rgba(var(--warning-rgb), 0.9), transparent);
}

[data-theme="dark"] .bg-mesh {
    background: conic-gradient(from 0deg at 30% 30%, transparent 0deg, rgba(var(--primary-rgb), 0.12) 45deg, transparent 90deg, rgba(var(--secondary-rgb), 0.12) 180deg, transparent 225deg, rgba(var(--success-rgb), 0.10) 270deg, transparent 315deg);
}

.header {
    background: var(--bg-primary);
    position: relative;
    z-index: 101;
}

.header-top {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-top-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--mini-font-size);
}

.header-top-right {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--mini-font-size);
}

.header-top-links {
    display: flex;
    gap: 15px;
}

.header-top-links a {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.header-top-socials {
    display: flex;
    gap: 12px;
    border-left: 1px solid var(--border-color);
    padding-left: 15px;
}

.header-top-socials a {
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.header-top-socials a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.header-main {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    gap: 16px;
    min-height: 150px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 10px !important;
    height: 44px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-secondary) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    position: relative !important;
}

.header-btn:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.header-auth-group {
    display: flex !important;
    align-items: center !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    padding: 4px !important;
    gap: 4px !important;
    height: 44px !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--shadow-sm) !important;
}

.header-auth-group:hover {
    border-color: var(--primary-color);
}

.auth-btn-register {
    padding: 0 16px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: var(--text-secondary) !important;
    border-radius: 11px !important;
    transition: all 0.2s ease !important;
}

.auth-btn-login {
    background: var(--primary-color) !important;
    color: white !important;
    padding: 0 20px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border-radius: 11px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2) !important;
}

.auth-btn-login:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.header-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    border: none;
}

.header-notification-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.header-notification-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.header-notification-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.header-notification-toggle .notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger-color);
    color: #ffffff;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bg-primary);
}

.mini-notif-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: -10px;
    width: 320px;
    background: rgba(var(--bg-primary-rgb, 255, 255, 255), 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--bg-primary-rgb), 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .mini-notif-menu {
    background: rgba(30, 41, 59, 0.95);
    border-color: var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.header-notification-dropdown:hover .mini-notif-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.mini-notif-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    right: 0;
    width: 100%;
    height: 15px;
}

.mini-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
}

.mini-notif-header h3 {
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.3px;
    font-size: var(--midi-font-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.mini-mark-all {
    font-size: var(--mini-font-size);
}

.mini-mark-all {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    transition: opacity 0.2s ease;
    padding: 0;
}

.mini-notif-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mini-notif-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 4px 5px;
    background: transparent;
    text-decoration: none;
    transition: background 0.2s ease;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.mini-notif-item:hover {
    background: var(--bg-secondary);
}

.mini-notif-item.unread {
    background: rgba(var(--primary-rgb), 0.04);
}

.mini-notif-content {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
}

.mini-notif-content h4 {
    color: var(--text-primary);
    margin: 0 0 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--midi-font-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.mini-notif-item.unread .mini-notif-content h4::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--primary-color);
    border-radius: 50%;
}

.mini-notif-content p {
    color: var(--text-secondary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--mini-font-size);
    margin: 0;
}

.mini-notif-time {
    font-size: var(--mini-font-size) !important;
    color: var(--text-muted);
}

.mini-notif-time,
.gsearch-input::placeholder,
.gsearch-no-results-desc,
.sell-label,
.buy-label,
.price-stable,
.notification-time,
.footer-bottom p,
.amount-label,
.premium-text-muted-13,
.premium-bank-sub,
.premium-text-muted-12,
.premium-text-muted-11,
.premium-page-subtitle,
.withdraw-hint,
.withdraw-summary-row-label,
.request-empty,
.yb-info-text,
.yayinci-form-input::placeholder,
.dropzone-area .dz-message p,
.category-comment-rating i,
.category-comment-date,
.yildiz.bos,
.admin-tarih,
.weekly-star-label,
.mp-character-np .label,
.mp-character-stats .mp-stat-row .mp-stat-label,
.mp-filter-input::placeholder,
.mp-price-range-separator,
.mp-set-count,
.mp-character-np .label,
.mp-character-stats .mp-stat-row .mp-stat-label,
.pd-seller-char-stat-label,
.koitem-nick-input::placeholder,
.field-label,
.premium-text-muted-14,
.takas-v3-card-action a,
.v3-user-info .user-stats,
.v3-checkbox .v3-text {
    color: var(--text-muted);
}

.mini-mark-read {
    background: transparent;
    border: 1px solid var(--border-color);
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.mini-notif-item:hover .mini-mark-read {
    opacity: 1;
}

.mini-mark-read::after {
    content: '';
    width: 4px;
    height: 7px;
    border: solid transparent;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
    transition: border-color 0.2s;
}

.mini-mark-read:hover::after {
    border-color: #fff;
}

.mini-notif-empty {
    padding: 30px 10px;
    text-align: center;
    color: var(--text-muted);
}

.mini-notif-footer {
    padding: 10px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
}

.mini-notif-footer a {
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mini-mark-all:hover,
.mini-notif-footer a:hover {
    opacity: 0.8;
}

.header-user-toggle {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0 12px !important;
    min-width: 160px !important;
    height: 44px !important;
    border-radius: 14px !important;
}

.header-user-toggle span {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-user-dropdown-icon {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.header-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    min-width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.header-user-logout {
    color: var(--danger-color) !important;
}

.header-user-logout:hover {
    background: rgba(var(--danger-rgb), 0.1) !important;
    color: var(--danger-color) !important;
}

.header-user-menu-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.2s ease;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    top: 12px;
    right: 12px;
}

.header-user-menu-close:hover {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
}

[data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
}

.header-user-menu-item i,
.header-user-submenu-item i {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-user-menu-item,
.header-user-menu-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.header-user-menu-dropdown-toggle.expanded {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.header-user-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 20px;
    margin-top: 4px;
}

.header-user-submenu.show {
    max-height: 500px;
}

.header-user-submenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-muted);
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.header-user-submenu-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transform: translateX(4px);
}

.header-user-submenu-item i {
    width: 14px;
    text-align: center;
}

.header-user-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 12px;
}

.gamemenu-wrap {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.gamemenu-container {
    margin: 0 auto;
    max-width: 1800px;
}

.gamemenu-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

.gmenu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px;
    text-decoration: none;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    border-bottom-color: var(--primary-color);
}

.gmenu-dropdown .gmenu-link {
    cursor: pointer;
}

.gmenu-mega {
    position: absolute;
    top: 100%;
    left: 0;
    width: 500px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    z-index: 9999;
    display: none;
}

.gmenu-small {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    padding: 8px 0;
    display: none;
}

.gmega-content h3 {
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}

.gmega-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.gmega-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: var(--text-secondary);
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.gmega-item:hover {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.05);
    border-color: var(--primary-color);
}

.gmega-item img {
    width: 65px;
    height: 65px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.gsmall-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.auth-btn-register:hover,
.gmenu-link:hover,
.gsmall-item:hover {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.05);
}

.gsmall-item i {
    width: 16px;
    text-align: center;
}

.gmenu-link i {
    text-align: center;
    transition: transform 0.2s ease;
    margin-right: 5px;
    color: var(--primary-hover);
}

.gmenu-link .fa-chevron-down {
    width: 12px;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.gmega-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.gmega-footer .btn {
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--danger-color);
    color: white;
    border-radius: 12px;
    margin-left: auto;
    padding: 2px 6px;
    line-height: 1.2;
    text-align: center;
}

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
}

.mobile-menu-btn:hover,
.theme-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    max-width: 300px;
    min-width: 180px;
    animation: logoFadeIn 0.6s ease-out;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.logo-text span {
    color: var(--primary-color);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-text img {
    height: auto;
    width: auto;
    transition: all 0.3s ease;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.gmenu-dropdown:hover .gmenu-mega,
.gmenu-dropdown:hover .gmenu-small,
.logo-light,
[data-theme="dark"] .logo-dark {
    display: block;
}

.gsearch-container {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 24px;
    position: relative;
}

.gsearch-wrapper {
    position: relative;
    width: 100%;
}

.gsearch-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    height: 44px !important;
    transition: all 0.2s ease !important;
}

.gsearch-icon {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    z-index: 2;
    pointer-events: none;
    transition: color 0.2s ease;
}

.gsearch-input {
    width: 100% !important;
    padding: 0 50px 0 48px !important;
    height: 44px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    outline: none !important;
    border-radius: 12px !important;
}

.gsearch-clear {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text-muted);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.gsearch-clear:hover {
    background: var(--text-secondary);
    transform: scale(1.1);
}

.gsearch-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    z-index: 1001;
    max-height: 500px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.header-user-menu.header-user-show,
.gsearch-dropdown.gsearch-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gsearch-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    color: var(--text-muted);
}

.gsearch-category {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.gsearch-category-title {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.gsearch-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    text-decoration: none;
    color: var(--text-secondary);
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.header-user-menu-item:hover,
.header-user-menu-dropdown-toggle:hover,
.gsearch-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    transform: translateX(4px);
}

.gsearch-item-image {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    object-fit: cover;
    flex-shrink: 0;
}

.gsearch-item-info {
    flex: 1;
    min-width: 0;
}

.gsearch-item-name {
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.2;
}

.gsearch-item-desc {
    color: var(--text-muted);
    line-height: 1.3;
}

.gsearch-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    background: var(--bg-secondary);
    border-radius: 0 0 12px 12px;
}

.gsearch-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.gsearch-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}

.gsearch-no-results i {
    color: var(--text-muted);
    opacity: 0.5;
}

.gsearch-no-results-title,
.product-desc,
.stat-label,
.order-details,
.detail-row .label,
.summary-label,
.sell-summary .summary-label,
.spo-rating-text,
.spo-info-list li strong,
.spo-day-name,
.no-results-placeholder span,
.blog-stat i,
.pd-sidebar-item-info span,
.pd-stats-list li strong,
.pd-features-list li strong,
.pd-price-current sup,
.pd-seller-server-name,
.pd-soru-tarih,
.pd-cevap-tarih,
.pd-character-np .label,
.pd-stat-label,
.selectnum,
.results-count,
.blog-stat i {
    color: var(--text-secondary);
}

.gsearch-results {
    max-height: 400px;
    overflow-y: auto;
}

.gsearch-results .gsearch-category:first-child {
    border-top: none;
}

[data-theme="dark"] .gamemenu-wrap,
[data-theme="dark"] .gmenu-mega,
[data-theme="dark"] .gmenu-small {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

.theme-toggle {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 10px;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: rotate(15deg);
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
    flex: 1;
    min-width: 320px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.main-content>* {
    z-index: 1;
}

.main-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    gap: 15px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-large {
    padding: 16px 32px;
    width: 100%;
    justify-content: center;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.form-label {
    display: block;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    background: var(--bg-primary);
    outline: none;
}

.form-input.error {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.1);
}

.form-input.success {
    border-color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.1);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.error-message {
    background: rgba(var(--danger-rgb), 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: none;
}

.success-message {
    background: rgba(var(--success-rgb), 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: none;
}

.field-error {
    color: var(--danger-color);
    margin-top: 4px;
    display: none;
}

.product-list,
.order-list,
.notification-list,
.sss-faq-list,
.dyn-style-36,
.marketplace-main,
.pd-left-section,
.koitem-items-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-item {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    padding: 20px;
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 20px;
    align-items: center;
    transition: all 0.3s ease;
}

.product-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-name {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-actionspages {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.product-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 600px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    position: relative;
}

.quantity-controls-basket {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: relative;
}

.quantity-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.sell-price,
.buy-price,
.range-label,
.unit-price,
.summary-value,
.sell-number,
.favori-item-server,
.disclaimer-content strong,
.copy-field-value,
.premium-detail-item .value,
.premium-detail-value,
.timeline-title-premium,
.stats-card-value,
.spo-info-list li span,
.spo-day-hours,
.modern-stat-val,
.mp-filter-checkbox.checked label,
.pd-features-list li span,
.pd-seller-stats strong,
.current-price-display strong,
.balance-display strong,
.pd-stat-value,
.pd-list-item-name,
.koitem-item-server,
.meta-val,
.progress-point.active .point-label,
.progress-point.completed .point-label,
.item-info .name,
.math-row .val,
.takas-v3-math-row .val {
    color: var(--text-primary);
}

.sell-button {
    background: var(--sell-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    width: 100%;
}

.sell-button:hover {
    background: var(--sell-hover);
    transform: translateY(-1px);
}

.sell-section,
.buy-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.buy-button {
    background: var(--buy-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.buy-button:hover {
    background: var(--buy-hover-color);
    transform: translateY(-1px);
}

.product-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 24px;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.product-card:hover::before {
    transform: scaleX(1);
}

.product-image {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.product-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(var(--bg-primary-rgb), 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.product-card:hover .product-image::after {
    transform: translateX(100%);
}

.product-details {
    flex: 1;
    display: flex;
    gap: 8px;
    min-width: 0;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
}

.product-description {
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
}

.server-price-container {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    margin-bottom: 32px;
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.server-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.server-card.active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}

.server-name {
    color: var(--text-primary);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.server-status {
    color: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.server-status i {
    animation: pulse 2s infinite;
}

.chart-container {
    border-top: 1px solid var(--border-color);
    padding-top: 32px;
    margin-top: 32px;
}

.server-title,
.chart-title {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.time-filters {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.time-filter {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.time-filter.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.time-filter:hover:not(.active) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.chart-wrapper {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    height: 400px;
    margin-bottom: 32px;
}

.chart-wrapper canvas {
    background: var(--bg-primary);
    border-radius: 8px;
}

.price-chart {
    border-top: 1px solid var(--border-color);
    padding-top: 32px;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.price-table th {
    background: var(--primary-color);
    color: white;
    padding: 16px;
    text-align: left;
}

.price-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover,
.price-table tr:hover {
    background: var(--bg-tertiary);
}

.price-up,
.transaction-amount.deposit,
.alert-box.success i,
.discount-value,
.sell-summary .summary-value,
.transaction-amount.gb_sell,
.amount-value,
.security-feature i,
.premium-detail-total .value,
.stats-card-value.success,
.status-badge-onaylandi,
.dyn-style-120,
.password-requirements li.valid,
.password-requirements li.valid i,
.mp-stat-row-mini.stat-bonus span {
    color: var(--success-color);
}

.info-section h3 {
    margin: 24px 0 12px 0;
    color: var(--text-primary);
}

.info-section p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.7;
}

.info-section ul {
    list-style: none;
    padding-left: 0;
}

.info-section ul li {
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-left: 24px;
    position: relative;
}

.info-section ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
}

.info-section,
.faq-section {
    margin-top: 48px;
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.faq-title {
    margin-bottom: 24px;
    color: var(--text-primary);
    text-align: center;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
}

.faq-question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.faq-icon {
    background: var(--bg-secondary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gmega-footer .btn-primary,
.btn-primary,
.faq-item.active .faq-icon {
    background: var(--primary-color);
    color: white;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    color: var(--text-secondary);
    padding-top: 0;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding-top: 16px;
}

.login-card,
.register-card {
    background: var(--bg-primary);
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    position: relative;
}

.register-card {
    max-width: 500px;
}

.login-card::before,
.register-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.login-header,
.register-header {
    padding: 20px 20px 20px;
    text-align: center;
    background: var(--bg-secondary);
    position: relative;
}

.login-icon,
.register-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    box-shadow: var(--shadow-lg);
}

.login-subtitle,
.register-subtitle,
.dyn-style-80 {
    color: var(--text-secondary);
}

.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.password-strength {
    margin-top: 8px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 2px;
    background: var(--danger-color);
}

.password-strength-text {
    margin-top: 4px;
    color: var(--text-secondary);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
    cursor: pointer;
    user-select: none;
    position: relative;
    line-height: 1.5;
    margin: 0;
}

.checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.mini-mark-read:hover,
.checkbox.checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox.checked::after {
    content: "";
    position: absolute;
    left: 4px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label {
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
}

.forgot-password {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

.login-btn,
.register-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: var(--text-muted);
}

.divider span {
    padding: 0 16px;
    background: var(--bg-primary);
}

.signup-link,
.login-link {
    text-align: center;
    color: var(--text-secondary);
}

.checkbox-label a,
.signup-link a,
.login-link a {
    color: var(--primary-color);
    text-decoration: none;
}

.checkbox-label a:hover,
.signup-link a:hover,
.login-link a:hover {
    text-decoration: none;
}

.panel-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    min-width: 0;
}

.main-content {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    margin-bottom: 32px;
    position: relative;
    min-width: 0;
}

.sidebar {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    height: fit-content;
    top: 120px;
}

.user-profile {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.user-level {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
}

.user-balance {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.balance-label {
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.balance-amount {
    color: var(--success-color);
    align-items: center;
    gap: 8px;
}

.logout-btn {
    margin-top: 20px;
    width: 100%;
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.logout-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: white;
}

.stat-icon.primary {
    background: var(--primary-color);
}

.operation-card {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.operation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.bank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.bank-item:hover {
    border-color: var(--primary-color);
    background: var(--bg-primary);
}

.bank-item.selected {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.05);
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    flex-wrap: wrap;
}

.transaction-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.transaction-info {
    flex: 1;
    min-width: 200px;
}

.transaction-details {
    color: var(--text-secondary);
    line-height: 1.4;
}

.transaction-amount {
    white-space: nowrap;
    flex-shrink: 0;
}

.transaction-status {
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.transaction-history,
.recent-orders {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.order-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.order-info,
.notification-content,
.alert-box div,
.step-content,
.dropdown-sync .header-user-submenu-item,
.method-info,
.premium-flex-1,
.bank-card-info,
.dyn-style-53,
.hero-category-title,
.mp-price-range-inputs input,
.pd-seller-details,
.pd-seller-stat-label,
.pd-soru-meta {
    flex: 1;
}

.order-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    margin-left: auto;
    color: white !important;
}

.badge-success,
.order-status.completed {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
}

.order-status.pending {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
}

.order-status.processing {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
}

.notification-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification-item.unread {
    border-left: 4px solid var(--primary-color);
    background: rgba(var(--primary-rgb), 0.05);
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: --text-primary;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.notification-icon.info {
    background: var(--info-color) !important;
}

.notification-icon.warning {
    background: var(--warning-color) !important;
}

.notification-icon.error {
    background: var(--danger-color) !important;
}

.notification-text {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1050 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    position: relative;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.stat-card::before,
.modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.modal-title {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--danger-color);
    color: white;
    transform: scale(1.1);
}

.modal-body {
    padding: 32px;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.modal-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: inherit;
    opacity: 0.1;
    transform: scale(1.5);
}

.modal-icon i {
    position: relative;
    z-index: 1;
}

.modal-body p {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    max-width: 400px;
}

.commission-ranges {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.range-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 24px 32px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.deposit-info {
    text-align: left;
    width: 100%;
    max-width: 400px;
}

.deposit-info h3 {
    color: var(--text-primary);
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.divider::before,
.divider::after,
.deposit-info h3::before,
.deposit-info h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.payment-details {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.mini-notif-item:last-child,
.gsearch-category:last-child,
.price-table tr:last-child td,
.faq-item:last-child,
.detail-row:last-child {
    border-bottom: none;
}

.detail-row .value {
    color: var(--text-primary);
    word-break: break-all;
    text-align: right;
    max-width: 60%;
}

.iban-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}


.server-card:hover,
.iban-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.iban-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.iban-number {
    font-family: 'Courier New', monospace;
    color: var(--text-secondary);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.iban-holder {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.iban-select {
    color: var(--primary-color);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.iban-item:hover .iban-select {
    transform: translateX(4px);
}

.warning-box {
    background: rgba(var(--warning-rgb), 0.1);
    border: 1px solid var(--warning-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
}

.warning-box i {
    color: var(--warning-color);
    margin-top: 2px;
    flex-shrink: 0;
}

.warning-box p {
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
    text-align: left;
}

.alert-box {
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0 24px 0;
}

.alert-box.warning {
    background: rgba(var(--warning-rgb), 0.1);
    border: 1px solid var(--warning-color);
}

.alert-box.error {
    background: rgba(var(--danger-rgb), 0.1);
    border: 1px solid var(--danger-color);
}

.alert-box.info {
    background: rgba(var(--secondary-rgb), 0.1);
    border: 1px solid var(--info-color);
}

.alert-box.success {
    background: rgba(var(--success-rgb), 0.1);
    border: 1px solid var(--success-color);
}

.alert-box i {
    margin-top: 2px;
    flex-shrink: 0;
}

.alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.alert-success {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
    border: 1px solid rgba(var(--success-rgb), 0.2);
}

.alert-error {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(var(--danger-rgb), 0.2);
}

.alert-box.warning i {
    color: var(--warning-color);
}

.alert-box.info i {
    color: var(--info-color);
}

.alert-box strong,
.profile-premium-sr-text strong,
.dyn-style-111,
.countdown-main-text {
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.alert-box p {
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

.chart-header,
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.section-header h3 {
    color: var(--text-primary);
    margin: 0;
}

.order-detail-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.order-detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.order-detail-section .section-title {
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.detail-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px;
}

.detail-row.highlight {
    background: var(--bg-secondary);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 4px 0;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 32px;
    width: 100%;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.cart-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    box-shadow: var(--shadow-sm);
}

.cart-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.item-image {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    overflow: hidden;
}

.item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.user-name,
.stat-value,
.transaction-type,
.order-number,
.notification-title,
.iban-bank,
.item-name {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.item-character-input {
    margin-top: 10px;
    width: 100%;
    max-width: 300px;
    flex-shrink: 0;
    margin-bottom: 10px;
}

#gbSellModal .modal-header {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    position: relative;
    overflow: hidden;
}

#gbSellModal .modal-header::before {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

#gbSellModal .modal-footer {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

#gbSellModal .modal-content,
#gbSellModal .modal-body {
    overflow: visible !important;
}

#gbSellModal .item-character-input {
    max-width: 100% !important;
}

#gbSellModal .character-dropdown-list {
    z-index: 10001 !important;
}

.server-character-input {
    width: 100%;
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    height: 38px;
}

.server-character-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
}

.item-price {
    text-align: right;
    min-width: 90px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.total-price {
    color: var(--text-muted);
    margin-top: 2px;
}

.quantity-input {
    min-width: 120px;
    text-align: center;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
    transition: all 0.2s ease;
    width: 40px;
    height: 100%;
    -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-btn-group {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    height: 100%;
    padding: 5px;
}

.qty-btn-group .quantity-btn {
    width: 24px;
    flex: 1;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin: 5px;
}

.qty-btn-group .quantity-btn:first-child {
    border-bottom: 1px solid var(--border-color);
}

.qty-btn-group .quantity-btn:hover {
    color: var(--primary-color);
    background: var(--bg-secondary);
}

.item-expand-toggle {
    display: none;
    cursor: pointer;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border-radius: 20px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.header-user-menu-dropdown-icon,
.header-user-dropdown-icon,
.item-expand-toggle i,
.gmenu-link .fa-chevron-down {
    transition: transform 0.3s ease;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.header-user-toggle.header-user-active .header-user-dropdown-icon,
.header-user-menu-dropdown-toggle.expanded .header-user-menu-dropdown-icon,
.gmenu-dropdown:hover .gmenu-link .fa-chevron-down,
.cart-item.is-expanded .item-expand-toggle i {
    transform: rotate(180deg);
}

.item-mobile-collapsible {
    display: contents;
}

.remove-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    gap: 6px;
}

.price-down,
.transaction-amount.withdraw,
.alert-box.error i,
.item-description,
.remove-btn:hover {
    color: var(--danger-color);
}

.cart-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.coupon-title {
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-group,
.coupon-form {
    display: flex;
    gap: 8px;
}

.coupon-input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.coupon-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.coupon-btn:hover {
    background: var(--primary-hover);
}

.coupon-section,
.order-summary {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

.section-title,
.summary-title {
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-row,
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.summary-row:last-child {
    border-bottom: none;
    color: var(--primary-color);
    margin-top: 8px;
    padding-top: 16px;
    border-top: 2px solid var(--border-color);
}

.checkout-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.login-btn:hover,
.register-btn:hover,
.checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.login-btn:disabled,
.register-btn:disabled,
.checkout-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

.search-subtitle {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.search-form {
    display: flex;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.search-input {
    flex: 1;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.gsearch-input-group:hover,
.gsearch-input-group.gsearch-focused,
.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.search-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gmega-footer .btn-primary:hover,
.gsearch-view-all:hover,

.search-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.order-number {
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-icon.warning,
.modal-icon.warning,
.order-status.pending {
    background: var(--warning-color);
}

.stat-icon.info,
.modal-icon.info,
.order-status.processing {
    background: var(--info-color);
}

.stat-icon.success,
.transaction-icon.deposit,
.modal-icon.success,
.order-status.completed {
    background: var(--success-color);
}

.stat-icon.danger,
.transaction-icon.withdraw,
.modal-icon.error,
.order-status.cancelled {
    background: var(--danger-color);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.help-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.loading {
    opacity: 0.7;
    pointer-events: none;
}

.loading .buy-button,
.loading .sell-button {
    background: var(--text-muted);
}

.pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid var(--border-color);
}

.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}

.server-card::before,
.iban-item::before,
.pagination-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.1), transparent);
    transition: left 0.5s ease;
}

.server-card:hover::before,
.iban-item:hover::before,
.pagination-btn:hover::before {
    left: 100%;
}

.pagination-btn:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pagination-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.pagination-btn:disabled,
.pagination-btn.disabled {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.header-user-close,
.mobile-menu,
.mobile-menu-overlay,
.logo-dark,
[data-theme="dark"] .logo-light,
.pagination-btn.active::before,
.pagination-btn:disabled::before,
.pagination-btn.disabled::before {
    display: none;
}

.pagination-btn:disabled:hover,
.pagination-btn.disabled:hover {
    border-color: var(--border-color);
    color: var(--text-muted);
    transform: none;
    box-shadow: none;
}

.pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--text-muted);
    user-select: none;
    pointer-events: none;
}

.pagination-info {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}

.pagination-first,
.pagination-last {
    padding: 8px 16px;
    gap: 6px;
}

.pagination-prev,
.pagination-next {
    padding: 8px 14px;
    gap: 6px;
}

.pagination.loading {
    opacity: 0.5;
    pointer-events: none;
}

.pagination.loading .pagination-btn {
    animation: pulse 1.5s ease-in-out infinite;
}

.footer {
    position: relative;
    z-index: 1;
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    border-top: 1px solid var(--border-color);
    margin-top: 64px;
    padding: 48px 0 0;
    color: var(--text-secondary);
}

.footer-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr repeat(5, 1fr);
    gap: 32px;
    padding: 0 24px 40px;
    box-sizing: border-box;
}

.footer-section {
    min-width: 0;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-logo img {
    width: auto;
    height: 44px;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.footer-logo h4 {
    color: var(--text-primary);
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.footer-slogan {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

[data-theme="dark"] .footer-logo img {
    filter: brightness(0) invert(1);
}

.footer-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.footer-subtitle {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 4px 0 8px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-list li {
    padding: 0;
    line-height: 1.4;
}

.footer-list a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.footer-list a:hover {
    color: var(--primary-color, #ff1b4c);
    transform: translateX(2px);
}

.footer-list a i {
    font-size: 11px;
    opacity: 0.7;
}

.footer-social-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-social {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    text-decoration: none;
    font-size: 15px;
    transition: all 0.18s ease;
}

.footer-social:hover {
    transform: translateY(-2px);
    color: #fff;
}

.footer-social.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.footer-social.instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: #dc2743;
}

.footer-social.twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
}

.footer-social.youtube:hover {
    background: #ff0000;
    border-color: #ff0000;
}

.footer-social.discord:hover {
    background: #5865f2;
    border-color: #5865f2;
}

.footer-whatsapp-wrap {
    display: flex;
    justify-content: center;
    padding: 4px 24px 28px;
}

.footer-whatsapp-bar {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff !important;
    border-radius: 14px;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    max-width: 100%;
}

.footer-whatsapp-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(37, 211, 102, 0.40);
    color: #fff !important;
}

.footer-whatsapp-icon {
    font-size: 26px;
    line-height: 1;
}

.footer-whatsapp-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.footer-whatsapp-phone {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.footer-whatsapp-text {
    font-size: 11px;
    opacity: 0.92;
    margin-top: 2px;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 18px 24px;
    text-align: center;
    color: var(--text-muted);
}

.footer-bottom p {
    color: var(--text-muted);
    margin: 0;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .footer-content {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 28px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding-bottom: 28px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-whatsapp-icon {
        font-size: 22px;
    }

    .footer-whatsapp-phone {
        font-size: 15px;
    }
}

@media (max-width: 420px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

.header-user-dropdown,
.header-user-menu-dropdown,
.gmenu-dropdown,
.password-container,
.timeline,
.share-actions-wrapper,
.v3-input-wrapper,
.product-actions-wrapper,
.header-game-dropdown {
    position: relative;
}

.header-game-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    position: relative;
    min-width: 160px;
    justify-content: space-between;
}

.header-user-toggle:hover,
.header-game-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.header-user-toggle.header-user-active,
.quantity-btn:hover,
.cart-item.is-expanded .item-expand-toggle,
.header-game-toggle.header-game-active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.cart-message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
}

.cart-message.show {
    transform: translateX(0);
    opacity: 1;
}

.btn-success,
.cart-message.success {
    background: var(--success-color);
    color: white;
}

.cart-message.info {
    background: var(--info-color);
    color: white;
}

.btn-danger,
.cart-message.error {
    background: var(--danger-color);
    color: white;
}

.form-group {
    margin-bottom: 16px;
    flex: 1;
}

.form-group label {
    margin-bottom: 6px;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.quantity-input:focus,
.coupon-input:focus,
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
}

.notification-icon.success,
.btn.success {
    background: var(--success-color) !important;
}

.empty-state,
.empty-cart,
.empty-products {
    text-align: center;
    padding: 64px 32px;
    color: var(--text-muted);
}

.empty-state i,
.empty-cart i,
.empty-products i {
    margin-bottom: 16px;
    color: var(--text-muted);
}

.login-title,
.register-title,
.empty-state h3,
.empty-cart h3,
.search-title,
.empty-products h3 {
    margin-bottom: 8px;
    color: var(--text-primary);
}

.product-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.cart-counter {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: var(--danger-color);
    color: white;
    border-radius: 50%;
    padding: 0 6px;
    line-height: 1;
    border: 1px solid var(--bg-primary);
    box-shadow: 0 2px 8px rgba(var(--danger-rgb), 0.4);
    z-index: 10;
    transition: all 0.3s ease;
    animation: pulse 0.3s ease-in-out;
    width: 20px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.fa-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.order-status.partial,
.status-badge.partial {
    background: linear-gradient(135deg, var(--warning-color), #d97706);
    color: white;
    border-color: #d97706;
}

.order-status.partial i,
.status-badge.partial i {
    color: white;
}

.gb-sell-info {
    text-align: left;
    width: 100%;
    max-width: 500px;
}

.sell-summary {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.sell-summary .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.sell-summary .summary-row:last-child {
    border: none;
}

.transaction-icon.gb_sell {
    background: var(--success-color);
}

.gb-sell-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.gb-sell-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.sell-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.sell-info {
    flex: 1;
    min-width: 0;
}

.sell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sell-date {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sell-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sell-product {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sell-amount {
    text-align: right;
    min-width: 120px;
}

.sell-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.status-badge.pending {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
}

.status-badge.completed {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
}

.status-badge.cancelled {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
}

.sell-actions {
    flex-shrink: 0;
}

.cart-counter.pulse {
    animation: cartPulse 0.6s ease-in-out;
}

.cart-counter.bounce {
    animation: cartBounce 0.5s ease-in-out;
}

.cart-counter.shake {
    animation: cartShake 0.5s ease-in-out;
}

.cart-counter.success {
    background: var(--success-color);
    box-shadow: 0 2px 8px rgba(var(--success-rgb), 0.4);
}

.cart-counter.warning {
    background: var(--warning-color);
    box-shadow: 0 2px 8px rgba(var(--warning-rgb), 0.4);
}

.cart-counter.info {
    background: var(--info-color);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

@keyframes cartPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes cartBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-4px) scale(1.1);
    }

    60% {
        transform: translateY(-2px) scale(1.05);
    }
}

@keyframes cartShake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-2px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(2px);
    }
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px var(--danger-color), 0 0 10px var(--danger-color), 0 0 15px var(--danger-color);
    }

    to {
        box-shadow: 0 0 10px var(--danger-color), 0 0 20px var(--danger-color), 0 0 30px var(--danger-color);
    }
}

.cart-counter.loading {
    background: var(--text-muted);
    animation: loading-pulse 1.5s ease-in-out infinite;
}

@keyframes loading-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.cart-counter.empty {
    display: none !important;
}

.cart-counter.full {
    background: var(--success-color);
    box-shadow: 0 2px 8px rgba(var(--success-rgb), 0.4);
}

.cart-counter.error {
    background: var(--danger-color);
    animation: cartShake 0.5s ease-in-out;
}

.cart-counter.updating {
    background: var(--warning-color);
    animation: cartPulse 1s ease-in-out infinite;
}

.cart-counter.overflow {
    padding: 0 2px;
    min-width: 24px;
    height: 18px;
    border-radius: 9px;
    right: -10px;
    top: -6px;
}

.cart-counter:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.logo:hover {
    transform: translateY(-1px);
}

.logo:hover .logo-text img {
    transform: scale(1.05);
}

[data-theme="dark"] .logo-text img {
    filter: brightness(1.1) contrast(1.05);
}

[data-theme="dark"] .logo-text span {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}

.logo.loading {
    opacity: 0.7;
    pointer-events: none;
}

.logo.loading .logo-text img {
    filter: blur(1px);
}

.logo-text img:not([src]) {
    display: none;
}

@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo:hover .logo-text span {
    color: var(--primary-hover);
}

.logo:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.logo:focus:not(:focus-visible) {
    outline: none;
}

.header-main .logo {
    transition: all 0.3s ease;
    overflow: hidden;
    flex-shrink: 1;
}

.heartbeat-line {
    margin-right: 15px;
    opacity: 1;
    transition: all 0.3s ease;
}

.heartbeat-active {
    color: var(--success-color);
}

.heartbeat-inactive {
    color: var(--danger-color);
    opacity: 0.7;
}

.heartbeat-inactive path {
    animation: none;
    stroke-dasharray: none;
}

@keyframes heartbeat-zero {
    0% {
        stroke-dashoffset: 300;
        opacity: 0.6;
    }

    25% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    75% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -300;
        opacity: 0.6;
    }
}

@keyframes heartbeat-pandora {
    0% {
        stroke-dashoffset: 350;
        opacity: 0.7;
    }

    30% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    70% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -350;
        opacity: 0.7;
    }
}

@keyframes heartbeat-agartha {
    0% {
        stroke-dashoffset: 280;
        opacity: 0.5;
    }

    35% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    65% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -280;
        opacity: 0.5;
    }
}

@keyframes heartbeat-felis {
    0% {
        stroke-dashoffset: 400;
        opacity: 0.8;
    }

    20% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    80% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -400;
        opacity: 0.8;
    }
}

@keyframes heartbeat-dryads {
    0% {
        stroke-dashoffset: 250;
        opacity: 0.6;
    }

    30% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    70% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -250;
        opacity: 0.6;
    }
}

@keyframes heartbeat-destan {
    0% {
        stroke-dashoffset: 320;
        opacity: 0.4;
    }

    40% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    60% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -320;
        opacity: 0.4;
    }
}

@keyframes heartbeat-oreads {
    0% {
        stroke-dashoffset: 270;
        opacity: 0.6;
    }

    35% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    65% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -270;
        opacity: 0.6;
    }
}

@keyframes heartbeat-minark {
    0% {
        stroke-dashoffset: 340;
        opacity: 0.7;
    }

    30% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    70% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -340;
        opacity: 0.7;
    }
}

.server-card.active .heartbeat-active,
.server-card.active .heartbeat-inactive {
    color: #ea5d2d;
}

.profile-tab-btn {
    flex: 1;
    padding: 20px 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    border-bottom: 3px solid transparent;
}

.profile-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.profile-tab-btn.active {
    color: var(--primary-color);
    background: var(--bg-primary);
    border-bottom-color: var(--primary-color);
}

.profile-tab-content {
    display: none;
    min-height: 400px;
}

.profile-tab-content.active {
    display: block;
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-card,
.info-card-center {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.info-icon {
    color: var(--primary-color);
    margin-top: 2px;
    flex-shrink: 0;
}

.info-content p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.info-content h4,
.step-content h5 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.step-content p {
    margin: 0 0 10px 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.qr-code {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
}

.backup-code {
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    text-align: center;
    letter-spacing: 1px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.backup-code:hover {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.action-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
}

.form-help {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary);
    line-height: 1.4;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#verificationCode {
    max-width: 160px;
    text-align: center;
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
    margin: 0 auto 16px;
    display: block;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 12px;
}

#twoFactorCode {
    text-align: center;
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

#verificationCode:focus,
#twoFactorCode:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.security-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.security-badge.success {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.security-badge.warning {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

.security-badge.danger {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

.security-badge.info {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--info-color);
    border: 1px solid var(--info-color);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme="dark"] .qr-code {
    filter: brightness(1.1) contrast(1.05);
    background: white;
    padding: 8px;
    border-radius: 8px;
}

[data-theme="dark"] .backup-code {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .backup-code:hover {
    background: var(--bg-tertiary);
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.nav-link i {
    width: 18px;
    text-align: center;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    border-left: 3px solid transparent;
}

.nav-dropdown-toggle .dropdown-icon {
    transition: transform 0.2s ease;
    width: auto;
    opacity: 0.6;
}

.nav-dropdown-toggle.expanded .dropdown-icon {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    background: var(--bg-tertiary);
}

.nav-dropdown-menu.show {
    max-height: 100%;
    opacity: 1;
    padding: 4px 0;
}

.nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 32px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.nav-link.active,
.nav-dropdown-toggle.expanded,
.nav-dropdown-link.active {
    background: var(--bg-secondary);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.nav-dropdown-link i {
    width: 16px;
    text-align: center;
}

.nav-dropdown-link-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-link:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown-link:hover,
.nav-dropdown-link-wrapper:hover .nav-dropdown-link {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-left-color: var(--primary-color);
}

.view-store-link {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    z-index: 5;
    opacity: 0.3;
}

.nav-dropdown-link-wrapper:hover .view-store-link {
    opacity: 0.6;
}

.view-store-link:hover {
    opacity: 1 !important;
    background: var(--bg-tertiary);
    color: var(--primary-color);
}

.dropdown-sync {
    position: relative;
    width: 100%;
}

.dropdown-sync:hover .header-user-submenu-item {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transform: translateX(4px);
}

.dropdown-sync .view-store-link {
    right: 8px;
}

.item-reverse {
    color: #f286a6 !important;
}

.item-normal {
    color: #a05096 !important;
}

.item-set {
    color: #824b9f !important;
}

.item-unique {
    color: #d0c689 !important;
}

.item-rare {
    color: #3498db !important;
}

.shop_info_bonusintelligence,
.shop_info_bonushealth,
.shop_info_bonushp,
.shop_info_bonusmp,
.shop_info_bonusstrength,
.shop_info_bonusmagicpower,
.shop_info_bonusdexterity {
    color: #88c329 !important;
}

.shop_info_resistancedark,
.shop_info_resistanceflame,
.shop_info_resistanceglacier,
.shop_info_resistancelighting {
    color: #546f78 !important;
}

.shop_info_requireddexterity,
.shop_info_requiredstrength,
.shop_info_requiredlevel {
    color: #ff4949 !important;
}

.shop_info_damageflame,
.shop_info_damageglacier,
.shop_info_damagepoison,
.shop_info_damagelighting {
    color: #39da95 !important;
}

.shop_info_defensesword,
.shop_info_defensedagger,
.shop_info_defensespear,
.shop_info_defenseclub,
.shop_info_defenseaxe,
.shop_info_defensejamadar,
.shop_info_defensearrow {
    color: #5cd1e5 !important;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

.online-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--success-color), var(--success-color));
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 4;
    box-shadow: 0 2px 6px rgba(var(--success-rgb), 0.3);
    animation: pulse-green 2s infinite;
    font-size: var(--mini-font-size);
}


.coming-soon {
    color: #ff0000;
    animation: pulse-red 1.5s infinite;
}

.yayincilar-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding: 8px 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.yayinci-item {
    position: relative;
    min-width: 100px;
    height: 130px;
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    overflow: hidden;
}

.yayinci-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.yayinci-sponsor-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, var(--warning-color), #ff8c00);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    z-index: 3;
    box-shadow: var(--shadow-sm);
    animation: pulse-gold 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

.yayinci-name {
    color: var(--text-primary);
    text-align: center;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.favori-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.favori-item {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
}

.favori-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.favori-item-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.favori-item-image {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.favori-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favori-item-info {
    flex: 1;
    min-width: 0;
}

.favori-item-title {
    color: var(--text-primary);
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favori-item-title a {
    color: inherit;
    text-decoration: none;
}

.favori-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.favori-item-category {
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 6px;
}

.favori-item-status {
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.favori-status-aktif {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
}

.favori-status-satildi {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
}

.favori-status-pasif {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
}

.favori-status-bekliyor {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
}

.favori-item-price {
    color: var(--primary-color);
    margin-bottom: 12px;
}

.favori-item-date {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.favori-remove-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: rgba(var(--danger-rgb), 0.1);
    border: 1px solid rgba(var(--danger-rgb), 0.2);
    border-radius: 50%;
    color: var(--danger-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.favori-remove-btn:hover {
    background: var(--danger-color);
    color: white;
    transform: scale(1.1);
}

.favori-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.favori-empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.favori-empty-state p {
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-bottom: 24px;
}

.favori-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    gap: 8px;
}

.favori-pagination a {
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.favori-pagination a:hover,
.favori-pagination a.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(var(--bg-primary-rgb), 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.custom-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-select {
    padding: 12px 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1em;
}

.dropdown-arrow {
    display: none;
}

.payment-security-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 32px 24px;
}

.security-container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.payment-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.payment-icon {
    width: 48px;
    height: 48px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.payment-icon img,
.payment-icon svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.payment-icon:hover {
    transform: translateY(-2px) scale(1.05);
    filter: grayscale(0);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.security-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.security-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.footer-disclaimer {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    padding: 0;
}

.disclaimer-header {
    padding: 12px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    user-select: none;
    transition: background 0.3s ease;
}

.disclaimer-icon {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.disclaimer-content {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 24px;
}

.disclaimer-content p {
    color: var(--text-secondary);
    font-size: var(--small-font-size);
    line-height: 1.6;
    margin: 0 0 8px;
}

.disclaimer-cookie-link {
    margin-top: 8px;
}

.disclaimer-cookie-link a {
    color: var(--primary-color, #ff1b4c);
    text-decoration: none;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.15s ease;
}

.disclaimer-cookie-link a:hover {
    opacity: 0.85;
}

.footer-bottom p {
    color: var(--text-muted);
    margin: 0;
}

[data-theme="dark"] .payment-icon {
    filter: brightness(1.1) grayscale(0.2);
}

[data-theme="dark"] .payment-icon:hover {
    filter: brightness(1.2) grayscale(0);
}

[data-theme="dark"] .payment-security-section {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .footer-disclaimer {
    background: var(--bg-tertiary);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payment-icon:nth-child(1) {
    animation-delay: 0.1s;
}

.payment-icon:nth-child(2) {
    animation-delay: 0.2s;
}

.payment-icon:nth-child(3) {
    animation-delay: 0.3s;
}

.payment-icon:nth-child(4) {
    animation-delay: 0.4s;
}

.payment-icon:nth-child(5) {
    animation-delay: 0.5s;
}

.payment-icon:nth-child(6) {
    animation-delay: 0.6s;
}

.payment-icon:nth-child(7) {
    animation-delay: 0.7s;
}

.payment-icon:nth-child(8) {
    animation-delay: 0.8s;
}

form#ibanForm {
    align-self: stretch;
}

.razer-icon {
    width: 55px;
    height: 35px;
    background: url('../images/razerid.webp') no-repeat center;
    background-size: contain;
}

.google-btn:disabled,
.razer-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.razer-btn,
.google-btn {
    width: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.razer-btn:hover,
.google-btn:hover {
    border-color: var(--google-color);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.google-icon {
    width: 55px;
    height: 35px;
    background: url('../images/google.png') no-repeat center;
    background-size: contain;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: white;
    position: relative;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.turnstile-container {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    padding: 10px;
}

.mini-menu-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    margin-right: 2px;
    vertical-align: middle;
}

#alertModal {
    z-index: 1100 !important;
}

#confirmModal {
    z-index: 1090 !important;
}

.quick-actions {
    display: flex;
    gap: 8px;
    align-content: center;
    justify-content: center;
}

.quick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-decoration: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.quick-btn.deposit {
    background: rgba(var(--success-rgb), 0.05);
    color: var(--success-color);
    border-color: rgba(var(--success-rgb), 0.2);
}

.quick-btn.withdraw {
    background: rgba(var(--danger-rgb), 0.05);
    color: var(--danger-color);
    border-color: rgba(var(--danger-rgb), 0.2);
}

.quick-btn:hover {
    transform: translateY(-2px);
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.toggle-balance-btn {
    cursor: pointer;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.premium-container {
    padding: 10px;
    animation: fadeUp 0.3s ease-out;
}

.premium-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.bank-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.bank-card-premium {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.bank-card-premium.selected {
    border-color: var(--primary-color);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.bank-logo-wrap {
    width: 44px;
    height: 44px;
    background: var(--bg-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.receipt-header {
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.premium-btn {
    width: 100%;
    background: var(--primary-color);
    color: white;
    padding: 14px;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.premium-btn:hover {
    background: var(--primary-hover);
}

.premium-btn.danger {
    background: var(--danger-color);
}

.premium-btn.danger:hover {
    background: #b91c1c;
}

.iban-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.iban-premium-card {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
}

.iban-card-number {
    font-family: monospace;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.iban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.delete-btn-premium {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-btn-premium:hover {
    background: var(--danger-color);
    color: white;
}

.amount-input-premium::-webkit-outer-spin-button,
.amount-input-premium::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.premium-tab-nav {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 12px;
    width: fit-content;
    margin-bottom: 24px;
}

.premium-tab-btn {
    padding: 8px 16px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.premium-tab-btn.active {
    background: var(--bg-primary);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.modern-alert-premium {
    background: rgba(var(--warning-rgb), 0.05);
    border-left: 4px solid var(--warning-color);
    padding: 16px;
    border-radius: 0 12px 12px 0;
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.premium-layout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
}

.bank-details-card {
    background: var(--bg-primary);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-sm);
}

.bank-info-grid {
    display: flex;
    gap: 24px;
    align-items: center;
}

.bank-text-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.copy-field-premium {
    background: var(--bg-secondary);
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.iban-premium-card:hover,
.copy-field-premium:hover {
    border-color: var(--primary-color);
}

.copy-field-label {
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-left: 4px;
}

.bank-qr-wrap {
    width: 100px;
    height: 100px;
    background: white;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.info-alert-premium {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(var(--primary-color), 0.03);
    border-radius: 10px;
    color: var(--text-secondary);
    line-height: 1.4;
    border: 1px dashed rgba(var(--primary-color), 0.2);
}

.premium-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.premium-title-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    min-width: 0;
}

.premium-title-wrap>.premium-title-icon {
    flex-shrink: 0;
}

.premium-title-wrap>div:not(.premium-title-icon) {
    min-width: 0;
    flex: 1;
}

.premium-header-title {
    overflow-wrap: anywhere;
}

.premium-title-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

.premium-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.payment-method-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.method-tab {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-bottom: 3px solid transparent;
}

.method-tab:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.method-tab.active {
    background: rgba(var(--primary-color), 0.05);
    border-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.method-icon {
    width: 44px;
    height: 44px;
    background: var(--bg-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.method-tab.active .method-icon {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.method-title {
    display: block;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.method-desc,
.dyn-style-49,
.total-box .label {
    color: var(--text-muted);
    display: block;
}

.method-tab .arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    opacity: 0.3;
    transition: all 0.3s ease;
}

.method-tab.active .arrow {
    color: var(--primary-color);
    opacity: 1;
    transform: translateX(4px);
}

.pos-option-premium {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

.pos-option-premium:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color), 0.02);
}

.pos-option-premium.selected {
    background: rgba(var(--primary-color), 0.08);
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.pos-logo {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    box-shadow: var(--shadow-sm);
}

.pos-name {
    display: block;
    color: var(--text-primary);
}

.pos-comm {
    display: block;
    color: var(--danger-color);
    margin-top: 2px;
}

.amount-input-premium {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    padding: 10px 0;
    color: var(--text-primary);
    text-align: center;
    -moz-appearance: textfield;
    appearance: none;
    transition: all 0.3s ease;
}

.amount-input-premium:focus {
    outline: none;
    border-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.quick-amount-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.receipt-wrap {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 24px;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    color: var(--text-muted);
}

.receipt-row.total {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}

.copy-btn-premium {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn-premium:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.deposit-security-alert {
    background: rgba(var(--success-rgb), 0.1);
    border: 1px solid rgba(var(--success-rgb), 0.2);
    border-radius: 16px;
    padding: 16px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-item-link:hover {
    color: var(--primary-color) !important;
    text-decoration: none;
}

.item-marketplace-badge {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.item-marketplace-badge .badge {
    padding: 3px 6px;
    background-color: var(--bg-primary);
    border-radius: 4px;
}

.character-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.character-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    overflow-x: hidden;
}

.character-dropdown-list .dropdown-header {
    padding: 10px 15px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.character-dropdown-list .character-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-color);
    gap: 10px;
}

.character-dropdown-list .character-item:last-child {
    border-bottom: none;
}

.bank-card-premium:hover,
.character-dropdown-list .character-item:hover {
    background: var(--bg-tertiary);
}

.character-dropdown-list .character-item .char-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    flex-grow: 1;
}

.character-dropdown-list .character-item .delete-char {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.7;
    transition: color 0.2s;
    padding: 5px;
}

.character-dropdown-list .character-item .delete-char:hover {
    opacity: 1;
    color: var(--danger-color);
}

.character-dropdown-list .no-characters {
    padding: 15px;
    text-align: center;
    color: var(--text-muted);
}

.input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.input-group .form-control,
.input-group input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    flex: 1;
}

.input-group .btn,
.input-group button {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    white-space: nowrap;
}

.character-dropdown-wrapper .input-group input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

.save-character-btn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.save-character-btn svg,
.save-character-btn i {
    color: var(--success-color) !important;
    width: 14px !important;
    height: 14px !important;
    stroke-width: 3px !important;
    align-self: center !important;
}

.save-character-btn:hover {
    background: var(--bg-tertiary) !important;
}

.premium-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    align-items: center;
    gap: 6px;
}

.flex {
    display: flex;
}

.premium-status-badge i {
    flex-shrink: 0;
}

.premium-status-badge.warning {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
}

.premium-status-badge.success {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
}

.premium-status-badge.danger {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
}

.premium-status-badge.primary {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.premium-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.iban-card-name,
.premium-detail-item .label {
    color: var(--text-muted);
    text-transform: uppercase;
}

.premium-detail-total {
    grid-column: 1 / -1;
    background: rgba(var(--success-rgb), 0.05);
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed var(--success-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.premium-delivery-info-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.premium-delivery-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.premium-delivery-info-row .label {
    color: var(--text-muted);
    min-width: 100px;
}

.premium-delivery-char-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 20px;
    text-align: center;
    border-radius: 12px;
}

.premium-delivery-char-card .label {
    text-transform: uppercase;
    margin-bottom: 5px;
}

.premium-delivery-char-card .value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.premium-security-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.premium-security-item {
    display: flex;
    gap: 10px;
    line-height: 1.4;
}

.premium-security-item i {
    flex-shrink: 0;
    margin-top: 2px;
}

.premium-timeline {
    position: relative;
    padding-left: 30px;
    margin-top: 20px;
}

.premium-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: var(--border-color);
}

.timeline-item-premium {
    position: relative;
    padding-bottom: 25px;
}

.timeline-dot {
    position: absolute;
    left: -24px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    border: 1px solid var(--bg-primary);
    z-index: 1;
}

.timeline-item-premium.completed .timeline-dot {
    background: var(--success-color);
}

.timeline-item-premium.active .timeline-dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.2);
}

.timeline-info-premium {
    display: flex;
    flex-direction: column;
}

.timeline-desc-premium {
    color: var(--text-muted);
    margin-top: 2px;
}

.timeline-time-premium {
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: 4px;
}

.blinking-premium {
    animation: premium-blink 1.5s infinite ease-in-out;
}

@keyframes premium-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.spin-premium {
    animation: premium-spin 2s linear infinite;
}

@keyframes premium-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.premium-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.premium-content-dashed {
    grid-column: 1 / -1;
    background: rgba(var(--primary-rgb), 0.03);
    padding: 12px;
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

.premium-flex-column {
    display: flex;
    flex-direction: column;
}

.premium-gap-10 {
    gap: 10px;
}

.premium-balance-badge {
    padding: 2px 8px;
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.premium-alert-title {
    display: block;
}

.premium-alert-desc {
    opacity: 0.8;
}

.premium-input-label-wrap {
    margin-bottom: 30px;
    text-align: center;
}

.premium-amount-wrapper {
    position: relative;
    max-width: 250px;
    margin: 0 auto;
}

.premium-button-gap {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}

.premium-tab-btn-secondary {
    background: var(--bg-secondary) !important;
}

.premium-divider-top {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.premium-input-label,
.premium-field-label {
    display: block;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.premium-iban-grid-single {
    grid-template-columns: 1fr;
}

.premium-empty-state {
    text-align: center;
    padding: 20px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    cursor: pointer;
}

.premium-empty-icon {
    background: rgba(var(--primary-rgb), 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    margin-bottom: 4px;
    opacity: 0.5;
}

.premium-table-full {
    width: 100%;
    border-collapse: collapse;
}

.premium-table-thead-tr {
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}

.premium-table-th {
    padding: 12px 8px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.premium-table-tr {
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 640px) {
    .premium-table-full thead {
        display: none;
    }

    .premium-table-full,
    .premium-table-full tbody,
    .premium-table-full tr,
    .premium-table-full td {
        display: block;
        width: 100%;
    }

    .premium-table-tr {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: var(--bg-secondary);
    }

    .premium-table-td {
        padding: 6px 0 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
        border: none;
    }

    .premium-table-td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: var(--mini-font-size);
        font-weight: var(--font-weight-medium);
        text-transform: uppercase;
        text-align: left;
        flex: 1;
    }

    .premium-table-empty {
        text-align: center !important;
        padding: 18px !important;
    }
}

.premium-bank-card-list {
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.premium-text-monospace,
.deposit-iban-mono {
    font-family: monospace;
}

.deposit-pos-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 40px;
    overflow: hidden;
    border-radius: 4px;
}

.deposit-wallet-input {
    background: transparent;
    border: none;
    outline: none;
    padding: 16px 0;
    width: 100%;
    color: var(--text-primary);
}

.deposit-amount-section {
    margin-top: 32px;
    border-top: 1px solid var(--border-color);
    padding-top: 32px;
}

.deposit-quick-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.premium-bg-warning {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
}

.premium-bg-success {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
}

.premium-bg-danger {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
}

.premium-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.premium-iban-masked {
    opacity: 0.6;
    font-family: monospace;
}

.premium-empty-text {
    color: var(--text-muted);
    margin-bottom: 24px;

}

.premium-header-sub,
.premium-header-title-sm {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deposit-bank-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.deposit-bank-card-list {
    padding: 14px 20px;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.deposit-pos-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.deposit-amount-wrapper {
    position: relative;
    max-width: 280px;
    margin: 0 auto;
}

.premium-currency-symbol,
.deposit-currency-symbol {
    position: absolute;
    right: 0;
    bottom: 8px;
    color: var(--text-muted);
}

.premium-img-contain-r8 {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.premium-img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.premium-text-muted-11-op6 {
    opacity: 0.6;
}

.premium-flex-shrink-0 {
    flex-shrink: 0;
}

.premium-text-center-mb24 {
    text-align: center;
    margin-bottom: 24px;
}

.premium-label {
    display: block;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.premium-input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 12px 15px;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
}

.premium-input[rows] {
    resize: vertical;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

.stats-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stats-card-premium,
.dyn-style-72 {
    padding: 20px;
    text-align: center;
}

.stats-card-label {
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.premium-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.premium-form-row-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.premium-btn-sm {
    padding: 10px 16px;
    height: auto;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.premium-d-none,
.premium-tab-content-hidden {
    display: none;
}

.withdraw-input-wrap {
    position: relative;
}

.withdraw-currency-sign {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.iban-selector-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-input:focus,
.bank-card-premium.selected {
    border-color: var(--primary-color);
}

.bank-card-premium:hover {
    background: rgba(var(--bg-primary-rgb), 0.02);
}

.bank-card-iban {
    font-family: monospace;
    opacity: 0.7;
}

.withdraw-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.withdraw-summary-total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    margin-top: 10px;
}

.request-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.request-item-row {
    display: flex;
    justify-content: space-between;
}

.request-item-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    margin-top: 4px;
}

.donations-table thead tr {
    text-align: left;
    background: rgba(0, 0, 0, 0.05);
}

.premium-table-empty,
.donations-table td.empty-row {
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
}

.donations-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.status-badge-beklemede {
    color: var(--warning-color);
}

.premium-text-danger,
.stats-card-value.danger,
.withdraw-summary-comm,
.status-badge-reddedildi {
    color: var(--danger-color);
}

.yb-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.yb-feature-item {
    display: flex;
    gap: 12px;
}

.yb-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yb-feature-icon.primary {
    background: rgba(0, 123, 255, 0.1);
    color: var(--primary-color);
}

.yb-feature-icon.success {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.yb-feature-icon.info {
    background: rgba(23, 162, 184, 0.1);
    color: var(--secondary-color);
}

.yb-feature-icon.warning {
    background: rgba(255, 193, 7, 0.1);
    color: var(--warning-color);
}

.yb-feature-desc {
    color: var(--text-muted);
    margin: 0;
}

.yb-section-border {
    border-top: 1px solid var(--border-color);
    padding-top: 24px;
}

.yb-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yb-info-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.yb-info-icon {
    color: var(--success-color);
    flex-shrink: 0;
}

.yb-help-card {
    padding: 20px;
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.05) 0%, rgba(0, 123, 255, 0) 100%);
}

.yb-help-desc {
    color: var(--text-muted);
    margin-bottom: 15px;
}

.spo-container {
    padding: 20px;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    max-width: 100%;
}

.spo-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 120px;
    height: fit-content;
    max-width: 100%;
}

.spo-main-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    max-width: 100%;
}

.spo-review-item {
    word-break: break-word;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.spo-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.spo-card-header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.spo-seller-profile,
.dyn-style-46,
.dyn-style-82,
.category-comment-toggle,
.premium-text-center {
    text-align: center;
}

.spo-seller-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    margin: 0 auto 20px;
    position: relative;
}

.spo-seller-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.spo-online-indicator {
    position: absolute;
    bottom: 8px;
    right: -2px;
    width: 24px;
    height: 24px;
    background: var(--success-color);
    border: 3px solid white;
    border-radius: 50%;
    animation: spo-pulse-online 2s infinite;
}

@keyframes spo-pulse-online {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.spo-seller-name {
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.spo-seller-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.spo-seller-badge {
    width: 24px;
    height: 24px;
    color: var(--success-color);
}

.spo-seller-badge.spo-fast {
    color: var(--info-color);
}

.spo-seller-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.spo-seller-badge.spo-premium,
.spo-stars {
    color: #fbbf24;
}

.spo-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.spo-stat-item {
    text-align: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.spo-stat-value {
    color: var(--primary-color);
    margin: 0 0 4px 0;
}

.spo-stat-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spo-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spo-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.spo-info-list li:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.spo-status {
    color: var(--text-secondary);
    margin-top: 8px;
}

.spo-working-hours {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spo-working-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.spo-no-products {
    text-align: center;
    padding: 60px 32px;
    color: var(--text-secondary);
}

.spo-no-products i {
    color: var(--text-muted);
    margin-bottom: 16px;
}

.spo-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
}

.spo-section-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.spo-btn-all {
    padding: 7px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.spo-btn-secondary:hover,
.spo-btn-all:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.spo-delivery-banner {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--success-color), var(--success-color));
    color: white;
    border-radius: 12px;
}

.spo-delivery-banner-icon {
    margin-bottom: 8px;
    display: block;
}

.spo-delivery-banner-sub {
    margin-top: 8px;
    opacity: 0.9;
}

.spo-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.spo-review-hidden {
    display: none;
}

.spo-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.spo-btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.modern-stat-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}

.modern-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.modern-stat-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.modern-stat-info {
    display: flex;
    flex-direction: column;
}

.modern-stat-label {
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.bg-blue-light {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.bg-green-light {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.bg-orange-light {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
}

.bg-red-light {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
}

.bg-purple-light {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.bg-teal-light {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}

.modern-orders-wrapper {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.modern-order-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 12px;
    transition: background 0.2s;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.modern-order-item:hover {
    background: var(--bg-hover);
}

.modern-order-item .order-status {
    margin: 0;
    padding: 5px 12px;
    border-radius: 20px;
}

@keyframes pulsingWarning {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
        box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.verification-balloon-sidebar {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffc107;
    color: #212529;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    margin: 8px auto;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4);
    animation: floatingBalloon 2s ease-in-out infinite;
    z-index: 10;
}

.verification-balloon-sidebar::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #ffc107 transparent;
}

.verification-balloon-sidebar:hover {
    background: #ffca2c;
    color: #000;
}

@keyframes floatingBalloon {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}

.tc-verification-warning {
    padding: 50px 30px;
    text-align: center;
    margin: 40px auto;
    max-width: 600px;
}

.tc-verification-warning .warning-icon {
    width: 90px;
    height: 90px;
    background: rgba(var(--danger-rgb), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--danger-color);
}

.tc-verification-warning h4 {
    color: var(--danger-color);
    margin-bottom: 16px;
}

.tc-verification-warning p {
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.7;
}

.tc-verification-warning .verify-btn {
    background: var(--danger-color);
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    color: white;
}

.tc-verification-warning .verify-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--danger-rgb), 0.3);
    background: #dc2626;
    color: white;
}

.avatar-changeable {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 50%;
}

.avatar-changeable .avatar-edit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}

.avatar-changeable:hover .avatar-edit-overlay {
    opacity: 1;
}

.avatar-modal-content {
    max-width: 600px;
}

.avatar-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-tertiary);
}

.avatar-option {
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    aspect-ratio: 1;
}

.avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-width: 0;
    min-height: 0;
}

.avatar-option:hover {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary, #1e1e2d);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color, #323246);
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color, var(--primary-color));
}

.pd-share-dropdown-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.pd-share-dropdown-content {
    position: absolute;
    width: 280px;
    margin-top: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
}

.share-actions-wrapper.active .pd-share-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tc-verification-warning h2,
.pd-share-title {
    margin-bottom: 12px;
    color: var(--text-primary);
}

.pd-share-social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.pd-share-social-label {
    font-size: var(--mini-font-size);
    color: var(--text-secondary);
}

.pd-share-social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.pd-share-social-item:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.pd-share-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.pd-share-copy-area {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-share-copy-input {
    flex: 1;
    background: none;
    border: none;
    padding: 6px 8px;
    color: var(--text-secondary);
    outline: none;
    width: 100%;
}

.pd-share-social-icon.whatsapp {
    color: #25D366;
}

.pd-share-social-icon.telegram {
    color: #0088cc;
}

.pd-share-social-icon.facebook {
    color: #1877F2;
}

.pd-share-social-icon.twitter {
    color: #1DA1F2;
}

.cart-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cart-header-actions .btn-outline-info {
    border-color: var(--info-color, #0062ff) !important;
    color: var(--info-color, #0062ff) !important;
    background: var(--bg-secondary) !important;
}

.cart-header-actions .btn-outline-info:hover {
    background: var(--info-color, #0062ff) !important;
    color: #fff !important;
}

.cart-header-actions .btn-outline-danger {
    border-color: var(--danger-color, var(--danger-color)) !important;
    color: var(--danger-color, var(--danger-color)) !important;
    background: var(--bg-secondary) !important;
}

.cart-header-actions .btn-outline-danger:hover {
    background: var(--danger-color, var(--danger-color)) !important;
    color: #fff !important;
}

[data-theme="dark"] .pd-share-dropdown-content {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .pd-share-social-icon,
[data-theme="dark"] .pd-share-copy-area {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

.social-icon {
    transition: transform 0.3s;
    font-size: var(--biggest-font-size);
}

.social-icon:hover {
    transform: scale(1.1);
}

.matrix-checkbox {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

.matrix-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.matrix-checkmark {
    position: relative;
    height: 22px;
    width: 22px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-block;
}

.matrix-checkbox:hover input~.matrix-checkmark {
    border-color: var(--primary-color);
}

.matrix-checkbox input:checked~.matrix-checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.matrix-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.matrix-checkbox input:checked~.matrix-checkmark:after {
    display: block;
}

.sss-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 30px;
}

.sss-sidebar {
    width: 320px;
    flex-shrink: 0;
    padding: 20px;
    background: var(--bg-secondary, #ffffff);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color, #edf2f7);
}

.sss-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: var(--text-primary, #2d3748);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 8px;
    background: transparent;
    border: 1px solid transparent;
}

.sss-sidebar-item:hover {
    background: linear-gradient(135deg, rgba(var(--primary-color, 102, 126, 234), 0.1), rgba(var(--primary-color, 102, 126, 234), 0.05));
    color: var(--primary-color, #667eea);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.sss-sidebar-item.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: #ffffff !important;
    border: none;
    transform: translateX(5px);
}

.sss-sidebar-item.active i {
    color: #ffffff;
    opacity: 1;
}

.sss-sidebar-item i {
    transition: all 0.3s ease;
    opacity: 0.6;
}

.sss-content {
    flex-grow: 1;
}

.sss-category-title {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(var(--primary-color, 102, 126, 234), 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary, #2d3748);
}

.sss-faq-card {
    padding: 22px 25px;
    background: var(--bg-secondary, #ffffff);
    border: 1px solid var(--border-color, #edf2f7);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.sss-faq-card:hover {
    border-color: rgba(var(--primary-color, 102, 126, 234), 0.5);
    transform: translateY(-2px);
}

.sss-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary, #2d3748);
    user-select: none;
    line-height: 1.4;
}

.sss-faq-icon {
    width: 36px;
    height: 36px;
    background: rgba(var(--primary-color, 102, 126, 234), 0.1);
    color: var(--primary-color, #667eea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-left: 20px;
}

.sss-faq-card.open {
    border-color: var(--primary-color, #667eea);
}

.sss-faq-card.open .sss-faq-icon {
    background: var(--primary-color, #667eea);
    color: #ffffff;
    transform: rotate(45deg);
}

.sss-faq-answer {
    margin-top: 18px;
    line-height: 1.7;
    display: none;
    padding-top: 18px;
    border-top: 1px dashed rgba(var(--primary-color, 102, 126, 234), 0.3);
    color: var(--text-secondary, #4a5568);
    animation: sssFadeIn 0.4s ease forwards;
}

@keyframes sssFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-premium-container {
    max-width: 1400px;
    margin: 0 auto;
    font-family: inherit;
}

.profile-premium-tab-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.profile-premium-tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.profile-premium-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--primary-rgb, 255, 107, 53), 0.05);
}

.profile-premium-tab-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--glow-primary);
}

.profile-premium-tab-content {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

.profile-premium-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-premium-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.profile-premium-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}


.profile-premium-card-title {
    color: var(--text-primary);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-premium-input-group {
    position: relative;
    margin-bottom: 20px;
}

.profile-premium-label {
    background: var(--bg-primary);
    padding: 0 8px;
    margin-bottom: 10px;
    display: flex;
    z-index: 10;
}

.profile-premium-input {
    width: 100%;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.profile-premium-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-primary);
}

.profile-premium-input[readonly] {
    cursor: not-allowed;
    opacity: 0.8;
}

.profile-premium-icon-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-premium-alert {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.profile-premium-alert.info {
    background: rgba(var(--secondary-rgb), 0.08);
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
    color: #1744da;
}

.profile-premium-alert.warning {
    background: rgba(var(--warning-rgb), 0.08);
    border: 1px solid rgba(var(--warning-rgb), 0.2);
    color: #d1580f;
}

.profile-premium-alert.success {
    background: rgba(var(--success-rgb), 0.08);
    border: 1px solid rgba(var(--success-rgb), 0.2);
    color: #0aad7f;
}

.profile-premium-alert a {
    color: inherit;
    text-decoration: none;
}

.profile-premium-btn {
    width: 100%;
    padding: 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.profile-premium-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
}

.profile-premium-btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-premium-btn-outline.success {
    color: var(--success-color);
    border-color: rgba(var(--success-rgb), 0.3);
}

.profile-premium-btn-outline.success:hover {
    background: var(--success-color);
    color: white;
}

.profile-premium-btn-outline.danger {
    color: var(--danger-color);
    border-color: rgba(var(--danger-rgb), 0.3);
}

.profile-premium-btn-outline.danger:hover {
    background: var(--danger-color);
    color: white;
}

.profile-premium-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.profile-premium-sr-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-premium-sr-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb, 255, 107, 53), 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-premium-sr-text p {
    color: var(--text-secondary);
    margin: 0;
}

.profile-premium-switch {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 26px;
}

.profile-premium-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.profile-premium-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .4s;
    border-radius: 34px;
}

.profile-premium-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.profile-premium-switch input:checked+.profile-premium-slider {
    background-color: var(--primary-color);
}

.profile-premium-switch input:checked+.profile-premium-slider:before {
    transform: translateX(24px);
}

.profile-premium-table {
    width: 100%;
    border-collapse: collapse;
}

.profile-premium-table th {
    background: var(--bg-secondary);
    padding: 16px;
    text-align: left;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.profile-premium-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.profile-premium-empty,
.dyn-style-69 {
    color: var(--text-muted);
    padding: 40px;
    text-align: center;
}

.profile-premium-box {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 12px;
    border: 1px dashed var(--primary-color);
    margin-top: 20px;
}

.profile-premium-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.session-active {
    border-color: var(--success-color) !important;
}

.dyn-style-5 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.dyn-style-6 {
    background: white;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.dyn-style-7 {
    flex: 1;
    min-width: 250px;
}

.dyn-style-10,
.dyn-style-88,
.header-filters-v3 {
    display: flex;
    gap: 10px;
}

.dyn-style-11 {
    width: 150px;
    text-align: center;
    letter-spacing: 3px;
}

.dyn-style-12 {
    margin-bottom: 20px;
    background: #fffbeb;
    border-color: #fef3c7;
}

.dyn-style-14 {
    color: #92400e;
    margin-bottom: 15px;
}

.dyn-style-16 {
    background: var(--success-color);
    border: none;
}

.dyn-style-17 {
    background: rgba(0, 136, 204, 0.1);
    color: #0088cc;
}

.dyn-style-20,
.premium-trade-status-wrap {
    align-items: center;
    display: flex;
    gap: 15px;
}

.dyn-style-22 {
    position: relative;
    right: 0;
    transform: none;
    color: var(--danger-color);
}

.dyn-style-23 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    margin-top: 24px;
}

.dyn-style-24 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.dyn-style-26 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.dyn-style-29 {
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
}

.dyn-style-30,
.pd-seller-stat-value {
    text-align: right;
}

.dyn-style-32 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.dyn-style-35 {
    margin-right: 5px;
    vertical-align: middle;
}

.dyn-style-37,
.pd-footer-meta {
    align-items: center;
    display: flex;
    gap: 20px;
}

.dyn-style-38,
.gb-qty-input:focus {
    background: var(--bg-primary);
}

.dyn-style-43 {
    overflow-x: auto;
}

.dyn-style-44 {
    min-width: 600px;
}

.dyn-style-48 {
    display: flex;
    justify-content: space-between;
    text-align: center;
    background: var(--bg-secondary);
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    margin-bottom: 20px;
}

.dyn-style-52,
.mp-character-stats.list-view {
    display: flex;
    gap: 15px;
}

.dyn-style-54 {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.dyn-style-56 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.dyn-style-57 {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
    border-left: 4px solid var(--primary-color);
}

.dyn-style-58 {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.dyn-style-60 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.dyn-style-63 {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
    border-left: 4px solid var(--success-color);
}

.dyn-style-65 {
    padding: 0;
    overflow: hidden;
    margin-bottom: 24px;
}

.dyn-style-66 {
    padding: 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.dyn-style-68,
.dyn-style-84 {
    color: var(--primary-color);
    margin-right: 8px;
}

.dyn-style-70 {
    border-radius: 24px;
    max-width: 450px;
}

.dyn-style-73 {
    margin-bottom: 25px;
    color: var(--text-secondary);
}

.dyn-style-75 {
    margin-top: 25px;
    background: var(--bg-secondary);
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}

.dyn-style-81 {
    cursor: pointer;
    appearance: auto;
}

.dyn-style-83 {
    margin-bottom: 15px;
    color: var(--text-secondary);
}

.dyn-style-85,
.bos-yorum i,
.no-results i {
    color: var(--text-muted);
    margin-bottom: 20px;
}

.dyn-style-87 {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.dyn-style-90 {
    white-space: nowrap;
}

.dyn-style-102 {
    display: block;
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 8px;
    margin-bottom: 15px;
    word-break: break-all;
}

.dyn-style-103 {
    color: #92400e;
    margin-bottom: 10px;
}

.dyn-style-104 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-family: monospace;
    margin-bottom: 20px;
}

.dyn-style-112 {
    display: flex;
    gap: 16px;
    color: var(--text-muted);
}

.dyn-style-113 {
    background: var(--success-color);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
}

.dyn-style-115 {
    padding-left: 24px;
    color: var(--text-primary);
}

.dyn-style-119 {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
    padding: 4px 10px;
    border-radius: 20px;
}

.dyn-style-122 {
    text-align: center;
    letter-spacing: 15px;
    padding: 20px;
}

.dyn-style-124 {
    text-align: center;
    letter-spacing: 5px;
}

.dyn-style-125 {
    color: var(--primary-color);
    margin-top: 12px;
    display: block;
    text-align: center;
}

.yayinci-stream-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0;
    background: var(--bg-primary);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
}

.yayinci-video-section {
    background: #000;
    display: flex;
    flex-direction: column;
    position: relative;
}

.yayinci-video-container {
    flex: 1;
    position: relative;
    background: #000;
}

.yayinci-stream-embed {
    width: 100%;
    height: 100%;
    border: none;
}

.yayinci-stream-info {
    padding: 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 20px;
}

.yayinci-streamer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
    box-shadow: var(--shadow-lg);
}

.yayinci-streamer-details h1 {
    margin-bottom: 5px;
    color: var(--text-primary);
}

.yayinci-streamer-stats {
    display: flex;
    gap: 20px;
    color: var(--text-secondary);
}

.yayinci-donation-sidebar {
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    padding: 20px;
    overflow-y: auto;
}

.yayinci-donation-widget {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.yayinci-widget-title {
    margin-bottom: 24px;
    text-align: center;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.yayinci-form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.yayinci-form-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.yayinci-form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.yayinci-amount-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.yayinci-amount-btn {
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.yayinci-amount-btn:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.yayinci-amount-btn.yayinci-active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.yayinci-donate-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}

.yayinci-donate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--bg-primary-rgb), 0.2), transparent);
    transition: left 0.6s ease;
}

.yayinci-donate-btn:hover::before {
    left: 100%;
}

.yayinci-donate-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.yayinci-donate-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.yayinci-offline-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.9);
    padding: 40px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.yayinci-offline-text {
    margin-bottom: 12px;
    color: white;
}

.yayinci-offline-subtext {
    color: rgba(var(--bg-primary-rgb), 0.7);
}

.yayinci-login-required {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.yayinci-login-btn {
    background: linear-gradient(135deg, var(--secondary-color), #1d4ed8);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 16px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.yayinci-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.yayinci-terms-checkbox {
    display: flex;
    align-items: center;
    margin: 16px 0;
    color: var(--text-secondary);
}

.yayinci-terms-checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.yayinci-disclaimer {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    border: 1px solid var(--border-color);
}

.yayinci-balance-display {
    background: linear-gradient(135deg, var(--success-color), #059669);
    color: white;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.dropzone-area {
    background: var(--bg-primary) !important;
    border: 1px dashed var(--border-color) !important;
    border-radius: 16px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    padding: 20px !important;
    width: 100% !important;
    gap: 15px !important;
}

.dropzone-area:hover {
    border-color: var(--primary-color) !important;
    background: rgba(59, 130, 246, 0.05) !important;
}

.dropzone-area .dz-message {
    text-align: center !important;
    margin: 0 !important;
    width: 100% !important;
}

.dropzone-area .dz-message i {
    color: var(--primary-color);
    margin-bottom: 16px;
}

.dropzone-area .dz-message h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

@keyframes passing-through {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    30%,
    70% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    30% {
        opacity: 1;
        transform: translateY(0);
    }
}

.password-requirements {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.password-requirements h4 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
}

.password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-requirements li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.password-requirements li i {
    margin-right: 8px;
    color: var(--danger-color);
    transition: color 0.3s ease;
}

.magazalar-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    padding: 20px;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.magazalar-pagination-btn {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.magazalar-pagination-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.magazalar-pagination-btn.magazalar-active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.magazalar-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.magazalar-magazalar-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.magazalar-magaza-item {
    position: relative;
    background: var(--bg-primary);
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.magazalar-magaza-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.magazalar-magaza-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.magazalar-magaza-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 3;
}

.magazalar-badge {
    padding: 4px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: pulse-badge 2s infinite;
}

.magazalar-badge.magazalar-premium {
    background: linear-gradient(135deg, var(--warning-color), #d97706);
    color: white;
}

.magazalar-badge.magazalar-verified {
    background: linear-gradient(135deg, var(--success-color), #059669);
    color: white;
}

.magazalar-badge.magazalar-trusted {
    background: linear-gradient(135deg, #3b82f6, var(--secondary-color));
    color: white;
}

.magazalar-badge.magazalar-fast {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: white;
}

.magazalar-magaza-name {
    color: var(--text-primary);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.magazalar-magaza-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

.magazalar-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

.magazalar-stat-item i {
    color: var(--warning-color);
}

.magazalar-no-results-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.magazalar-no-results-placeholder i {
    color: var(--text-muted);
    opacity: 0.5;
}

@keyframes pulse-badge {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.category-container {
    position: relative;
    z-index: 3;
}

.category-product-container {
    position: relative;
}

.category-product-has-cover {
    margin-top: -110px;
}

.category-product-shell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
}

.category-product-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
}

.category-product-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.category-product-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-secondary);
}

.category-product-breadcrumb-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-product-breadcrumb-list li:not(:last-child)::after {
    content: '/';
    color: var(--text-muted);
}

.category-product-breadcrumb-list a {
    color: var(--text-secondary);
    text-decoration: none;
}

.category-product-breadcrumb-list a:hover {
    color: var(--primary-color);
}

.category-cover-title {
    margin-bottom: 1rem;
    margin-top: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #fff;
}

.category-product-media {
    min-height: 280px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.category-product-media img {
    max-height: 360px;
    width: auto;
    object-fit: contain;
}

.category-product-media i {
    font-size: 72px;
}

.category-product-media-card-plain {
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.category-product-media-fill {
    min-height: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.05) 100%);
}

.category-product-media-fill img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: contain;
}

.category-product-price-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
}

.category-product-purchase-row {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.category-product-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    background: var(--bg-secondary);
}

.category-product-actions .btn-group {
    width: 100%;
}

.category-product-actions .btn-group .btn {
    flex: 1;
}

.category-description-review-section .category-content-text {
    min-height: 100%;
}

.category-review-panel {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    background: var(--bg-secondary);
    display: grid;
    gap: 8px;
}

.category-review-score {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.category-review-stars {
    color: #f7b500;
    letter-spacing: 2px;
}

.category-review-stars .is-empty {
    color: rgba(247, 181, 0, 0.3);
}

.category-review-stars .is-filled {
    color: #f7b500;
}

.category-review-meta {
    color: var(--text-secondary);
}

.category-share-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.category-share-row span {
    color: var(--text-primary);
    font-weight: 600;
}

.category-share-row a {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.category-share-row a:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.category-related-section {
    overflow: hidden;
}

.category-related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.category-related-nav {
    display: flex;
    gap: 8px;
}



.category-related-swiper {
    width: 100%;
    overflow: hidden;
    padding: 5px;
    margin: -5px;
}

.category-related-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: stretch;
}

.category-related-item {
    width: 100%;
    margin: 0;
    display: grid;
    gap: 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px;
    background: var(--bg-secondary);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.category-related-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
}

.category-related-item .product-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.category-related-item .product-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-related-item .meta-item,
.category-related-item .category-related-price {
    width: 100%;
    overflow: hidden;
}

.category-related-item .product-name {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .category-product-has-cover {
        margin-top: -125px;
    }

    .category-product-shell {
        padding: 14px;
    }


    .category-product-topbar {
        flex-wrap: wrap;
    }

    .category-product-media {
        min-height: 220px;
    }

    .category-product-media-fill img {
        min-height: 280px;
    }

    .category-product-purchase-row {
        grid-template-columns: 1fr;
    }



    .category-related-nav {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .category-product-has-cover {
        margin-top: -100px;
    }

    .category-product-shell {
        padding: 12px;
        border-radius: 12px;
    }


    .category-product-media {
        min-height: 180px;
        padding: 14px;
    }

    .category-product-media-fill img {
        min-height: 220px;
    }

    .category-review-panel {
        padding: 12px;
    }

    .category-related-item {
        padding: 10px;
    }

}

section.category-product-listing-cover {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0 100px 0;
}

.cover-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    z-index: 1;
    opacity: 0.9;
}

.category-cover-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 20px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.category-cover-content span img {
    width: 100%;
    max-width: 300px;
    max-height: 300px;
    display: inline-block;
    object-fit: contain;
}

.category-cover-content h1 {
    margin-bottom: 1rem;
    margin-top: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.category-cover-content p {
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.category-cover-content img {
    max-width: 100%;
    height: auto;
}

.category-comment-section {
    margin-top: 48px;
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    padding: 20px;
}

.category-comment-section h2 {
    margin-bottom: 20px;
    color: var(--text-primary);
}

.category-empty-products {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 3rem;
}

.category-empty-products i {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.category-content-text {
    line-height: 1.6;
    color: var(--text-primary);
}

.category-content-text h3 {
    color: var(--text-primary);
    margin: 1.5rem 0 1rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.category-content-text h3:first-child {
    margin-top: 1rem;
    padding-top: 0;
    border-top: none;
}

.category-content-toggle {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.category-comment-item {
    padding: 10px 10px 0px 20px;
    border-bottom: 1px solid var(--border-color);
}

.category-comment-item.category-hidden-comment {
    display: none;
}

.category-comment-item:last-child {
    border-bottom: none;
}

.category-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.category-comment-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.category-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.category-comment-rating {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}

.category-comment-rating i.category-star-filled {
    color: #ffd700;
}

.category-comment-content {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 15px;
}

.page-title {
    margin-left: 12px;
    gap: 8px;
    text-align: center;
}

.ksearch-container {
    margin-bottom: 2rem;
    position: relative;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.ksearch-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.ksearch-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color)20;
}

.ksearch-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.kategoriler-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.kategori-item {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateY(20px);
    display: none;
}

.kategori-item.loaded {
    opacity: 1;
    transform: translateY(0);
}

.kategori-item.has-background {
    background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.3);
}

.kategori-item.has-background .kategori-name,
.kategori-item.has-background .kategori-description {
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.kategori-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--kategori-color, var(--primary-color)), transparent);
    opacity: 0.8;
}

.kategori-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--kategori-color, var(--primary-color));
}

.kategori-name {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.kategori-description {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.kategori-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
}

.kategori-item.has-background .kategori-stats {
    border-top-color: rgba(var(--bg-primary-rgb), 0.3);
}

.kategori-products {
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.kategori-item.has-background .kategori-products {
    background: rgba(var(--bg-primary-rgb), 0.2);
    color: white;
}

.kategori-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--kategori-color, var(--primary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.kategori-item:hover .kategori-arrow {
    transform: translateX(4px);
}

.no-results-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    flex-direction: column;
}

.no-results-placeholder i {
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
    opacity: 0.7;
}

.loading-placeholder {
    display: none;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.kategori-item.show,
.loading-placeholder.show {
    display: block;
}

.yorumlar-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.yorum-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: var(--shadow-xl);
}

.yorum-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stat-item {
    background: rgba(var(--bg-primary-rgb), 0.1);
    padding: 15px 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-number {
    display: block;
    line-height: 1;
}

.stat-label {
    opacity: 0.9;
    margin-top: 5px;
}

.yildiz-container {
    gap: 2px;
}

.yorumlar-liste {
    display: grid;
    gap: 20px;
    width: 100%;
}

.yorum-item {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    overflow: hidden;
    word-wrap: break-word;
}

.yorum-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-left-color: var(--primary-color);
}

.yorum-ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 15px;
}

.kullanici-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.kullanici-avatar-initial {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow: hidden;
}

.kullanici-detay {
    min-width: 0;
    flex: 1;
}

.kullanici-detay h4 {
    margin: 0;
    color: var(--text-primary);
    word-break: break-word;
}

.yorum-tarih {
    color: var(--text-muted);
    margin-top: 2px;
}

.yorum-puan {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-tertiary);
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.yorum-icerik {
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.urun-bilgi {
    background: var(--bg-tertiary);
    padding: 12px 15px;
    border-radius: 6px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    border-left: 3px solid var(--primary-color);
    word-wrap: break-word;
}

.admin-cevap {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
    border-left: 4px solid var(--info-color);
    box-shadow: var(--shadow-sm);
}

.admin-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--info-color);
}

.admin-icerik {
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.sayfalama {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 10px;
}

.sayfa-btn {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    min-width: 44px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.sayfa-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.sayfa-btn.aktif {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.sayfa-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bos-yorum {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.bos-yorum h3 {
    margin: 0 0 10px 0;
    color: var(--text-secondary);
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.price-info-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
}

.price-info-card h4 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.yildiz,
.price-info-card h4 i {
    color: var(--warning-color);
}

.price-info-card li {
    color: var(--text-secondary);
    margin-bottom: 4px;
    margin: 15px;
}

.item-add-item-add-premium-layout-wrapper {
    overflow: hidden;
}

@keyframes blobFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 50px) scale(1.1);
    }
}

.item-add-item-add-section-heading-block {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.item-add-item-add-heading-line {
    width: 60px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 2px;
    margin-top: 12px;
}

.item-add-item-add-heading-line.item-add-item-add-warning {
    background: var(--warning-color);
}

.item-add-item-add-modern-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

.item-add-item-add-premium-choice-card {
    background: var(--bg-secondary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.item-add-item-add-premium-choice-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(var(--bg-primary-rgb), 0.1), transparent, rgba(var(--bg-primary-rgb), 0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
}

.item-add-item-add-premium-choice-card:hover {
    transform: translateY(-12px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 0 100px rgba(59, 130, 246, 0.05);
}

.item-add-item-add-premium-choice-card.item-add-item-add-bizesat:hover {
    border-color: rgba(var(--warning-rgb), 0.3);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 0 100px rgba(var(--warning-rgb), 0.05);
}

.item-add-item-add-card-visual {
    height: 180px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.item-add-item-add-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.item-add-item-add-premium-choice-card:hover .item-add-item-add-card-visual img {
    transform: scale(1.1) rotate(1deg);
}

.item-add-item-add-glow-effect {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--p-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.item-add-item-add-gold-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--warning-rgb), 0.4), transparent);
    opacity: 0.6;
}

.item-add-item-add-card-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.item-add-item-add-card-body h3 {
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.item-add-item-add-card-body p {
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.item-add-item-add-card-footer {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.item-add-item-add-action-text {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    transition: color 0.3s;
}

.item-add-item-add-bizesat .item-add-item-add-action-text {
    color: var(--warning-color);
}

.item-add-item-add-card-footer i {
    color: var(--text-muted);
    transition: all 0.3s;
}

.item-add-item-add-premium-choice-card:hover i {
    transform: translateX(5px);
    color: var(--primary-color);
}

.item-add-item-add-premium-choice-card.item-add-item-add-bizesat:hover i {
    color: var(--warning-color);
    transform: translateX(5px) scale(1.2);
}

.komisyon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.kategori-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.komisyon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.komisyon-row:last-child {
    border-bottom: none;
}

.k-fiyat {
    color: var(--text-color);
}

.k-aciklama {
    color: var(--text-secondary);
    margin-top: 4px;
}

.badge-oran {
    background: rgba(var(--primary-color), 0.15);
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(var(--primary-color), 0.3);
}

.badge-sabit {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 171, 0, 0.3);
}

.indirim-fiyat-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.indirim-eski-fiyat {
    text-decoration: line-through;
    font-size: .95em;
    color: var(--text-muted);
    margin-top: 2px;
}

.indirim-badge {
    display: inline-block;
    background: var(--danger-color);
    color: #fff;
    font-size: .85em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 2px;
    animation: indirimPulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 239,68,68), 0.5);
}

@keyframes indirimPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 239,68,68), 0.55); }
    60%  { box-shadow: 0 0 0 7px rgba(var(--danger-rgb, 239,68,68), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 239,68,68), 0); }
}

.price-main[style*="danger"],
.meta-val[style*="danger"] {
    font-size: 1.15em;
    font-weight: 700;
}

.hero-slider {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    z-index: 10;
}

.hero-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(var(--primary-rgb), 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(var(--secondary-rgb), 0.15) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(var(--success-rgb), 0.1) 0%, transparent 60%);
    z-index: 1;
}

.hero-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px 400px;
    gap: 24px;
    position: relative;
    z-index: 2;
    min-height: 100px;
    margin-bottom: 40px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
    position: relative;
    margin-left: 100px;
}

.hero-slider-wrapper {
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    height: 350px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--secondary-rgb), 0.08));
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(28px) scale(0.985);
    z-index: 1;
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 3;
    pointer-events: auto;
}

.hero-slide.next {
    opacity: 0;
    transform: translateX(28px) scale(0.985);
    z-index: 2;
}

.hero-slide.prev {
    opacity: 0;
    transform: translateX(-28px) scale(0.985);
    z-index: 1;
}

.hero-slide-content {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.hero-slide-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    display: block;
    transition: transform 7s ease;
}

.hero-slide.active .hero-slide-content img {
    transform: scale(1.06);
}

.hero-slide-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
    border-radius: 16px;
    pointer-events: none;
}

.hero-nav-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 0;
    padding: 0;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.75);
}

.hero-dot.active {
    background: #fff;
    width: 22px;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

.hero-slider-controls {
    position: absolute;
    bottom: 18px;
    right: 16px;
    display: flex;
    gap: 6px;
    z-index: 10;
}

.hero-prev-btn,
.hero-next-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s ease;
    backdrop-filter: blur(10px);
    font-size: 13px;
}

.hero-prev-btn:hover,
.hero-next-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.45);
}

.hero-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 40px 0;
    z-index: 4;
    align-content: start;
}

.hero-promos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px 0;
    z-index: 4;
    min-width: 0;
}

.hero-promo-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 110px;
    background: linear-gradient(135deg, #2a1b4e 0%, #1a1f3a 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.hero-promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.hero-promo-body {
    position: relative;
    z-index: 2;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    color: #fff;
    max-width: 70%;
}

.hero-promo-title {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.2px;
}

.hero-promo-sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    margin: 0;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    font-weight: 500;
}

.hero-promo-btn {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background 0.18s ease, transform 0.18s ease;
}

.hero-promo-btn:hover {
    background: #fff;
    transform: translateY(-1px);
    color: #000 !important;
}

@media (max-width: 768px) {
    .hero-promos {
        padding: 14px 0;
        gap: 10px;
    }

    .hero-promo-card {
        min-height: 90px;
    }

    .hero-promo-body {
        padding: 14px 16px;
        max-width: 75%;
    }

    .hero-promo-title {
        font-size: 14px;
    }

    .hero-promo-sub {
        font-size: 11.5px;
    }

    .hero-promo-btn {
        padding: 6px 14px;
        font-size: 11px;
    }
}

.hero-cat-card {
    background: rgba(var(--bg-secondary-rgb, 30, 30, 40), 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--border-rgb, 255, 255, 255), 0.12);
    border-radius: 10px;
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    min-height: 120px;
    min-width: 0;
    overflow: hidden;
}

.hero-cat-card:hover {
    background: rgba(var(--bg-secondary-rgb, 30, 30, 40), 0.5);
    border-color: rgba(var(--primary-rgb), 0.45);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.16), 0 0 0 1px rgba(var(--primary-rgb), 0.08) inset;
}

.hero-cat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 4px 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--border-rgb, 255, 255, 255), 0.12);
    margin-bottom: 2px;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.hero-cat-header i {
    font-size: 13px;
    color: var(--primary-color);
    filter: drop-shadow(0 0 4px rgba(var(--primary-rgb), 0.35));
}

.hero-cat-header.has-logo {
    padding: 4px 4px 8px;
    min-height: 30px;
}

.hero-cat-logo {
    max-height: 32px;
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    transition: transform 0.18s ease, filter 0.18s ease;
}

.hero-cat-card:hover .hero-cat-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 0 6px rgba(var(--primary-rgb), 0.45));
}

.hero-cat-header:hover {
    color: var(--primary-color);
}

.hero-cat-card:hover .hero-cat-header {
    border-bottom-color: rgba(var(--primary-rgb), 0.35);
}

.hero-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hero-cat-list li {
    margin: 0;
}

.hero-cat-list a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease, padding 0.15s ease;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
}

.hero-cat-list .hero-cat-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-cat-list a i {
    font-size: 10px;
    color: rgba(var(--primary-rgb), 0.5);
    width: 12px;
    text-align: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

.hero-cat-list a:hover {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--text-primary);
    padding-left: 10px;
}

.hero-cat-list a:hover i {
    color: var(--primary-color);
    transform: scale(1.1);
}

.hero-cat-list a.has-discount {
    padding-right: 4px;
    gap: 6px;
}

.hero-cat-list a.has-discount .discount-badge {
    margin-left: auto;
}

.discount-badge {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #ff5252, #d40000 70%);
    color: #fff;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 6px rgba(212, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    clip-path: polygon(50% 0%, 60% 8%, 70% 4%, 76% 14%, 86% 12%, 88% 22%,
            98% 26%, 95% 36%, 100% 46%, 94% 54%, 100% 64%, 92% 70%,
            96% 80%, 86% 84%, 88% 94%, 78% 92%, 72% 100%, 64% 92%,
            54% 98%, 46% 90%, 38% 100%, 30% 92%, 22% 96%, 18% 86%,
            8% 88%, 12% 78%, 2% 74%, 8% 64%, 0% 54%, 8% 46%,
            2% 36%, 12% 30%, 6% 20%, 18% 18%, 14% 8%, 26% 10%, 32% 0%, 42% 6%);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-cat-list a:hover .discount-badge {
    transform: scale(1.08) rotate(-6deg);
}

.discount-badge-num {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -0.3px;
}

@keyframes heroCatBorderSpin {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes heroCatShimmer {

    0%,
    100% {
        transform: translateX(-100%) rotate(20deg);
    }

    50% {
        transform: translateX(100%) rotate(20deg);
    }
}

@keyframes heroCatFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

.hero-category-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    background: linear-gradient(135deg, #1a1f3a 0%, #2a1b4e 100%);
    border: 1px solid transparent;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
    min-height: 64px;
    overflow: hidden;
    isolation: isolate;
}

.hero-category-item::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(110deg, rgba(120, 90, 220, 0.5) 0%, rgba(255, 64, 129, 0.55) 35%, rgba(255, 165, 50, 0.5) 65%, rgba(120, 90, 220, 0.5) 100%);
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.55;
    transition: opacity 0.28s ease;
    pointer-events: none;
    z-index: 1;
}

.hero-category-item::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    transform: translateX(-100%) rotate(20deg);
    pointer-events: none;
    z-index: 2;
}

.hero-category-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 30px rgba(120, 60, 220, 0.35), 0 0 24px rgba(255, 64, 129, 0.18);
}

.hero-category-item:hover::before {
    opacity: 1;
    animation: heroCatBorderSpin 3s linear infinite;
}

.hero-category-item:hover::after {
    animation: heroCatShimmer 1.2s ease-in-out;
}

.hero-category-icon {
    position: relative;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 16px;
    background: radial-gradient(circle at 30% 30%, #ff5ba0, #8b3a9e 60%, #2a1b4e 100%);
    box-shadow: 0 0 14px rgba(255, 91, 160, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-category-item:hover .hero-category-icon {
    transform: scale(1.1);
    animation: heroCatFloat 1.4s ease-in-out infinite;
}

.hero-category-item:nth-child(6n+1) .hero-category-icon {
    background: radial-gradient(circle at 30% 30%, #ffd86b, #c98a1a 60%, #3d2a0a 100%);
    box-shadow: 0 0 14px rgba(255, 216, 107, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hero-category-item:nth-child(6n+2) .hero-category-icon {
    background: radial-gradient(circle at 30% 30%, #6ce5ff, #1c7ec9 60%, #0a2542 100%);
    box-shadow: 0 0 14px rgba(108, 229, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hero-category-item:nth-child(6n+3) .hero-category-icon {
    background: radial-gradient(circle at 30% 30%, #8aff8a, #2cb04b 60%, #0a3318 100%);
    box-shadow: 0 0 14px rgba(138, 255, 138, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hero-category-item:nth-child(6n+4) .hero-category-icon {
    background: radial-gradient(circle at 30% 30%, #ff8aa0, #d63955 60%, #4a0a18 100%);
    box-shadow: 0 0 14px rgba(255, 138, 160, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hero-category-item:nth-child(6n+5) .hero-category-icon {
    background: radial-gradient(circle at 30% 30%, #c08aff, #6b34c3 60%, #1d0d3d 100%);
    box-shadow: 0 0 14px rgba(192, 138, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hero-category-item:nth-child(6n+6) .hero-category-icon {
    background: radial-gradient(circle at 30% 30%, #ffb56b, #d6711a 60%, #4a1f0a 100%);
    box-shadow: 0 0 14px rgba(255, 181, 107, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hero-category-item .order-info {
    position: relative;
    z-index: 3;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
    color: #f5f5fa;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.hero-category-arrow {
    display: none;
}

[data-theme="light"] .hero-category-item,
html:not([data-theme="dark"]) .hero-category-item {
    background: linear-gradient(135deg, #2a2540 0%, #3a1f4e 100%);
}

.hero-weekly-stars {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 40px 0;
    margin-right: 100px;
    z-index: 4;
}

.weekly-stars-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.05));
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    margin-bottom: 8px;
}

.weekly-stars-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffd700, #ffb347);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.weekly-stars-title {
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weekly-star-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(var(--bg-primary-rgb), 0.05);
    border: 1px solid rgba(var(--bg-primary-rgb), 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.weekly-star-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
    opacity: 0;
    transition: all 0.3s ease;
}

.weekly-star-item:hover {
    background: rgba(var(--bg-primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.15);
}

.item-add-item-add-premium-choice-card:hover .item-add-item-add-glow-effect,
.weekly-star-item:hover::before {
    opacity: 1;
}

.weekly-star-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.weekly-star-badge.earning {
    background: linear-gradient(135deg, #ffd700, #ffb347);
}

.weekly-star-badge.speed {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
}

.weekly-star-badge.rating {
    background: linear-gradient(135deg, var(--primary-color), #f39c12);
}

.weekly-star-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.weekly-star-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.weekly-star-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(var(--bg-primary-rgb), 0.2);
}

.verified-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--success-color), #27ae60);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid var(--bg-primary);
}

.weekly-star-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.weekly-star-name {
    color: var(--text-primary);
    line-height: 1.2;
}

.weekly-star-value {
    color: var(--primary-color);
    margin-top: 2px;
}

.weekly-stars-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    background: rgba(var(--bg-primary-rgb), 0.05);
    border: 1px solid rgba(var(--bg-primary-rgb), 0.1);
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.weekly-stars-empty i {
    color: var(--text-muted);
    opacity: 0.7;
}

.weekly-stars-empty span {
    color: var(--text-muted);
    line-height: 1.4;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.home-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-muted);
    grid-column: 1 / -1;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

@keyframes story-progress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes pulse-ring {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.home-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.home-header {
    /* padding: 10px 10px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background-color: rgba(15, 23, 42, 0.6);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(var(--bg-primary-rgb), 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.home-header-vitrin {
    background-image: url('../img/headers/header_bg_vitrin.png');
}

.home-header-coksatan {
    background-image: url('../img/headers/header_bg_coksatan.png');
}

.home-header-sonilanlar {
    background-image: url('../img/headers/header_bg_sonilanlar.png');
}

.home-header-sonring {
    background-image: url('../img/headers/header_bg_sonring.png');
}

.home-header-blog {
    background-image: url('../img/headers/header_bg_blog.png');
}

.home-header-yayincilar {
    background-image: url('../img/headers/header_bg_yayincilar.png');
}

.home-header .home-title i {
    color: white;
    text-shadow: 0 0 15px rgba(var(--primary-rgb), 0.8);
}

.home-header .home-title h2 {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.home-header .home-link {
    background: rgba(var(--bg-primary-rgb), 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--bg-primary-rgb), 0.2);
    color: white;
}

.home-header .home-link:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.home-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.swiper-navigation {
    display: flex;
    gap: 8px;
}

.swiper-button-prev-custom,
.swiper-button-next-custom,
.swiper-button-prev-custom-ring,
.swiper-button-next-custom-ring {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover,
.swiper-button-prev-custom-ring:hover,
.swiper-button-next-custom-ring:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.swiper-button-prev-custom:disabled,
.swiper-button-next-custom:disabled,
.swiper-button-prev-custom-ring:disabled,
.swiper-button-next-custom-ring:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.son-ilanlar-swiper,
.son-ring-swiper {
    overflow: hidden;
}

.son-ilanlar-swiper .swiper-wrapper,
.son-ring-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.son-ilanlar-swiper .swiper-slide,
.son-ring-swiper .swiper-slide {
    flex-shrink: 0;
    height: auto;
    display: flex;
    overflow: visible;
}

.son-ilanlar-swiper .mp-card,
.son-ring-swiper .mp-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    contain: none;
    isolation: auto;
}

.home-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-title h2 {
    color: var(--text-primary);
    margin: 0;
}

.home-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 6px 16px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.home-link:hover {
    background: rgba(var(--primary-rgb), 0.2);
    transform: translateX(4px);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.no-results-placeholder.full-width {
    grid-column: 1 / -1;
}

.no-results-placeholder small {
    opacity: 0.8;
    margin-top: 8px;
}

.mp-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 350px;
    box-shadow: var(--shadow-sm);
    z-index: 1;
    overflow: visible;
    cursor: pointer;
}

.mp-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg);
    z-index: 20;
}

.mp-online-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--success-color), var(--success-color));
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 4;
    box-shadow: 0 2px 6px rgba(var(--success-rgb), 0.3);
    animation: pulse-green 2s infinite;
    font-size: var(--mini-font-size);
}

.mp-image-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 12px 0;
    position: relative;
    gap: 8px;
}

.mp-main-image {
    width: 64px;
    height: 64px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.mp-main-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.mp-title {
    text-align: center;
    margin: 8px 0;
}

.mp-name {
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 6px;
}

.mp-server {
    display: flex;
    justify-content: center;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.mp-stats {
    flex: 1;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.mp-stats-visible {
    transition: all 0.3s ease;
    position: relative;
}

.card-stats-gradient {
    display: inline-table;
    position: absolute;
    background: linear-gradient(0deg, var(--bg-primary) 0%, rgba(var(--bg-primary-rgb), 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 9;
    height: 45%;
    width: 100%;
    pointer-events: none;
}

.mp-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
}

.mp-stat-row span {
    font-size: var(--mini-font-size);
}

.stat-bonus {
    color: var(--success-color) !important;
}

.stat-required {
    color: var(--danger-color) !important;
}

.stat-damage {
    color: var(--info-color) !important;
}

.stat-defense {
    color: var(--secondary-color) !important;
}

.mp-character-level {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
    margin-top: 5px;
}

.mp-character-info {
    text-align: center;
    margin-bottom: 16px;
}

.mp-character-class-race {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.mp-character-np {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 4px;
    background: rgba(13, 115, 119, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(13, 115, 119, 0.3);
}

.mp-character-np .value {
    color: var(--secondary-color);
}

.mp-character-stats .mp-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    padding: 3px 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
}


.mp-character-stats .mp-stat-row .mp-stat-value {
    color: var(--text-primary);
    text-align: right;
}

.mp-character-completion-bar {
    width: 100%;
    height: 8px;
    background: rgba(52, 73, 94, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.mp-character-completion-fill {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c 0%, #f39c12 50%, #27ae60 100%);
    transition: width 0.3s ease;
}

.mp-character-completion-text {
    text-align: center;
    color: var(--primary-color);
}

.mp-set-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    justify-content: flex-end;
}

.mp-set-images {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mp-set-image {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mp-main-image:hover,
.mp-set-image:hover {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.mp-set-image img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 3px;
}

.mp-set-count {
    color: var(--warning-color);
    background: rgba(var(--warning-rgb), 0.1);
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(var(--warning-rgb), 0.3);
}

.mp-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.mp-footer * {
    position: relative;
    z-index: 1;
}

.mp-price {
    color: var(--primary-color);
    margin: 0;
    flex: 1;
}

.mp-price-currency {
    color: var(--text-secondary);
    margin-left: 2px;
}

.mp-action-btn {
    background: linear-gradient(135deg, var(--primary-color), #e55a2e);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
    z-index: 1 !important;
}

.mp-action-btn:hover {
    background: linear-gradient(135deg, #e55a2e, var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
}

.mp-discount-badge,
.discount-badge {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-red 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse-green {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes pulse-red {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes pulse-gold {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.hexagones-container {
    padding: 8px 0;
    position: relative;
    z-index: 5;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    display: none;
}

.hexagones-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 50px;
}

.hexagon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 12px;
}

.hexagon-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color), inset 0 0 30px rgba(255, 102, 0, 0.3);
}

.hexagon-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hexagon-avatar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--bg-primary-rgb), 0.4), transparent);
    -webkit-animation: dolaboynuma 32s infinite ease-in-out;
    animation: dolaboynuma 2s infinite ease-in-out;
    z-index: 1;
}

@keyframes dolaboynuma {
    0% {
        left: -120%
    }

    25% {
        left: -120%
    }

    50% {
        left: -120%
    }

    100% {
        left: 230%
    }
}

@keyframes pulse-star {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.countdown-section {
    background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.1), rgba(var(--success-rgb), 0.1));
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.countdown-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 40%, rgba(var(--primary-rgb), 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(var(--secondary-rgb), 0.1) 0%, transparent 50%);
    animation: rotate-bg 20s linear infinite;
    z-index: 1;
}

@keyframes rotate-bg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.countdown-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.countdown-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), #e55a2e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: tick 1s ease-in-out infinite;
}

@keyframes tick {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.countdown-text {
    text-align: left;
}

.countdown-sub-text {
    display: block;
    color: var(--text-muted);
    line-height: 1.4;
}

.deals-section {
    margin-bottom: 50px;
    overflow: visible;
}

.deals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.deals-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    margin: 0;
}

.deals-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color), #e55a2e);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0);
    }
}

.deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    overflow: visible;
}

.deals-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.deals-loading .loading-spinner {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.deals-card {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 16px;
    transition: all 0.3s ease;
    overflow: visible;
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

.deals-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.05));
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.deals-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    z-index: 10;
}

.deals-card:hover::before {
    opacity: 1;
}

.deals-card>* {
    position: relative;
    z-index: 2;
}

.deals-flash {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #dc2626, var(--danger-color));
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    animation: flash-deal 1.5s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes flash-deal {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.deals-price {
    color: var(--primary-color) !important;
}

.deals-discount-badge {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-discount 2s infinite;
}

@keyframes pulse-discount {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

.deals-btn {
    background: linear-gradient(135deg, var(--primary-color), #e55a2e) !important;
    color: white !important;
    border: none !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.deals-btn:hover {
    background: linear-gradient(135deg, #e55a2e, var(--primary-color)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4) !important;
}

.tomorrow-section .deals-title i {
    color: #6b46c1;
}

.tomorrow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    overflow: visible;
}

.tomorrow-card {
    position: relative;
    filter: grayscale(0.3);
    opacity: 0.8;
}

.tomorrow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(107, 70, 193, 0.1);
    z-index: 5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tomorrow-lock {
    background: rgba(107, 70, 193, 0.9);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--bg-primary-rgb), 0.2);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.blurred {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
}

.tomorrow-card .mp-action-btn.disabled {
    background: #6b7280 !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.tomorrow-card .mp-action-btn.disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    justify-content: center;
    margin-bottom: 40px;
}

.blog-card {
    max-width: 320px;
    margin: 0 auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.blog-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 12px;
    left: 12px;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.blog-reading-time {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.blog-title {
    margin: 0 0 12px 0;

    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.3px;
}

.blog-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 16px 0;
    letter-spacing: -0.4px;
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.blog-tag {
    background: var(--bg-secondary);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: lowercase;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.blog-tag:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.blog-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.blog-author,
.blog-date,
.blog-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.1);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    gap: 8px;
}

.blog-read-more:hover {
    background: var(--primary-color);
    color: white;
    transform: translateX(4px);
    border-color: var(--primary-color);
}

.blog-read-more i {
    transition: transform 0.3s ease;
}

.blog-read-more:hover i {
    transform: translateX(2px);
}

.mp-set-image[data-tooltip] {
    position: relative;
    cursor: help;
}

.mp-set-image[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: none;
    margin-bottom: 0;
}

.mp-set-image[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(var(--bg-primary-rgb), 0.1);
    pointer-events: none;
    margin-bottom: 5px;
}

.mp-set-image[data-tooltip]:hover::before,
.mp-set-image[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.gb-qty-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    min-width: 210px;
}

.gb-qty-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gb-input-group {
    flex: 1;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.gb-qty-input {
    flex: 1;
    width: 0;
    min-width: 0;
    padding: 6px 8px;
    text-align: center;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: none;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: background 0.2s ease;
}

.gb-qty-input::-webkit-outer-spin-button,
.gb-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gb-qty-m {
    border-right: 1px solid rgba(var(--secondary-rgb), 0.3);
}

.gb-input-group:has(.gb-qty-m) {
    border-color: rgba(var(--secondary-rgb), 0.4);
}

.gb-input-group:focus-within:has(.gb-qty-m) {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), 0.15);
}

.gb-qty-tl {
    border-right: 1px solid rgba(var(--primary-rgb), 0.3);
}

.gb-input-group:has(.gb-qty-tl) {
    border-color: rgba(var(--primary-rgb), 0.35);
}

.gb-input-group:focus-within:has(.gb-qty-tl) {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.gb-input-append {
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    white-space: nowrap;
    letter-spacing: 0.3px;
    user-select: none;
}

.gb-qty-btn {
    width: 30px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gb-qty-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.gb-qty-btn:active {
    transform: scale(0.95);
}

.marketplace-container {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    padding: 16px;
}

.marketplace-filters {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    height: fit-content;
    position: sticky;
    top: 120px;
}

.mp-filter-section {
    margin-bottom: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
}

.mp-filter-section:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: var(--shadow-sm);
}

.mp-filter-title {
    color: var(--text-primary);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
    user-select: none;
}

.mp-filter-title:hover {
    background: var(--bg-tertiary);
    color: var(--primary-color);
}

.mp-filter-title.active {
    background: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
    color: var(--primary-color);
}

.mp-filter-title-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-filter-arrow {
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.mp-filter-title.active .mp-filter-arrow {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.mp-filter-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    background: var(--bg-primary);
}

.mp-filter-content.active {
    max-height: 450px;
    padding: 16px;
}

.mp-filter-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s ease;
}

.mp-filter-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    background: var(--bg-tertiary);
}

.mp-price-range-inputs {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mp-filter-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 8px;
}

.mp-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mp-filter-checkbox:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.mp-filter-checkbox.checked {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
}

.mp-filter-checkbox input[type="checkbox"],
.mp-filter-checkbox input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
    border-radius: 4px;
}

.mp-filter-checkbox label {
    color: var(--text-secondary);
    cursor: pointer;
    flex: 1;
    transition: color 0.2s ease;
}

.mp-filter-button {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color), #e55a2e);
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.mp-filter-button:hover {
    background: linear-gradient(135deg, #e55a2e, var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.mp-clear-filters-button {
    width: 100%;
    background: linear-gradient(135deg, var(--text-muted), #6b7280);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

.mp-clear-filters-button:hover {
    background: linear-gradient(135deg, #6b7280, var(--text-muted));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
}

.mp-filter-button:active,
.mp-clear-filters-button:active {
    transform: translateY(0);
}

.marketplace-header {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.marketplace-title {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.marketplace-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mp-mode-toggle {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-right: 8px;
}

.mp-view-toggle {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.mp-mode-btn,
.mp-view-btn {
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mp-mode-btn:hover,
.mp-view-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.mp-mode-btn.active,
.mp-view-btn.active {
    background: var(--primary-color);
    color: white;
}

.mp-sort-select {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    min-width: 150px;
    transition: all 0.2s ease;
}

.mp-item-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    min-height: 200px;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.mp-item-image {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.mp-sort-select:hover,
.mp-item-image:hover {
    border-color: var(--primary-color);
}

.mp-item-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.mp-server-name {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.mp-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

.mp-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.mp-item-name {
    color: var(--text-primary);
    line-height: 1.3;
    flex: 1;
    display: flex;
    justify-content: center;
}

.mp-item-stats-item-addpages {
    flex: 1;

}

.mp-stat-row-item-addpages {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    font-size: 11px;
}

.mp-item-stats {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    align-content: start;
}

.mp-stat-row-mini {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-secondary);
    align-self: start;
    transition: all 0.2s ease;
}

.mp-stat-row-mini.stat-required span {
    color: var(--danger-color);
}

.mp-stat-row-mini.stat-damage span {
    color: var(--info-color);
}

.mp-stat-row-mini.stat-defense span {
    color: var(--secondary-color);
}

.mp-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.mp-item-counts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-listing-count {
    color: var(--text-primary);
    margin-right: 5px;
}

.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.marketplace-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.marketplace-grid.items-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.mp-item-card:hover,
.mp-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.mp-card-cok-satan {
    border: 1px solid var(--danger-color);
    background: linear-gradient(135deg, rgba(var(--danger-rgb), 0.05), rgba(var(--danger-rgb), 0.02));
    box-shadow: 0 0 20px rgba(var(--danger-rgb), 0.15);
    animation: pulse-glow-red 3s infinite;
}

.mp-card-cok-satan:hover {
    border-color: #dc2626;
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(var(--danger-rgb), 0.3);
}

.mp-card-vitrin {
    border: 1px solid #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(139, 92, 246, 0.02));
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
    animation: pulse-glow-purple 3s infinite;
}

.mp-card-vitrin:hover {
    border-color: #7c3aed;
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3);
}

.mp-doping-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mp-doping-badge.cok-satan {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: white;
    animation: pulse-badge-red 2s infinite;
}

.mp-doping-badge.vitrin {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    animation: pulse-badge-purple 2s infinite;
}

@keyframes pulse-glow-red {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(var(--danger-rgb), 0.15);
    }

    50% {
        box-shadow: 0 0 30px rgba(var(--danger-rgb), 0.25);
    }
}

@keyframes pulse-glow-purple {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
    }

    50% {
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.25);
    }
}

@keyframes pulse-badge-red {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(var(--danger-rgb), 0.4);
    }
}

@keyframes pulse-badge-purple {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    }
}

.marketplace-grid.list-view .mp-card {
    flex-direction: row;
    align-items: center;
    min-height: auto;
    padding: 16px 20px;
    gap: 16px;
}

.marketplace-grid.list-view .mp-card:hover {
    transform: none;
}

.mp-discount-badge {
    background: linear-gradient(135deg, #ff0000ff, #ff0000ff);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-red 2s infinite;
    flex-shrink: 0;
}



.mp-list-image {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mp-main-image img,
.mp-list-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.mp-list-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.mp-list-info {
    flex: 1;
    min-width: 0;
}

.mp-list-name {
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.mp-list-details {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.mp-list-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mp-list-price {
    color: var(--primary-color);
    min-width: 100px;
    text-align: right;
}

.mp-price-currency,
.mp-list-price-currency {
    color: var(--text-secondary);
    margin-left: 2px;
}

.marketplace-grid.list-view .mp-online-badge,
.marketplace-grid.list-view .mp-discount-badge {
    position: static;
    display: inline-block;
    animation: pulse-green 2s infinite;
    margin-right: 8px;
}

.mp-results-count {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.marketplace-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.mp-pagination-btn {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 36px;
    text-align: center;
}

.mp-pagination-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

.mp-pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.mp-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mp-no-results {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

.mp-no-results i {
    margin-bottom: 16px;
    color: var(--text-muted);
}

.mp-no-results h3 {
    margin-bottom: 8px;
    color: var(--text-primary);
}

.mp-filter-toggle {
    display: none;
    width: 100%;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.marketplace-grid.list-view .mp-stats,
.marketplace-grid.list-view .mp-set-info,
.marketplace-grid.list-view .mp-footer,
.marketplace-grid.list-view .mp-title,
.marketplace-grid.list-view .mp-image-container,
.marketplace-grid.list-view .pd-seller-set-info--grid,
.marketplace-grid:not(.list-view) .mp-list-image,
.marketplace-grid:not(.list-view) .mp-list-content,
.marketplace-grid:not(.list-view) .pd-seller-set-info--list,
.mp-filters-close {
    display: none;
}

.marketplace-grid.list-view .sell-info {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 20px;
    align-items: center;
}

.marketplace-grid.list-view .sell-info .pd-seller-set-info--list {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}

.marketplace-grid.list-view .sell-info .mp-list-name,
.marketplace-grid.list-view .sell-info .mp-list-details {
    grid-column: 1;
}

.mp-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.mp-loading i {
    margin-bottom: 12px;
    animation: spin 2s linear infinite;
    color: var(--primary-color);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.mp-server-btn,
.mp-sort-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mp-server-btn:hover,
.mp-sort-btn:hover {
    background: var(--bg-tertiary);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.mp-server-btn.active,
.mp-sort-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.mp-server-btn.active:hover,
.mp-sort-btn.active:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
}

.mp-sort-btn .mp-sort-order {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    font-weight: 600;
}

.marketplace-server-buttons {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.mp-server-buttons-container,
.mp-server-buttons-container,
.mp-sort-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mp-controls-separator {
    width: 1px;
    height: 32px;
    background: var(--border-color);
    margin: 0 12px;
}

.mp-name.item-unique {
    color: #d0c689 !important;
    text-shadow: 0 0 10px rgba(var(--warning-rgb), 0.2);
}

.mp-name.item-reverse {
    color: var(--danger-color) !important;
    text-shadow: 0 0 10px rgba(var(--danger-rgb), 0.2);
}

.mp-name.item-rare {
    color: #3b82f6 !important;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.mp-name.item-set {
    color: var(--success-color) !important;
    text-shadow: 0 0 10px rgba(var(--success-rgb), 0.2);
}

.mp-stat-row.shop_info_bonusmp,
.mp-stat-row.shop_info_bonushp,
.mp-stat-row.shop_info_bonusstrength,
.mp-stat-row.shop_info_bonusdexterity,
.mp-stat-row.shop_info_bonusintelligence,
.mp-stat-row.shop_info_bonusmagicpower,
.mp-stat-row.shop_info_bonushealth {
    color: var(--success-color);
}

.mp-stat-row.shop_info_defense,
.mp-stat-row.shop_info_ac {
    color: #3b82f6;
}

.mp-stat-row.shop_info_resistanceflame,
.mp-stat-row.shop_info_resistanceglacier,
.mp-stat-row.shop_info_resistancelighting,
.mp-stat-row.shop_info_resistancedark,
.mp-stat-row.shop_info_magicpower {
    color: #8b5cf6;
}

.mp-stat-row.shop_info_damagepoison,
.mp-stat-row.shop_info_damageflame,
.mp-stat-row.shop_info_damageglacier,
.mp-stat-row.shop_info_damagelighting,
.mp-stat-row.shop_info_requiredstrength,
.mp-stat-row.shop_info_requireddexterity,
.mp-stat-row.shop_info_requiredintellect,
.mp-stat-row.shop_info_requiredmp,
.mp-stat-row.shop_info_requiredlevel {
    color: var(--danger-color);
}

.pd-seller-char-card {
    min-height: 420px !important;
}

.pd-seller-char-image-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 20px;
    height: 120px;
}

.pd-seller-char-main-image {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.pd-seller-char-main-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.pd-seller-char-level {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
}

.pd-seller-char-info {
    text-align: center;
    margin: 10px 0px 10px 0px;
    padding: 0 16px;
}

.pd-seller-char-def-str {
    color: var(--primary-color);
    line-height: 1.2;
}

.pd-seller-char-stats {
    padding: 0 16px;
    flex: 1;
}

.pd-seller-char-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    transition: all 0.2s ease;
}

.pd-seller-char-stat-row:last-child {
    border: 0px;
}

.pd-seller-char-stat-value {
    color: var(--text-primary);
    text-align: right;
}

.pd-container {
    padding: 20px;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

.pd-main-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    width: 100%;
    flex-grow: 1;
}

.pd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 120px;
    height: fit-content;
    max-width: 100%;
    overflow-x: hidden;
}

.pd-sidebar-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.pd-sidebar-card:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
    z-index: 50;
}

.pd-sidebar-card-header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
}

.pd-sidebar-item-icon {
    width: 64px;
    height: 64px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.pd-seller-char-main-image:hover,
.pd-sidebar-item-icon:hover {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.pd-sidebar-item-icon img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.pd-sidebar-item-info h3 {
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.pd-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pd-stats-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    font-size: var(--mini-font-size);
}

.pd-features-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    width: 100%;
}

.pd-features-card-header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    color: var(--text-primary);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.pd-features-list {
    list-style: none;
    padding: 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-features-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    font-size: var(--mini-font-size);
}

.pd-features-list li:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.pd-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: visible !important;
    height: fit-content;
    max-width: 100%;
    width: 100%;
    min-width: 0;
}

.pd-header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    padding: 32px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
}

.pd-main-info {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: start;
}

.pd-title h2 {
    color: var(--text-primary);
    margin: 0 0 16px 0;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

.pd-price-old {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}

.pd-discount-badge {
    background: linear-gradient(135deg, #dc2626, var(--danger-color));
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pd-pulse-discount 2s infinite;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

@keyframes pd-pulse-discount {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.pd-price-current {
    color: var(--text-primary);
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: var(--biger-font-size);
}

.pd-offer-and-actions-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pd-offer-section {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(var(--danger-rgb), 0.1), rgba(220, 38, 38, 0.05));
    border: 1px dashed var(--danger-color);
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 200px;
    justify-content: space-around;
}

.pd-offer-icon {
    width: 20px;
    height: 20px;
    color: var(--danger-color);
}

.pd-offer-content span {
    display: block;
    color: var(--danger-color);
    text-transform: uppercase;
    margin: 0 0 4px 0;
}

.pd-offer-content strong {
    color: var(--danger-color);
}

.pd-action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.pd-btn-primary,
.pd-btn-secondary,
.pd-btn-offer,
.pd-btn-trade {
    padding: 12px 24px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(var(--bg-primary-rgb), 0.1);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white !important;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}



.pd-btn-primary {
    background: linear-gradient(135deg, #4b5563, #374151);
    box-shadow: 0 4px 12px rgba(55, 65, 81, 0.3);
}

.pd-btn-primary:hover {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.pd-btn-secondary {
    background: linear-gradient(135deg, var(--success-color), #059669);
    box-shadow: 0 4px 15px rgba(var(--success-rgb), 0.3);
}

.pd-btn-secondary:hover {
    background: linear-gradient(135deg, #34d399, var(--success-color));
}

.pd-btn-offer {
    background: var(--danger-color);
}

.pd-btn-trade {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.pd-btn-trade:hover {
    background: linear-gradient(135deg, #818cf8, #a855f7);
}

.pd-mobile-fixed-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(20, 20, 30, 0.9);
    backdrop-filter: blur(15px);
    padding: 12px 16px;
    z-index: 10000;
    border-top: 1px solid rgba(var(--bg-primary-rgb), 0.1);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.pd-mobile-fixed-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pd-mobile-fixed-actions button {
    padding: 10px 4px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 44px;
}

.pd-sold-status {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pd-seller-section {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}


.pd-seller-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../images/seller-section-bg.jpg") center/cover no-repeat;
    opacity: 0.02;
    z-index: 0;
}

[data-theme="dark"] .pd-seller-section::before {
    opacity: 0.2;
}

.pd-seller-section>* {
    position: relative;
    z-index: 1;
}

.pd-seller-profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    gap: 15px;
    text-decoration: none !important;
    color: var(--text-primary);
}

.pd-seller-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.pd-seller-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    border-left: 1px solid rgba(var(--bg-primary-rgb), 0.05);
    min-width: 70px;
}

.pd-stars-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fbbf24;
}

.pd-stars-vertical i {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
}

.pd-rating-badge {
    margin-top: 10px;
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.pd-seller-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-color);
    box-shadow: var(--shadow-md);
    position: relative;
}

.pd-seller-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes pd-pulse-online {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.pd-seller-details h3 {
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.pd-seller-badges {
    gap: 4px;
    margin-bottom: 6px;
}

.pd-seller-badge {
    width: 18px;
    height: 18px;
    color: var(--success-color);
}

.pd-seller-badge.pd-premium {
    color: #fbbf24;
}

.pd-seller-stats {
    color: var(--text-secondary);
    margin: 0;
}

.pd-seller-status {
    color: var(--text-secondary);
    margin-top: 4px;
}

.pd-expires-info {
    color: var(--warning-color);
    margin: 16px 0;
    padding: 16px 20px;
    background: rgba(var(--warning-rgb), 0.1);
    border-radius: 10px;
    border-left: 4px solid var(--warning-color);
}

.pd-set-title {
    color: var(--text-primary);
    margin: 0 0 20px 0;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
}

.pd-add-favorite-btn {
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid;
    cursor: pointer;
    background: transparent;
    color: var(--success-color);
    border-color: var(--success-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-add-favorite-btn:hover {
    background: var(--success-color);
    color: white;
    transform: translateY(-2px);
}

.pd-seller-other-items {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    z-index: 1;
    max-width: 100%;
    min-width: 0;
}

.pd-seller-other-header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    color: var(--text-primary);
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-seller-items-slider {
    padding: 32px;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.pd-seller-swiper {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    overflow: hidden;
    max-width: 100%;
}

.swiper-slide {
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.pd-seller-item-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    height: auto;
    min-height: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-md);
}

.pd-seller-item-card:hover {
    transform: translateY(-3px);
}

.pd-seller-item-image-container {
    position: relative;
    padding: 20px;
    text-align: center;
    background: var(--bg-secondary);
    flex: 0 0 auto;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.pd-seller-item-main-image {
    width: 64px;
    height: 64px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.pd-seller-item-main-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.pd-seller-item-card:hover .pd-seller-item-main-image {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.pd-seller-item-title {
    padding: 16px 16px 8px;
    flex: 0 0 auto;
    margin-top: 5px;
}

.pd-seller-item-name {
    color: var(--text-primary);
    margin-top: 10px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.pd-seller-item-server {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pd-seller-item-stats {
    padding: 0 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.pd-seller-stats-visible {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.pd-seller-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.2;
    font-size: var(--small-font-size);
}

.pd-seller-set-info {
    padding: 0 16px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: column;
}

.pd-seller-set-images {
    display: flex;
    gap: 4px;
    flex: 1;
}

.pd-seller-set-image {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.pd-seller-set-count {
    background: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
    font-size: var(--small-font-size);
}

.pd-seller-item-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.pd-seller-item-price {
    color: var(--primary-color);
    margin: 0;
    flex: 1;
}

.pd-seller-item-price-currency {
    color: var(--text-secondary);
    margin-left: 2px;
}

.pd-seller-action-btn {
    background: linear-gradient(135deg, var(--primary-color), #e55a2e);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
}

.pd-seller-action-btn:hover {
    background: linear-gradient(135deg, #e55a2e, var(--primary-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
}

.pd-sorular-header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    color: var(--text-primary);
    margin: 0;
    padding: 24px 32px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pd-sorular-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-soru-item {
    background: transparent;
    border-bottom: 1px solid;
    padding: 10px 0px 0px 10px;
    margin: 0;
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
    border-color: var(--border-color);
}

.pd-soru-item:last-child {
    border: 0px;
}

.pd-soru-container {
    padding: 0;
    border: none;
    background: transparent;
    margin-bottom: 16px;
}

.pd-cevap-container {
    padding: 0;
    border: none;
    background: transparent;
    border-top: none;
    margin-left: 20px;
    position: relative;
    margin-bottom: 15px;
}

.pd-cevap-container::before {
    position: absolute;
    left: -10px;
    top: 16px;
    width: 2px;
    height: calc(100% - 16px);
    background: linear-gradient(180deg, var(--success-color), rgba(var(--success-rgb), 0.2));
    border-radius: 1px;
}

.pd-soru-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--info-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.pd-soru-header,
.pd-cevap-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.pd-cevap-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.pd-soru-kullanici,
.pd-cevap-kullanici {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pd-soru-metni {
    color: var(--text-primary);
    line-height: 1.7;
    padding: 0;
    background: transparent;
    border-radius: 0;
    position: relative;
    margin-left: 48px;
    margin-top: 8px;
    padding-left: 16px;
    border-left: 2px solid var(--info-color);
}

.pd-soru-metni::before {
    color: var(--info-color);
    position: absolute;
    left: -8px;
    top: -4px;
}

.pd-soru-metni::after {
    color: var(--info-color);
    margin-left: 4px;
}

.pd-cevap-metni {
    color: var(--text-primary);
    line-height: 1.7;
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin-left: 48px;
    margin-top: 12px;
    padding-left: 16px;
    border-left: 2px solid var(--success-color);
    position: relative;
}

.pd-cevap-metni::before {
    width: 8px;
    height: 8px;
    background: var(--success-color);
    border-radius: 50%;
    position: absolute;
    left: -5px;
    top: 8px;
}

.pd-sorular-toggle {
    text-align: center;
    padding: 24px 0 0;
    border-top: 1px solid var(--border-color);
    margin-top: 32px;
}

.pd-sorular-toggle-btn {
    background: linear-gradient(135deg, var(--primary-color), #e55a2e);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.pd-sorular-toggle-btn:hover {
    background: linear-gradient(135deg, #e55a2e, var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.pd-sorular-toggle-btn i {
    transition: transform 0.3s ease;
}

.report-reasons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
}

.report-reason-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-reason-item input[type="radio"] {
    margin: 0;
    accent-color: var(--primary-color);
}

.offer-modal-container {
    display: flex;
    flex-direction: column;
}

.offer-price-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(79, 172, 254, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 8px;
}

.current-price-display {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--info-color);
}

.form-hint {
    color: var(--text-secondary);
    margin-top: 4px;
    display: block;
}

.offer-agreement {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin: 8px 0;
}

.checkbox-container input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.checkmark {
    position: relative;
    width: 20px;
    height: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-container input:checked+.checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    color: var(--text-primary);
    flex: 1;
}

.offer-balance-info {
    background: linear-gradient(135deg, rgba(var(--success-rgb), 0.1), rgba(6, 182, 212, 0.05));
    border: 1px solid rgba(var(--success-rgb), 0.2);
    border-radius: 12px;
    padding: 16px 20px;
}

.balance-display {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--success-color);
}

.invalid-feedback {
    display: none;
    color: var(--danger-color);
    margin-top: 6px;
}

.pd-character-main-info {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.pd-character-level {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pd-character-class-race {
    color: var(--text-primary);
    margin-bottom: 8px;
}

.pd-character-np {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}


.pd-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.pd-character-completion {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.pd-character-completion-bar {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.pd-character-completion-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color), var(--success-color));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.pd-character-completion-text {
    text-align: center;
    color: var(--text-primary);
}

.pd-sorular-section,
.pd-character-info-card,
.pd-achievements-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.pd-achievements-card h6 {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    color: var(--text-primary);
    margin: 0;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.pd-achievements-list {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pd-achievement-badge {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-color));
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(var(--warning-rgb), 0.3);
}

.pd-template-dropdown {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

.pd-template-toggle {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.pd-template-toggle.active {
    border-color: var(--primary-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pd-template-toggle i {
    transition: transform 0.2s ease;
}

.pd-sorular-expanded .pd-sorular-toggle-btn i,
.pd-template-toggle.active i {
    transform: rotate(180deg);
}

.pd-template-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    display: none;
    overflow: hidden;
}

.pd-template-search-container {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.pd-template-search {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
}

.checkbox-container:hover .checkmark,
.pd-template-search:focus {
    border-color: var(--primary-color);
}

.pd-template-search-container i {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.pd-template-list {
    max-height: 200px;
    overflow-y: auto;
}

.pd-template-item {
    padding: 10px 16px;
    cursor: pointer;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.pd-template-item:last-child {
    border-bottom: none;
}

.pd-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.pd-meta-item i {
    color: var(--primary-color);
    opacity: 0.8;
}

.pd-meta-item.warning,
.pd-meta-item.warning i {
    color: var(--warning-color);
}

.pd-footer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pd-action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pd-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--primary-color);
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pd-action-btn.active {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background: rgba(var(--danger-rgb), 0.1);
}

.pd-share-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px;
    display: flex;
    gap: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-lg);
    z-index: 999;
}

.product-actions-wrapper:hover .pd-share-menu,
.product-actions-wrapper:focus-within .pd-share-menu,
.pd-action-btn:focus+.pd-share-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pd-share-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-secondary);
    transition: all 0.2s;
    text-decoration: none;
}

.pd-template-item:hover,
.pd-share-item:hover {
    background: var(--bg-tertiary);
    color: var(--primary-color);
}

.pd-inventory-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.pd-inventory-slot.empty {
    opacity: 0.3;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.1);
}

.pd-inventory-image {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-inventory-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pd-inventory-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: rgba(20, 20, 30, 0.95) transparent transparent transparent;
}

.pd-tooltip-stats {
    list-style: none;
    padding: 0px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pd-tooltip-stats li {
    display: flex;
    justify-content: space-between;
    color: #ccc;
}

.pd-tooltip-stats li span:last-child {
    color: white;
}

:root {
    --glass-bg: rgba(20, 20, 30, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --neon-gold: #f1c40f;
    --neon-blue: #3498db;
    --neon-red: #ef4444;
    --neon-green: #2ecc71;
}

.pd-listing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: rgba(var(--bg-primary-rgb), 0.03);
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
    backdrop-filter: blur(5px);
    border-radius: 0 0 16px 16px;
}

.pd-inventory-slot {
    width: 56px;
    height: 56px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.pd-inventory-slot:hover {
    transform: scale(1.05);
    z-index: 100;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.pd-inventory-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 250px;
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 9999;
    min-width: 250px;
}

.pd-inventory-slot:hover .pd-inventory-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-15px);
    z-index: 99999 !important;
}

.pd-set-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.pd-set-view-toggles {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.pd-view-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pd-view-toggle.active {
    background: var(--primary-color);
    color: white;
}

.pd-inventory-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-list-item {
    display: flex;
    gap: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    align-items: center;
    transition: all 0.2s ease;
}

.pd-list-item:hover {
    border-color: var(--primary-color);
    transform: translateX(4px);
}

.pd-list-item-image {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pd-list-item-image img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
}

.pd-list-item-image.item-unique {
    border-color: #f1c40f;
}

.pd-list-item-image.item-rare {
    border-color: #3498db;
}

.pd-list-item.item-unique {
    border-left: 4px solid #f1c40f;
}

.pd-list-item.item-rare {
    border-left: 4px solid #3498db;
}

.pd-list-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-list-item-name.item-unique {
    color: #f1c40f;
}

.pd-list-item-name.item-rare {
    color: #3498db;
}

.pd-list-item-name.item-reverse {
    color: #e67e22;
}

.pd-sidebar-card.pd-hidden,
.pd-sorular-collapsed .pd-soru-item:nth-child(n+4),
.pd-mobile-modal-overlay,
.pd-mobile-modal {
    display: none;
}

.pd-mobile-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.pd-mobile-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

.pd-mobile-modal-content .pd-tooltip-stats li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.swiper-button-prev-custom,
.swiper-button-next-custom,
.swiper-button-prev-custom-ring,
.swiper-button-next-custom-ring,
.swiper-button-prev-custom-char,
.swiper-button-next-custom-char {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover,
.swiper-button-prev-custom-ring:hover,
.swiper-button-next-custom-ring:hover,
.swiper-button-prev-custom-char:hover,
.swiper-button-next-custom-char:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.swiper-button-prev-custom:disabled,
.swiper-button-next-custom:disabled,
.swiper-button-prev-custom-ring:disabled,
.swiper-button-next-custom-ring:disabled,
.swiper-button-prev-custom-char:disabled,
.swiper-button-next-custom-char:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.koitem-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.koitem-header-top {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}

.koitem-header-top h2 {
    color: var(--text-primary);
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.koitem-header-filters-advanced {
    background: var(--bg-secondary);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.koitem-header-filters-advanced .filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: flex-end;
}

.koitem-header-filters-advanced .filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.koitem-header-filters-advanced select,
.koitem-header-filters-advanced input {
    height: 48px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.koitem-header-filters-advanced .search-box {
    position: relative;
    grid-column: span 1;
}

.koitem-header-filters-advanced .search-box button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.koitem-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.koitem-filter-btn {
    padding: 12px 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.koitem-filter-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.koitem-filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.koitem-bulk-select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: var(--shadow-sm);
}

.koitem-select-all {
    display: flex;
    align-items: center;
    gap: 12px;
}

.koitem-select-all input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

.koitem-select-all label {
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    margin: 0;
}

.koitem-bulk-actions {
    display: none;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.koitem-bulk-actions.show {
    display: flex;
}

.koitem-bulk-btn {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.koitem-bulk-btn:hover {
    background: var(--bg-tertiary);
    box-shadow: var(--shadow-md);
}

.koitem-item {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-item-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.koitem-item-image {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.koitem-item-title {
    color: var(--text-primary);
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-item-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-secondary);
    flex-wrap: wrap;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-item-set-count {
    background: var(--info-color);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

.koitem-item-status {
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-item-pricing {
    text-align: right;
    margin-left: auto;
}

.koitem-item-price {
    color: var(--text-primary);
    margin: 0 0 4px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-item-earning {
    color: var(--success-color);
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-item-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.koitem-item-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.koitem-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.koitem-mobile-menu {
    position: relative;
    display: none;
}

.koitem-mobile-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 16px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s ease;
}

.report-reason-item:hover,
.pd-template-toggle:hover,
.koitem-mobile-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.koitem-mobile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.pd-share-dropdown-wrapper:hover .pd-share-menu,
.koitem-mobile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.koitem-mobile-dropdown .koitem-action-btn {
    width: 100%;
    margin-bottom: 1px;
    border-radius: 0;
    justify-content: flex-start;
    padding: 12px 16px;
}

.koitem-mobile-dropdown .koitem-action-btn:first-child {
    border-radius: 12px 12px 0 0;
}

.koitem-mobile-dropdown .koitem-action-btn:last-child {
    border-radius: 0 0 12px 12px;
    margin-bottom: 0;
}

.koitem-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--mini-font-size);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}

.koitem-action-btn i {
    font-size: var(--mini-font-size);
    opacity: 0.7;
}

.koitem-action-btn:hover {
    color: var(--text-primary);
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb, 102 126 234), 0.06);
    box-shadow: none;
    transform: none;
}

.koitem-action-btn:hover i {
    opacity: 1;
}

.koitem-action-btn.success {
    border-color: rgba(16, 185, 129, 0.35);
    color: #059669;
}

.koitem-action-btn.success:hover {
    color: #047857;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.koitem-action-btn.warning {
    border-color: rgba(245, 158, 11, 0.35);
    color: #d97706;
}

.koitem-action-btn.warning:hover {
    color: #b45309;
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.koitem-bulk-btn.danger {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

.koitem-bulk-btn.danger:hover {
    background: #dc2626;
}

.koitem-action-btn.danger {
    border-color: rgba(239, 68, 68, 0.35);
    color: #dc2626;
}

.koitem-action-btn.danger:hover {
    color: #b91c1c;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.koitem-action-btn.info {
    border-color: rgba(59, 130, 246, 0.35);
    color: #2563eb;
}

.koitem-action-btn.info:hover {
    color: #1d4ed8;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.koitem-details-toggle {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.koitem-item-details {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.koitem-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.koitem-detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.koitem-detail-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-detail-value {
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-set-content {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
    max-width: 100%;
}

.checkbox-container input:checked+.checkmark:after,
.invalid-feedback:not(.d-none),
.pd-template-menu.show,
.koitem-item-details.show,
.koitem-set-content.show {
    display: block;
}

.koitem-set-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    min-width: 0;
}

.koitem-set-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    min-width: 0;
    max-width: 100%;
}

.koitem-item:hover,
.koitem-set-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.koitem-set-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.koitem-set-item-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.pd-seller-set-image img,
.koitem-item-image img,
.koitem-set-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.koitem-item-info,
.koitem-set-item-info {
    flex: 1;
    min-width: 0;
}

.koitem-set-item-name {
    color: var(--text-primary);
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.koitem-delivery-info {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.koitem-delivery-title {
    color: var(--info-color);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-delivery-item {
    margin-bottom: 12px;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pd-seller-badge.pd-fast,
.koitem-delivery-item strong {
    color: var(--info-color);
}

.koitem-delivery-warning {
    background: rgba(var(--danger-rgb), 0.05);
    border: 1px solid rgba(var(--danger-rgb), 0.2);
    border-radius: 8px;
    padding: 16px;
    color: var(--danger-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.koitem-nick-form {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.koitem-nick-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s ease;
}

.koitem-header-filters-advanced select:focus,
.koitem-header-filters-advanced input:focus,
.koitem-nick-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.koitem-nick-submit {
    background: var(--warning-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.koitem-nick-submit:hover {
    background: #d97706;
    transform: translateY(-1px);
}

.koitem-nick-warning {
    background: rgba(var(--warning-rgb), 0.1);
    border: 1px solid rgba(var(--warning-rgb), 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    color: var(--warning-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 12px;
}

.koitem-nick-warning.blink {
    animation: blink 2s infinite;
}

.koitem-nick-warning.success {
    background: rgba(var(--success-rgb), 0.1);
    border-color: rgba(var(--success-rgb), 0.3);
    color: var(--success-color);
}

.koitem-nick-warning.info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--info-color);
}

.koitem-nick-warning.danger {
    background: rgba(var(--danger-rgb), 0.1);
    border-color: rgba(var(--danger-rgb), 0.3);
    color: var(--danger-color);
}

.countdown-timer {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    text-align: center;
}

.countdown-display {
    color: inherit;
}

.countdown-expired {
    color: var(--danger-color);
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.7;
    }
}

.koitem-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.koitem-empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-empty-state p {
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.koitem-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    gap: 8px;
}

.koitem-pagination a {
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.koitem-pagination a:hover,
.koitem-pagination a.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);

}

.btn-secondary:hover {
    background: var(--bg-tertiary);
}

.premium-flex-end-gap {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.premium-d-none {
    display: none;
}

.premium-trade-header {
    display: flex;
    align-items: center;
    padding: 24px;
    gap: 30px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.premium-visual-group {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(var(--bg-primary-rgb), 0.03);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.premium-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.premium-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-exchange-arrow {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    opacity: 0.5;
}

.premium-trade-meta {
    display: flex;
    gap: 40px;
    flex: 1;
    min-width: 300px;
}

.meta-label {
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.premium-action-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.premium-action-icon-btn:hover {
    background: rgba(var(--bg-primary-rgb), 0.05);
    color: var(--text-primary);
}

.premium-progress-track {
    height: 4px;
    background: var(--bg-tertiary);
    position: relative;
    display: flex;
    justify-content: space-between;
}

.premium-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-color);
    transition: width 0.5s ease;
    z-index: 1;
}

.progress-point {
    position: relative;
    z-index: 2;
    top: -8px;
    text-align: center;
}

.point-dot {
    width: 20px;
    height: 20px;
    background: var(--bg-tertiary);
    border: 4px solid var(--bg-secondary);
    border-radius: 50%;
    margin-bottom: 10px;
}

.progress-point.active .point-dot {
    background: var(--primary-color);
    box-shadow: 0 0 12px var(--primary-color);
}

.progress-point.completed .point-dot {
    background: var(--success-color);
}

.point-label {
    color: var(--text-muted);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    top: 25px;
}

.trade-layout-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.nick-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-content {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.premium-input-sm {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    color: var(--text-primary);
    width: 100%;
    max-width: 200px;
}

.premium-delivery-alert {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 15px;
}

.alert-icon {
    color: #3b82f6;
}

.meta-item,
.alert-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alert-title {
    color: #93c5fd;
}

.alert-desc {
    color: #bfdbfe;
}

.premium-btn-success-sm {
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.premium-btn-danger-sm {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(var(--danger-rgb), 0.2);
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.premium-security-mini-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    justify-content: flex-end;
}

.premium-details-panel {
    margin-top: 24px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.list-title {
    text-transform: uppercase;
    color: var(--primary-color);
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.premium-item-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(var(--bg-primary-rgb), 0.02);
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.premium-item-row:hover {
    background: rgba(var(--bg-primary-rgb), 0.05);
    border-color: var(--border-color);
}

.premium-item-row img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
}

.premium-trade-math {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 20px;
}

.math-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--text-muted);
}

.premium-text-danger {
    color: var(--danger-color) !important;
}

.premium-empty-icon-wrap {
    color: var(--text-muted);
    opacity: 0.3;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.premium-info-section,
.premium-actions-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.premium-nick-display {
    background: rgba(var(--bg-primary-rgb), 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nick-input-premium {
    display: flex;
    gap: 10px;
    align-items: center;
}

.premium-btn-sm:hover {
    filter: brightness(1.1);
}

.takas-page-v3 {
    width: 100%;
    padding: 15px;
    min-height: 100vh;
}

.takas-header-v3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: rgba(var(--bg-secondary-rgb), 0.85);
    backdrop-filter: blur(20px);
    padding: 15px 30px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.takas-v3-header-info h1 {
    margin: 0;
    color: var(--text-primary);
}

.takas-v3-header-info p {
    margin: 2px 0 0 0;
    color: var(--text-muted);
}

.v3-select select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 15px;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
}

.takas-grid-v3 {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    gap: 20px;
    align-items: start;
}

.takas-col-v3 {
    background: rgba(var(--bg-secondary-rgb), 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    height: 800px;
    display: flex;
    flex-direction: column;
}

.takas-v3-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.takas-v3-title-row h3 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.takas-selected-count {
    background: var(--primary-color);
    color: white;
    padding: 3px 10px;
    border-radius: 50px;
}

.search-v3 {
    position: relative;
    margin-bottom: 12px;
}

.search-v3 i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-v3 input {
    width: 100%;
    padding: 10px 12px 10px 35px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.selection-bar-v3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-tertiary);
    padding: 10px 15px;
    border-radius: 15px;
}

.takas-clear-selection {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s;
}

.takas-clear-selection:hover {
    color: var(--danger-color);
}

.items-list-v3 {
    overflow-y: auto;
    padding-right: 5px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 5px;
}

.items-list-v3::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.item-card-v3 {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 220px;
}

.item-card-v3:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.item-card-v3.selected {
    border-color: var(--primary-color);
    background: var(--bg-tertiary);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.15);
}

.takas-v3-item-visual {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.takas-v3-item-visual img {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}

.takas-v3-item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.takas-v3-item-name {
    line-height: 1.3;
    max-height: 34px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--text-primary);
}

.v3-set-icons {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
    margin-top: 4px;
}

.takas-v3-s-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
}

.takas-v3-s-more {
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.takas-v3-card-action {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}

.item-card-v3:hover .takas-v3-card-action {
    opacity: 1;
}

.takas-summary-v3 {
    position: sticky;
    top: 20px;
}

.takas-v3-summary-card {
    background: rgba(var(--bg-secondary-rgb), 0.9);
    backdrop-filter: blur(30px);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.takas-v3-user-block {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.v3-avatar {
    position: relative;
    width: 44px;
    height: 44px;
}

.v3-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--primary-color);
}

.v3-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #4b5563;
    border: 1px solid var(--bg-secondary);
    border-radius: 50%;
    z-index: 2;
    transition: all 0.3s ease;
}

.v3-status.online {
    background: var(--success-color);
    box-shadow: 0 0 8px var(--success-color);
}

.v3-user-info .user-name {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.v3-seller-badges {
    display: flex;
    align-items: center;
    gap: 4px;
}

.v3-badge.v3-premium {
    color: var(--warning-color);
}

.v3-badge.v3-trusted {
    color: var(--success-color);
}

.v3-badge.v3-fast {
    color: #3b82f6;
}

.takas-v3-math-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.math-divider {
    height: 1px;
    background: var(--border-color);
    margin: 15px 0;
}

.v3-input-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.v3-input-wrapper {
    position: relative;
}

.v3-input-wrapper input {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.takas-v3-input-unit {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
}

.v3-control {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.takas-v3-fee {
    background: var(--bg-tertiary);
    padding: 15px;
    border-radius: 16px;
    margin: 20px 0;
}

.ts-comm-percent {
    background: var(--success-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
}

.fee-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    text-align: center;
}

.fee-total .label {
    color: var(--text-muted);
    text-transform: uppercase;
}

.fee-total .amount {
    color: var(--primary-color);
    display: block;
}

.v3-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 15px;
}

.v3-checkbox input {
    display: none;
}

.v3-checkmark {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    position: relative;
}

.v3-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.v3-checkbox input:checked+.v3-checkmark:after {
    display: block;
}

.v3-submit-btn {
    width: 100%;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.2);
}

.rare {
    color: #3636d9 !important;
}

.unique {
    color: #bf9100 !important;
}

.blog-page-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
}

.blog-header {
    background: linear-gradient(135deg, var(--primary-color), #ff4757);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    margin-bottom: 30px;
    color: white;
    position: relative;
    overflow: hidden;
}

.blog-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.blog-header * {
    position: relative;
    z-index: 2;
}

.blog-header p {
    margin: 0;
    opacity: 0.9;
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--bg-primary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.search-box {
    flex: 1;
    /* min-width: 300px; */
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.search-box button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

.category-filter {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.featured-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.featured-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.featured-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.featured-category {
    position: absolute;
    top: 12px;
    left: 12px;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-title-text {
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.featured-title-text a {
    color: var(--text-primary);
    text-decoration: none;
}

.featured-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
}

.blog-results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.featured-card:hover,
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination a {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.pagination .current {
    background: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
}

.pagination .disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    cursor: not-allowed;
    opacity: 0.5;
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.premium-header-title-sm,
.premium-header-title-smc,
.no-results h3 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.blog-detail-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.blog-breadcrumb {
    gap: 20px;
    margin-bottom: 20px;
    color: var(--text-muted);
}

.blog-breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.blog-breadcrumb a:hover {
    text-decoration: none;
}

.blog-detail-category {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    margin-bottom: 20px;
}

.blog-detail-title {
    line-height: 1.3;
    margin: 0 0 20px 0;
    color: var(--text-primary);
}

.blog-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.blog-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.blog-detail-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-lg);
}

.blog-detail-content {
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 40px;
}

.blog-detail-content h1,
.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4,
.blog-detail-content h5,
.blog-detail-content h6 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.blog-detail-content h2 {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.blog-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: var(--shadow-md);
}

.blog-detail-tags h4 {
    margin-bottom: 15px;
    color: var(--text-primary);
}

.category-filters,
.blog-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-detail-tag {
    background: var(--bg-secondary);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-decoration: none;
}

.category-filter:hover,
.category-filter.active,
.blog-tag:hover,
.pagination a:hover,
.blog-detail-tag:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.blog-detail-actions {
    gap: 15px;
    margin-bottom: 40px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.share-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.share-facebook {
    background: #1877f2;
}

.share-twitter {
    background: #1da1f2;
}

.share-linkedin {
    background: #0077b5;
}

.share-whatsapp {
    background: #25d366;
}

.related-posts {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid var(--border-color);
}

.related-posts-title {
    margin-bottom: 30px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.related-post-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.related-post-image {
    height: 150px;
    overflow: hidden;
    position: relative;
}

.featured-image img,
.related-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-card:hover .featured-image img,
.blog-card:hover .blog-image img,
.related-post-card:hover .related-post-image img {
    transform: scale(1.05);
}

.related-post-category {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    text-transform: uppercase;
}

.related-post-title {
    line-height: 1.4;
    margin: 0 0 10px 0;
    color: var(--text-primary);
}

.related-post-date {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}


@media (prefers-reduced-motion:reduce) {

    body::before,
    body::after,
    .bg-mesh {
        animation: none !important;
    }

    .cart-counter {
        transition: none;
    }

    .cart-counter.pulse,
    .cart-counter.bounce,
    .cart-counter.shake {
        animation: none;
    }

    .payment-icon {
        animation: none;
        opacity: 0.8;
    }

    .payment-icon:hover {
        transform: none;
    }
}

@media (max-width:768px) {
    .md-m-0 {
        margin: 0;
    }

    .md-ml-0 {
        margin-left: 0;
    }

    .md-p-12px-16px {
        padding: 12px 16px;
    }

    .md-p-8px-12px {
        padding: 8px 12px;
    }

    .md-p-16px {
        padding: 16px;
    }

    .md-p-12px-8px {
        padding: 12px 8px;
    }

    .md-h-250px {
        height: 250px;
    }

    .md-mt-8px {
        margin-top: 8px;
    }

    .md-p-20px {
        padding: 20px;
    }

    .md-w-48px {
        width: 48px;
    }

    .md-h-48px {
        height: 48px;
    }

    .md-p-6px-10px {
        padding: 6px 10px;
    }

    .md-w-100px {
        width: 100px;
    }

    .md-h-40px {
        height: 40px;
    }

    .md-mr-12px {
        margin-right: 12px;
    }

    .md-p-10px-12px {
        padding: 10px 12px;
    }

    .md-p-10px-14px {
        padding: 10px 14px;
    }

    .md-p-8px-14px-8px-28px {
        padding: 8px 14px 8px 28px;
    }

    .md-w-14px {
        width: 14px;
    }

    .md-p-24px-16px {
        padding: 24px 16px;
    }

    .md-m-10px-0 {
        margin: 10px 0;
    }

    .md-p-5px {
        padding: 5px;
    }

    .md-w-44px {
        width: 44px;
    }

    .md-h-44px {
        height: 44px;
    }

    .md-w-20px {
        width: 20px;
    }

    .md-h-20px {
        height: 20px;
    }

    .md-mt-15px {
        margin-top: 15px !important;
    }

    .md-p-15px {
        padding: 15px;
    }

    .md-h-400px {
        height: 400px;
    }

    .md-mt-32px {
        margin-top: 32px;
    }

    .md-p-2rem-1rem {
        padding: 2rem 1rem;
    }

    .md-p-1rem {
        padding: 1rem;
    }

    .md-h-180px {
        height: 180px;
    }

    .md-p-10px {
        padding: 10px;
    }

    .md-p-20px-15px {
        padding: 20px 15px;
    }

    .md-mb-20px {
        margin-bottom: 20px;
    }

    .md-w-40px {
        width: 40px;
    }

    .md-mb-15px {
        margin-bottom: 15px;
    }

    .md-mt-12px {
        margin-top: 12px;
    }

    .md-p-40px-15px {
        padding: 40px 15px;
    }

    .md-p-12px {
        padding: 12px;
    }

    .md-w-50px {
        width: 50px;
    }

    .md-h-50px {
        height: 50px;
    }

    .md-p-16px-0 {
        padding: 16px 0;
    }

    .md-ml-0px {
        margin-left: 0px;
    }

    .md-mr-0px {
        margin-right: 0px;
    }

    .md-h-200px {
        height: 200px;
    }

    .md-mb-12px {
        margin-bottom: 12px;
    }

    .md-w-28px {
        width: 28px;
    }

    .md-h-28px {
        height: 28px;
    }

    .md-w-32px {
        width: 32px;
    }

    .md-h-32px {
        height: 32px;
    }

    .md-p-12px-14px {
        padding: 12px 14px;
    }

    .md-w-36px {
        width: 36px;
    }

    .md-h-36px {
        height: 36px;
    }

    .md-p-0-12px {
        padding: 0 12px;
    }

    .md-w-110px {
        width: 110px;
    }

    .md-h-110px {
        height: 110px;
    }

    .md-h-150px {
        height: 150px;
    }

    .md-mb-8px {
        margin-bottom: 8px;
    }

    .md-mb-10px {
        margin-bottom: 10px;
    }

    .md-p-6px-12px {
        padding: 6px 12px;
    }

    .md-w-38px {
        width: 38px;
    }

    .md-h-38px {
        height: 38px;
    }

    .md-p-0-10px {
        padding: 0 10px;
    }

    .md-w-100p {
        width: 100%;
    }

    .md-pb-100px {
        padding-bottom: 100px;
    }

    .md-ml-24px {
        margin-left: 24px;
    }

    .md-ml-16px {
        margin-left: 16px;
    }

    .md-p-10px-16px {
        padding: 10px 16px;
    }

    .md-p-30px-20px {
        padding: 30px 20px;
    }

    .header-top {
        display: none !important;
    }

    .header-notification-dropdown {
        display: none !important;
    }

    .gsearch-container {
        display: none !important;
    }

    .item-expand-toggle {
        display: flex;
        margin: 10px auto 0;
        width: fit-content;
    }

    .item-details-expanded,
    .item-mobile-collapsible {
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        width: 100%;
    }

    .cart-item.is-expanded .item-details-expanded,
    .cart-item.is-expanded .item-mobile-collapsible {
        max-height: 800px;
        opacity: 1;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed var(--border-color);
    }

    .item-mobile-collapsible {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .item-marketplace-badge {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .item-row {
        position: relative;
    }

    .header-actions {
        gap: 8px;
    }

    .main-content {
        padding: 15px;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
    }

    .main-content table {
        width: 100%;
        max-width: 100%;
    }

    .product-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
        gap: 16px;
        padding: 20px;
    }

    .product-image {
        justify-self: center;
        margin-bottom: 16px;
    }

    .product-actions {
        width: 100%;
        min-width: auto;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .time-filters {
        justify-content: center;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .order-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-layout {
        gap: 16px;
    }

    .item-row {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .item-price {
        text-align: center;
    }

    .modal-content {
        max-width: 95%;
        margin: 20px;
    }

    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .detail-row .value {
        text-align: left;
        max-width: 100%;
        word-break: break-all;
    }

    .iban-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .iban-select {
        align-self: flex-end;
        margin-top: 8px;
    }

    .search-form,
    .modal-footer {
        flex-direction: column;
    }

    .pagination-wrapper {
        gap: 12px;
        margin-top: 20px;
        padding-top: 16px;
    }

    .pagination {
        gap: 6px;
        flex-wrap: wrap;
        max-width: 100%;
    }

    .pagination-btn {
        min-width: 36px;
        height: 36px;
        padding: 6px 10px;
        border-radius: 8px;
    }

    .pagination-info {
        padding: 6px 12px;
        border-radius: 6px;
    }

    .btn.btn-secondary span,
    .header-btn span,
    .pagination-btn .btn-text {
        display: none;
    }

    .transaction-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .transaction-item>div:first-child {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .transaction-info {
        flex: 1;
        min-width: auto;
    }

    .transaction-item>div:last-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }

    .cart-counter {
        width: 18px;
        height: 18px;
        top: -5px;
        right: -5px;
        border-width: 1.5px;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    }

    .logo {
        max-width: 220px;
        min-width: 140px;
        gap: 8px;
    }

    .logo-text img {
        max-height: 50px;
        width: auto;
    }

    .header-main {
        min-height: 90px;
        gap: 12px;
    }

    .step {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .step-number {
        align-self: center;
    }

    .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .action-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .info-card-center {
        text-align: center;
        gap: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #verificationCode {
        max-width: 140px;
        letter-spacing: 2px;
    }

    .favori-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .favori-item-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .payment-icons {
        gap: 12px;
        margin-bottom: 20px;
    }

    .security-features {
        gap: 20px;
        justify-content: center;
    }

    .security-feature {
        gap: 6px;
    }

    .disclaimer-content p {
        line-height: 1.5;
    }

    .footer-bottom {
        padding: 20px 16px;
        gap: 12px;
    }

    .premium-title-wrap {
        gap: 12px;
    }

    .bank-grid-premium,
    .iban-premium-grid {
        grid-template-columns: 1fr;
    }

    .bank-info-grid {
        grid-template-columns: 1fr;
    }

    .bank-qr-wrap {
        order: -1;
        margin-bottom: 20px;
    }

    .pos-grid-premium,
    .bank-grid-premium {
        grid-template-columns: 1fr !important;
    }

    .quick-amount-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .bank-info-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    .bank-qr-wrap {
        margin-top: 15px !important;
        justify-content: center !important;
    }

    .page-header {

        gap: 12px;
    }

    .cart-header-actions {
        width: 100%;
        justify-content: center;
    }

    .cart-header-actions .btn {
        justify-content: center;
        padding: 10px !important;
    }

    .profile-premium-grid-2 {
        grid-template-columns: 1fr;
    }

    .profile-premium-security-row {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .profile-premium-sr-info {
        flex-direction: column;
    }

    .dyn-style-24 {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .yayinci-stream-layout {
        border-radius: 16px;
        margin-top: 15px;
    }

    .yayinci-amount-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .magazalar-magazalar-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .magazalar-pagination {
        padding: 16px;
        gap: 4px;
    }

    .magazalar-pagination-btn {
        padding: 8px 10px;
        min-width: 36px;
    }

    .category-cover-content {
        padding: 10px;
        max-width: 100%;
    }

    .category-cover-content span img {
        max-width: 180px;
        max-height: 180px;
    }

    .category-cover-content h1 {
        font-size: 1.5rem;
    }

    .category-product-listing-cover {
        padding: 30px 0 40px 0;
    }

    .category-cover-content h1 {
        line-height: 1.2;
    }

    .category-cover-content p {
        line-height: 1.4;
    }

    .category-btn.category-btn-secondary span {
        display: block;
    }

    .category-comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .kategoriler-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .kategori-stats {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
    }

    .page-header {

        gap: 1rem;
    }

    .yorum-stats {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 15px;
    }

    .stat-item {
        padding: 12px 15px;
        min-height: 70px;
    }

    .yorum-ust {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .yorum-puan {
        align-self: flex-start;
    }

    .kullanici-info {
        gap: 10px;
    }

    .sayfalama {
        gap: 5px;
        margin-top: 30px;
        padding: 0 5px;
    }

    .sayfa-btn {
        padding: 10px 12px;
        min-width: 40px;
    }

    .countdown-header {
        flex-direction: column;
        gap: 12px;
    }

    .countdown-text {
        text-align: center;
    }

    .deals-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .deals-grid,
    .tomorrow-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
        overflow: visible;
    }

    .hero-container {
        padding: 0 12px;
        min-height: auto;
    }

    .hero-slider-wrapper { height: 190px !important; }

    .hero-slide.next {
        transform: translateX(70%) scale(0.95);
        opacity: 0.4;
    }

    .hero-slide.prev {
        transform: translateX(-70%) scale(0.95);
        opacity: 0.2;
    }

    .hero-categories {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        padding: 16px 0;
        display: flex;
        flex-wrap: wrap;
        margin-right: 0px;
    }

    .hero-weekly-stars {
        padding: 0px;
        margin-right: 0px;
        gap: 5px;
    }

    .weekly-star-item {
        padding: 10px 14px;
        gap: 10px;
    }

    .home-header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .home-actions {
        flex-shrink: 0;
    }

    .home-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .yayinci-item {
        min-width: 110px;
        height: 140px;
    }

    .yayinci-sponsor-badge {
        width: 14px;
        height: 14px;
        top: 4px;
        right: 4px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .blog-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .gb-qty-controls {
        min-width: 100%;
        padding: 10px 0;
    }

    .gb-qty-input {
        min-width: 75px;
        padding: 8px;
    }

    .marketplace-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
    }

    .marketplace-controls {
        justify-content: center;
    }

    .marketplace-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .marketplace-grid.items-view {
        grid-template-columns: 1fr;
    }

    .mp-item-card {
        flex-direction: row;
        gap: 12px;
    }

    .mp-item-stats {
        grid-template-columns: 1fr 1fr;
    }

    .mp-card {
        padding: 12px;
        min-height: 300px;
    }

    .marketplace-pagination {
        padding: 12px;
        gap: 4px;
    }

    .mp-pagination-btn {
        padding: 6px 10px;
        min-width: 32px;
    }

    .mp-view-toggle {
        order: -1;
    }

    .mp-server-buttons-container {
        gap: 6px;
    }

    .mp-server-btn:hover,
    .mp-server-btn.active:hover {
        transform: none;
    }

    .mp-sort-buttons-container {
        gap: 6px;
    }

    .mp-sort-btn {
        padding: 6px 12px;
        flex: 1;
        justify-content: center;
    }

    .mp-sort-btn:hover,
    .mp-sort-btn.active:hover {
        transform: none;
    }

    .mp-sort-buttons-container {
        gap: 6px;
    }

    .mp-sort-btn {
        padding: 6px 12px;
        flex: 1;
        justify-content: center;
    }

    .mp-sort-btn:hover,
    .mp-sort-btn.active:hover {
        transform: none;
    }

    .pd-mobile-fixed-footer {
        display: block;
    }

    .pd-action-buttons .pd-btn-secondary,
    .pd-action-buttons .pd-btn-trade,
    .pd-action-buttons .pd-btn-primary {
        display: none !important;
    }

    .pd-action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
    }

    .pd-seller-right {
        padding-left: 15px;
        min-width: 60px;
    }

    .pd-stars-vertical {
        gap: 2px;
    }

    .pd-listing-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .pd-footer-actions {
        width: 100%;
    }

    .pd-inventory-tooltip {
        width: 200px;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        bottom: auto;
        top: 100%;
        z-index: 1000;
    }

    .pd-inventory-slot:hover .pd-inventory-tooltip {
        transform: translateX(-50%) translateY(5px);
    }

    .pd-inventory-tooltip::after {
        top: auto;
        bottom: 100%;
        border-color: transparent transparent rgba(20, 20, 30, 0.95) transparent;
    }

    .pd-inventory-grid {
        justify-content: center;
    }

    .pd-mobile-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        z-index: 200000;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease;
        backdrop-filter: blur(4px);
    }

    .pd-mobile-modal-overlay.active {
        visibility: visible;
        opacity: 1;
        display: block;
    }

    .pd-mobile-modal {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--bg-primary);
        z-index: 200001;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        padding: 24px;
        max-height: 85vh;
        overflow-y: auto;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
    }

    .pd-mobile-modal.active {
        transform: translateY(0);
    }

    .pd-mobile-modal-content .pd-inventory-tooltip {
        display: block !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .pd-mobile-modal-content .ro-item-card {
        width: 100% !important;
        border: none !important;
    }

    .pd-inventory-tooltip {
        display: none !important;
    }

    .koitem-header-filters-advanced .filter-row {
        grid-template-columns: 1fr;
    }

    .koitem-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .koitem-filters {
        gap: 8px;
    }

    .koitem-bulk-select,
    .koitem-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .koitem-item-pricing {
        margin-left: 0;
        text-align: left;
    }

    .koitem-action-group {
        display: none;
    }

    .koitem-mobile-menu {
        display: block;
        flex: 1;
    }

    .koitem-details-grid {
        grid-template-columns: 1fr;
    }

    .koitem-set-items-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .koitem-nick-form {
        flex-direction: column;
        align-items: stretch;
    }

    .premium-trade-header {
        gap: 15px;
        padding: 15px;
    }

    .premium-trade-meta {
        gap: 20px;
        min-width: 100%;
        order: 3;
    }

    .trade-layout-grid-2 {
        grid-template-columns: 1fr;
    }

    .premium-trade-status-wrap {
        width: 100%;
        justify-content: space-between;
        order: 2;
    }

    .premium-flex-end-gap,
    .premium-security-mini-alert {
        justify-content: flex-start;
    }

    .takas-header-v3 {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .header-filters-v3 {
        flex-wrap: wrap;
        justify-content: center;
    }

    .items-list-v3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-box {
        min-width: auto;
    }

    .featured-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .blog-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .blog-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .blog-detail-meta {
        gap: 10px;
    }

    .blog-filters,
    .blog-detail-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .share-buttons {
        margin-left: 0;
        justify-content: center;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width:992px) {
    .lg-p-12px-45px-12px-40px {
        padding: 12px 45px 12px 40px;
    }

    .lg-p-5px {
        padding: 5px;
    }

    .lg-w-100p {
        width: 100%;
    }

    .lg-mb-20px {
        margin-bottom: 20px;
    }

    .gsearch-container {
        max-width: 300px;
        margin: 0 16px;
    }

    .gsearch-icon {
        left: 12px;
    }

    .gsearch-clear {
        right: 10px;
        width: 20px;
        height: 20px;
    }

    .premium-layout-grid {
        grid-template-columns: 1fr;
    }

    .payment-method-nav {
        grid-template-columns: 1fr;
    }

    .quick-amount-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sss-layout {
        flex-direction: column;
    }

    .mp-controls-separator {
        display: none;
    }

    .marketplace-server-buttons {
        gap: 10px;
    }
}

@media (max-width:1100px) {
    .res-ml-0 {
        margin-left: 0 !important;
    }

    .res-p-20px {
        padding: 20px;
    }

    .res-mb-24px {
        margin-bottom: 24px;
    }

    .res-pl-20px {
        padding-left: 20px;
    }

    .res-mt-8px {
        margin-top: 8px;
    }

    .res-p-12px-16px {
        padding: 12px 16px;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .mobile-menu,
    .mobile-menu-overlay {
        display: block;
    }

    .header-actions {
        gap: 8px;
    }

    .header-btn>span:not(.cart-counter),
    .auth-btn-register {
        display: none !important;
    }

    .header-auth-group {
        background: transparent;
        border: none;
        padding: 0;
    }

    .auth-btn-login {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
    }

    .header-btn {
        min-width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    .header-user-toggle {
        min-width: 44px !important;
        width: 44px !important;
        height: 44px;
        padding: 0 !important;
        justify-content: center;
    }

    .gamemenu-wrap,
    .auth-btn-login span,
    .header-user-toggle span {
        display: none;
    }

    .header-user-menu {
        position: fixed;
        top: 0%;
        left: 0;
        right: 0;
        width: auto;
        height: 100vh;
        background: var(--bg-primary);
        border: none;
        border-radius: 0;
        box-shadow: none;
        z-index: 10000;
        overflow-y: auto;
        padding: 0;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        box-sizing: border-box;
    }

    .header-user-menu.header-user-show {
        transform: translateY(0);
    }

    .header-user-dropdown {
        position: relative;
    }

    .header-user-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .header-user-menu-items {
        padding: 20px 16px;
        min-height: calc(100vh - 200px);
    }

    .mobile-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100%;
        background: var(--bg-primary);
        border-right: 1px solid var(--border-color);
        z-index: 9999;
        transition: left 0.3s ease;
        overflow-y: auto;
        padding: 20px 0;
    }

    .mobile-menu.active {
        left: 0;
    }

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-header {
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-menu-close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .header-user-close:hover,
    .mobile-menu-close:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        /* padding: 12px 8px; */
        text-decoration: none;
        color: var(--text-secondary);
        border-radius: 8px;
        transition: all 0.2s ease;
        margin-bottom: 4px;
    }

    .mobile-menu-item:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    .mobile-menu-item i {
        width: 18px;
        text-align: center;
    }

    .mobile-menu-submenu-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        text-decoration: none;
        color: var(--text-muted);
        border-radius: 6px;
        transition: all 0.2s ease;
        margin-bottom: 2px;
    }

    .mobile-menu-submenu-item:hover {
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

    .takas-grid-v3 {
        grid-template-columns: 1fr;
    }

    .items-list-v3 {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .takas-col-v3 {
        height: auto;
        min-height: 400px;
    }

    .takas-summary-v3 {
        position: static;
        order: -1;
    }
}

@media (max-width:1024px) {
    .tab-h-300px {
        height: 300px;
    }

    .tab-p-28px-20px {
        padding: 28px 20px;
    }

    .tab-p-20px-0 {
        padding: 20px 0;
    }

    .tab-ml-0px {
        margin-left: 0px;
    }

    .tab-mr-0px {
        margin-right: 0px;
    }

    .tab-h-250px {
        height: 250px;
    }

    .tab-w-120px {
        width: 120px;
    }

    .tab-h-120px {
        height: 120px;
    }

    .tab-w-45px {
        width: 45px;
    }

    .tab-h-45px {
        height: 45px;
    }

    .tab-p-20px {
        padding: 20px;
    }


    .product-icon {
        grid-row: 1 / -1;
    }

    .product-info {
        grid-column: 2;
    }

    .product-price {
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
    }

    .product-actions,
    .product-actionspages {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .server-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .product-card {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
        gap: 16px;
        align-items: start;
    }

    .product-actions {
        grid-column: 1 / -1;
        width: 100%;
        flex-direction: column;
        gap: 16px;
    }

    .product-actionspages {
        grid-column: 1 / -1;
        width: 100%;
        flex-direction: column;
        gap: 16px;
    }

    .product-actions>div {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }

    .product-actionspages>div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chart-header {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sidebar {
        position: static;
        order: 2;
    }

    .main-content {
        order: 1;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cart-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cart-sidebar {
        order: -1;
    }

    .header-user-dropdown-icon {
        display: none;
    }

    .cart-counter {
        width: 18px;
        height: 18px;
        top: -6px;
        right: -6px;
    }

    .logo {
        max-width: 260px;
        min-width: 160px;
        gap: 10px;
    }

    .logo-text img {
        max-height: 55px;
        width: auto;
    }

    .security-features {
        gap: 24px;
    }

    .payment-icons {
        gap: 14px;
    }

    .spo-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 16px;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .spo-sidebar {
        order: 1;
        position: static;
        max-width: 100%;
        overflow-x: hidden;
    }

    .spo-main-content {
        order: 2;
        max-width: 100%;
        overflow-x: hidden;
    }

    .yayinci-stream-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 60vh auto;
        height: auto;
        min-height: calc(100vh - 80px);
    }

    .yayinci-donation-sidebar {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .yayinci-amount-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: auto;
        padding: 0 16px;
    }

    .hero-slide.next {
        transform: translateX(60%) scale(0.9);
        opacity: 0.5;
    }

    .hero-slide.prev {
        transform: translateX(-60%) scale(0.9);
        opacity: 0.3;
    }

    .hero-categories {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 14px 0;
        margin-right: 0px;
    }

    .hero-weekly-stars {
        padding: 0px;
        margin-right: 0px;
        gap: 5px;
    }

    .hero-cat-card {
        padding: 8px 10px;
        min-height: 110px;
    }

    .hero-cat-header {
        font-size: 10px;
        letter-spacing: 1px;
        padding: 4px 0 6px;
    }

    .hero-cat-header i {
        font-size: 12px;
    }

    .hero-cat-list a {
        font-size: 11px;
        padding: 5px 4px;
        gap: 6px;
    }

    .home-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .yayinci-item {
        min-width: 120px;
        height: 150px;
    }

    .yayinci-sponsor-badge {
        width: 16px;
        height: 16px;
        top: 6px;
        right: 6px;
    }

    .marketplace-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .marketplace-filters {
        position: static;
        display: block;
    }

    .marketplace-grid,
    .marketplace-grid.items-view {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mp-item-card {
        flex-direction: column;
        gap: 12px;
        min-height: auto;
    }

    .mp-item-image {
        width: 60px;
        height: 60px;
        min-width: 60px;
        align-self: center;
    }

    .mp-item-stats {
        grid-template-columns: 1fr;
    }

    .mp-filter-toggle {
        display: flex;
        background: var(--danger-color);
    }

    .mp-filter-toggle i {
        order: 2;
    }

    .marketplace-filters.hide {
        display: none;
    }

    .mp-filters-close {
        display: block;
        position: absolute;
        top: 16px;
        right: 16px;
        background: var(--danger-color);
        color: white;
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 100;
    }

    .marketplace-grid.list-view .mp-card,
    .mp-list-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .mp-list-actions {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .pd-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 16px;
        max-width: 100vw;
        width: 100%;
        overflow-x: visible;
    }

    .pd-sidebar {
        order: 2;
        position: static;
        max-width: 100%;
        overflow-x: visible;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .pd-main-content {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 100%;
        overflow-x: visible;
    }

    .pd-content,
    .pd-sorular-section {
        order: 3;
    }

    .pd-seller-section {
        order: -1;
        margin-bottom: 0;
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .pd-main-info {
        grid-template-columns: 1fr;
        gap: 24px;
    }


    .pd-offer-and-actions-section {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pd-action-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .pd-seller-items-slider {
        padding: 20px;
        overflow: hidden;
    }

    .pd-seller-other-items {
        order: 4;
        margin: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .pd-seller-swiper {
        overflow: hidden;
        width: 100%;
    }

    .swiper-slide {
        max-width: 160px;
    }

    .koitem-set-items-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width:480px) {
    .pd-footer-actions {
        display: flex;

        align-items: center;
        justify-content: center;
    }

    .category-cover-content span img {
        max-width: 140px;
        max-height: 140px;
    }

    .category-cover-content h1 {
        font-size: 1.2rem;
    }

    .category-product-listing-cover {
        padding: 20px 0 30px 0;
    }

    .sm-p-10px-12px {
        padding: 10px 12px;
    }

    .sm-p-6px-8px {
        padding: 6px 8px;
    }

    .sm-p-12px {
        padding: 12px;
    }

    .sm-p-16px {
        padding: 16px;
    }

    .sm-mb-0px {
        margin-bottom: 0px;
    }

    .sm-p-8px-4px {
        padding: 8px 4px;
    }

    .sm-h-200px {
        height: 200px;
    }

    .sm-pl-20px {
        padding-left: 20px;
    }

    .sm-pr-20px {
        padding-right: 20px;
    }

    .sm-mb-20px {
        margin-bottom: 20px;
    }

    .sm-pb-16px {
        padding-bottom: 16px;
    }

    .sm-w-60px {
        width: 60px;
    }

    .sm-h-60px {
        height: 60px;
    }

    .sm-p-4px-8px {
        padding: 4px 8px;
    }

    .sm-p-3px-6px {
        padding: 3px 6px;
    }

    .sm-w-14px {
        width: 14px;
    }

    .sm-h-18px {
        height: 18px;
    }

    .sm-w-80px {
        width: 80px;
    }

    .sm-h-35px {
        height: 35px;
    }

    .sm-mr-10px {
        margin-right: 10px;
    }

    .sm-w-28px {
        width: 28px;
    }

    .sm-h-28px {
        height: 28px;
    }

    .sm-w-100px {
        width: 100px;
    }

    .sm-h-100px {
        height: 100px;
    }

    .sm-p-3px {
        padding: 3px;
    }

    .sm-p-20px-12px {
        padding: 20px 12px;
    }

    .sm-w-36px {
        width: 36px;
    }

    .sm-h-36px {
        height: 36px;
    }

    .sm-p-5px {
        padding: 5px;
    }

    .sm-p-8px {
        padding: 8px;
    }

    .sm-h-350px {
        height: 350px;
    }

    .sm-mb-0_75rem {
        margin-bottom: 0.75rem;
    }

    .sm-mt-0_75rem {
        margin-top: 0.75rem;
    }

    .sm-mt-24px {
        margin-top: 24px;
    }

    .sm-p-8px-8px-0px-12px {
        padding: 8px 8px 0px 12px;
    }

    .sm-w-40px {
        width: 40px;
    }

    .sm-h-40px {
        height: 40px;
    }

    .sm-h-160px {
        height: 160px;
    }

    .sm-p-0_75rem {
        padding: 0.75rem;
    }

    .sm-w-35px {
        width: 35px;
    }

    .sm-p-2px-4px {
        padding: 2px 4px;
    }

    .sm-h-150px {
        height: 150px;
    }

    .sm-w-24px {
        width: 24px;
    }

    .sm-h-24px {
        height: 24px;
    }

    .sm-p-5px-6px {
        padding: 5px 6px;
    }

    .sm-p-16px-0 {
        padding: 16px 0;
    }

    .sm-ml-0px {
        margin-left: 0px;
    }

    .sm-mr-0px {
        margin-right: 0px;
    }

    .sm-w-8px {
        width: 8px;
    }

    .sm-h-8px {
        height: 8px;
    }

    .sm-w-32px {
        width: 32px;
    }

    .sm-h-32px {
        height: 32px;
    }

    .sm-p-0-12px {
        padding: 0 12px;
    }

    .sm-m-0 {
        margin: 0;
    }

    .sm-w-110px {
        width: 110px;
    }

    .sm-h-110px {
        height: 110px;
    }

    .sm-p-0-10px {
        padding: 0 10px;
    }

    .sm-mb-6px {
        margin-bottom: 6px;
    }

    .sm-p-3px-4px {
        padding: 3px 4px;
    }

    .sm-mb-2px {
        margin-bottom: 2px;
    }

    .sm-m-4px-0 {
        margin: 4px 0;
    }

    .sm-pt-8px {
        padding-top: 8px;
    }

    .sm-mb-3px {
        margin-bottom: 3px;
    }

    .sm-h-6px {
        height: 6px;
    }

    .sm-w-20px {
        width: 20px;
    }

    .sm-h-20px {
        height: 20px;
    }

    .sm-mb-8px {
        margin-bottom: 8px;
    }

    .sm-mb-4px {
        margin-bottom: 4px;
    }

    .sm-p-2px-3px {
        padding: 2px 3px;
    }

    .sm-p-3px-8px {
        padding: 3px 8px;
    }

    .sm-w-95p {
        width: 95%;
    }

    .sm-w-45px {
        width: 45px;
    }

    .sm-h-45px {
        height: 45px;
    }

    .sm-w-56px {
        width: 56px;
    }

    .sm-h-56px {
        height: 56px;
    }

    .sm-w-42px {
        width: 42px;
    }

    .sm-h-42px {
        height: 42px;
    }

    .sm-ml-24px {
        margin-left: 24px;
    }

    .sm-pl-12px {
        padding-left: 12px;
    }

    .sm-ml-16px {
        margin-left: 16px;
    }

    .sm-p-16px-0-0 {
        padding: 16px 0 0;
    }

    .sm-p-10px-24px {
        padding: 10px 24px;
    }

    .sm-p-8px-12px {
        padding: 8px 12px;
    }

    .sm-mt-16px {
        margin-top: 16px;
    }

    .header-actions {
        gap: 6px;
    }

    .header-user-toggle {
        min-width: auto;
        width: 40px;
        justify-content: center;
    }

    .page-title {
        gap: 8px;
        text-align: center;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pagination {
        gap: 4px;
    }

    .pagination-btn {
        min-width: 32px;
        height: 32px;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .header-user-toggle span,
    .header-user-dropdown-icon,
    .pagination-btn:not(.active):not(.pagination-prev):not(.pagination-next),
    .pagination-btn.active~.pagination-btn:nth-child(n+4):not(.pagination-next),
    .pagination-btn:nth-child(-n+3):not(.active):not(.pagination-prev) {
        display: none;
    }

    .logo {
        max-width: 180px;
        min-width: 120px;
        gap: 6px;
    }

    .logo-text img {
        max-height: 45px;
        width: auto;
    }

    .header-main {
        min-height: 85px;
        gap: 8px;
    }

    .backup-code {
        padding: 8px 10px;
        letter-spacing: 0.5px;
    }

    .qr-code {
        max-width: 160px;
    }

    #verificationCode {
        max-width: 120px;
        letter-spacing: 1px;
        padding: 10px;
    }

    .nav-link {
        padding: 8px 12px;
        gap: 10px;
    }

    .nav-dropdown-link {
        padding: 6px 12px 6px 24px;
        gap: 10px;
    }

    .yayinci-item {
        min-width: 100px;
        height: 130px;
    }

    .yayincilar-container {
        gap: 10px;
    }

    .payment-icons {
        gap: 8px;
    }

    .security-features {
        gap: 5px;
        flex-direction: row;
        align-items: center;
    }

    .security-feature {
        justify-content: center;
        width: 100%;
        max-width: 180px;
        padding: 8px;
        background: var(--bg-secondary);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .disclaimer-content p,
    .footer-bottom p {
        padding: 0 8px;
        line-height: 1.4;
    }

    .quick-amount-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .magazalar-magazalar-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .magazalar-magaza-stats {
        justify-content: center;
    }

    .category-cover-content {
        padding: 1rem;
        top: -20px;
    }

    .category-comment-user {
        gap: 0.5rem;
    }

    .kategoriler-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .kategori-stats {
        bottom: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
    }

    .yorum-header {
        padding: 15px 10px;
        border-radius: 10px;
    }

    .yorum-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-item:last-child {
        grid-column: 1 / -1;
    }

    .yorum-item {
        padding: 15px 12px;
        border-radius: 8px;
    }

    .sayfa-btn {
        padding: 8px 10px;
        min-width: 36px;
    }

    .yorum-stats .stat-item {
        min-height: 60px;
        padding: 10px;
    }

    .hexagones-wrapper {
        gap: 0px;
    }

    .countdown-header {
        flex-direction: column;
        gap: 8px;
    }

    .deals-grid,
    .tomorrow-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
        overflow: visible;
    }

    .deals-card {
        padding: 8px;
        border-radius: 12px;
    }

    .hero-slide.next {
        transform: translateX(80%) scale(0.95);
        opacity: 0.3;
    }

    .hero-slide.prev {
        transform: translateX(-80%) scale(0.95);
        opacity: 0.1;
    }

    .hero-categories {
        grid-template-columns: 1fr;
        gap: 8px;
        display: flex;
        flex-wrap: wrap;
        margin-right: 0px;
    }

    .hero-weekly-stars {
        padding: 0px;
        margin-right: 0px;
        gap: 5px;
    }

    .weekly-stars-header {
        padding: 10px 12px;
        margin-bottom: 3px;
        gap: 8px;
    }

    .weekly-star-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .weekly-stars-empty {
        padding: 16px 12px;
        gap: 6px;
    }

    .hero-nav-dots {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        gap: 6px;
        max-width: calc(100% - 20px);
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-slider-controls {
        bottom: 5px;
        right: 10px;
        gap: 6px;
    }

    .home-header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .home-actions {
        flex-shrink: 0;
    }

    .home-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .yayinci-item {
        min-width: 110px;
        height: 140px;
    }

    .yayinci-sponsor-badge {
        width: 14px;
        height: 14px;
        top: 4px;
        right: 4px;
    }

    .countdown-header {
        flex-direction: column;
        gap: 8px;
    }

    .deals-grid,
    .tomorrow-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
        overflow: visible;
    }

    .deals-card {
        padding: 8px;
        border-radius: 12px;
    }

    .hero-slide.next {
        transform: translateX(80%) scale(0.95);
        opacity: 0.3;
    }

    .hero-slide.prev {
        transform: translateX(-80%) scale(0.95);
        opacity: 0.1;
    }

    .hero-categories {
        grid-template-columns: 1fr;
        gap: 8px;
        display: flex;
        flex-wrap: wrap;
        margin-right: 0px;
    }

    .hero-weekly-stars {
        padding: 0px;
        margin-right: 0px;
        gap: 5px;
    }

    .weekly-stars-header {
        padding: 10px 12px;
        margin-bottom: 3px;
        gap: 8px;
    }

    .weekly-star-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .weekly-stars-empty {
        padding: 16px 12px;
        gap: 6px;
    }

    .hero-slider-controls {
        bottom: 5px;
        right: 10px;
        gap: 6px;
    }

    .home-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .yayinci-item {
        min-width: 100px;
        height: 130px;
    }

    .yayinci-sponsor-badge {
        width: 12px;
        height: 12px;
        top: 4px;
        right: 4px;
    }

    .mp-card {
        padding: 8px;
        min-height: 280px;
        border-radius: 8px;
    }

    .mp-main-image {
        width: 40px;
        height: 40px;
        border-radius: 6px;
    }

    .mp-main-image img {
        width: 32px;
        height: 32px;
        border-radius: 4px;
    }

    .mp-name {
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .mp-action-btn {
        padding: 8px 10px;
        border-radius: 4px;
    }

    .mp-discount-badge {
        padding: 3px 6px;
        border-radius: 8px;
    }

    .mp-character-level {
        padding: 3px 6px;
        border-radius: 12px;
        margin-top: 3px;
    }

    .mp-image-container {
        margin: 6px 0;
        gap: 4px;
    }

    .hero-container {
        padding: 0 10px;
        min-height: auto;
        margin-bottom: 10px;
        gap: 0px;
    }

    .hero-nav-dots {
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        gap: 6px;
        max-width: calc(100% - 20px);
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-promos, .hero-weekly-stars { display: none !important; }

    .home-header {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .home-actions {
        flex-shrink: 0;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .blog-grid > [class*="col-"] { padding: 6px; }
    .blog-card { max-width: 100%; border-radius: 10px; }
    .blog-image, .blog-image img { height: 110px !important; }
    .blog-category { font-size: 9px; padding: 2px 6px; }
    .blog-reading-time { font-size: 9px; padding: 2px 5px; }
    .blog-card .p-3 { padding: 8px 10px !important; }
    .blog-title { font-size: 13px !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
    .blog-excerpt, .blog-stats { display: none !important; }
    .blog-meta { font-size: 10px; padding-bottom: 4px; margin-bottom: 0; border-bottom: 0; }
    .blog-meta i { font-size: 9px; }
    .blog-author span, .blog-author, .blog-date { gap: 3px; }

    .blog-tags {
        gap: 6px;
        display: none;
    }

    .mp-character-stats.list-view {
        display: block;
    }

    .marketplace-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .mp-card {
        padding: 10px;
        min-height: 280px;
    }

    .mp-image-container {
        flex-direction: column;
        gap: 6px;
        margin: 40px 0px 0px 0px;
    }

    .mp-set-info {
        flex-direction: column;
        gap: 6px;
    }

    .pd-seller-stat-label {
        flex: 1;
    }

    .pd-container {
        width: 100%;
        max-width: 100vw;
        overflow-x: visible;
    }

    .pd-offer-and-actions-section {
        gap: 12px;
    }

    .pd-action-buttons {
        gap: 8px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-content: center;
    }

    .pd-seller-swiper .swiper-slide {
        max-width: calc(50% - 3px);
    }

    .pd-seller-char-card {
        min-height: 420px !important;
    }

    .pd-seller-char-stat-row {
        padding: 4px 6px;
        gap: 6px;
    }

    .pd-seller-item-card {
        min-height: 420px;
    }

    .pd-seller-item-name {
        min-height: 32px;
    }

    .koitem-details-toggle {
        display: grid;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pagination {
        gap: 5px;
    }

    .share-buttons {
        flex-wrap: wrap;
    }
}

@media (prefers-color-scheme:dark) {
    .pagination-btn::before {
        background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.2), transparent);
    }

    .cart-counter {
        border-color: var(--bg-secondary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    }
}

@media (prefers-contrast:high) {

    .pagination-btn,
    .pagination-btn:hover,
    .pagination-btn.active {
        border-width: 3px;
    }

    .notification-icon {
        border: 1px solid white;
    }

    .cart-counter {
        border-width: 3px;
    }

    .logo-text span {
        color: var(--primary-color);
    }

    .info-card {
        border-width: 3px;
    }

    .backup-code {
        border-width: 2px;
    }

    .payment-icon {
        border: 1px solid var(--border-color);
    }

    .payment-icon:hover {
        border-color: var(--primary-color);
    }
}

@media print {
    .cart-counter {
        display: none !important;
    }

    .logo {
        max-width: none;
        color: black !important;
    }

    .logo-text img {
        max-height: 30px;
        filter: grayscale(100%);
    }

    .logo-text span {
        color: black !important;
    }

    .backup-code {
        background: white !important;
        border: 1px solid black !important;
        color: black !important;
    }

    .payment-security-section,
    .footer-disclaimer {
        background: white !important;
        border-color: black !important;
    }

    .payment-icon {
        filter: grayscale(100%);
    }
}

@media (max-width:380px) {
    .res-w-90px {
        width: 90px;
    }

    .res-h-90px {
        height: 90px;
    }

    .res-mb-5px {
        margin-bottom: 5px;
    }

    .res-p-1px-3px {
        padding: 1px 3px;
    }

    .res-mb-1px {
        margin-bottom: 1px;
    }

    .res-p-4px-6px {
        padding: 4px 6px;
    }

    .res-w-36px {
        width: 36px;
    }

    .res-h-36px {
        height: 36px;
    }

    .res-w-28px {
        width: 28px;
    }

    .res-h-28px {
        height: 28px;
    }

    .res-p-2px-4px {
        padding: 2px 4px;
    }

    .res-mt-2px {
        margin-top: 2px;
    }

    .res-mb-2px {
        margin-bottom: 2px;
    }

    .res-h-5px {
        height: 5px;
    }

    .res-w-18px {
        width: 18px;
    }

    .res-h-18px {
        height: 18px;
    }

    .res-mb-3px {
        margin-bottom: 3px;
    }

    .res-p-2px {
        padding: 2px;
    }

    .res-p-1px-2px {
        padding: 1px 2px;
    }

    .res-m-3px-0 {
        margin: 3px 0;
    }

    .res-mb-6px {
        margin-bottom: 6px;
    }

    .res-pt-6px {
        padding-top: 6px;
    }

    .res-p-0-8px {
        padding: 0 8px;
    }

    .res-h-120px {
        height: 120px;
    }

    .logo {
        max-width: 130px;
        min-width: 90px;
    }

    .logo-text img {
        max-height: 40px;
    }

    .home-grid {
        gap: 6px;
    }

    .yayinci-item {
        min-width: 90px;
        height: 120px;
    }

    .yayinci-sponsor-badge {
        width: 10px;
        height: 10px;
        top: 3px;
        right: 3px;
    }

    .mp-card {
        padding: 6px;
        min-height: 260px;
    }

    .mp-image-container {
        margin: 4px 0;
        gap: 3px;
    }
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .logo-text img {
        image-rendering: crisp-edges;
    }
}

/* Mobil: logo hover/dark filter/crisp-edges kuralları kapalı, logo büyüsün */
@media (max-width: 768px) {
    .logo:hover .logo-text img { transform: none !important; }
    [data-theme="dark"] .logo-text img { filter: none !important; }
    .logo-text img {
        max-height: none !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        image-rendering: auto !important;
    }
    .logo { max-width: none !important; }
}

@media (max-width:1200px) {
    .premium-layout-grid {
        grid-template-columns: 1fr 320px;
        gap: 20px;
    }

    .yorumlar-container {
        max-width: 100%;
        padding: 15px;
    }

    .home-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .marketplace-container {

        gap: 16px;
    }

    .featured-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }

}

@media (max-width:991px) {
    .premium-layout-grid {
        grid-template-columns: 1fr !important;
    }

    .right-col {
        order: -1;
    }

    .premium-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .payment-method-nav {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

@media (max-width:576px) {
    .premium-detail-grid {
        grid-template-columns: 1fr !important;
    }

}

@media (max-width:1280px) {
    .res-w-16px {
        width: 16px;
    }

    .res-h-16px {
        height: 16px;
    }

    .gamemenu-nav {
        gap: 2px;
    }

    .gmenu-link {
        padding: 12px 6px;
        gap: 4px;
        white-space: nowrap;
    }
}

@media (max-width:320px) {
    .res-p-0_75rem {
        padding: 0.75rem;
    }

    .yorum-stats {
        grid-template-columns: 1fr;
    }

    .stat-item:last-child {
        grid-column: unset;
    }

    .sayfalama {
        justify-content: space-around;
    }

    .sayfa-btn {
        flex: 0 0 auto;
    }
}

@media (hover:none) and (pointer:coarse) {
    .yorum-item:hover {
        transform: none;
    }

    .sayfa-btn:hover {
        background: var(--bg-primary);
        border-color: var(--border-color);
        color: var(--text-secondary);
    }

    .sayfa-btn:active {
        background: var(--bg-tertiary);
        border-color: var(--primary-color);
        color: var(--text-primary);
    }
}

@media (min-width:1200px) {
    .res-w-280px {
        width: 280px;
    }
}

@media (max-width:1199px) and (min-width:768px) {
    .res-w-240px {
        width: 240px;
    }
}

@media (max-width:767px) {

    .son-ilanlar-swiper .swiper-slide,
    .son-ring-swiper .swiper-slide {
        width: calc(50% - 6px);
        min-width: 140px;
    }
}

@media (max-width:1400px) {
    .home-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .deals-grid,
    .tomorrow-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
        overflow: visible;
    }

    .takas-grid-v3 {
        grid-template-columns: 1fr 300px 1fr;
    }
}

@media (min-width:1400px) {
    .marketplace-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .marketplace-grid.items-view {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* Ek düzenlemeler*/

.pd-item-grade-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    color: #fff;
    text-shadow: 0 1px 2px #000;
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 3px;
    border-radius: 3px;
    pointer-events: none;
    font-size: var(--small-font-size);
}

.ro-card-title-section {
    position: relative;
    width: 100%;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ro-p-name,
.ro-card-title-section,
.ro-p-val,
.pd-tooltip-stats {
    font-size: var(--mini-font-size);
}

.details {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
}

.seppet-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* === CUSTOM:BEGIN === */

.category-product-media-card {
    position: relative;
}

.category-product-media-card .category-product-media-fill {
    position: absolute !important;
    inset: 0;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: inherit;
}

.category-product-media-fill img {
    display: block;
    min-height: 0 !important;
    height: 100%;
    width: 100%;
    object-fit: fill;
}

.category-content-text ul,
.category-content-text ol {
    padding-left: 22px;
    margin-bottom: 12px;
}

.category-content-text li {
    margin-bottom: 4px;
}

.cp-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cp-action-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cp-share-inline {
    margin: 0;
    flex-shrink: 0;
}

.cp-price-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cp-price-divider {
    width: 1px;
    height: 36px;
    background: var(--border-color);
    flex-shrink: 0;
}

.cp-stock-badge-ok {
    background: rgba(var(--success-rgb), .12);
    color: var(--success-color);
    border: 1px solid rgba(var(--success-rgb), .25);
    border-radius: 50px;
    padding: 4px 12px;
    font-size: var(--small-font-size);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    margin-left: auto;
}

.cp-stock-badge-no {
    background: rgba(var(--danger-rgb), .12);
    color: var(--danger-color);
    border: 1px solid rgba(var(--danger-rgb), .25);
    border-radius: 50px;
    padding: 4px 12px;
    font-size: var(--small-font-size);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    margin-left: auto;
}

.cp-product-name {
    font-size: var(--normal-font-size);
    font-weight: var(--font-weight-semibold);
}

.category-review-panel {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category-review-panel .category-review-score {

    line-height: 1;
}

.category-review-comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.category-review-comment-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.category-review-comment-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.category-review-comment-user {
    font-size: var(--mini-font-size);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.category-review-comment-date {
    font-size: var(--small-font-size);
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: auto;
}

.category-review-comment-stars {
    font-size: var(--small-font-size);
    color: #f7b500;
    letter-spacing: 1px;
}

.category-review-comment-text {
    font-size: var(--mini-font-size);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-content-detail {
    padding: 0 10px;
}

.category-comment-section-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: var(--shadow-lg);
}

.category-comment-section-card h2 {
    font-size: var(--large-font-size);
    font-weight: var(--font-weight-bold);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.category-comment-item {
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.category-comment-item:last-child {
    margin-bottom: 0;
}

.category-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cp-related-item-link {
    text-decoration: none;
}


/* --- Responsive: tablet (≤ 991px) --- */
@media (max-width: 991.98px) {

    .category-product-media-card {
        min-height: 260px;
        flex-grow: 0 !important;
    }

    .category-product-row>.col-lg-5 {
        flex-grow: 0;
    }

    .category-product-info-card.h-100 {
        height: auto !important;
    }

    .category-product-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .category-product-breadcrumb {
        margin-bottom: 16px !important;
    }

    .category-product-detail .row {
        flex-direction: column;
    }

    .category-description-review-section .row {
        flex-direction: column;
    }

    .category-review-panel {
        margin-top: 0;
    }
}

/* --- Responsive: mobile (≤ 767px) --- */
@media (max-width: 767.98px) {

    .category-product-media-card {
        min-height: 220px;
    }

    .cp-price-card {
        gap: 8px;
    }

    .cp-price-divider {
        display: none;
    }

    .cp-action-row {
        flex-direction: column;
        gap: 8px;
    }

    .cp-action-row-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cp-share-inline {
        margin-top: 4px;
    }

    .category-product-info-body {
        padding: 12px !important;
    }

    .category-comment-section-card {
        padding: 16px;
        margin-top: 16px;
    }

    .category-review-panel {
        padding: 14px;
    }

    .category-product-topbar .btn {
        width: 100%;
        justify-content: center;
    }

    .category-related-header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* --- Responsive: small mobile (≤ 575px) --- */
@media (max-width: 575.98px) {

    .category-product-media-card {
        min-height: 200px;
    }

    .cp-stock-badge-ok,
    .cp-stock-badge-no {
        margin-left: 0;
        width: fit-content;
    }

    .cp-price-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-product-breadcrumb-list {
        font-size: var(--mini-font-size);
        flex-wrap: wrap;
        gap: 4px;
    }

    .category-product-title {
        font-size: var(--large-font-size) !important;
        line-height: 1.3;
    }

    .category-comment-section-card {
        padding: 12px;
    }

    .category-share-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .category-related-swiper .product-item {
        grid-template-columns: none;
    }

    .product-item {
        flex-wrap: wrap;
        gap: 15px;

    }

    .product-item .product-actionspages {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .product-item .quantity-controls {
        width: 100%;
        justify-content: space-between;
    }

    .product-item .btn-group {
        width: 100%;
    }

}

/* === CUSTOM:END === */

/* === Cekilis Pages: list (/cekilis) + detail (/cekilis/<slug>) === */
.cekilis-page {
    padding-bottom: 80px;
}

.cekilis-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 48px;
    margin-bottom: 32px;
}

.cekilis-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 20% 30%, rgba(var(--primary-rgb), 0.18), transparent 50%), radial-gradient(circle at 80% 70%, rgba(var(--secondary-rgb), 0.14), transparent 50%), linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
}

.cekilis-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 15% 60%, rgba(255, 255, 255, 0.06) 1px, transparent 1px), radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px, 80px 80px;
    opacity: 0.6;
}

.cekilis-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.cekilis-hero-text {
    flex: 1;
    min-width: 260px;
}

.cekilis-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--mini-font-size);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 16px;
}

.cekilis-hero-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: var(--font-weight-bold);
    margin: 0 0 16px;
    line-height: 1.1;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cekilis-hero-subtitle {
    font-size: var(--large-font-size);
    color: var(--text-secondary);
    margin: 0;
    max-width: 540px;
    line-height: 1.6;
}

.cekilis-hero-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cekilis-hero-stat {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 20px 24px;
    border-radius: 16px;
    min-width: 150px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

.cekilis-hero-stat-num {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.cekilis-hero-stat-label {
    color: var(--text-muted);
    font-size: var(--mini-font-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cekilis-empty-state {
    text-align: center;
    padding: 64px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.cekilis-empty-icon {
    font-size: 56px;
    color: var(--primary-color);
    opacity: 0.5;
    margin-bottom: 20px;
}

.cekilis-empty-state h3 {
    color: var(--text-primary);
    margin: 0 0 8px;
}

.cekilis-empty-state p {
    color: var(--text-muted);
    margin: 0 0 20px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.cekilis-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: var(--midi-font-size);
}

.cekilis-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.4);
    color: #fff;
}

.cekilis-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: var(--midi-font-size);
}

.cekilis-btn-ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

.cekilis-featured {
    position: relative;
    display: block;
    text-decoration: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 32px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cekilis-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
    color: inherit;
}

.cekilis-featured-glow {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.18), transparent 70%);
    pointer-events: none;
}

.cekilis-featured-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.cekilis-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ff6b35, #f59e0b);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--mini-font-size);
    font-weight: var(--font-weight-bold);
    margin-bottom: 16px;
}

.cekilis-featured-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.2;
}

.cekilis-featured-desc {
    color: var(--text-secondary);
    font-size: var(--large-font-size);
    margin: 0 0 24px;
    line-height: 1.6;
}

.cekilis-featured-prize {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.cekilis-featured-prize-label {
    display: block;
    color: var(--text-muted);
    font-size: var(--mini-font-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.cekilis-featured-prize-amount {
    display: block;
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 6px;
}

.cekilis-featured-prize-meta {
    color: var(--text-secondary);
    font-size: var(--midi-font-size);
}

.cekilis-featured-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cekilis-featured-foot {
    display: flex;
    gap: 20px;
    color: var(--text-muted);
    font-size: var(--midi-font-size);
    flex-wrap: wrap;
}

.cekilis-featured-foot strong {
    color: var(--text-primary);
}

.cekilis-featured-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cekilis-featured-prods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cekilis-featured-prod {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cekilis-featured-prod img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cekilis-featured-prod-ph {
    font-size: 36px;
    color: var(--text-muted);
    opacity: 0.5;
}

.cekilis-featured-money {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
}

.cekilis-coin-stack {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    flex-shrink: 0;
}

.cekilis-coin-meta strong {
    display: block;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.cekilis-coin-meta span {
    display: block;
    color: var(--text-muted);
    font-size: var(--midi-font-size);
}

.cekilis-featured-pubs {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
}

.cekilis-featured-pubs-label {
    display: block;
    color: var(--text-muted);
    font-size: var(--mini-font-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.cekilis-pub-stack {
    display: flex;
    align-items: center;
}

.cekilis-pub-stack img,
.cekilis-pub-stack-init,
.cekilis-pub-stack-more {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--bg-primary);
    margin-left: -8px;
    flex-shrink: 0;
    object-fit: cover;
}

.cekilis-pub-stack> :first-child {
    margin-left: 0;
}

.cekilis-pub-stack-init {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--mini-font-size);
}

.cekilis-pub-stack-more {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--mini-font-size);
}

.cekilis-pub-stack--sm img,
.cekilis-pub-stack--sm .cekilis-pub-stack-init,
.cekilis-pub-stack--sm .cekilis-pub-stack-more {
    width: 28px;
    height: 28px;
    border-width: 2px;
    font-size: 10px;
}

.cekilis-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.cekilis-countdown-cell {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
}

.cekilis-cd-num {
    display: block;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cekilis-cd-lbl {
    display: block;
    color: var(--text-muted);
    font-size: var(--mini-font-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
}

.cekilis-countdown.ended .cekilis-cd-num {
    color: var(--text-muted);
}

.cekilis-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cekilis-tab {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--midi-font-size);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cekilis-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.cekilis-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.cekilis-tab span {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

.cekilis-tab:not(.active) span {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.cekilis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.cekilis-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.cekilis-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
    color: inherit;
}

.cekilis-card--cekildi {
    opacity: 0.85;
}

.cekilis-card-visual {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    padding: 16px;
    overflow: hidden;
}

.cekilis-card-prod-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    height: 100%;
}

.cekilis-card-prod-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.cekilis-card:hover .cekilis-card-prod-grid img {
    transform: scale(1.05);
}

.cekilis-card-prod-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 24px;
    opacity: 0.5;
}

.cekilis-card-money-visual {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--primary-color);
}

.cekilis-card-money-visual i {
    font-size: 48px;
}

.cekilis-card-money-visual strong {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.cekilis-card-tip,
.cekilis-card-durum {
    position: absolute;
    top: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--mini-font-size);
    font-weight: var(--font-weight-semibold);
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cekilis-card-tip {
    left: 12px;
}

.cekilis-card-durum {
    right: 12px;
}

.cekilis-card-tip.urun {
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
}

.cekilis-card-tip.nakit {
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
}

.cekilis-card-durum.aktif {
    background: rgba(16, 185, 129, 0.95);
    color: #fff;
}

.cekilis-card-durum.cekildi {
    background: rgba(100, 116, 139, 0.9);
    color: #fff;
}

.cekilis-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.cekilis-card-title {
    font-size: var(--xxlarge-font-size);
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.cekilis-card-desc {
    color: var(--text-muted);
    font-size: var(--midi-font-size);
    margin: 0;
    line-height: 1.5;
}

.cekilis-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 12px;
}

.cekilis-card-stats>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cekilis-card-stats span {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cekilis-card-stats strong {
    color: var(--text-primary);
    font-size: var(--midi-font-size);
    font-weight: var(--font-weight-bold);
    margin-top: 2px;
}

.cekilis-card-pubs {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cekilis-card-pubs-label {
    color: var(--text-muted);
    font-size: var(--mini-font-size);
}

.cekilis-card-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.cekilis-card-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: var(--midi-font-size);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.cekilis-card-done {
    color: var(--text-muted);
    font-size: var(--midi-font-size);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === Cekilis Detail Page === */
.cekilis-detail {
    padding-bottom: 80px;
}

.cekilis-detail-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 32px;
    margin-bottom: 32px;
}

.cekilis-detail-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 30% 20%, rgba(var(--primary-rgb), 0.22), transparent 50%), radial-gradient(circle at 80% 60%, rgba(var(--secondary-rgb), 0.16), transparent 50%), linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
}

.cekilis-detail-back {
    color: var(--text-muted);
    font-size: var(--midi-font-size);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.cekilis-detail-back:hover {
    color: var(--primary-color);
}

.cekilis-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cekilis-tip-badge,
.cekilis-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--mini-font-size);
    font-weight: var(--font-weight-semibold);
}

.cekilis-tip-badge.urun {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.cekilis-tip-badge.nakit {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.cekilis-status-badge.aktif {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.cekilis-status-badge.cekildi {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
}

.cekilis-detail-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.15;
}

.cekilis-detail-desc {
    font-size: var(--large-font-size);
    color: var(--text-secondary);
    margin: 0 0 24px;
    max-width: 720px;
    line-height: 1.6;
}

.cekilis-detail-quick {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.cekilis-detail-quick-item {
    display: flex;
    flex-direction: column;
}

.cekilis-detail-quick-item span {
    color: var(--text-muted);
    font-size: var(--mini-font-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cekilis-detail-quick-item strong {
    color: var(--text-primary);
    font-size: var(--xxlarge-font-size);
    font-weight: var(--font-weight-bold);
}

.cekilis-detail-quick-item.primary strong {
    color: var(--primary-color);
    font-size: 28px;
}

.cekilis-detail-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: flex-start;
}

.cekilis-detail-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cekilis-detail-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cekilis-card-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
}

.cekilis-card-block-title {
    font-size: var(--xlarge-font-size);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cekilis-card-block-title i {
    color: var(--primary-color);
}

.cekilis-card-block-desc {
    color: var(--text-muted);
    font-size: var(--midi-font-size);
    margin: -8px 0 16px;
    line-height: 1.5;
}

.cekilis-prizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.cekilis-prize-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    transition: all 0.2s ease;
}

.cekilis-prize-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    border-color: var(--primary-color);
}

.cekilis-prize-item img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.cekilis-prize-item:hover img {
    transform: scale(1.06);
}

.cekilis-prize-placeholder {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 10px;
}

.cekilis-prize-item strong {
    display: block;
    color: var(--text-primary);
    font-size: var(--midi-font-size);
    margin-bottom: 4px;
}

.cekilis-prize-item span {
    display: block;
    color: var(--text-muted);
    font-size: var(--mini-font-size);
}

.cekilis-prize-item .cekilis-prize-value {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

.cekilis-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cekilis-lb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.cekilis-lb-row:hover {
    transform: translateX(4px);
    border-color: var(--primary-color);
    color: inherit;
}

.cekilis-lb-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    font-size: var(--midi-font-size);
}

.cekilis-lb-row[data-rank="1"] .cekilis-lb-rank {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
}

.cekilis-lb-row[data-rank="2"] .cekilis-lb-rank {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #fff;
}

.cekilis-lb-row[data-rank="3"] .cekilis-lb-rank {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
}

.cekilis-lb-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.cekilis-lb-avatar-init {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
}

.cekilis-lb-info {
    flex: 1;
    min-width: 0;
}

.cekilis-lb-info strong {
    display: block;
    color: var(--text-primary);
    font-size: var(--large-font-size);
}

.cekilis-lb-info small {
    color: var(--text-muted);
    font-size: var(--mini-font-size);
    display: block;
}

.cekilis-lb-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
    transition: width 0.4s ease;
}

.cekilis-lb-count {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: var(--font-weight-bold);
    font-size: var(--midi-font-size);
    flex-shrink: 0;
}

.cekilis-winners-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cekilis-winner-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.cekilis-winner-trophy {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.cekilis-winner-name {
    flex: 1;
    min-width: 0;
}

.cekilis-winner-name strong {
    display: block;
    color: var(--text-primary);
    font-size: var(--midi-font-size);
}

.cekilis-winner-name small {
    color: var(--text-muted);
    font-size: var(--mini-font-size);
}

.cekilis-winner-prize {
    color: var(--success-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--large-font-size);
    flex-shrink: 0;
}

.cekilis-info-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.cekilis-info-step {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
}

.cekilis-info-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    margin-bottom: 10px;
    font-size: var(--mini-font-size);
}

.cekilis-info-step strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: var(--midi-font-size);
}

.cekilis-info-step p {
    color: var(--text-muted);
    margin: 0;
    font-size: var(--mini-font-size);
    line-height: 1.5;
}

.cekilis-sidebar-prize {
    text-align: center;
    padding: 28px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0.04));
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.cekilis-sidebar-prize-label {
    color: var(--text-secondary);
    font-size: var(--mini-font-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.cekilis-sidebar-prize-amount {
    font-size: 38px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 6px;
    display: block;
}

.cekilis-sidebar-prize-meta {
    color: var(--text-secondary);
    font-size: var(--midi-font-size);
    display: block;
}

.cekilis-sidebar-info {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
}

.cekilis-sidebar-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.cekilis-sidebar-info-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cekilis-sidebar-info-row:first-child {
    padding-top: 0;
}

.cekilis-sidebar-info-row span {
    color: var(--text-muted);
    font-size: var(--midi-font-size);
}

.cekilis-sidebar-info-row strong {
    color: var(--text-primary);
    font-size: var(--midi-font-size);
}

.cekilis-not-found {
    padding: 80px 24px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.cekilis-not-found-icon {
    font-size: 64px;
    color: var(--text-muted);
    opacity: 0.4;
    margin-bottom: 20px;
}

.cekilis-not-found h2 {
    color: var(--text-primary);
    margin: 0 0 8px;
}

.cekilis-not-found p {
    color: var(--text-muted);
    margin: 0 0 24px;
}

@media (max-width: 992px) {
    .cekilis-detail-layout {
        grid-template-columns: 1fr;
    }

    .cekilis-detail-sidebar {
        position: static;
        order: -1;
    }
}

@media (max-width: 768px) {

    .cekilis-hero,
    .cekilis-detail-hero {
        padding: 32px 0;
    }

    .cekilis-hero-inner {
        gap: 24px;
    }

    .cekilis-hero-stats {
        width: 100%;
    }

    .cekilis-hero-stat {
        flex: 1;
        min-width: 0;
        padding: 14px 16px;
    }

    .cekilis-hero-stat-num {
        font-size: 22px;
    }

    .cekilis-featured {
        padding: 24px;
    }

    .cekilis-featured-content {
        grid-template-columns: 1fr;
    }

    .cekilis-featured-title {
        font-size: 22px;
    }

    .cekilis-countdown-cell {
        padding: 10px 4px;
    }

    .cekilis-cd-num {
        font-size: 22px;
    }

    .cekilis-grid {
        grid-template-columns: 1fr;
    }

    .cekilis-detail-quick {
        gap: 16px;
    }

    .cekilis-detail-quick-item.primary strong {
        font-size: 22px;
    }
}


/* === Cekilis: liveliness, quantity badges, animations === */
@keyframes cekilisPulseDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

@keyframes cekilisShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes cekilisFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes cekilisGlow {

    0%,
    100% {
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    }

    50% {
        box-shadow: 0 8px 30px rgba(245, 158, 11, 0.55), 0 0 40px rgba(251, 191, 36, 0.3);
    }
}

@keyframes cekilisFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cekilisSparkle {

    0%,
    100% {
        opacity: 0.3;
        transform: rotate(0deg) scale(1);
    }

    50% {
        opacity: 1;
        transform: rotate(180deg) scale(1.2);
    }
}

.cekilis-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 4px;
    vertical-align: middle;
    animation: cekilisPulseDot 1.5s ease-in-out infinite;
}

.cekilis-card-prod-cell {
    position: relative;
}

.cekilis-card-prod-cell img,
.cekilis-card-prod-cell .cekilis-card-prod-ph {
    width: 100%;
    height: 100%;
}

.cekilis-featured-prod {
    position: relative;
}

.cekilis-qty-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: #fff;
    font-weight: var(--font-weight-bold);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--midi-font-size);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
    letter-spacing: 0.5px;
    z-index: 2;
}

.cekilis-qty-badge--sm {
    padding: 2px 8px;
    font-size: var(--mini-font-size);
    top: 4px;
    right: 4px;
}

.cekilis-qty-badge--lg {
    padding: 6px 14px;
    font-size: var(--xlarge-font-size);
    top: 10px;
    right: 10px;
}

.cekilis-hero-stat-num {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cekilis-coin-stack {
    animation: cekilisGlow 3s ease-in-out infinite, cekilisFloat 4s ease-in-out infinite;
}

.cekilis-featured-prize-amount {
    background: linear-gradient(135deg, var(--primary-color) 0%, #fbbf24 50%, var(--primary-hover) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cekilisShimmer 4s linear infinite;
}

.cekilis-featured-badge i {
    animation: cekilisSparkle 2s ease-in-out infinite;
}

.cekilis-card,
.cekilis-featured {
    animation: cekilisFadeUp 0.4s ease-out backwards;
}

.cekilis-card:nth-child(1) {
    animation-delay: 0.05s;
}

.cekilis-card:nth-child(2) {
    animation-delay: 0.1s;
}

.cekilis-card:nth-child(3) {
    animation-delay: 0.15s;
}

.cekilis-card:nth-child(4) {
    animation-delay: 0.2s;
}

.cekilis-card:nth-child(5) {
    animation-delay: 0.25s;
}

.cekilis-card:nth-child(6) {
    animation-delay: 0.3s;
}

/* Featured card subtle border glow on hover */
.cekilis-featured:hover {
    box-shadow: 0 24px 48px rgba(var(--primary-rgb), 0.18);
}

/* Compact countdown gains a soft pulsing background */
.cekilis-card-countdown {
    position: relative;
    overflow: hidden;
}

.cekilis-card-countdown::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.15), transparent);
    background-size: 200% 100%;
    animation: cekilisShimmer 3s linear infinite;
    pointer-events: none;
}

.cekilis-card-countdown>* {
    position: relative;
    z-index: 1;
}

/* === Detay page extras === */
.cekilis-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.cekilis-prize-item {
    position: relative;
}

.cekilis-prize-item-img-wrap {
    position: relative;
}

.cekilis-prize-item .cekilis-qty-badge {
    top: 8px;
    right: 8px;
}

.cekilis-money-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.cekilis-money-breakdown-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}

.cekilis-money-breakdown-item i {
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
}

.cekilis-money-breakdown-item strong {
    display: block;
    font-size: var(--biger-font-size);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cekilis-money-breakdown-item span {
    color: var(--text-muted);
    font-size: var(--mini-font-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sidebar prize amount shimmer */
.cekilis-sidebar-prize-amount {
    background: linear-gradient(135deg, var(--primary-color) 0%, #fbbf24 50%, var(--primary-hover) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cekilisShimmer 4s linear infinite;
}

.cekilis-sidebar-cta {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: var(--large-font-size);
}

.cekilis-stamp {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: var(--font-weight-bold);
    font-size: var(--large-font-size);
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-secondary);
}

.cekilis-stamp.success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success-color);
}

.cekilis-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.cekilis-flow-step {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    transition: all 0.2s ease;
}

.cekilis-flow-step:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
}

.cekilis-flow-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.cekilis-flow-num {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: rgba(var(--primary-rgb), 0.15);
    line-height: 1;
}

.cekilis-flow-step strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 6px;
    font-size: var(--midi-font-size);
}

.cekilis-flow-step p {
    color: var(--text-muted);
    margin: 0;
    font-size: var(--mini-font-size);
    line-height: 1.5;
}

/* ==========================================================================
   PM Dock — Messenger-style chat dock
   Tüm class'lar .pm- prefix'li, çakışma yok.
   ========================================================================== */

.pm-dock {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9998;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    font-family: inherit;
}

.pm-dock * {
    box-sizing: border-box;
    pointer-events: auto;
}

.pm-windows-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 12px;
    margin-right: 88px;
    margin-bottom: 0;
}

.pm-bubbles-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 8px;
    margin-right: 88px;
    margin-bottom: 12px;
}

/* ---------- Window ---------- */
.pm-window {
    width: 340px;
    height: 460px;
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: 12px 12px 0 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pmSlideUp 200ms ease-out;
}

@keyframes pmSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pm-window[data-state="min"] {
    display: none;
}

.pm-window-header {
    background: linear-gradient(135deg, var(--primary-color, #ff1b4c), var(--primary-hover, #e0163f));
    color: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.pm-w-id-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.pm-w-avatar-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

.pm-w-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.pm-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.pm-w-id {
    min-width: 0;
    flex: 1;
}

.pm-w-name {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-w-meta {
    font-size: 11px;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-w-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pm-w-btn {
    background: transparent;
    border: 0;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease;
}

.pm-w-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

.pm-window-body {
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--bg-secondary, #f8fafc);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
}

.pm-msgs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-load-more-btn {
    align-self: center;
    background: transparent;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    color: var(--text-secondary, #6b7280);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    cursor: pointer;
    margin: 6px 0;
}

.pm-load-more-btn:hover {
    background: var(--bg-tertiary, #f1f5f9);
}

.pm-day-sep {
    align-self: center;
    background: var(--bg-tertiary, #e2e8f0);
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 999px;
    margin: 8px 0 4px;
}

.pm-sys-msg {
    align-self: center;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    font-style: italic;
    margin: 4px 0;
}

.pm-msg {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}

.pm-msg--in {
    align-self: flex-start;
}

.pm-msg--out {
    align-self: flex-end;
    align-items: flex-end;
}

.pm-msg-bubble {
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.pm-msg--in .pm-msg-bubble {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-primary, #1f2937);
    border-bottom-left-radius: 4px;
}

.pm-msg--out .pm-msg-bubble {
    background: linear-gradient(135deg, var(--primary-color, #ff1b4c), var(--primary-hover, #e0163f));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.pm-msg-time {
    font-size: 10px;
    opacity: 0.65;
    margin-top: 2px;
    padding: 0 4px;
}

.pm-msg-bubble a {
    color: inherit;
    text-decoration: underline;
}

.pm-window-footer {
    padding: 8px;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    background: var(--card-bg, #fff);
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.pm-input {
    flex: 1;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1f2937);
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 13px;
    resize: none;
    line-height: 1.3;
    outline: none;
    max-height: 120px;
    overflow-y: auto;
    font-family: inherit;
}

.pm-input:focus {
    border-color: var(--primary-color, #ff1b4c);
}

.pm-send-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--primary-color, #ff1b4c);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, transform 120ms ease;
}

.pm-send-btn:hover:not(:disabled) {
    background: var(--primary-hover, #e0163f);
    transform: scale(1.05);
}

.pm-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pm-cooldown-bar {
    height: 2px;
    width: 0%;
    background: var(--primary-color, #ff1b4c);
    opacity: 0.7;
}

/* ---------- Bubble (minimized) ---------- */
.pm-bubble {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--card-bg, #fff);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: var(--card-bg, #fff);
    padding: 0;
    transition: transform 150ms ease;
}

.pm-bubble:hover {
    transform: scale(1.08);
}

.pm-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pm-bubble-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary-color, #ff1b4c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    border: 2px solid var(--card-bg, #fff);
}

.pm-online-dot--bubble {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
}

/* ---------- Launcher ---------- */
.pm-launcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: auto;
}

.pm-launcher-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--primary-color, #ff1b4c), var(--primary-hover, #e0163f));
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease;
}

.pm-launcher-btn:hover {
    transform: scale(1.06);
}

.pm-launcher-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #fff;
    color: var(--primary-color, #ff1b4c);
    border: 2px solid var(--primary-color, #ff1b4c);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 6px;
    min-width: 20px;
    text-align: center;
}

.pm-launcher-panel {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 320px;
    max-height: 440px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.pm-launcher--open .pm-launcher-panel {
    display: flex;
    animation: pmSlideUp 180ms ease-out;
}

.pm-launcher-head {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    color: var(--text-primary, #1f2937);
    background: var(--bg-secondary, #f8fafc);
}
.pm-launcher-head > span:first-child { flex: 1; }
.pm-launcher-close { margin-left: 0 !important; }

.pm-launcher-all {
    font-size: 12px;
    color: var(--primary-color, #ff1b4c);
    text-decoration: none;
    font-weight: 500;
}

.pm-launcher-all:hover {
    text-decoration: underline;
}

.pm-launcher-list {
    overflow-y: auto;
    flex: 1;
}

.pm-launcher-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
}

.pm-l-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.04));
    transition: background 120ms ease;
}

.pm-l-item:hover {
    background: var(--bg-secondary, #f8fafc);
}

.pm-l-item--unread {
    background: rgba(var(--primary-rgb, 255, 27, 76), 0.05);
}

.pm-l-avatar-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.pm-l-avatar-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pm-l-avatar-wrap .pm-online-dot {
    width: 10px;
    height: 10px;
    bottom: 0;
    right: 0;
}

.pm-l-body {
    min-width: 0;
    flex: 1;
}

.pm-l-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.pm-l-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-l-item--unread .pm-l-name {
    font-weight: 700;
}

.pm-l-time {
    font-size: 10px;
    color: var(--text-secondary, #94a3b8);
    flex: 0 0 auto;
}

.pm-l-snippet {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-l-item--unread .pm-l-snippet {
    color: var(--text-primary, #1f2937);
}

.pm-l-badge {
    background: var(--primary-color, #ff1b4c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
    min-width: 18px;
    text-align: center;
    flex: 0 0 auto;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {

    .pm-windows-row,
    .pm-bubbles-row {
        display: none;
    }

    .pm-launcher {
        bottom: 78px;
        right: 16px;
    }

    .pm-launcher-btn {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .pm-launcher-panel {
        width: calc(100vw - 32px);
        right: 0;
    }

    .pm-dock--mobile-fullscreen .pm-launcher {
        display: none;
    }

    .pm-dock--mobile-fullscreen .pm-window--mobile {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        z-index: 10000;
        animation: pmMobileIn 220ms ease-out;
    }

    @keyframes pmMobileIn {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }
}

/* ---------- Header badge (header.php'de "data-pm-header-badge" ile inject) ---------- */
.pm-header-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary-color, #ff1b4c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 999px;
    border: 2px solid var(--card-bg, #fff);
    line-height: 1;
}

/* ---------- Dark mode tweaks ---------- */
[data-theme="dark"] .pm-window {
    background: var(--card-bg, #1f1f2b);
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .pm-window-body {
    background: var(--bg-secondary, #181820);
}

[data-theme="dark"] .pm-window-footer {
    background: var(--card-bg, #1f1f2b);
    border-top-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .pm-input {
    background: var(--bg-tertiary, #14141c);
    color: var(--text-primary, #e5e7eb);
    border-color: var(--border-color, rgba(255, 255, 255, 0.1));
}

[data-theme="dark"] .pm-msg--in .pm-msg-bubble {
    background: var(--bg-tertiary, #2a2a3a);
    color: var(--text-primary, #e5e7eb);
}

[data-theme="dark"] .pm-launcher-panel {
    background: var(--card-bg, #1f1f2b);
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .pm-launcher-head {
    background: var(--bg-secondary, #181820);
    color: var(--text-primary, #e5e7eb);
}

[data-theme="dark"] .pm-l-item:hover {
    background: var(--bg-secondary, #181820);
}

/* ==========================================================================
   /mesajlar inbox sayfası
   ========================================================================== */
.pm-inbox {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    min-height: 600px;
}

.pm-inbox-list {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pm-inbox-list-head {
    padding: 14px 16px;
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
    background: var(--bg-secondary, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pm-inbox-list-body {
    overflow-y: auto;
    flex: 1;
}

.pm-inbox-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}

.pm-inbox-thread {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pm-inbox-thread-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    font-size: 15px;
    padding: 40px;
    text-align: center;
}

.pm-inbox-thread-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
    background: var(--bg-secondary, #f8fafc);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-inbox-thread-body {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-secondary, #f8fafc);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 420px;
}

.pm-inbox-thread-footer {
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
    padding: 12px;
    background: var(--card-bg, #fff);
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.pm-inbox-thread-footer .pm-input {
    font-size: 14px;
    padding: 10px 14px;
}

.pm-inbox-thread-footer .pm-send-btn {
    width: 42px;
    height: 42px;
}

@media (max-width: 900px) {
    .pm-inbox {
        grid-template-columns: 1fr;
    }

    .pm-inbox-list {
        max-height: 320px;
    }
}

/* Satıcıya Mesaj Gönder CTA — ilan detay sayfasında satıcı kartının altında */
.pd-pm-btn {
    width: 100%;
    margin-top: 10px;
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color, #ff1b4c), var(--primary-hover, #e0163f));
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb, 255, 27, 76), 0.28);
}

.pd-pm-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 8px 22px rgba(var(--primary-rgb, 255, 27, 76), 0.38);
}

.pd-pm-btn:active {
    transform: translateY(0);
}

.pd-pm-btn i {
    font-size: 16px;
}

/* ==========================================================================
   PM Inbox — Dark mode + dark/light token uyumu
   ========================================================================== */

[data-theme="dark"] .pm-inbox-list {
    background: var(--card-bg, #1f1f2b);
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .pm-inbox-list-head {
    background: var(--bg-secondary, #181820);
    color: var(--text-primary, #e5e7eb);
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .pm-inbox-thread {
    background: var(--card-bg, #1f1f2b);
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .pm-inbox-thread-head {
    background: var(--bg-secondary, #181820);
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .pm-inbox-thread-body {
    background: var(--bg-secondary, #181820);
}

[data-theme="dark"] .pm-inbox-thread-footer {
    background: var(--card-bg, #1f1f2b);
    border-top-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .pm-inbox-empty,
[data-theme="dark"] .pm-inbox-thread-empty {
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .pm-l-name {
    color: var(--text-primary, #e5e7eb);
}

[data-theme="dark"] .pm-l-snippet {
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .pm-l-item:hover {
    background: var(--bg-tertiary, #14141c);
}

[data-theme="dark"] .pm-l-item--unread .pm-l-snippet {
    color: var(--text-primary, #e5e7eb);
}

[data-theme="dark"] .pm-l-item--active {
    background: var(--bg-tertiary, #14141c) !important;
}

[data-theme="dark"] .pm-day-sep {
    background: var(--bg-tertiary, #2a2a3a);
    color: var(--text-secondary, #94a3b8);
}

/* Mesajlar inbox: ana içerik wrapper rengi de tema uyumu */
.pm-inbox-list-head span {
    color: var(--text-primary);
}

/* Action butonları görünür kalsın diye ufak garanti */
.pm-w-btn {
    color: #fff !important;
}

.pm-w-btn i {
    pointer-events: none;
}

/* Inbox header/footer için light tema renkleri ek garanti */
.pm-inbox-list-head {
    color: var(--text-primary);
}

.pm-inbox-thread-head>div>div:first-child {
    color: var(--text-primary) !important;
}

.pm-inbox-thread-body {
    color: var(--text-primary);
}

/* Inbox sayfasında SwAl uyumlu işaret rengi vs.) */
.pm-inbox-list-body .pm-l-item--active {
    background: var(--bg-tertiary) !important;
    border-left: 3px solid var(--primary-color);
}

/* Bubble içindeki badge ve online-dot dışarı taşabilsin */
.pm-bubble {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0;
}

.pm-bubble>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--card-bg, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pm-bubble .pm-bubble-badge {
    z-index: 2;
}

.pm-bubble .pm-online-dot--bubble {
    z-index: 2;
}

/* PM Toast — system showModal yerine kısa bildirim için */
.pm-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--card-bg, #fff);
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10010;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 90vw;
}

.pm-toast.pm-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pm-toast--success {
    border-left: 4px solid #22c55e;
}

.pm-toast--error {
    border-left: 4px solid #ef4444;
}

.pm-toast--info {
    border-left: 4px solid var(--primary-color, #ff1b4c);
}

.pm-toast--warning {
    border-left: 4px solid #f59e0b;
}

.pm-toast i {
    font-size: 18px;
}

.pm-toast--success i {
    color: #22c55e;
}

.pm-toast--error i {
    color: #ef4444;
}

.pm-toast--info i {
    color: var(--primary-color, #ff1b4c);
}

.pm-toast--warning i {
    color: #f59e0b;
}

[data-theme="dark"] .pm-toast {
    background: var(--card-bg, #1f1f2b);
    color: var(--text-primary, #e5e7eb);
    border-color: var(--border-color, rgba(255, 255, 255, 0.1));
}

/* ==========================================================================
   Site geneli scrollbar + form control teması
   Tema değiştiğinde --primary-color üzerinden otomatik renk değişir.
   ========================================================================== */

/* Scrollbar — Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color, #ff1b4c) transparent;
}

/* Scrollbar — Webkit/Chromium */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: var(--primary-color, #ff1b4c);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 150ms ease;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover, #e0163f);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark/Light track tutarlılığı */
[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: var(--primary-color, #ff1b4c);
    background-clip: padding-box;
}

/* Textarea — modern oval, focus halkası, smooth scroll */
textarea {
    border-radius: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1f2937);
    font-family: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    scroll-behavior: smooth;
}

textarea:focus {
    outline: none;
    border-color: var(--primary-color, #ff1b4c);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 27, 76), 0.15);
}

/* Number input — native spinner gizle, custom oval spinner aşağıda */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    /* padding-right: 36px; */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Custom oval spinner — wrapper .num-input ile sarılı number input'lar için */
.num-input {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
}

.num-input input[type="number"] {
    flex: 1;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1f2937);
    padding: 10px 44px 10px 14px;
    font-size: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.num-input input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color, #ff1b4c);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 27, 76), 0.15);
}

.num-input-controls {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 30px;
}

.num-input-btn {
    flex: 1;
    border: 0;
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--primary-color, #ff1b4c);
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}

.num-input-btn:first-child {
    border-radius: 8px 8px 2px 2px;
}

.num-input-btn:last-child {
    border-radius: 2px 2px 8px 8px;
}

.num-input-btn:hover {
    background: var(--primary-color, #ff1b4c);
    color: #fff;
}

.num-input-btn:active {
    transform: scale(0.95);
}

[data-theme="dark"] .num-input-btn {
    background: var(--bg-tertiary, #14141c);
}

/* Standalone number input için pure-CSS spinner (wrapper olmadan) — webkit only */
input[type="number"]:not(.num-input input) {

    background-position:
        calc(100% - 18px) calc(50% - 4px),
        calc(100% - 10px) calc(50% - 4px);
    background-size: 8px 5px, 8px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Range slider */
input[type="range"] {
    accent-color: var(--primary-color, #ff1b4c);
}

/* Checkbox + radio + progress */
input[type="checkbox"],
input[type="radio"],
progress {
    accent-color: var(--primary-color, #ff1b4c);
}

/* Select — modern oval */
select:not([multiple]) {
    border-radius: 12px;
    padding: 10px 38px 10px 14px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    background: var(--bg-secondary, #f8fafc) no-repeat right 12px center;
    color: var(--text-primary, #1f2937);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--primary-color, #ff1b4c) 50%),
        linear-gradient(135deg, var(--primary-color, #ff1b4c) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 6px 6px, 6px 6px;
    cursor: pointer;
}

select:not([multiple]):focus {
    outline: none;
    border-color: var(--primary-color, #ff1b4c);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 27, 76), 0.15);
}

/* Standart text/email/password/search input — oval focus halkası */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"] {
    border-radius: 12px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
    outline: none;
    border-color: var(--primary-color, #ff1b4c);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 27, 76), 0.15);
}

/* Text selection — tema rengi */
::selection {
    background: rgba(var(--primary-rgb, 255, 27, 76), 0.25);
    color: var(--text-primary, #1f2937);
}

/* PM Inbox sayfası — viewport'a sığsın, mesaj alanı kendi içinde scroll yapsın */
.pm-inbox {
    height: calc(100vh - 220px);
    min-height: 520px;
    max-height: 920px;
}

.pm-inbox-list,
.pm-inbox-thread {
    height: 100%;
    min-height: 0;
}

.pm-inbox-list-body,
.pm-inbox-thread-body {
    min-height: 0;
}

.pm-inbox-thread {
    display: flex;
    flex-direction: column;
}

.pm-inbox-thread-body {
    flex: 1 1 0;
    overflow-y: auto;
    /* min-height burada 420px'di → flex:1 ile çakışıyordu, kaldırdık */
}

@media (max-width: 900px) {
    .pm-inbox {
        height: auto;
        max-height: none;
    }

    .pm-inbox-list {
        max-height: 320px;
    }

    .pm-inbox-thread {
        height: calc(100vh - 280px);
        min-height: 480px;
    }
}

/* PM Window — flex chain'in scroll yapabilmesi için min-height:0 */
.pm-window-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.pm-msgs {
    min-height: 0;
}

/* ==========================================================================
   gb-sell-item — Mobil responsive (kart layout)
   ========================================================================== */

@media (max-width: 768px) {
    .gb-sell-item {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
        align-items: flex-start;
        position: relative;
    }

    .gb-sell-item .sell-icon {
        width: 40px;
        height: 40px;
        font-size: 14px;
        flex: 0 0 40px;
    }

    .gb-sell-item .sell-info {
        flex: 1 1 auto;
        min-width: 0;
        width: calc(100% - 52px);
    }

    .gb-sell-item .sell-header {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 6px;
    }

    .gb-sell-item .sell-number {
        font-size: 13px;
        word-break: break-all;
    }

    .gb-sell-item .sell-details {
        gap: 4px;
        font-size: 12px;
    }

    .gb-sell-item .sell-product,
    .gb-sell-item .sell-date {
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* Amount — üst alt sıra, full-width */
    .gb-sell-item .sell-amount {
        flex: 1 1 100%;
        text-align: left;
        min-width: 0;
        padding-top: 10px;
        border-top: 1px solid var(--border-color);
        margin-top: 4px;
    }

    .gb-sell-item .sell-amount .amount-value {
        font-size: 16px;
        font-weight: 700;
        color: var(--primary-color);
    }

    .gb-sell-item .sell-amount .amount-label {
        font-size: 11px;
        color: var(--text-secondary);
    }

    /* Status (badge + buton aynı div'de) — kartın en alt satırı, yanyana */
    .gb-sell-item .sell-status {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid var(--border-color);
        flex-wrap: nowrap;
    }

    .gb-sell-item .status-badge {
        padding: 5px 10px;
        font-size: 11px;
    }

    .gb-sell-item .sell-status .btn {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .gb-sell-item {
        padding: 12px;
        gap: 10px;
    }

    .gb-sell-item .sell-info {
        width: calc(100% - 50px);
    }

    .gb-sell-item .sell-amount {
        flex: 1 1 100%;
    }

    /* Status + buton dar ekranda da yanyana */
    .gb-sell-item .sell-status .btn {
        padding: 7px 12px;
        font-size: 11px;
    }
}

/* ==========================================================================
   PM Özel Teklif kartları (dock pencerede)
   ========================================================================== */

.pm-offer-card {
    align-self: stretch;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 255, 27, 76), 0.08), rgba(var(--primary-rgb, 255, 27, 76), 0.02));
    border: 1px solid rgba(var(--primary-rgb, 255, 27, 76), 0.25);
    border-radius: 12px;
    padding: 12px;
    margin: 6px 0;
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pm-offer-card--reddedildi,
.pm-offer-card--iptal,
.pm-offer-card--suresi_doldu {
    opacity: 0.7;
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.pm-offer-card--kullanildi {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.02));
    border-color: rgba(34, 197, 94, 0.3);
}

.pm-offer-card--kabul {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
    border-color: rgba(34, 197, 94, 0.4);
}

.pm-offer-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 8px;
}

.pm-offer-head i {
    color: var(--primary-color);
}

.pm-offer-status {
    margin-left: auto;
    font-size: 10px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.4px;
}

.pm-offer-card--kullanildi .pm-offer-status,
.pm-offer-card--kabul .pm-offer-status {
    background: rgba(34, 197, 94, 0.18);
    color: #166534;
}

.pm-offer-ilan {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-offer-prices {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.pm-offer-old {
    color: var(--text-secondary);
    font-size: 13px;
}

.pm-offer-arrow {
    color: var(--primary-color);
    font-weight: 700;
}

.pm-offer-new {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
}

.pm-offer-expire {
    font-size: 11px;
    color: var(--warning-color, #f59e0b);
    margin-bottom: 8px;
}

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

.pm-offer-btn {
    flex: 1 1 calc(50% - 3px);
    border: 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: filter 120ms ease;
}

.pm-offer-btn:hover {
    filter: brightness(1.06);
}

.pm-offer-btn--accept {
    background: #22c55e;
    color: #fff;
}

.pm-offer-btn--reject {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-primary);
}

.pm-offer-btn--cancel {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-primary);
}

.pm-offer-btn--buy {
    flex: 1 1 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: #fff;
    padding: 10px;
    font-size: 13px;
}

[data-theme="dark"] .pm-offer-status {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pm-offer-btn--reject,
[data-theme="dark"] .pm-offer-btn--cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Header'daki "Teklif Yap" butonu */
.pm-w-offer-btn {
    color: #fff !important;
}

.pm-w-offer-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* "Sana Özel" indirim badge — ilan detay sayfasında */
.pd-private-offer-badge {
    background: linear-gradient(135deg, var(--primary-color, #ff1b4c), var(--primary-hover, #e0163f)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 255, 27, 76), 0.4);
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    animation: pmPrivateOfferPulse 2s ease-in-out infinite;
}

@keyframes pmPrivateOfferPulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(var(--primary-rgb, 255, 27, 76), 0.4);
    }

    50% {
        box-shadow: 0 6px 18px rgba(var(--primary-rgb, 255, 27, 76), 0.6);
    }
}

.pd-private-offer-price {
    color: var(--primary-color, #ff1b4c) !important;
}

.pd-private-offer-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-private-offer-meta i {
    color: var(--warning-color, #f59e0b);
}

/* Özel Teklifler dashboard sayfası */
.ozel-teklif-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
}

.ozel-teklif-tab {
    padding: 10px 18px;
    border-radius: 10px 10px 0 0;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-bottom: 0;
    transition: background 120ms ease, color 120ms ease;
}

.ozel-teklif-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.ozel-teklif-tab.active {
    background: var(--card-bg, #fff);
    color: var(--primary-color);
    border-color: var(--border-color);
    margin-bottom: -1px;
}

.ozel-teklif-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.ozel-teklif-empty i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 14px;
    color: var(--primary-color);
}

.ozel-teklif-empty h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.ozel-teklif-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ozel-teklif-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    align-items: center;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.ozel-teklif-card:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .08));
    border-color: var(--primary-color);
}

.ozel-teklif-thumb {
    width: 72px;
    height: 72px;
    background: var(--bg-secondary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.ozel-teklif-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ozel-teklif-thumb i {
    font-size: 26px;
    color: var(--text-secondary);
}

.ozel-teklif-body {
    min-width: 0;
}

.ozel-teklif-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ozel-teklif-head strong {
    font-size: 15px;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ozel-teklif-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ozel-teklif-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.ozel-teklif-badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #166534;
}

.ozel-teklif-badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.ozel-teklif-badge--secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.ozel-teklif-badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.ozel-teklif-prices {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ozel-teklif-eski {
    color: var(--text-secondary);
    font-size: 14px;
}

.ozel-teklif-arrow {
    color: var(--primary-color);
    font-weight: 700;
}

.ozel-teklif-yeni {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
}

.ozel-teklif-yuzde {
    background: var(--primary-color);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.ozel-teklif-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.ozel-teklif-meta i {
    margin-right: 4px;
}

.ozel-teklif-kalan {
    color: var(--warning-color, #f59e0b);
    font-weight: 600;
}

.ozel-teklif-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    min-width: 140px;
}

.ozel-teklif-actions .btn {
    padding: 7px 12px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ozel-teklif-card {
        grid-template-columns: 56px 1fr;
        gap: 12px;
        padding: 12px;
    }

    .ozel-teklif-thumb {
        width: 56px;
        height: 56px;
    }

    .ozel-teklif-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }

    .ozel-teklif-actions .btn {
        flex: 1 1 auto;
    }

    .ozel-teklif-head strong {
        font-size: 14px;
        white-space: normal;
    }

    .ozel-teklif-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* PM güvenlik UI — kilit göstergesi + sabit uyarı */
.pm-window-locked {
    padding: 14px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary, #f1f5f9);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
}

.pm-window-locked i {
    font-size: 22px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.pm-window-locked strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 2px;
}

.pm-window-locked small {
    font-size: 11px;
    line-height: 1.3;
}

[data-theme="dark"] .pm-window-locked {
    background: var(--bg-tertiary, #14141c);
}

.pm-safety-notice {
    font-size: 10px;
    color: var(--text-secondary);
    padding: 4px 12px;
    background: rgba(245, 158, 11, 0.06);
    border-top: 1px solid rgba(245, 158, 11, 0.18);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.pm-safety-notice i {
    color: var(--warning-color, #f59e0b);
    font-size: 10px;
}

/* Inbox sayfasında kilit göstergesi */
.pm-inbox-locked {
    padding: 18px;
    text-align: center;
    background: var(--bg-tertiary, #f1f5f9);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
}

.pm-inbox-locked i {
    font-size: 24px;
    margin-bottom: 6px;
    display: block;
    color: var(--primary-color);
}

.pm-inbox-locked strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
}

[data-theme="dark"] .pm-inbox-locked {
    background: var(--bg-tertiary, #14141c);
}

/* Forbidden content uyarı toast */
.pm-toast--warning {
    border-left-color: var(--warning-color, #f59e0b);
}

/* Özel Teklifler — Dark/Light mode override */
[data-theme="dark"] .ozel-teklif-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .ozel-teklif-tab {
    color: var(--text-secondary);
}

[data-theme="dark"] .ozel-teklif-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .ozel-teklif-tab.active {
    background: var(--card-bg);
    color: var(--primary-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .ozel-teklif-empty {
    color: var(--text-secondary);
}

[data-theme="dark"] .ozel-teklif-empty h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .ozel-teklif-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .ozel-teklif-card:hover {
    border-color: var(--primary-color);
}

[data-theme="dark"] .ozel-teklif-thumb {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .ozel-teklif-thumb i {
    color: var(--text-secondary);
}

[data-theme="dark"] .ozel-teklif-head strong {
    color: var(--text-primary);
}

[data-theme="dark"] .ozel-teklif-eski {
    color: var(--text-secondary);
}

[data-theme="dark"] .ozel-teklif-meta {
    color: var(--text-secondary);
}

[data-theme="dark"] .ozel-teklif-badge--warning {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

[data-theme="dark"] .ozel-teklif-badge--success {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}

[data-theme="dark"] .ozel-teklif-badge--danger {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

[data-theme="dark"] .ozel-teklif-badge--secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

[data-theme="dark"] .ozel-teklif-badge--info {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

[data-theme="dark"] .ozel-teklif-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    [data-theme="dark"] .ozel-teklif-actions {
        border-top-color: var(--border-color);
    }
}

.legal-document {
    max-width: 920px;
    margin: 32px auto 64px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 48px 56px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 15px;
}

.legal-document::before {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color, #ff1b4c), #764ba2);
    border-radius: 4px;
    margin-bottom: 22px;
}

.legal-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 28px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.legal-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 32px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
    position: relative;
    line-height: 1.4;
}

.legal-section-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary-color, #ff1b4c);
}

.legal-text {
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.75;
    font-size: 14.5px;
}

.legal-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

.legal-numbered {
    display: inline-block;
    font-weight: 700;
    color: var(--primary-color, #ff1b4c);
    min-width: 30px;
    margin-right: 4px;
}

.legal-subsection {
    background: var(--bg-tertiary, var(--bg-primary));
    border-left: 3px solid var(--primary-color, #ff1b4c);
    padding: 14px 18px;
    border-radius: 0 10px 10px 0;
    margin: 14px 0;
}

.legal-subsection>p:first-child {
    margin: 0 0 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.legal-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 12px;
}

.legal-list li {
    position: relative;
    padding: 6px 0 6px 26px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.legal-list li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color, #ff1b4c);
}

.company-info-box {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 28px;
}

.company-info-box p {
    margin: 2px 0;
    color: var(--text-primary);
    font-size: 14px;
}

.company-info-box p:first-child {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.info-box {
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
    border-left: 4px solid;
    background: var(--bg-tertiary, var(--bg-primary));
}

.info-box p {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
}

.info-box p:first-child:not(:only-child) {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.info-box.warning {
    background: rgba(245, 158, 11, 0.08);
    border-left-color: #f59e0b;
    color: var(--text-primary);
}

.info-box.warning p:first-child:not(:only-child) {
    color: #d97706;
}

.info-box.info {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: #3b82f6;
}

.info-box.info p:first-child:not(:only-child) {
    color: #2563eb;
}

.info-box.success {
    background: rgba(16, 185, 129, 0.08);
    border-left-color: #10b981;
}

.info-box.success p:first-child:not(:only-child) {
    color: #059669;
}

.info-box.danger {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: #ef4444;
}

.info-box.danger p:first-child:not(:only-child) {
    color: #dc2626;
}

.acceptance-box {
    margin-top: 36px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    text-align: center;
}

.acceptance-box p {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.6;
    font-size: 14px;
}

.legal-meta {
    margin-top: 32px !important;
    padding-top: 16px;
    border-top: 1px dashed var(--border-color);
    font-size: 12px !important;
    color: var(--text-muted) !important;
    text-align: right;
}

.legal-document a {
    color: var(--primary-color, #ff1b4c);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: opacity 0.15s ease;
}

.legal-document a:hover {
    opacity: 0.75;
}

.legal-document h1:not(.legal-title),
.legal-document h2:not(.legal-section-title),
.legal-document h3,
.legal-document h4 {
    color: var(--text-primary);
    margin: 24px 0 12px;
    font-weight: 700;
    line-height: 1.4;
}

.legal-document p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 12px;
}

.legal-document ul:not(.legal-list),
.legal-document ol {
    padding-left: 22px;
    margin: 8px 0 14px;
    color: var(--text-secondary);
}

.legal-document ul:not(.legal-list) li,
.legal-document ol li {
    margin-bottom: 4px;
    line-height: 1.6;
}

.legal-document blockquote {
    border-left: 3px solid var(--primary-color, #ff1b4c);
    background: var(--bg-tertiary, var(--bg-primary));
    padding: 12px 18px;
    margin: 14px 0;
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
    font-style: italic;
}

.legal-document table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}

.legal-document table th,
.legal-document table td {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
    color: var(--text-primary);
}

.legal-document table th {
    background: var(--bg-tertiary, var(--bg-primary));
    font-weight: 700;
}

[data-theme="dark"] .legal-document {
    background: var(--bg-secondary);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .company-info-box {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
    border-color: rgba(102, 126, 234, 0.3);
}

@media (max-width: 768px) {
    .legal-document {
        margin: 16px;
        padding: 28px 22px;
        border-radius: 12px;
        font-size: 14px;
    }

    .legal-title {
        font-size: 21px;
        margin-bottom: 20px;
    }

    .legal-section-title {
        font-size: 15px;
        margin: 24px 0 12px;
    }

    .legal-text,
    .legal-document p {
        font-size: 13.5px;
    }
}

.hakkimizda-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin: 24px 0 32px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #fff;
}

.hakkimizda-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 48px 32px;
    max-width: 760px;
}

.hakkimizda-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
    backdrop-filter: blur(6px);
}

.hakkimizda-hero-title {
    font-size: 42px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    color: #fff;
}

.hakkimizda-hero-slogan {
    font-size: 16px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
}

.hakkimizda-hero-divider {
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color, #ff1b4c), #f59e0b);
    border-radius: 4px;
    margin: 20px auto;
}

.hakkimizda-hero-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.7;
}

.hakkimizda-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.hak-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px 20px;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hak-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.hak-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.hak-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.hak-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.hakkimizda-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

.hak-pillar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease;
}

.hak-pillar:hover {
    transform: translateY(-2px);
}

.hak-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.5;
}

.hak-pillar-icon {
    font-size: 32px;
    margin-bottom: 12px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(102, 126, 234, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hak-pillar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.hak-pillar-text {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.hakkimizda-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 36px;
    margin-bottom: 36px;
}

.hak-content-inner {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 15px;
}

.hak-content-inner h1,
.hak-content-inner h2,
.hak-content-inner h3 {
    color: var(--text-primary);
    margin: 20px 0 12px;
    font-weight: 700;
}

.hak-content-inner h2 {
    font-size: 20px;
}

.hak-content-inner h3 {
    font-size: 17px;
}

.hak-content-inner p {
    margin: 0 0 12px;
}

.hak-content-inner ul,
.hak-content-inner ol {
    padding-left: 22px;
    margin: 8px 0 14px;
}

.hak-content-inner a {
    color: var(--primary-color, #ff1b4c);
}

.hakkimizda-team {
    margin-bottom: 36px;
}

.hak-section-head {
    text-align: center;
    margin-bottom: 24px;
}

.hak-section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.hak-section-sub {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.hak-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.hak-team-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hak-team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}

.hak-team-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 3px solid var(--bg-secondary, #fff);
    transition: transform 0.2s ease;
}

.hak-team-card:hover .hak-team-avatar {
    transform: scale(1.04);
}

.hak-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hak-team-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.hak-team-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.hak-team-role {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.hakkimizda-values {
    margin-bottom: 36px;
}

.hak-value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.hak-value-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
}

.hak-value-num {
    font-size: 38px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color, #ff1b4c), #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 8px;
}

.hak-value-item h4 {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 700;
    margin: 0 0 6px;
}

.hak-value-item p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.hakkimizda-community {
    margin: 36px 0 64px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    position: relative;
}

.hakkimizda-community::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
    pointer-events: none;
}

.hak-community-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 48px 32px;
    color: #fff;
    max-width: 680px;
    margin: 0 auto;
}

.hak-community-icon {
    font-size: 52px;
    margin-bottom: 14px;
}

.hak-community-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 10px;
    color: #fff;
}

.hak-community-text {
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 22px;
}

.hak-community-text strong {
    color: #fff;
}

.hak-community-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hak-community-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: transform 0.15s ease, background 0.15s ease;
}

.hak-community-btn.primary {
    background: #fff;
    color: #5865f2 !important;
}

.hak-community-btn.primary:hover {
    transform: translateY(-2px);
    background: #f8f9fa;
}

.hak-community-btn.ghost {
    background: rgba(255, 255, 255, 0.15);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hak-community-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .hakkimizda-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hakkimizda-pillars {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hakkimizda-hero {
        min-height: 220px;
    }

    .hakkimizda-hero-title {
        font-size: 30px;
    }

    .hakkimizda-hero-inner {
        padding: 32px 20px;
    }

    .hak-section-title {
        font-size: 20px;
    }

    .hak-community-title {
        font-size: 21px;
    }

    .hak-community-inner {
        padding: 32px 20px;
    }

    .hakkimizda-content {
        padding: 20px 18px;
    }
}

@media (max-width: 420px) {
    .hakkimizda-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .hak-stat-value {
        font-size: 22px;
    }
}