/* =========================================================
   DEALER — THE PET MARKET (v2)
   Light mint / sage marketplace theme
   ========================================================= */

:root {
    --bg-base:       #F0FAF4;
    --bg-soft:       #E4F5EA;
    --bg-card:       #FFFFFF;
    --bg-glass:      rgba(255, 255, 255, 0.72);
    --bg-input:      #FFFFFF;

    --mint-50:       #ECFDF5;
    --mint-100:      #D1FAE5;
    --mint-200:      #A7F3D0;
    --mint-300:      #6EE7B7;
    --mint-400:      #34D399;
    --mint-500:      #10B981;
    --mint-600:      #059669;
    --mint-700:      #047857;
    --mint-900:      #064E3B;

    --ice-bg:        #E0F2FE;
    --ice-fg:        #0369A1;
    --dark-bg:       #EDE9FE;
    --dark-fg:       #6D28D9;
    --gem-bg:        #FEF3C7;
    --gem-fg:        #B45309;
    --red-bg:        #FEE2E2;
    --red-fg:        #B91C1C;

    --text-1:        #0B1F17;
    --text-2:        #3B5144;
    --text-3:        #6B8478;
    --text-4:        #9AB0A3;

    --border-1:      rgba(11, 31, 23, 0.08);
    --border-2:      rgba(11, 31, 23, 0.14);
    --border-mint:   rgba(16, 185, 129, 0.25);

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;

    --sh-soft:  0 1px 2px rgba(11, 31, 23, 0.04),
                0 2px 8px rgba(11, 31, 23, 0.04);
    --sh-card:  0 1px 2px rgba(11, 31, 23, 0.04),
                0 8px 24px rgba(11, 31, 23, 0.06);
    --sh-lift:  0 1px 2px rgba(11, 31, 23, 0.05),
                0 12px 32px rgba(16, 185, 129, 0.18);
    --sh-btn:   0 1px 0 rgba(255,255,255,0.25) inset,
                0 6px 16px rgba(16, 185, 129, 0.35);
    --sh-pop:   0 4px 8px rgba(11, 31, 23, 0.08),
                0 16px 40px rgba(11, 31, 23, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-base);
    color: var(--text-1);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    position: relative;
}

/* =========================================================
   MESH BACKGROUND
   ========================================================= */
.mesh-bg {
    position: fixed; inset: 0; overflow: hidden;
    pointer-events: none; z-index: 0;
}
.blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.7; will-change: transform;
}
.blob-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--mint-300), transparent 70%);
    top: -200px; left: -150px;
    animation: blobFloat 18s ease-in-out infinite;
}
.blob-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #FEF3C7, transparent 70%);
    bottom: -150px; right: -120px;
    animation: blobFloat 22s ease-in-out infinite reverse;
}
.blob-3 {
    width: 450px; height: 450px;
    background: radial-gradient(circle, #DBEAFE, transparent 70%);
    top: 40%; left: 50%; transform: translate(-50%, -50%);
    animation: blobFloat 26s ease-in-out infinite;
    animation-delay: -10s;
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(60px, -40px) scale(1.08); }
    66%      { transform: translate(-40px, 50px) scale(0.95); }
}

.floating-pets { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.float-pet {
    position: absolute; left: var(--x); top: var(--y);
    font-size: 28px; opacity: 0.85;
    filter: drop-shadow(0 4px 12px rgba(16,185,129,0.2));
    animation: petFloat 7s ease-in-out infinite;
    animation-delay: var(--delay);
}
/* <img class="float-pet"> için boyut */
img.float-pet {
    width: 56px; height: 56px;
    object-fit: contain;
}
@keyframes petFloat {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-18px) rotate(4deg); }
}

/* =========================================================
   APP
   ========================================================= */
.app {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    min-height: 100vh;
    width: 100%;
    margin: 0;
}

/* Chat sayfası dar konuşma (860px), body class ile opt-in */
body.chat-page .app {
    max-width: 860px;
    margin: 0 auto;
    height: 100vh; height: 100dvh;
    min-height: 0;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 24px; flex-shrink: 0;
}

.brand {
    display: flex; align-items: center; gap: 12px;
    flex: 1; min-width: 0;
}

.brand-mark {
    width: 40px; height: 40px;
    border-radius: 12px;
    overflow: hidden; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.brand-mark:hover { transform: scale(1.05) rotate(-3deg); }
.brand-mark img { width: 100%; height: 100%; display: block; }

.brand-text {
    display: flex; flex-direction: column;
    line-height: 1.1; min-width: 0;
}
.brand-name {
    font-family: 'Instrument Serif', serif;
    font-size: 22px; color: var(--text-1);
    letter-spacing: -0.01em; font-weight: 400;
}
.brand-tag {
    font-size: 11px; font-weight: 600;
    color: var(--mint-700);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.status-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    background: var(--mint-100);
    border: 1px solid var(--border-mint);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    color: var(--mint-700);
    flex-shrink: 0;
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mint-500);
    animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.icon-btn {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    color: var(--text-2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-family: inherit;
}
.icon-btn:hover {
    background: var(--mint-50);
    color: var(--mint-700);
    border-color: var(--border-mint);
}
#reset-btn:hover { transform: rotate(45deg); }
#reset-btn:active { transform: rotate(45deg) scale(0.95); }

/* Language switcher */
.lang-switcher { position: relative; }
.lang-btn { gap: 6px; padding: 0 10px; width: auto; min-width: 58px; }
.lang-btn .lang-current {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em;
}
.lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    padding: 6px;
    min-width: 140px;
    display: none;
    z-index: 100;
    animation: popIn 0.18s ease;
}
.lang-switcher.open .lang-menu { display: block; }
.lang-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--text-1);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.lang-item:hover    { background: var(--mint-50); }
.lang-item.active   { background: var(--mint-100); color: var(--mint-700); font-weight: 600; }
@keyframes popIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   WELCOME
   ========================================================= */
.welcome {
    flex: 1; display: flex;
    align-items: center; justify-content: center;
    padding: 20px 24px 24px;
    overflow-y: auto; overflow-x: hidden;
}

.welcome-inner {
    width: 100%; max-width: 640px;
    text-align: center;
    animation: welcomeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 12px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    color: var(--text-2);
    margin-bottom: 22px;
    box-shadow: var(--sh-soft);
}
.mini-badge i {
    color: var(--mint-600); font-size: 11px;
    animation: spark 2.4s ease-in-out infinite;
}
@keyframes spark {
    0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
    50%      { transform: scale(1.2) rotate(12deg); opacity: 0.8; }
}

.headline {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: clamp(36px, 6vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-1);
    margin-bottom: 18px;
}
.headline-accent {
    display: inline-block;
    background: linear-gradient(135deg, var(--mint-600), var(--mint-400));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.headline-accent em { font-style: italic; font-family: 'Instrument Serif', serif; }

.sub {
    font-size: 16px; color: var(--text-3);
    max-width: 460px; margin: 0 auto 32px;
    line-height: 1.55;
}

.suggestions {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    max-width: 480px; margin: 0 auto 28px;
}
.suggest-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    box-shadow: var(--sh-soft);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}
.suggest-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-mint);
    box-shadow: var(--sh-lift);
}
.suggest-card:hover .suggest-arrow {
    transform: translateX(4px); color: var(--mint-600);
}
.suggest-card:active { transform: translateY(0); }

.suggest-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.suggest-icon.ic-ice  { background: var(--ice-bg);  color: var(--ice-fg);  }
.suggest-icon.ic-dark { background: var(--dark-bg); color: var(--dark-fg); }
.suggest-icon.ic-gem  { background: var(--gem-bg);  color: var(--gem-fg);  }

.suggest-body {
    flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.suggest-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
.suggest-sub   { font-size: 12.5px; color: var(--text-3); font-weight: 500; }

.suggest-arrow {
    color: var(--text-4); font-size: 12px;
    transition: all 0.22s ease; flex-shrink: 0;
}

.trust-row {
    display: inline-flex; align-items: center; gap: 12px;
    flex-wrap: wrap; justify-content: center;
    padding: 10px 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    box-shadow: var(--sh-soft);
}
.trust-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-2);
}
.trust-item i { color: var(--mint-600); font-size: 11px; }
.trust-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--text-4); flex-shrink: 0;
}

/* =========================================================
   CHAT
   ========================================================= */
.chat-view {
    flex: 1;
    overflow-y: auto; overflow-x: hidden;
    padding: 8px 16px 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.chat-view::-webkit-scrollbar { width: 6px; }
.chat-view::-webkit-scrollbar-track { background: transparent; }
.chat-view::-webkit-scrollbar-thumb {
    background: var(--border-2); border-radius: 3px;
}

.chat-list {
    max-width: 720px; margin: 0 auto;
    display: flex; flex-direction: column;
    gap: 14px; padding-bottom: 8px;
}

.msg-row {
    display: flex; gap: 10px; max-width: 100%;
    animation: msgIn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.msg-row.user { justify-content: flex-end; }
.msg-row.bot  { justify-content: flex-start; }

.msg-avatar {
    width: 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 13px; font-weight: 700;
    overflow: hidden;
}
.user .msg-avatar {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    color: var(--text-2);
    order: 2;
}
.bot .msg-avatar {
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: white;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 4px 10px rgba(16, 185, 129, 0.3);
}
.bot .msg-avatar i { font-size: 13px; }
.bot .msg-avatar.thinking {
    animation: avatarPulse 1.4s ease-in-out infinite;
}
@keyframes avatarPulse {
    0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 4px 10px rgba(16, 185, 129, 0.3); }
    50%      { box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 6px 20px rgba(16, 185, 129, 0.55); }
}

.bubble {
    max-width: calc(100% - 50px);
    padding: 12px 16px;
    font-size: 14.5px; line-height: 1.55;
    border-radius: var(--r-lg);
    word-wrap: break-word; overflow-wrap: anywhere;
}
.bubble strong { font-weight: 700; color: var(--text-1); }
.bubble em     { font-style: italic; color: var(--text-2); }

.user .bubble {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: white;
    border-bottom-right-radius: 6px;
    box-shadow: var(--sh-btn);
}
.user .bubble strong { color: white; }
.user .bubble em     { color: rgba(255,255,255,0.85); }

.bot .bubble {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    color: var(--text-1);
    border-bottom-left-radius: 6px;
    box-shadow: var(--sh-soft);
}

/* Thinking bubble */
.thinking-bubble {
    display: flex; align-items: center; gap: 10px;
}
.thinking-bubble .thinking-label {
    font-size: 13.5px; color: var(--text-3); font-weight: 500;
}
.thinking-dots {
    display: inline-flex; align-items: center; gap: 4px;
}
.thinking-dots .td {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mint-500);
    animation: tdBounce 1.3s infinite ease-in-out;
}
.thinking-dots .td:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots .td:nth-child(2) { animation-delay: -0.16s; }
@keyframes tdBounce {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* =========================================================
   VARIANT QUICK-SELECT CHIPS
   ========================================================= */
.variant-panel, .quick-reply-panel {
    max-width: 720px; width: 100%;
    margin: -6px auto 0;
    padding: 0 44px;
    animation: msgIn 0.38s cubic-bezier(0.22,1,0.36,1);
}
.panel-title {
    font-size: 12px; font-weight: 600;
    color: var(--text-3);
    margin-bottom: 8px; padding-left: 4px;
}
.chip-row {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    color: var(--text-1);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s ease;
}
.chip:hover {
    background: var(--mint-50);
    border-color: var(--border-mint);
    color: var(--mint-700);
    transform: translateY(-1px);
    box-shadow: var(--sh-soft);
}
.chip:active { transform: translateY(0); }
.chip i { font-size: 11px; }

.chip.chip-accent { background: var(--mint-500); border-color: var(--mint-500); color: white; }
.chip.chip-accent:hover { background: var(--mint-600); border-color: var(--mint-600); color: white; }

.chip.chip-warn   { background: var(--red-bg); border-color: var(--red-bg); color: var(--red-fg); }
.chip.chip-warn:hover { background: #FCA5A5; border-color: #FCA5A5; color: #7F1D1D; }

.chip.chip-ghost  { color: var(--text-3); }

/* =========================================================
   COMPOSER
   ========================================================= */
.composer {
    flex-shrink: 0;
    padding: 12px 20px 18px;
    background: linear-gradient(
        to top,
        var(--bg-base) 45%,
        rgba(240, 250, 244, 0) 100%
    );
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0));
}
.composer-inner { max-width: 720px; margin: 0 auto; }

.composer-box {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 6px 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    box-shadow: var(--sh-card);
    transition: all 0.2s ease;
    position: relative;
}
.composer-box:focus-within {
    border-color: var(--mint-400);
    box-shadow:
        var(--sh-card),
        0 0 0 4px rgba(16, 185, 129, 0.10);
}

.composer-tool {
    width: 36px; height: 36px;
    border-radius: 10px; border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    font-family: inherit;
}
.composer-tool:hover {
    background: var(--mint-50);
    color: var(--mint-700);
}
.composer-tool.active {
    background: var(--mint-100); color: var(--mint-700);
}

#chat-input {
    flex: 1; min-width: 0;
    border: none; outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-1);
    padding: 10px 4px;
    letter-spacing: -0.005em;
}
#chat-input::placeholder { color: var(--text-4); }

.send-btn {
    width: 38px; height: 38px;
    border-radius: 12px; border: none;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: var(--sh-btn);
    flex-shrink: 0;
}
.send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 22px rgba(16, 185, 129, 0.45);
}
.send-btn:active  { transform: translateY(0) scale(0.96); }
.send-btn:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; }

.composer-hint {
    font-size: 11.5px; color: var(--text-4);
    margin-top: 10px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%;
}
.composer-hint i { font-size: 10px; }

/* =========================================================
   PET DROPDOWN
   ========================================================= */
.pet-dropdown {
    position: absolute;
    bottom: calc(100% + 8px); left: 0; right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    max-height: 360px;
    overflow: hidden;         /* header sabit, inner list scroll eder */
    display: flex; flex-direction: column;
    padding: 6px;
    z-index: 50;
    animation: popIn 0.18s ease;
}

.pet-dropdown-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-1);
    margin-bottom: 4px;
}
.pet-dropdown-header .mm2-item-icon {
    color: var(--mint-600); flex-shrink: 0;
}
.pet-dropdown-search {
    flex: 1; min-width: 0;
    background: transparent;
    border: none; outline: none;
    font: inherit;
    color: var(--text-1);
    font-size: 13.5px;
    padding: 2px 0;
}
.pet-dropdown-search::placeholder {
    color: var(--text-4);
    font-weight: 500;
}

.pet-options-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}
.pet-options-list::-webkit-scrollbar { width: 6px; }
.pet-options-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

.pet-option {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px; color: var(--text-1);
    transition: background 0.12s ease;
    font-weight: 500;
}
.pet-option:hover,
.pet-option.highlight { background: var(--mint-50); color: var(--mint-700); }
.pet-option .mm2-item-icon {
    color: var(--mint-600);
    flex-shrink: 0;
}
.pet-option:hover .mm2-item-icon,
.pet-option.highlight .mm2-item-icon { color: var(--mint-700); }
.pet-option .cat {
    margin-left: auto;
    font-size: 11px; font-weight: 600;
    color: var(--text-4);
    padding: 2px 8px; border-radius: 999px;
    background: var(--bg-base);
}
.pet-empty {
    padding: 20px; text-align: center;
    color: var(--text-4); font-size: 13px;
}

/* =========================================================
   UTILS & ANIMATIONS
   ========================================================= */
.hidden { display: none !important; }

@keyframes welcomeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.suggest-card            { animation: welcomeIn 0.6s both cubic-bezier(0.22, 1, 0.36, 1); }
.suggest-card:nth-child(1) { animation-delay: 0.15s; }
.suggest-card:nth-child(2) { animation-delay: 0.25s; }
.suggest-card:nth-child(3) { animation-delay: 0.35s; }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 640px) {
    .topbar { padding: 14px 16px; gap: 8px; }
    .brand-mark { width: 36px; height: 36px; }
    .brand-mark img { width: 36px; height: 36px; }
    .brand-name { font-size: 19px; }
    .brand-tag { font-size: 10px; }
    .status-pill { padding: 5px 10px; font-size: 11px; }
    .icon-btn { width: 36px; height: 36px; font-size: 13px; }
    .lang-btn { min-width: 52px; }

    .welcome { padding: 8px 18px 12px; }
    .headline { font-size: clamp(30px, 9vw, 44px); margin-bottom: 14px; }
    .sub { font-size: 14.5px; margin-bottom: 24px; }

    .suggestions { gap: 8px; }
    .suggest-card { padding: 12px 14px; gap: 12px; }
    .suggest-icon { width: 36px; height: 36px; font-size: 14px; }
    .suggest-title { font-size: 13.5px; }
    .suggest-sub { font-size: 12px; }

    .trust-row { gap: 10px; padding: 9px 14px; }
    .trust-item { font-size: 11.5px; }

    .chat-view { padding: 4px 12px 8px; }
    .chat-list { gap: 12px; }
    .bubble { font-size: 14px; padding: 11px 14px; }

    .variant-panel, .quick-reply-panel { padding: 0 12px; }

    .composer { padding: 10px 14px 16px; }
    #chat-input { font-size: 16px; } /* prevent iOS zoom */

    .float-pet { font-size: 22px; opacity: 0.6; }
    img.float-pet { width: 42px; height: 42px; }
    .blob { opacity: 0.55; filter: blur(60px); }
}

@media (max-width: 440px) {
    .status-pill span:last-child { display: none; }
    .status-pill { padding: 6px 9px; }
    .lang-btn .lang-current { display: none; }
    .brand-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .float-pet, .blob { display: none; }
}

/* =========================================================
   V3: MODAL
   ========================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 23, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.modal-overlay.open { opacity: 1; }

.modal {
    background: var(--bg-card);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 80px rgba(11, 31, 23, 0.25);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.94) translateY(10px);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-1);
}
.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
    display: flex; align-items: center; gap: 8px;
}
.modal-title i { color: var(--mint-600); }
.modal-close {
    width: 28px; height: 28px; border-radius: 8px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-3);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.modal-close:hover { background: var(--bg-base); color: var(--text-1); }

.modal-content { padding: 18px 20px 20px; }
.modal-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 18px;
}

.btn {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.15s ease;
    text-decoration: none;
    color: inherit;
}
.btn-primary {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: white;
    box-shadow: var(--sh-btn);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 22px rgba(16, 185, 129, 0.45); }
.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border-color: var(--border-1);
}
.btn-ghost:hover { background: var(--bg-base); border-color: var(--border-2); }

/* =========================================================
   COUNTER OFFER POPUP
   ========================================================= */
.counter-chips {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.counter-option {
    background: var(--bg-base);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 14px 8px;
    cursor: pointer;
    font-family: inherit;
    display: flex; flex-direction: column; align-items: center;
    gap: 2px;
    transition: all 0.15s ease;
}
.counter-option:hover {
    background: var(--mint-50);
    border-color: var(--border-mint);
    transform: translateY(-2px);
}
.co-num {
    font-family: 'Instrument Serif', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--mint-700);
    line-height: 1;
}
.co-unit { font-size: 11px; font-weight: 600; color: var(--text-3); }
.co-unit-big { font-weight: 600; color: var(--text-3); font-size: 13px; }

.counter-custom label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    margin-bottom: 6px;
}
.counter-input-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-base);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    padding: 10px 14px;
}
#counter-input {
    flex: 1;
    border: none; outline: none;
    background: transparent;
    font-family: 'Instrument Serif', serif;
    font-size: 22px;
    color: var(--text-1);
    -moz-appearance: textfield;
}
#counter-input::-webkit-outer-spin-button,
#counter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =========================================================
   USERNAME POPUP
   ========================================================= */
.username-input-wrap {
    display: flex; align-items: center;
    background: var(--bg-base);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    padding: 0 14px;
    transition: border 0.15s ease;
}
.username-input-wrap:focus-within {
    border-color: var(--mint-400);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.username-at {
    color: var(--mint-600);
    font-weight: 700;
    font-size: 18px;
    margin-right: 4px;
}
#username-input {
    flex: 1;
    border: none; outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    padding: 12px 0;
    color: var(--text-1);
}
#username-input.shake { animation: shake 0.4s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.username-hint {
    font-size: 11.5px;
    color: var(--text-4);
    margin-top: 6px;
    display: flex; align-items: center; gap: 6px;
}

/* =========================================================
   TRADE INFO CARD
   ========================================================= */
.trade-info-card {
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(180deg, #FFFFFF, var(--mint-50));
    border: 1px solid var(--border-mint);
    border-radius: var(--r-xl);
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.12);
    overflow: hidden;
    animation: tradeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tradeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tic-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-mint);
    background: rgba(255, 255, 255, 0.5);
}
.tic-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.tic-title h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.tic-price {
    font-family: 'Instrument Serif', serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--mint-700);
    line-height: 1;
}
.tic-price span {
    font-size: 13px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    color: var(--text-3);
    margin-left: 4px;
}

.tic-body { padding: 18px 20px; }

.tic-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}
.tic-row + .tic-row { border-top: 1px solid var(--border-1); }

.tic-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.tic-value {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600;
    color: var(--text-1);
}
.tic-value code {
    background: var(--bg-base);
    padding: 4px 10px;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    border: 1px solid var(--border-1);
}
.tic-copy {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--bg-base);
    border: 1px solid var(--border-1);
    color: var(--text-3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
    font-size: 11px;
}
.tic-copy:hover {
    background: var(--mint-100);
    color: var(--mint-700);
    border-color: var(--border-mint);
}

.pm-row { flex-wrap: wrap; justify-content: flex-end; }
.pm-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--mint-100);
    color: var(--mint-700);
    border: 1px solid var(--border-mint);
}

.tic-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-1);
}
.tic-process {
    margin-top: 10px;
    padding-left: 18px;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.5;
}
.tic-process li::marker { color: var(--mint-600); font-weight: 700; }

.tic-actions {
    display: flex; gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.tic-actions .btn { flex: 1; justify-content: center; min-width: 140px; }

/* =========================================================
   IMAGE BUBBLE
   ========================================================= */
.img-bubble { padding: 6px !important; }
.sent-image {
    max-width: 260px;
    max-height: 260px;
    border-radius: 12px;
    display: block;
    object-fit: cover;
}

/* =========================================================
   TOAST
   ========================================================= */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-1);
    color: white;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--sh-pop);
    z-index: 2000;
    animation: toastIn 0.25s ease;
}
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================
   MOBILE ADJUSTMENTS for v3
   ========================================================= */
@media (max-width: 640px) {
    .modal { max-width: 100%; }
    .counter-chips { grid-template-columns: 1fr 1fr 1fr; }
    .co-num { font-size: 20px; }
    .tic-header { padding: 14px 16px; }
    .tic-body { padding: 14px 16px; }
    .tic-price { font-size: 24px; }
    .tic-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .pm-row { justify-content: flex-start; }
    .tic-actions { flex-direction: column; }
    .tic-actions .btn { width: 100%; }
    .sent-image { max-width: 200px; max-height: 200px; }
}

/* =========================================================
   V4: TRADE PROCESSING ANIMATION
   ========================================================= */
.trade-processing {
    max-width: 600px;
    margin: 8px auto;
    padding: 18px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-soft);
    animation: msgIn 0.38s cubic-bezier(0.22,1,0.36,1);
}
.tp-steps {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    position: relative;
}
.tp-steps::before {
    content: '';
    position: absolute;
    left: 10%; right: 10%; top: 22px;
    height: 2px;
    background: var(--border-1);
    z-index: 0;
}
.tp-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.tp-icon-wrap {
    position: relative;
    width: 44px;
    height: 44px;
}
.tp-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg-base);
    border: 2px solid var(--border-1);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-3);
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
    position: relative;
}
.tp-check {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    opacity: 0;
    transform: scale(0.4);
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
    box-shadow: 0 4px 14px rgba(16,185,129,0.4);
}
.tp-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    text-align: center;
}
.tp-step.active .tp-icon {
    border-color: var(--mint-500);
    color: var(--mint-600);
    animation: tpPulse 0.8s ease-in-out infinite;
}
.tp-step.active .tp-label { color: var(--mint-700); }
.tp-step.done .tp-check {
    opacity: 1;
    transform: scale(1);
}
.tp-step.done .tp-icon { opacity: 0.3; }
.tp-step.done .tp-label { color: var(--mint-700); }
@keyframes tpPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

/* =========================================================
   V4: PET PICKER PANEL (vision multi-detect)
   ========================================================= */
.pet-picker-panel {
    max-width: 600px;
    margin: 4px auto;
    padding: 0 20px;
    animation: msgIn 0.38s cubic-bezier(0.22,1,0.36,1);
}
.pp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.pp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
    box-shadow: var(--sh-soft);
    width: 100%;
    text-align: left;
}
.pp-item:hover {
    border-color: var(--border-mint);
    transform: translateY(-2px);
    box-shadow: var(--sh-lift);
    background: var(--mint-50);
}
.pp-left { display: flex; flex-direction: column; gap: 3px; }
.pp-pet {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    text-transform: capitalize;
}
.pp-variant {
    font-size: 11px;
    font-weight: 700;
    color: var(--mint-700);
    background: var(--mint-100);
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
    letter-spacing: 0.04em;
}
.pp-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pp-offer {
    font-family: 'Instrument Serif', serif;
    font-size: 20px;
    color: var(--mint-700);
    line-height: 1;
}
.pp-offer span {
    font-size: 11px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    color: var(--text-3);
    margin-left: 3px;
}
.pp-right i {
    color: var(--text-4);
    font-size: 12px;
    transition: transform 0.2s ease;
}
.pp-item:hover .pp-right i {
    color: var(--mint-600);
    transform: translateX(4px);
}

/* =========================================================
   V4: CONFIRM BOX inside trade card
   ========================================================= */
.tic-confirm-box {
    margin-top: 18px;
    padding: 16px;
    background: linear-gradient(135deg, var(--mint-50), #FEF3C7);
    border: 1px solid var(--border-mint);
    border-radius: 14px;
}
.tic-confirm-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 12px;
}
.tic-confirm-title i { color: var(--mint-600); }
.tic-confirm-actions {
    display: flex;
    gap: 8px;
}
.tic-confirm-actions .btn {
    flex: 1;
    justify-content: center;
}
.tic-hidden { display: none !important; }

/* =========================================================
   V5: CONFIRMATION FLOW (inline, card içi)
   ========================================================= */
.tic-confirming { background: var(--mint-50); border-color: var(--border-mint); }

.tic-progress-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tic-prog-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
    opacity: 0.5;
}
.tic-prog-active {
    opacity: 1;
    border-color: var(--mint-300);
    box-shadow: 0 4px 14px rgba(16,185,129,0.12);
}
.tic-prog-done {
    opacity: 1;
    border-color: var(--border-mint);
    background: var(--mint-50);
}
.tic-prog-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-base);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--mint-600);
    font-size: 12px;
    transition: all 0.3s ease;
}
.tic-prog-active .tic-prog-icon {
    background: transparent;
}
.tic-prog-done .tic-prog-icon {
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: white;
    box-shadow: 0 3px 10px rgba(16,185,129,0.35);
}
.tic-prog-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-1);
}
.tic-prog-done .tic-prog-label { color: var(--mint-700); }

.tic-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--border-1);
    border-top-color: var(--mint-500);
    border-radius: 50%;
    animation: spinSpin 0.7s linear infinite;
}
@keyframes spinSpin { to { transform: rotate(360deg); } }

.tic-all-done {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--mint-100);
    border-radius: 12px;
    color: var(--mint-700);
    font-weight: 600;
    font-size: 13.5px;
    animation: msgIn 0.4s cubic-bezier(0.22,1,0.36,1);
}
.tic-all-done i {
    font-size: 18px;
    color: var(--mint-600);
}

/* =========================================================
   V4: MOBILE TWEAKS
   ========================================================= */
@media (max-width: 640px) {
    .trade-processing { margin: 6px 12px; padding: 14px 10px; }
    .tp-icon { width: 38px; height: 38px; font-size: 14px; }
    .tp-check { font-size: 14px; }
    .tp-label { font-size: 11px; }
    .pet-picker-panel { padding: 0 12px; }
    .pp-item { padding: 12px 14px; }
    .pp-pet { font-size: 13px; }
    .pp-offer { font-size: 18px; }
    .tic-confirm-actions { flex-direction: column; }
    .ds-box { padding: 24px 28px; min-width: 200px; }
    .ds-spinner, .ds-spinner svg, .ds-success { width: 64px; height: 64px; }
    .ds-count { font-size: 28px; }
}

/* =========================================================
   V5: USER SWITCHER & AUTH
   ========================================================= */
.user-switcher { position: relative; }
.user-avatar-sm {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(16,185,129,0.3);
}
.user-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    min-width: 240px;
    display: none;
    z-index: 100;
    animation: popIn 0.18s ease;
    overflow: hidden;
}
.user-switcher.open .user-menu { display: block; }
.user-menu-header {
    padding: 14px;
    background: linear-gradient(180deg, var(--mint-50), transparent);
    border-bottom: 1px solid var(--border-1);
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(16,185,129,0.3);
    flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 2px;
}
.user-stats {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text-1);
    text-align: left;
    transition: background 0.15s ease;
}
.user-menu-item:hover {
    background: var(--mint-50);
}
.user-menu-item i { color: var(--mint-600); font-size: 13px; width: 16px; text-align: center; }

.auth-btn {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(16,185,129,0.3);
}
.auth-btn:hover { background: linear-gradient(135deg, var(--mint-600), var(--mint-700)) !important; }

/* =========================================================
   V5: AUTH MODAL
   ========================================================= */
.auth-field { margin-bottom: 14px; }
.auth-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    margin-bottom: 6px;
}
.auth-password-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    background: var(--bg-base);
    font-family: inherit;
    font-size: 15px;
    color: var(--text-1);
    outline: none;
    transition: border 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.auth-password-input:focus {
    border-color: var(--mint-400);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.auth-error {
    color: var(--red-fg);
    background: var(--red-bg);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    min-height: 0;
    display: block;
}
.auth-error:empty { display: none; }

/* =========================================================
   V5: RESUMED CHAT NOTICE
   ========================================================= */
.resumed-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 auto 8px;
    background: var(--mint-100);
    color: var(--mint-700);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--sh-soft);
    align-self: center;
    animation: msgIn 0.4s cubic-bezier(0.22,1,0.36,1);
}
.resumed-notice i { font-size: 11px; }

/* Mobile adjustments for auth */
@media (max-width: 640px) {
    .user-menu { min-width: 220px; right: -20px; }
}

/* =========================================================
   V5.1: BUNDLE PREVIEW (çoklu pet, yan yana)
   ========================================================= */
.bundle-preview {
    max-width: 600px;
    width: calc(100% - 44px);
    margin: 2px auto 4px;
    margin-left: 44px;
    background: linear-gradient(180deg, #FFFFFF, var(--mint-50));
    border: 1px solid var(--border-mint);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.10);
    animation: msgIn 0.38s cubic-bezier(0.22,1,0.36,1);
}
.bp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-mint);
    background: rgba(255,255,255,0.55);
}
.bp-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mint-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bp-title i {
    font-size: 13px;
    color: var(--mint-600);
}
.bp-total {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.bp-total-value {
    font-family: 'Instrument Serif', serif;
    font-size: 26px;
    color: var(--mint-700);
    line-height: 1;
    font-weight: 400;
}
.bp-total-unit {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.05em;
}
.bp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    padding: 12px;
}
.bp-pet {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.18s ease;
}
.bp-pet:hover {
    border-color: var(--border-mint);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.08);
}
.bp-pet-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-pet-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.bp-variant {
    font-size: 10px;
    font-weight: 700;
    color: var(--mint-700);
    background: var(--mint-100);
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.bp-pet-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}
.bp-pet-price small {
    font-size: 9px;
    color: var(--text-3);
    margin-left: 2px;
}

@media (max-width: 640px) {
    .bundle-preview {
        margin-left: 0;
        width: 100%;
    }
    .bp-grid {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
    }
    .bp-total-value { font-size: 22px; }
}
@media (max-width: 400px) {
    .bp-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   DEALER v6 — Ek stiller: dark mode, history, profile, prices, auth UI
   ========================================================================= */

/* ---------- Dark Mode ---------- */
:root[data-theme="dark"] {
    --bg-base:       #0B1F17;
    --bg-soft:       #0F2A1E;
    --bg-card:       #14332A;
    --bg-glass:      rgba(20, 51, 42, 0.72);
    --bg-input:      #0F2A1E;

    --mint-50:       #064E3B;
    --mint-100:      #065F46;
    --mint-200:      #047857;
    --mint-300:      #059669;
    --mint-400:      #10B981;
    --mint-500:      #34D399;
    --mint-600:      #6EE7B7;
    --mint-700:      #A7F3D0;
    --mint-900:      #D1FAE5;

    --ice-bg:        #0C4A6E;
    --ice-fg:        #7DD3FC;
    --dark-bg:       #4C1D95;
    --dark-fg:       #C4B5FD;
    --gem-bg:        #78350F;
    --gem-fg:        #FCD34D;
    --red-bg:        #7F1D1D;
    --red-fg:        #FCA5A5;

    --text-1:        #ECFDF5;
    --text-2:        #A7F3D0;
    --text-3:        #6EE7B7;
    --text-4:        #047857;

    --border-1:      rgba(255, 255, 255, 0.08);
    --border-2:      rgba(255, 255, 255, 0.14);
    --border-mint:   rgba(52, 211, 153, 0.32);

    color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--bg-base); }
:root[data-theme="dark"] .mesh-bg .blob { opacity: 0.45; filter: blur(90px); }
:root[data-theme="dark"] .float-pet { opacity: 0.25; }

/* Otomatik (sistem) tema — data-theme yoksa prefers-color-scheme kullan */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-base:       #0B1F17;
        --bg-soft:       #0F2A1E;
        --bg-card:       #14332A;
        --bg-glass:      rgba(20, 51, 42, 0.72);
        --bg-input:      #0F2A1E;
        --mint-50:       #064E3B;
        --mint-100:      #065F46;
        --mint-200:      #047857;
        --mint-300:      #059669;
        --mint-400:      #10B981;
        --mint-500:      #34D399;
        --mint-600:      #6EE7B7;
        --mint-700:      #A7F3D0;
        --mint-900:      #D1FAE5;
        --ice-bg:        #0C4A6E;
        --ice-fg:        #7DD3FC;
        --dark-bg:       #4C1D95;
        --dark-fg:       #C4B5FD;
        --gem-bg:        #78350F;
        --gem-fg:        #FCD34D;
        --red-bg:        #7F1D1D;
        --red-fg:        #FCA5A5;
        --text-1:        #ECFDF5;
        --text-2:        #A7F3D0;
        --text-3:        #6EE7B7;
        --text-4:        #047857;
        --border-1:      rgba(255, 255, 255, 0.08);
        --border-2:      rgba(255, 255, 255, 0.14);
        --border-mint:   rgba(52, 211, 153, 0.32);
        color-scheme: dark;
    }
    :root:not([data-theme]) .mesh-bg .blob { opacity: 0.45; filter: blur(90px); }
    :root:not([data-theme]) .float-pet { opacity: 0.25; }
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-1);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 13px;
    transition: all 0.15s;
}
.theme-toggle:hover {
    border-color: var(--border-mint);
    color: var(--mint-600);
}
.theme-toggle .theme-icon { font-size: 14px; }

/* ---------- Page wrap (history / profile / prices) ---------- */
.page-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px 80px;
    position: relative;
    z-index: 1;
}
.page-head { margin-bottom: 28px; }
.page-title {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(34px, 6vw, 48px);
    color: var(--text-1);
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.page-title em {
    color: var(--mint-600);
    font-style: italic;
}
.page-sub {
    color: var(--text-3);
    font-size: 15px;
    margin: 0;
    max-width: 640px;
    line-height: 1.5;
}
.page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-3);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    transition: color 0.15s;
}
.page-back:hover { color: var(--mint-600); }

/* ---------- Stat cards ---------- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    transition: border-color 0.15s, transform 0.15s;
}
.stat-card:hover {
    border-color: var(--border-mint);
    transform: translateY(-1px);
}
.stat-label {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stat-value {
    font-family: 'Instrument Serif', serif;
    font-size: 32px;
    color: var(--text-1);
    font-weight: 400;
    line-height: 1;
}
.stat-value .unit {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: var(--text-3);
    font-weight: 600;
    margin-left: 4px;
    letter-spacing: 0.05em;
}
.stat-value .pet-emoji { margin-right: 6px; }
@media (max-width: 640px) {
    .stat-cards { grid-template-columns: 1fr; }
}

/* ---------- Filter & toolbar (history/prices) ---------- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
.chip-group {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    background: var(--bg-glass);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    backdrop-filter: blur(8px);
}
.chip {
    padding: 7px 14px;
    border: none;
    background: transparent;
    border-radius: var(--r-md);
    color: var(--text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.chip:hover { color: var(--text-1); }
.chip.active {
    background: var(--mint-500);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3);
}
:root[data-theme="dark"] .chip.active,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .chip.active { color: var(--bg-base); }
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px 10px 36px;
    background: var(--bg-input) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B8478' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 12px center;
    background-size: 16px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--mint-400); }

.sort-select {
    padding: 10px 32px 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B8478' stroke-width='2.2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

/* ---------- Trade list ---------- */
.trade-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.trade-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-left: 4px solid transparent;
    border-radius: var(--r-lg);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 20px;
    align-items: center;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.trade-card:hover {
    border-color: var(--border-mint);
    border-left-color: var(--border-mint);
    transform: translateY(-1px);
    box-shadow: var(--sh-lift);
}
.trade-card.st-pending   { border-left-color: var(--gem-fg); }
.trade-card.st-completed { border-left-color: var(--mint-500); }
.trade-card.st-cancelled { border-left-color: var(--text-4); }
.trade-card.st-problem   { border-left-color: var(--red-fg); }

.trade-main { min-width: 0; }
.trade-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.trade-pet {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-1);
}
.variant-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    background: var(--mint-100);
    color: var(--mint-700);
}
.variant-badge.v-FR  { background: var(--ice-bg);  color: var(--ice-fg); }
.variant-badge.v-NFR { background: var(--dark-bg); color: var(--dark-fg); }
.variant-badge.v-MFR { background: var(--gem-bg);  color: var(--gem-fg); }
.variant-badge.v-MR  { background: var(--red-bg);  color: var(--red-fg); }
.variant-badge .v-emoji { font-size: 11px; }

.trade-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--text-3);
    align-items: center;
}
.trade-meta code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
    background: var(--bg-soft);
    color: var(--text-2);
    padding: 1px 6px;
    border-radius: 6px;
}
.copy-btn {
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 11px;
    transition: color 0.15s, background 0.15s;
}
.copy-btn:hover { color: var(--mint-600); background: var(--bg-soft); }
.copy-btn.copied { color: var(--mint-600); }

.trade-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.trade-price {
    font-family: 'Instrument Serif', serif;
    font-size: 26px;
    color: var(--mint-600);
    font-weight: 400;
    line-height: 1;
}
.trade-price .usdt {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: var(--text-3);
    font-weight: 600;
    margin-left: 4px;
    letter-spacing: 0.5px;
}
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.status-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-pending   { background: var(--gem-bg);  color: var(--gem-fg); }
.status-completed { background: var(--mint-100); color: var(--mint-700); }
.status-cancelled { background: rgba(107, 132, 120, 0.15); color: var(--text-3); }
.status-problem   { background: var(--red-bg);  color: var(--red-fg); }

@media (max-width: 600px) {
    .trade-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .trade-right {
        text-align: left;
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        border-top: 1px solid var(--border-1);
        padding-top: 10px;
    }
}

/* ---------- Skeleton loader ---------- */
.skeleton-list { display: flex; flex-direction: column; gap: 12px; }
.skeleton-card {
    height: 82px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
}
.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--bg-soft), transparent);
    animation: skel-shimmer 1.4s infinite;
}
@keyframes skel-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-glass);
    border: 1px dashed var(--border-2);
    border-radius: var(--r-xl);
}
.empty-state .emoji { font-size: 48px; margin-bottom: 12px; }
.empty-state .empty-svg { width: 120px; height: 120px; margin: 0 auto 16px; opacity: 0.8; }
.empty-state h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 28px;
    color: var(--text-1);
    margin: 0 0 6px;
    font-weight: 400;
}
.empty-state p {
    color: var(--text-3);
    margin: 0 0 16px;
    font-size: 14px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.empty-cta {
    display: inline-block;
    padding: 10px 20px;
    background: var(--mint-500);
    color: #fff;
    text-decoration: none;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.15s, transform 0.15s;
}
.empty-cta:hover { background: var(--mint-600); transform: translateY(-1px); }
:root[data-theme="dark"] .empty-cta { color: var(--bg-base); }

/* ---------- Load more & pagination footer ---------- */
.load-more-wrap {
    text-align: center;
    margin-top: 24px;
}
.showing-info {
    color: var(--text-3);
    font-size: 13px;
    margin-top: 12px;
}
.btn-secondary {
    padding: 10px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    color: var(--text-1);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-secondary:hover {
    border-color: var(--mint-400);
    color: var(--mint-600);
}

/* ---------- Profile sayfası ---------- */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.profile-section {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    padding: 22px 24px;
}
.profile-section h2 {
    font-family: 'Instrument Serif', serif;
    font-size: 24px;
    color: var(--text-1);
    margin: 0 0 16px;
    font-weight: 400;
}
.profile-section.danger { border-color: rgba(185, 28, 28, 0.3); }
.profile-section.danger h2 { color: var(--red-fg); }
.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.form-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
}
.form-row input[type="text"],
.form-row input[type="password"] {
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.form-row input:focus { border-color: var(--mint-400); }
.form-row input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-soft);
}
.form-hint {
    font-size: 12px;
    color: var(--text-3);
}
.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}
.btn-primary {
    padding: 10px 22px;
    background: var(--mint-500);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.btn-primary:hover { background: var(--mint-600); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
:root[data-theme="dark"] .btn-primary { color: var(--bg-base); }

.btn-danger {
    padding: 10px 22px;
    background: transparent;
    color: var(--red-fg);
    border: 1px solid var(--red-fg);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-danger:hover { background: var(--red-bg); }

.form-feedback {
    font-size: 13px;
    margin-left: auto;
    font-weight: 500;
}
.form-feedback.ok   { color: var(--mint-600); }
.form-feedback.err  { color: var(--red-fg); }

.pw-wrap { position: relative; }
.pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 6px;
    font-size: 14px;
}
.pw-toggle:hover { color: var(--mint-600); }
.caps-warn {
    font-size: 12px;
    color: var(--gem-fg);
    margin-top: 4px;
    display: none;
}
.caps-warn.show { display: block; }

/* ---------- Prices tablosu ---------- */
.prices-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.prices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.prices-table thead th {
    background: var(--bg-soft);
    color: var(--text-2);
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-1);
}
.prices-table thead th:last-child { text-align: right; }
.prices-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-1);
    color: var(--text-1);
}
.prices-table tbody tr:last-child td { border-bottom: none; }
.prices-table tbody tr:hover { background: var(--bg-soft); }
.prices-table .td-price {
    text-align: right;
    font-family: 'Instrument Serif', serif;
    font-size: 20px;
    color: var(--mint-600);
}
.prices-table .td-price .usdt {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    color: var(--text-3);
    margin-left: 3px;
}
.prices-count {
    color: var(--text-3);
    font-size: 13px;
    margin: 8px 0;
}
@media (max-width: 600px) {
    .prices-table thead { display: none; }
    .prices-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-1);
    }
    .prices-table tbody td { padding: 0; border: none; }
    .prices-table tbody td:first-child { grid-column: 1 / 2; font-weight: 600; }
    .prices-table tbody td:nth-child(2) { grid-column: 1 / 2; }
    .prices-table tbody td:last-child { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }
}

/* ---------- User menu: yeni menü itemları ---------- */
.user-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-2);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.user-menu-link:hover { background: var(--bg-soft); color: var(--text-1); }
.user-menu-link i { width: 14px; opacity: 0.7; }

/* ---------- Auth modal: şifre göster/gizle + caps lock ---------- */
.auth-form .pw-wrap input { padding-right: 36px; }
.auth-form .remember-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-3);
    margin-top: 6px;
    cursor: pointer;
    user-select: none;
}
.auth-form .remember-row input { accent-color: var(--mint-500); }

/* ---------- Welcome: last trade preview ---------- */
.last-trade-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 18px auto 0;
    padding: 12px 16px;
    background: var(--bg-glass);
    border: 1px solid var(--border-mint);
    border-radius: var(--r-lg);
    backdrop-filter: blur(8px);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, border-color 0.15s;
}
.last-trade-preview:hover { transform: translateY(-1px); border-color: var(--mint-400); }
.ltp-left { flex: 1; min-width: 0; text-align: left; }
.ltp-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    font-weight: 600;
    margin-bottom: 2px;
}
.ltp-pet {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ltp-right { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ltp-price {
    font-family: 'Instrument Serif', serif;
    font-size: 20px;
    color: var(--mint-600);
    line-height: 1;
}
.ltp-see-all {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text-1);
    color: var(--bg-base);
    padding: 10px 18px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Sonuna kadar — history/profile sayfalarında topbar auth-related için ---------- */
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================================================
   MM2 — Rarity color tokens + badges + suggest icons
   Appended for the MM2 rebrand. The legacy .v-FR / .v-NFR /
   .v-MFR / .v-MR rules above are kept so old AM trades keep
   rendering correctly in history.
   ========================================================= */

:root {
    /* Rarity palette — backgrounds light, text vivid */
    --r-common-bg:    #F1F5F9;
    --r-common-fg:    #475569;

    --r-uncommon-bg:  #DCFCE7;
    --r-uncommon-fg:  #15803D;

    --r-rare-bg:      #DBEAFE;
    --r-rare-fg:      #1D4ED8;

    --r-legendary-bg: #FFEDD5;
    --r-legendary-fg: #C2410C;

    --r-godly-bg:     #FEF3C7;
    --r-godly-fg:     #B45309;

    --r-ancient-bg:   #FEE2E2;
    --r-ancient-fg:   #B91C1C;

    --r-vintage-bg:   #FCE7F3;
    --r-vintage-fg:   #BE185D;

    /* Chroma: animated rainbow (gradient below) */
    --r-chroma-fg:    #FFFFFF;
}

/* Rarity badges (UPPERCASE on the element) */
.variant-badge.v-COMMON    { background: var(--r-common-bg);    color: var(--r-common-fg); }
.variant-badge.v-UNCOMMON  { background: var(--r-uncommon-bg);  color: var(--r-uncommon-fg); }
.variant-badge.v-RARE      { background: var(--r-rare-bg);      color: var(--r-rare-fg); }
.variant-badge.v-LEGENDARY { background: var(--r-legendary-bg); color: var(--r-legendary-fg); }
.variant-badge.v-GODLY     { background: var(--r-godly-bg);     color: var(--r-godly-fg); }
.variant-badge.v-ANCIENT   { background: var(--r-ancient-bg);   color: var(--r-ancient-fg); }
.variant-badge.v-VINTAGE   { background: var(--r-vintage-bg);   color: var(--r-vintage-fg); }

/* Chroma: animated rainbow gradient */
.variant-badge.v-CHROMA {
    background: linear-gradient(
        90deg,
        #ff0080, #ff8c00, #ffd700,
        #00c853, #00b8d4, #651fff, #ff0080
    );
    background-size: 200% 100%;
    color: var(--r-chroma-fg);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    animation: chromaShift 2.8s linear infinite;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08),
                0 1px 8px rgba(255, 0, 128, 0.25);
}
@keyframes chromaShift {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Suggest icons — MM2 palette */
.suggest-icon.ic-chroma {
    background: linear-gradient(
        135deg,
        #ff0080, #ff8c00, #ffd700,
        #00c853, #00b8d4, #651fff
    );
    background-size: 200% 200%;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    animation: chromaShift 3s linear infinite;
}
.suggest-icon.ic-ancient   { background: var(--r-ancient-bg);   color: var(--r-ancient-fg); }
.suggest-icon.ic-vintage   { background: var(--r-vintage-bg);   color: var(--r-vintage-fg); }
.suggest-icon.ic-godly     { background: var(--r-godly-bg);     color: var(--r-godly-fg); }
.suggest-icon.ic-legendary { background: var(--r-legendary-bg); color: var(--r-legendary-fg); }

/* Dark-mode tweaks — reduce glare on light backgrounds */
:root[data-theme="dark"] .variant-badge.v-COMMON    { background: #1e293b; color: #cbd5e1; }
:root[data-theme="dark"] .variant-badge.v-UNCOMMON  { background: #064e3b; color: #86efac; }
:root[data-theme="dark"] .variant-badge.v-RARE      { background: #1e3a8a; color: #93c5fd; }
:root[data-theme="dark"] .variant-badge.v-LEGENDARY { background: #7c2d12; color: #fdba74; }
:root[data-theme="dark"] .variant-badge.v-GODLY     { background: #78350f; color: #fcd34d; }
:root[data-theme="dark"] .variant-badge.v-ANCIENT   { background: #7f1d1d; color: #fca5a5; }
:root[data-theme="dark"] .variant-badge.v-VINTAGE   { background: #831843; color: #f9a8d4; }

/* =========================================================
   PAGE-WRAP PAGES (history / profile / prices / terms / privacy)
   body/.app locked-height olduğu için alt sayfalar scroll edemiyordu.
   .app bir .page-wrap içeriyorsa yüksekliği bırak, scroll et.
   ========================================================= */
body:has(.page-wrap) {
    overflow: auto;
}
.app:has(> .page-wrap) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
}

/* :has() desteklemeyen eski tarayıcılar için fallback:
   .page-wrap gövdesine doğrudan scroll desteği ver */
.page-wrap {
    padding-bottom: 40px;
}

/* has-page-wrap class'ı _header.php tarafından body'ye ekleniyor.
   :has() desteği olmayan eski tarayıcılar için güvenli fallback. */
body.has-page-wrap {
    overflow: auto;
}
body.has-page-wrap .app {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
}

/* =========================================================
   CUSTOM SELECT
   Gerçek <select> hidden, üstüne custom UI.
   ========================================================= */
.custom-select {
    position: relative;
    display: inline-flex;
    font-size: 13.5px;
}
.custom-select > select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px; height: 1px;
}
.custom-select-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    color: var(--text-1);
    font: inherit; font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    white-space: nowrap;
}
.custom-select-trigger:hover {
    border-color: var(--mint-300);
    background: var(--mint-50);
}
.custom-select.open .custom-select-trigger {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.cs-caret {
    display: inline-flex;
    color: var(--text-3);
    transition: transform 0.18s ease;
}
.custom-select.open .cs-caret { transform: rotate(180deg); }

.custom-select-panel {
    position: absolute;
    top: calc(100% + 6px); left: 0;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    padding: 6px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}
.custom-select.open .custom-select-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s;
}
.custom-select-option {
    display: block; width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    text-align: left;
    font: inherit;
    color: var(--text-1);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s ease, color 0.1s ease;
}
.custom-select-option:hover,
.custom-select-option:focus {
    background: var(--mint-50);
    color: var(--mint-700);
    outline: none;
}
.custom-select-option.selected {
    background: var(--mint-100);
    color: var(--mint-700);
    font-weight: 700;
}
.custom-select-panel::-webkit-scrollbar { width: 6px; }
.custom-select-panel::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* Dark mode */
:root[data-theme="dark"] .custom-select-trigger:hover {
    background: rgba(16,185,129,0.12);
}

/* =========================================================
   PAGE TRANSITION
   theme.js :root'a 'page-enter' / 'page-leave' class'ı ekler.
   Sayfalar arası yumuşak fade.
   ========================================================= */
:root.page-enter body {
    opacity: 0;
    transform: translateY(6px);
}
body {
    transition: opacity 0.22s ease, transform 0.22s ease;
}
:root.page-leave body {
    opacity: 0;
    transform: translateY(-6px);
}

/* Kullanıcı reduced motion tercih ettiyse geçişleri kapat */
@media (prefers-reduced-motion: reduce) {
    :root.page-enter body,
    :root.page-leave body {
        opacity: 1;
        transform: none;
    }
    body { transition: none; }
}

/* Restore edilen session-bound butonlar — pasif görünüm */
.is-stale {
    opacity: 0.55 !important;
    cursor: default !important;
    pointer-events: none !important;
    filter: grayscale(0.25);
}

/* =========================================================
   ADMIN DASHBOARD + Trade status timeline
   ========================================================= */

/* Login card */
.admin-login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: var(--bg-base);
}
.admin-login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    padding: 32px 28px;
    width: 100%; max-width: 360px;
}
.admin-login-card h1 {
    margin: 0 0 18px;
    font-size: 22px; font-weight: 800;
    color: var(--mint-700);
}
.admin-login-card label {
    display: block;
    font-size: 13px; font-weight: 600;
    color: var(--text-2);
    margin-bottom: 14px;
}
.admin-login-card input {
    width: 100%; margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    font: inherit;
    background: var(--bg-input);
    color: var(--text-1);
}
.admin-login-card button {
    width: 100%; margin-top: 8px;
    padding: 11px;
    border-radius: var(--r-md);
    border: none;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: white; font-weight: 700; cursor: pointer;
}
.admin-warn, .admin-err {
    padding: 10px 12px; border-radius: var(--r-sm);
    font-size: 13px; margin-bottom: 12px;
}
.admin-warn { background: #FEF3C7; color: #92400E; }
.admin-err  { background: #FEE2E2; color: #B91C1C; }

/* Admin shell */
.admin-body { background: var(--bg-base); }
.admin-shell {
    max-width: 1100px; margin: 0 auto;
    padding: 20px;
}
.admin-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.admin-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 800;
    color: var(--text-1);
}
.admin-brand i { color: var(--mint-600); }
.admin-actions { display: flex; gap: 10px; }

/* Stats */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.astat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
}
.astat-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.astat-val   { font-size: 24px; font-weight: 800; color: var(--text-1); }
.astat-warn  { background: #FEF3C7; border-color: #FDE68A; }
.astat-warn .astat-val { color: #B45309; }
.astat-hot   { background: #FEE2E2; border-color: #FCA5A5; }
.astat-hot .astat-val { color: #B91C1C; }

@media (max-width: 700px) {
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Filter tabs */
.admin-filters {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.admin-filter {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    color: var(--text-2); font-weight: 600; font-size: 13px;
    text-decoration: none;
}
.admin-filter:hover { border-color: var(--mint-300); }
.admin-filter.active {
    background: var(--mint-500);
    color: white; border-color: var(--mint-500);
}

/* Trade cards */
.admin-trades { display: flex; flex-direction: column; gap: 12px; }
.admin-trade {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 16px 18px;
}
.at-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
    flex-wrap: wrap;
}
.at-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-title strong { font-size: 16px; color: var(--text-1); }
.at-price { font-size: 20px; font-weight: 800; color: var(--mint-700); }
.at-price small { font-size: 12px; color: var(--text-3); font-weight: 500; }
.at-support-flag {
    background: #FEE2E2; color: #B91C1C;
    padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.at-meta {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-size: 12.5px; color: var(--text-3);
    align-items: center;
    margin-bottom: 10px;
}
.at-meta i { margin-right: 4px; opacity: 0.6; }
.at-meta code {
    background: var(--bg-soft); padding: 1px 6px; border-radius: 4px;
    color: var(--text-2); font-size: 12px;
}
.status-pill {
    padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    background: var(--bg-soft); color: var(--text-3);
}
.status-pill.st-pending   { background: #FEF3C7; color: #B45309; }
.status-pill.st-completed { background: #D1FAE5; color: #047857; }
.status-pill.st-cancelled { background: var(--bg-soft); color: var(--text-3); }
.status-pill.st-problem   { background: #FEE2E2; color: #B91C1C; }

/* Timeline (admin + user history) */
.at-timeline, .trade-pills {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 10px 0; margin: 8px 0;
    border-top: 1px dashed var(--border-1);
    border-bottom: 1px dashed var(--border-1);
}
.tl-step {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--bg-soft);
    border-radius: 999px;
    font-size: 11.5px; color: var(--text-3); font-weight: 600;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tl-step i { font-size: 10px; }
.tl-step.done {
    background: var(--mint-100);
    color: var(--mint-700);
    opacity: 1;
}
.tl-step.err {
    background: #FEE2E2; color: #B91C1C;
    opacity: 1;
}

/* Admin reply on user side */
.trade-admin-reply {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--mint-50);
    border-left: 3px solid var(--mint-500);
    padding: 8px 12px;
    margin-top: 8px;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 13px; color: var(--text-2);
}
.trade-admin-reply i { color: var(--mint-600); margin-top: 2px; }

/* Admin trade notes/reply */
.at-notes, .at-reply {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-soft);
    border-radius: var(--r-sm);
    font-size: 13px; color: var(--text-2);
    line-height: 1.5;
}
.at-notes strong, .at-reply strong { color: var(--text-1); }

/* Action buttons */
.at-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-1);
}
.btn-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-1);
    background: var(--bg-card);
    color: var(--text-2);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}
.btn-chip:hover:not(:disabled) {
    border-color: var(--mint-400);
    color: var(--mint-700);
    background: var(--mint-50);
}
.btn-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-chip.btn-ok      { color: #047857; border-color: #A7F3D0; }
.btn-chip.btn-ok:hover:not(:disabled)    { background: #D1FAE5; }
.btn-chip.btn-warn    { color: #B45309; border-color: #FDE68A; }
.btn-chip.btn-warn:hover:not(:disabled)  { background: #FEF3C7; }
.btn-chip.btn-danger  { color: #B91C1C; border-color: #FCA5A5; }
.btn-chip.btn-danger:hover:not(:disabled){ background: #FEE2E2; }

.admin-empty {
    padding: 40px 20px; text-align: center;
    color: var(--text-3); font-size: 14px;
    background: var(--bg-card);
    border: 1px dashed var(--border-1);
    border-radius: var(--r-md);
}

.btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    color: var(--text-2); font-weight: 600; font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-soft); color: var(--text-1); }

/* Dark mode overrides */
:root[data-theme="dark"] .astat-warn { background: #422006; border-color: #78350f; }
:root[data-theme="dark"] .astat-warn .astat-val { color: #fcd34d; }
:root[data-theme="dark"] .astat-hot  { background: #450a0a; border-color: #7f1d1d; }
:root[data-theme="dark"] .astat-hot .astat-val { color: #fca5a5; }
:root[data-theme="dark"] .at-support-flag { background: #7f1d1d; color: #fca5a5; }

/* Support button in composer */
#support-btn i { color: var(--mint-600); }
#support-btn:hover i { color: var(--mint-700); }
#support-btn:disabled { opacity: 0.5; }

/* Item picker button — MM2 logo */
.picker-logo {
    width: 20px; height: 20px;
    object-fit: contain;
    display: block;
}
#pet-picker-btn { padding: 6px; }
#pet-picker-btn.active { background: var(--mint-50); }

/* =========================================================
   SUPPORT CHAT DRAWER (user + admin, aynı stil)
   ========================================================= */
.chat-drawer {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: min(440px, 100%);
    background: var(--bg-card);
    border-left: 1px solid var(--border-1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.12);
    display: flex; flex-direction: column;
    transform: translateX(110%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
}
.chat-drawer.open { transform: translateX(0); }

.chat-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 1000;
}
.chat-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.chat-drawer-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-1);
    gap: 10px;
}
.chat-drawer-title {
    font-size: 16px; font-weight: 800;
    color: var(--text-1);
    display: flex; align-items: center; gap: 8px;
}
.chat-drawer-title i { color: var(--mint-600); }
.chat-drawer-sub {
    font-size: 12.5px; color: var(--text-3);
    margin-top: 3px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.chat-drawer-sub code {
    background: var(--bg-soft);
    padding: 1px 6px; border-radius: 4px;
    font-size: 11.5px; color: var(--text-2);
}
.chat-drawer-ai-state {
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    background: #FEE2E2; color: #B91C1C;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.chat-drawer-ai-state:not(.paused) {
    background: #D1FAE5; color: #047857;
}
.chat-drawer-actions { display: flex; gap: 6px; }

.chat-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg-base);
}
.cd-empty {
    text-align: center; color: var(--text-3);
    font-size: 13px; padding: 40px 20px;
}

.cd-msg {
    display: flex; flex-direction: column;
    max-width: 82%;
}
.cd-msg-user {
    align-self: flex-end; align-items: flex-end;
}
.cd-msg-admin {
    align-self: flex-start; align-items: flex-start;
}
.cd-msg-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px; line-height: 1.45;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.cd-msg-user .cd-msg-bubble {
    background: var(--mint-500);
    color: white;
    border-bottom-right-radius: 4px;
}
.cd-msg-admin .cd-msg-bubble {
    background: var(--bg-card);
    color: var(--text-1);
    border: 1px solid var(--border-1);
    border-bottom-left-radius: 4px;
}
.cd-msg-time {
    font-size: 10.5px; color: var(--text-3);
    margin-top: 3px; padding: 0 6px;
}

.chat-drawer-composer {
    display: flex; gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border-1);
    background: var(--bg-card);
}
.chat-drawer-composer textarea {
    flex: 1; resize: none;
    padding: 10px 12px;
    border: 1px solid var(--border-1);
    border-radius: 12px;
    font: inherit; font-size: 13.5px;
    background: var(--bg-input);
    color: var(--text-1);
    max-height: 120px;
    line-height: 1.4;
}
.chat-drawer-composer textarea:focus {
    outline: none;
    border-color: var(--mint-400);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.chat-drawer-composer .btn-primary {
    padding: 10px 16px;
    min-width: 48px;
    border-radius: 12px;
    background: var(--mint-500);
    color: white; border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.chat-drawer-composer .btn-primary:hover { background: var(--mint-600); }

/* User open-form (ticket açmadan önceki form) */
.usd-open-form {
    padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg-base);
    flex: 1;
}
.usd-open-form label {
    font-size: 13px; font-weight: 600;
    color: var(--text-2);
}
.usd-open-form textarea {
    padding: 12px 14px;
    border: 1px solid var(--border-1);
    border-radius: 12px;
    font: inherit; font-size: 14px; line-height: 1.5;
    background: var(--bg-card);
    color: var(--text-1);
    resize: vertical;
    min-height: 120px;
}
.usd-open-form textarea:focus {
    outline: none; border-color: var(--mint-400);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.usd-open-form .btn-primary {
    padding: 11px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: white; font-weight: 700; border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.usd-open-err {
    padding: 10px 12px;
    border-radius: 10px;
    background: #FEE2E2; color: #B91C1C;
    font-size: 13px;
}

/* Chat dot on admin "Chat" button (support_requested=1 olan trade'ler) */
.btn-chip.btn-chat { position: relative; }
.chat-dot {
    position: absolute;
    top: 3px; right: 3px;
    width: 8px; height: 8px;
    background: #EF4444;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.2); }
}

/* =========================================================
   MOBILE RESPONSIVE — history, profile, prices, admin
   ========================================================= */
@media (max-width: 768px) {
    /* Drawer full-screen */
    .chat-drawer { width: 100%; border-left: none; }

    /* History / profile / prices page wrap */
    .page-wrap { padding: 16px 14px; }
    .page-head h1 { font-size: 28px; }
    .page-head p  { font-size: 14px; }

    /* History toolbar */
    .trade-toolbar, .toolbar {
        flex-wrap: wrap; gap: 8px;
    }
    .chip-group {
        flex-wrap: wrap;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .chip { font-size: 12.5px; padding: 6px 12px; white-space: nowrap; }

    /* History trade cards */
    .trade-card {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
    }
    .trade-main { width: 100%; }
    .trade-right {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        display: flex; flex-direction: row;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed var(--border-1);
    }
    .trade-pills {
        gap: 4px;
    }
    .tl-step {
        font-size: 10.5px; padding: 3px 8px;
    }
    .tl-step i { font-size: 9px; }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stat-card { padding: 12px !important; }
    .stat-val { font-size: 20px !important; }
    .stat-label { font-size: 11px !important; }

    /* Admin dashboard */
    .admin-shell { padding: 14px 12px; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .astat { padding: 10px 12px; }
    .astat-val { font-size: 20px; }
    .admin-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .admin-filter { flex-shrink: 0; font-size: 12.5px; padding: 6px 12px; }
    .admin-trade { padding: 14px; }
    .at-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .at-price { font-size: 22px; }
    .at-meta { gap: 4px 10px; font-size: 11.5px; }
    .at-actions { gap: 6px; }
    .btn-chip { font-size: 11.5px; padding: 5px 10px; }

    /* Prices page table → stacked cards */
    .prices-table { font-size: 13px; }
    .prices-table th, .prices-table td { padding: 8px 10px; }

    /* Composer */
    .composer-box { padding: 10px 12px !important; gap: 8px; }
    .composer-tool { min-width: 36px; min-height: 36px; }
    #pet-picker-btn { padding: 4px; }
    .picker-logo { width: 18px; height: 18px; }

    /* Hide float-pets on mobile (perf + visual noise) */
    .float-pet { display: none; }

    /* Header */
    .topbar { padding: 10px 14px; }
    .brand { font-size: 15px; }
    .lang-switcher .trigger, .user-switcher .trigger {
        padding: 6px 10px; font-size: 12px;
    }
}

@media (max-width: 480px) {
    /* Very small phones */
    .page-head h1 { font-size: 24px; }
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .trade-meta { gap: 3px 8px; font-size: 11px; }
    .trade-price { font-size: 18px; }
    .variant-badge { font-size: 10px; padding: 2px 7px; }
    .at-title strong { font-size: 14px; }

    /* Composer tighter */
    .chat-input-wrap, .composer-wrap {
        padding: 8px 10px;
    }
}

/* =========================================================
   SUPPORT FAB (floating action button, sağ alt)
   ========================================================= */
.support-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.35),
                0 3px 8px rgba(16, 185, 129, 0.22);
    cursor: pointer;
    z-index: 900;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.support-fab:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 30px rgba(16, 185, 129, 0.42),
                0 4px 10px rgba(16, 185, 129, 0.28);
}
.support-fab:active { transform: translateY(0) scale(0.97); }
.support-fab i { pointer-events: none; }

/* Unread badge */
.support-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #EF4444;
    color: #fff;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-base);
    line-height: 1;
    animation: badge-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.support-fab.has-unread {
    animation: fab-pulse 1.6s ease-in-out infinite;
}
@keyframes fab-pulse {
    0%, 100% { box-shadow: 0 10px 25px rgba(16, 185, 129, 0.35); }
    50%      { box-shadow: 0 10px 25px rgba(239, 68, 68, 0.45), 0 0 0 8px rgba(239, 68, 68, 0.12); }
}
@keyframes badge-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

@media (max-width: 600px) {
    .support-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 19px; }
}

/* =========================================================
   TRADE PROCESSING — daha şık step animasyonu
   ========================================================= */
.trade-processing {
    margin: 16px auto;
    padding: 24px 20px;
    max-width: 460px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    animation: tp-enter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tp-enter {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tp-steps {
    display: flex;
    gap: 8px;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
}
.tp-steps::before {
    content: '';
    position: absolute;
    left: 28px; right: 28px;
    top: 22px;
    height: 2px;
    background: var(--border-1);
    z-index: 0;
}
.tp-step {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    position: relative; z-index: 1;
}
.tp-icon-wrap {
    position: relative;
    width: 46px; height: 46px;
}
.tp-icon, .tp-check {
    position: absolute; inset: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.tp-icon {
    background: var(--bg-soft);
    color: var(--text-3);
    font-size: 17px;
    border: 2px solid var(--border-1);
    opacity: 1;
    transform: scale(1);
}
.tp-check {
    background: var(--mint-500);
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transform: scale(0.4);
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}
.tp-step.active .tp-icon {
    background: var(--mint-50);
    color: var(--mint-600);
    border-color: var(--mint-400);
    animation: tp-pulse 1.2s ease-in-out infinite;
}
@keyframes tp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.0); }
}
.tp-step.done .tp-icon {
    opacity: 0;
    transform: scale(0.5);
}
.tp-step.done .tp-check {
    opacity: 1;
    transform: scale(1);
}
.tp-label {
    font-size: 12px; font-weight: 600;
    color: var(--text-3);
    text-align: center;
    transition: color 0.3s ease;
}
.tp-step.active .tp-label { color: var(--mint-700); font-weight: 700; }
.tp-step.done   .tp-label { color: var(--text-2); }

/* Done state fade out — kart silinirken */
.trade-processing.tp-done {
    animation: tp-fade 0.35s ease forwards;
}
@keyframes tp-fade {
    to { opacity: 0; transform: scale(0.98) translateY(-4px); max-height: 0; padding: 0; margin: 0; border: 0; }
}

@media (max-width: 520px) {
    .tp-icon-wrap { width: 38px; height: 38px; }
    .tp-icon, .tp-check { font-size: 14px; }
    .tp-steps::before { left: 22px; right: 22px; top: 18px; }
    .tp-label { font-size: 10.5px; }
}

/* =========================================================
   PAYMENT METHOD CARDS (Deal Ready card içinde)
   ========================================================= */
.pm-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0 6px;
}
.pm-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 2px solid var(--border-1);
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
    transition: all 0.16s ease;
    font: inherit;
    color: var(--text-1);
}
.pm-card:hover {
    border-color: var(--mint-300);
    background: var(--mint-50);
}
.pm-card.selected {
    border-color: var(--mint-500);
    background: var(--mint-50);
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.18);
}
.pm-card-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--mint-100);
    color: var(--mint-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.pm-card.selected .pm-card-icon {
    background: var(--mint-500);
    color: #fff;
}
.pm-card-body {
    flex: 1; min-width: 0;
}
.pm-card-label {
    font-size: 14px; font-weight: 700;
    color: var(--text-1);
    line-height: 1.2;
}
.pm-card-net {
    font-size: 11.5px; color: var(--text-3);
    margin-top: 2px;
    font-weight: 500;
}
.pm-card-radio {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.16s ease;
}
.pm-card-radio i {
    font-size: 8px;
    color: transparent;
    transition: color 0.16s ease;
}
.pm-card.selected .pm-card-radio {
    border-color: var(--mint-500);
    background: var(--mint-500);
}
.pm-card.selected .pm-card-radio i {
    color: #fff;
}

/* Address reveal box */
.pm-address-box {
    margin-top: 8px;
    padding: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    animation: pm-addr-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pm-addr-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pm-addr-hint {
    font-size: 12.5px; color: var(--text-2);
    margin-bottom: 8px;
    font-weight: 600;
}
.pm-addr-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    word-break: break-all;
}
.pm-addr {
    flex: 1; min-width: 0;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12.5px;
    color: var(--text-1);
    word-break: break-all;
}
.pm-addr-row .tic-copy {
    flex-shrink: 0;
    padding: 6px 8px;
    background: var(--mint-50);
    color: var(--mint-700);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s ease;
}
.pm-addr-row .tic-copy:hover { background: var(--mint-100); }
.pm-addr-empty {
    padding: 10px 12px;
    background: #FEF3C7;
    color: #92400E;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
}

@media (max-width: 520px) {
    .pm-cards { grid-template-columns: 1fr; gap: 8px; }
    .pm-card { padding: 10px 12px; }
    .pm-card-icon { width: 32px; height: 32px; font-size: 14px; }
    .pm-card-label { font-size: 13.5px; }
}

/* Dark mode */
:root[data-theme="dark"] .pm-addr-empty { background: #422006; color: #fcd34d; }

/* FAB icon rengi garantile (inherit ile override olmasın) */
.support-fab, .support-fab i { color: #ffffff !important; }

/* Support drawer başlığı revize — ikon daha büyük ve solda */
.chat-drawer-head .chat-drawer-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px;
}
.chat-drawer-head .chat-drawer-title i.fa-life-ring,
.chat-drawer-head .chat-drawer-title i.fa-headset {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    border-radius: 10px;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* =========================================================
   SUPPORT DRAWER v2 — Sol taraftan, temiz, modern
   (Eski sağ-taraf tanımlarını override eder)
   ========================================================= */
.chat-drawer {
    position: fixed;
    left: 0;          /* SOL */
    right: auto;
    top: 0;
    bottom: 0;
    width: min(420px, 100%);
    background: var(--bg-card);
    border-left: none;
    border-right: 1px solid var(--border-1);
    box-shadow: 10px 0 30px rgba(0,0,0,0.12);
    display: flex; flex-direction: column;
    transform: translateX(-110%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1001;
}
.chat-drawer.open { transform: translateX(0); }

/* Admin tarafı için hâlâ sağdan gelmeli — user-drawer class user tarafı */
.chat-drawer:not(.user-drawer) {
    left: auto; right: 0;
    border-right: none;
    border-left: 1px solid var(--border-1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.12);
    transform: translateX(110%);
}
.chat-drawer:not(.user-drawer).open { transform: translateX(0); }

/* Sistem mesajı (ticket closed) */
.cd-system {
    align-self: center;
    background: #FEF3C7;
    color: #92400E;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px auto;
    max-width: 82%;
    text-align: center;
}
.cd-system i { font-size: 12px; }

:root[data-theme="dark"] .cd-system {
    background: #422006;
    color: #fcd34d;
}

/* FAB sol alt (drawer sol taraftan geldiği için FAB da sola) */
.support-fab {
    left: 22px;
    right: auto;
}
@media (max-width: 600px) {
    .support-fab { left: 16px; right: auto; }
}

/* Chat drawer içindeki mesaj baloncukları daha modern */
.cd-msg-bubble {
    padding: 11px 15px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 18px;
    max-width: 100%;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.cd-msg-user .cd-msg-bubble {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    border-bottom-right-radius: 6px;
}
.cd-msg-admin .cd-msg-bubble {
    background: var(--bg-card);
    color: var(--text-1);
    border: 1px solid var(--border-1);
    border-bottom-left-radius: 6px;
}
.cd-msg-time {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 4px;
    padding: 0 8px;
    opacity: 0.8;
}
.cd-msg {
    margin-bottom: 4px;
    animation: cd-msg-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cd-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   PAYMENT SELECTION CARD (inline in chat, before deal ready)
   ========================================================= */
.payment-select-card {
    margin: 16px auto;
    padding: 20px;
    max-width: 520px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    animation: psc-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes psc-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.psc-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px;
}
.psc-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}
.psc-title h3 {
    margin: 0 0 2px;
    font-size: 17px; font-weight: 800;
    color: var(--text-1);
}
.psc-sub {
    font-size: 12.5px; color: var(--text-3);
    line-height: 1.4;
}
.psc-footer {
    margin-top: 16px;
    display: flex; justify-content: flex-end;
}
.psc-footer .btn-primary {
    padding: 10px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex; align-items: center; gap: 8px;
}
.psc-footer .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3);
}
.psc-footer .btn-primary:disabled {
    opacity: 0.5; cursor: not-allowed;
    background: var(--bg-soft);
    color: var(--text-3);
}

/* =========================================================
   PAYMENT READONLY DISPLAY (deal ready içinde, seçilmiş method)
   ========================================================= */
.pm-readonly {
    margin-top: 10px;
}
.pm-ro-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--mint-50);
    border: 1px solid var(--mint-200);
    border-radius: var(--r-md);
}
.pm-ro-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--mint-500);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.pm-ro-body { flex: 1; min-width: 0; }
.pm-ro-label {
    font-size: 14px; font-weight: 700;
    color: var(--text-1);
}
.pm-ro-net {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}
.pm-ro-addr {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-1);
}
.pm-ro-addr-label {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.pm-ro-addr-val {
    display: block;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 13px;
    color: var(--text-1);
    word-break: break-all;
    line-height: 1.4;
}
.pm-ro-pending {
    margin-top: 10px;
    padding: 10px 14px;
    background: #FEF3C7;
    color: #92400E;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    display: flex; align-items: flex-start; gap: 8px;
    line-height: 1.45;
}
.pm-ro-pending i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #B45309;
}

:root[data-theme="dark"] .pm-ro-head {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.22);
}
:root[data-theme="dark"] .pm-ro-pending {
    background: #422006;
    color: #fcd34d;
}
:root[data-theme="dark"] .pm-ro-pending i {
    color: #f59e0b;
}

/* Mobile */
@media (max-width: 520px) {
    .payment-select-card { padding: 16px; max-width: none; }
    .psc-header { gap: 10px; }
    .psc-icon { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
    .psc-title h3 { font-size: 15px; }
    .pm-ro-head { padding: 12px; }
    .pm-ro-icon { width: 36px; height: 36px; }
}

/* Admin chat state pill — closed variant */
.chat-drawer-ai-state.closed {
    background: var(--bg-soft);
    color: var(--text-3);
}


/* =========================================================
   LANDING PAGE — full-width, _header.php ile uyumlu
   ========================================================= */

/* body.has-page-wrap > main.app ortak wrapper; landing'de override */
body.has-page-wrap main.app:has(.landing-wrapper) {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100%;
}
.landing-wrapper {
    width: 100%;
}

/* Section head — tüm section'ların ortak başlığı */
.lp-section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
    padding: 0 20px;
}
.lp-section-head h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--text-1);
}
.lp-section-head p {
    font-size: 16px;
    color: var(--text-2);
    margin: 0;
}

/* =========================================================
   HERO — 2 sütun: sol metin + CTA, sağ chat mockup
   ========================================================= */
.lp-hero {
    position: relative;
    padding: 60px clamp(20px, 5vw, 80px) 80px;
    overflow: hidden;
}
.lp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(16, 185, 129, 0.12), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(16, 185, 129, 0.08), transparent 50%);
    pointer-events: none;
}
.lp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}
@media (max-width: 960px) {
    .lp-hero-grid { grid-template-columns: 1fr; }
    .lp-hero-right { display: none; }
}

.lp-hero-left { min-width: 0; }
.lp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--mint-200);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mint-700);
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.lp-hero-dot {
    width: 8px; height: 8px;
    background: var(--mint-500);
    border-radius: 50%;
    animation: lp-pulse 2s infinite;
}
@keyframes lp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.lp-hero-title {
    font-size: clamp(36px, 5.5vw, 64px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 20px;
    color: var(--text-1);
    animation: lp-fadeup 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.lp-hero-sub {
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--text-2);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 0 32px;
    animation: lp-fadeup 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
@keyframes lp-fadeup {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lp-hero-cta {
    display: flex;
    gap: 14px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    animation: lp-fadeup 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.lp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.32);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(16, 185, 129, 0.45);
}
.lp-btn-primary.lp-btn-xl {
    padding: 18px 40px;
    font-size: 16px;
}
.lp-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    background: var(--bg-card);
    color: var(--text-1) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    border: 1px solid var(--border-1);
    border-radius: 14px;
    transition: all 0.2s ease;
}
.lp-btn-ghost:hover {
    border-color: var(--mint-400);
    transform: translateY(-1px);
}
.lp-btn-discord {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    background: #5865F2;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 12px;
    margin-left: 10px;
    transition: all 0.15s;
}
.lp-btn-discord:hover { background: #4752C4; transform: translateY(-1px); }

.lp-hero-trust {
    display: flex;
    gap: clamp(24px, 4vw, 48px);
    flex-wrap: wrap;
    animation: lp-fadeup 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
.lp-trust-item {}
.lp-trust-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    line-height: 1;
}
.lp-trust-unit { font-size: 14px; font-weight: 600; color: var(--text-3); margin-left: 3px; }
.lp-trust-lbl {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
    font-weight: 700;
}

/* HERO RIGHT — Chat mockup */
.lp-hero-right {
    position: relative;
    min-height: 440px;
}
.lp-chat-mockup {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 10px 20px rgba(0,0,0,0.06);
    animation: lp-mockup-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: center;
}
@keyframes lp-mockup-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lp-chat-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--mint-50), var(--bg-card));
    border-bottom: 1px solid var(--border-1);
}
.lp-chat-avatar {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.lp-chat-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--text-1);
}
.lp-chat-status {
    font-size: 12px;
    color: var(--mint-600);
    display: flex; align-items: center; gap: 5px;
    font-weight: 600;
}
.lp-chat-dot {
    width: 7px; height: 7px;
    background: var(--mint-500);
    border-radius: 50%;
}
.lp-chat-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 260px;
}
.lp-chat-msg {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 14px;
    max-width: 85%;
    animation: lp-chat-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lp-chat-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    border-bottom-right-radius: 4px;
    animation-delay: 0.4s;
}
.lp-chat-msg-bot {
    align-self: flex-start;
    background: var(--bg-soft);
    color: var(--text-1);
    border-bottom-left-radius: 4px;
    animation-delay: 0.8s;
}
.lp-chat-msg:nth-child(3) { animation-delay: 1.2s; }
.lp-chat-msg:nth-child(4) { animation-delay: 1.6s; }
@keyframes lp-chat-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lp-chat-typing {
    align-self: flex-start;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    display: flex; gap: 4px;
    animation: lp-chat-in 0.5s both;
    animation-delay: 2s;
}
.lp-chat-typing span {
    width: 6px; height: 6px;
    background: var(--text-3);
    border-radius: 50%;
    animation: lp-typing 1.4s infinite;
}
.lp-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.lp-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lp-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* Floating icons around mockup */
.lp-float {
    position: absolute;
    width: 54px; height: 54px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    animation: lp-float-y 5s ease-in-out infinite;
    z-index: 2;
}
.lp-float-1 { top: -10px; right: -10px; color: var(--mint-500); animation-delay: 0s; }
.lp-float-2 { top: 50%; left: -24px; color: #EF4444; animation-delay: 1.5s; }
.lp-float-3 { bottom: -10px; right: 15%; color: #F59E0B; animation-delay: 3s; }
@keyframes lp-float-y {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-14px) rotate(4deg); }
}

/* =========================================================
   STATS BAR — 4 metrik yan yana
   ========================================================= */
.lp-stats-bar {
    padding: 0 clamp(20px, 4vw, 60px);
    margin: -20px auto 0;
    max-width: 1400px;
    position: relative;
    z-index: 5;
}
.lp-stats-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 20px clamp(20px, 3vw, 40px);
}
.lp-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-right: 1px solid var(--border-1);
}
.lp-stat:last-child { border-right: none; }
.lp-stat > i {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--mint-50);
    color: var(--mint-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.lp-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.lp-stat-lbl {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 3px;
}
@media (max-width: 900px) {
    .lp-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 16px; }
    .lp-stat { border-right: none; padding: 10px; }
}

/* =========================================================
   HOW IT WORKS — 4 adım
   ========================================================= */
.lp-how {
    padding: 90px clamp(20px, 5vw, 80px);
}
.lp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}
.lp-step {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    padding: 28px 24px;
    position: relative;
    transition: all 0.25s ease;
}
.lp-step:hover {
    transform: translateY(-4px);
    border-color: var(--mint-300);
    box-shadow: 0 14px 32px rgba(0,0,0,0.08);
}
.lp-step-n {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 40px;
    font-weight: 800;
    color: var(--mint-100);
    line-height: 1;
    letter-spacing: -0.02em;
    user-select: none;
}
.lp-step-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.25);
}
.lp-step-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.lp-step-desc {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

/* =========================================================
   FEATURES — 3 kart
   ========================================================= */
.lp-features {
    padding: 60px clamp(20px, 5vw, 80px);
    background: var(--bg-soft);
}
.lp-feats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}
.lp-feat {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    padding: 30px;
    transition: all 0.25s ease;
}
.lp-feat:hover {
    transform: translateY(-4px);
    border-color: var(--mint-300);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.lp-feat-icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.25);
}
.lp-feat h3 {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--text-1);
}
.lp-feat p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

/* =========================================================
   PAYMENT METHODS
   ========================================================= */
.lp-payments {
    padding: 80px clamp(20px, 5vw, 80px);
}
.lp-pay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}
.lp-pay-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-1);
    border-radius: 16px;
    transition: all 0.2s ease;
}
.lp-pay-card:hover {
    border-color: var(--mint-400);
    background: var(--mint-50);
}
.lp-pay-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.lp-pay-body { flex: 1; min-width: 0; }
.lp-pay-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
}
.lp-pay-net {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}
.lp-pay-check {
    color: var(--mint-500);
    font-size: 18px;
}

/* =========================================================
   RECENT TRADES
   ========================================================= */
.lp-recent {
    padding: 80px clamp(20px, 5vw, 80px);
    background: var(--bg-soft);
}
.lp-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    max-width: 1400px;
    margin: 0 auto;
}
.lp-trade-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    padding: 16px 18px;
    transition: all 0.2s ease;
}
.lp-trade-card:hover {
    border-color: var(--mint-300);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.lp-trade-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.lp-trade-rarity {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lp-trade-time {
    font-size: 11px;
    color: var(--text-3);
}
.lp-trade-item {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 10px;
}
.lp-trade-sold {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.lp-trade-check {
    width: 22px; height: 22px;
    background: var(--mint-500);
    color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
}
.lp-trade-seller {
    font-weight: 700;
    color: var(--text-1);
}
.lp-trade-sold-txt {
    color: var(--text-3);
    font-size: 12px;
}

/* =========================================================
   FAQ
   ========================================================= */
.lp-faq {
    padding: 80px clamp(20px, 5vw, 80px);
}
.lp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto;
}
.lp-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.lp-faq-item[open] { border-color: var(--mint-300); }
.lp-faq-q {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-chev {
    transition: transform 0.25s ease;
    color: var(--text-3);
    font-size: 12px;
    flex-shrink: 0;
}
.lp-faq-item[open] .lp-faq-chev {
    transform: rotate(180deg);
    color: var(--mint-500);
}
.lp-faq-a {
    padding: 0 22px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
}

/* =========================================================
   BOTTOM CTA
   ========================================================= */
.lp-cta-bottom {
    padding: 100px clamp(20px, 5vw, 80px);
    background:
        radial-gradient(ellipse at center, rgba(16, 185, 129, 0.12), transparent 70%);
    text-align: center;
}
.lp-cta-inner {
    max-width: 700px;
    margin: 0 auto;
}
.lp-cta-inner h2 {
    font-size: clamp(30px, 5vw, 48px);
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.lp-cta-inner p {
    color: var(--text-2);
    font-size: 16px;
    margin: 0 0 32px;
    line-height: 1.6;
}

/* =========================================================
   FOOTER
   ========================================================= */
.lp-footer {
    border-top: 1px solid var(--border-1);
    padding: 32px clamp(20px, 4vw, 60px);
}
.lp-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.lp-footer-brand {
    color: var(--text-2);
    font-weight: 600;
    font-size: 14px;
}
.lp-footer-links { display: flex; gap: 24px; }
.lp-footer-links a {
    color: var(--text-2);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s;
}
.lp-footer-links a:hover { color: var(--mint-600); }
.lp-footer-copy {
    color: var(--text-3);
    font-size: 12px;
}
@media (max-width: 700px) {
    .lp-footer-inner { flex-direction: column; gap: 14px; text-align: center; }
}

/* Dark mode refinements */
:root[data-theme="dark"] .lp-hero-badge {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.28);
    color: var(--mint-400);
}
:root[data-theme="dark"] .lp-chat-head {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), var(--bg-card));
}
:root[data-theme="dark"] .lp-float {
    background: var(--bg-soft);
}
:root[data-theme="dark"] .lp-stat > i {
    background: rgba(16, 185, 129, 0.1);
    color: var(--mint-400);
}
:root[data-theme="dark"] .lp-pay-card:hover {
    background: rgba(16, 185, 129, 0.05);
}
:root[data-theme="dark"] .lp-step-n {
    color: rgba(16, 185, 129, 0.15);
}

/* SUPPORT FAB MINI — _header.php'den gelen, her sayfada */
.support-fab-mini {
    position: fixed;
    bottom: 22px;
    left: 22px;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    text-decoration: none !important;
    z-index: 900;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.support-fab-mini:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 32px rgba(16, 185, 129, 0.55);
}
@media (max-width: 600px) {
    .support-fab-mini { bottom: 16px; left: 16px; width: 48px; height: 48px; font-size: 18px; }
}

/* =========================================================
   RECENT TRADES V2 — premium animated card
   ========================================================= */
.lp-trade-card-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-trade-card-v2::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 3px;
    background: var(--mint-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.lp-trade-card-v2:hover {
    transform: translateY(-4px);
    border-color: var(--mint-300);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.lp-trade-card-v2:hover::before { transform: scaleX(1); }

/* Rarity border top accent */
.lp-trade-card-v2.rarity-CHROMA::before   { background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7); }
.lp-trade-card-v2.rarity-ANCIENT::before  { background: #a855f7; }
.lp-trade-card-v2.rarity-VINTAGE::before  { background: #ec4899; }
.lp-trade-card-v2.rarity-GODLY::before    { background: #f59e0b; }
.lp-trade-card-v2.rarity-LEGENDARY::before { background: #eab308; }
.lp-trade-card-v2.rarity-RARE::before     { background: #3b82f6; }
.lp-trade-card-v2.rarity-UNCOMMON::before { background: #10b981; }
.lp-trade-card-v2.rarity-COMMON::before   { background: #9ca3af; }

.lp-trade-glow {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 160px; height: 160px;
    border-radius: 50%;
    opacity: 0.12;
    filter: blur(40px);
    pointer-events: none;
    transition: opacity 0.3s;
    background: var(--mint-400);
}
.lp-trade-card-v2.rarity-CHROMA   .lp-trade-glow { background: #a855f7; }
.lp-trade-card-v2.rarity-ANCIENT  .lp-trade-glow { background: #a855f7; }
.lp-trade-card-v2.rarity-VINTAGE  .lp-trade-glow { background: #ec4899; }
.lp-trade-card-v2.rarity-GODLY    .lp-trade-glow { background: #f59e0b; }
.lp-trade-card-v2.rarity-LEGENDARY .lp-trade-glow { background: #eab308; }
.lp-trade-card-v2.rarity-RARE     .lp-trade-glow { background: #3b82f6; }
.lp-trade-card-v2:hover .lp-trade-glow { opacity: 0.22; }

/* Top row: icon + rarity */
.lp-trade-v2-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}
.lp-trade-v2-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-50), var(--bg-soft));
    color: var(--mint-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp-trade-card-v2:hover .lp-trade-v2-icon {
    transform: rotate(-8deg) scale(1.08);
}

/* Rarity-specific icon color */
.lp-trade-card-v2.rarity-CHROMA   .lp-trade-v2-icon { background: linear-gradient(135deg, #fef3c7, #fbcfe8); color: #a855f7; }
.lp-trade-card-v2.rarity-ANCIENT  .lp-trade-v2-icon { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.lp-trade-card-v2.rarity-VINTAGE  .lp-trade-v2-icon { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.lp-trade-card-v2.rarity-GODLY    .lp-trade-v2-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.lp-trade-card-v2.rarity-LEGENDARY .lp-trade-v2-icon { background: rgba(234, 179, 8, 0.1); color: #ca8a04; }
.lp-trade-card-v2.rarity-RARE     .lp-trade-v2-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.lp-trade-v2-item {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-1);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Bottom row: seller info + check */
.lp-trade-v2-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed var(--border-1);
}
.lp-trade-v2-seller {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.lp-trade-v2-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
    flex-shrink: 0;
}
.lp-trade-v2-uname {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.1;
}
.lp-trade-v2-time {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.lp-trade-v2-dot {
    width: 5px; height: 5px;
    background: var(--mint-500);
    border-radius: 50%;
    animation: lp-pulse-small 2s infinite;
}
@keyframes lp-pulse-small {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.lp-trade-v2-check {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
    flex-shrink: 0;
}

/* Rarity badge (top-right in card) */
.lp-trade-v2-top .lp-trade-rarity {
    padding: 4px 11px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--bg-soft);
    color: var(--text-2);
    border: 1px solid var(--border-1);
}
.lp-trade-v2-top .v-CHROMA    { background: linear-gradient(90deg, rgba(168,85,247,0.12), rgba(236,72,153,0.12)); color: #a855f7; border-color: rgba(168,85,247,0.25); }
.lp-trade-v2-top .v-ANCIENT   { background: rgba(168,85,247,0.1); color: #9333ea; border-color: rgba(168,85,247,0.25); }
.lp-trade-v2-top .v-VINTAGE   { background: rgba(236,72,153,0.1); color: #db2777; border-color: rgba(236,72,153,0.25); }
.lp-trade-v2-top .v-GODLY     { background: rgba(245,158,11,0.1); color: #d97706; border-color: rgba(245,158,11,0.25); }
.lp-trade-v2-top .v-LEGENDARY { background: rgba(234,179,8,0.1); color: #a16207; border-color: rgba(234,179,8,0.25); }
.lp-trade-v2-top .v-RARE      { background: rgba(59,130,246,0.1); color: #2563eb; border-color: rgba(59,130,246,0.25); }
.lp-trade-v2-top .v-UNCOMMON  { background: rgba(16,185,129,0.1); color: var(--mint-700); border-color: var(--mint-200); }

:root[data-theme="dark"] .lp-trade-v2-icon {
    background: rgba(255,255,255,0.04);
}

/* =========================================================
   LANG SWITCHER V2 — bayrak resmi ile
   ========================================================= */
.lang-btn-v2 {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px !important;
    border-radius: 999px !important;
    width: auto !important;
    height: auto !important;
}
.lang-btn-v2 .lang-flag {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-1);
    flex-shrink: 0;
}
.lang-btn-v2 .lang-current {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}
.lang-btn-v2 .lang-chev {
    font-size: 9px;
    color: var(--text-3);
    transition: transform 0.2s ease;
}
.lang-switcher.open .lang-btn-v2 .lang-chev {
    transform: rotate(180deg);
}

/* Menu içindeki bayrak resimleri */
.lang-menu .lang-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.lang-menu .lang-item .lang-flag {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-1);
    flex-shrink: 0;
}
.lang-menu .lang-item.active {
    background: var(--mint-50);
    color: var(--mint-700);
    font-weight: 700;
}

:root[data-theme="dark"] .lang-menu .lang-item.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--mint-400);
}

/* =========================================================
   DIĞER SAYFALAR — Landing uyumlu hale getirme
   (prices, history, profile, terms, privacy, contact)
   ========================================================= */

/* Tüm page-wrap'ler full genişlik — main.app'ten kısıtlama yok
   Not: eskiden burada max-width:1400px + padding:24px vardı, topbar'ı daraltıyordu.
   Artık main.app full-width, padding sadece .page-wrap'te */

.page-wrap {
    max-width: 100% !important;
    width: 100% !important;
}

/* Kartlar — landing stili (18px radius, yumuşak shadow) */
.price-card, .trade-card, .profile-card, .stat-card,
.history-card, .product-card, .legal-container .card {
    border-radius: 18px !important;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sayfa başlıkları */
.page-wrap h1, .page-wrap .page-title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

/* History/Prices sayfalarının üst kısmı */
.page-wrap .page-head {
    margin-bottom: 28px;
}

/* Legal sayfaları (terms/privacy) — daha iyi tipografi */
.legal-container {
    max-width: 820px !important;
    margin: 0 auto;
    padding: 40px 0;
}
.legal-container h1 { margin-bottom: 24px; }
.legal-container h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 32px 0 12px;
    color: var(--text-1);
}
.legal-container p, .legal-container li {
    color: var(--text-2);
    line-height: 1.7;
    font-size: 15px;
}

/* Sayfa başlıklarının altında breadcrumb/description */
.page-sub {
    color: var(--text-2);
    font-size: 15px;
    margin-top: 4px;
    margin-bottom: 24px;
}

/* =========================================================
   FLOATING MM2 ITEMS — background decoration, all pages
   ========================================================= */
.floating-items-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5;
}
.fi {
    position: absolute;
    font-size: 90px;
    color: var(--mint-400);
    opacity: 0.08;
    filter: blur(2px);
    animation: fi-drift 28s ease-in-out infinite;
    will-change: transform;
}
.fi-1 { top: 8%;  left: 6%;   color: var(--mint-500);  font-size: 110px; animation-delay: 0s;    animation-duration: 32s; }
.fi-2 { top: 22%; right: 10%; color: #a855f7;          font-size: 100px; animation-delay: -4s;   animation-duration: 26s; }
.fi-3 { top: 60%; left: 12%;  color: #f59e0b;          font-size: 120px; animation-delay: -8s;   animation-duration: 30s; }
.fi-4 { top: 40%; right: 8%;  color: #ef4444;          font-size: 95px;  animation-delay: -12s;  animation-duration: 28s; }
.fi-5 { top: 78%; right: 22%; color: #ec4899;          font-size: 105px; animation-delay: -16s;  animation-duration: 34s; }
.fi-6 { top: 85%; left: 20%;  color: #3b82f6;          font-size: 90px;  animation-delay: -20s;  animation-duration: 24s; }

@keyframes fi-drift {
    0%   { transform: translate(0, 0) rotate(-8deg) scale(1); }
    25%  { transform: translate(30px, -40px) rotate(6deg) scale(1.05); }
    50%  { transform: translate(-20px, 20px) rotate(-4deg) scale(0.95); }
    75%  { transform: translate(40px, 30px) rotate(10deg) scale(1.02); }
    100% { transform: translate(0, 0) rotate(-8deg) scale(1); }
}

/* Dark mode — biraz daha koyu ve saydam */
:root[data-theme="dark"] .fi {
    opacity: 0.06;
    filter: blur(1px);
}

/* Main content her zaman floating'in üstünde */
main.app, header.topbar, footer, .lp-nav, .support-fab-mini {
    position: relative;
    z-index: 1;
}

/* Mobilde azalt (performans) */
@media (max-width: 700px) {
    .fi-4, .fi-5 { display: none; }
    .fi { font-size: 70px !important; }
}

/* =========================================================
   RECENT TRADES — hover bar kaldır
   Kullanıcı üste çıkan üst çizgi istemiyor
   ========================================================= */
.lp-trade-card-v2::before {
    display: none !important;
}

/* =========================================================
   TYPOGRAPHY HIERARCHY — daha dramatik
   ========================================================= */
.lp-hero-title {
    font-size: clamp(40px, 6.5vw, 78px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    font-weight: 800 !important;
}
.lp-hero-title em {
    font-style: italic;
    color: var(--mint-600);
    font-weight: 600;
}
.lp-hero-sub {
    font-size: clamp(15px, 1.7vw, 19px) !important;
    line-height: 1.55 !important;
}
.lp-section-head h2 {
    font-size: clamp(30px, 5vw, 48px) !important;
    letter-spacing: -0.03em !important;
}
.lp-cta-inner h2 {
    font-size: clamp(32px, 6vw, 56px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05;
}

/* Stat sayıları daha dramatik — "+" işareti küçük */
.lp-trust-num, .lp-stat-val {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
}
.lp-trust-num .plus-small, .lp-stat-val .plus-small {
    font-size: 0.5em;
    vertical-align: top;
    font-weight: 700;
    opacity: 0.7;
    margin-left: 2px;
}

/* =========================================================
   BUTTON HAPTIC — basınca scale bounce
   ========================================================= */
.lp-btn-primary,
.lp-btn-ghost,
.lp-btn-discord,
.lp-nav-cta,
button.btn,
button.btn-primary,
.am2-submit {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                background 0.2s ease !important;
}
.lp-btn-primary:active,
.lp-btn-ghost:active,
.lp-btn-discord:active,
.lp-nav-cta:active,
button.btn:active,
button.btn-primary:active,
.am2-submit:active {
    transform: scale(0.96) !important;
}

/* Input focus — subtle mint glow */
input:focus, textarea:focus, select:focus {
    outline: none !important;
}
input:focus:not([type="checkbox"]):not([type="radio"]),
textarea:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
    border-color: var(--mint-500) !important;
    transition: all 0.15s ease;
}

/* =========================================================
   SCROLL-TRIGGERED REVEAL — sections fade up when visible
   ========================================================= */
.lp-hero,
.lp-stats-bar,
.lp-how,
.lp-features,
.lp-recent,
.lp-faq,
.lp-cta-bottom,
.lp-footer {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-hero.in-view,
.lp-stats-bar.in-view,
.lp-how.in-view,
.lp-features.in-view,
.lp-recent.in-view,
.lp-faq.in-view,
.lp-cta-bottom.in-view,
.lp-footer.in-view {
    opacity: 1;
    transform: translateY(0);
}
/* Hero hemen görünsün (zaten üstte) */
.lp-hero { transition-delay: 0.05s; }

/* Kullanıcı reduce-motion açıksa animasyonsuz */
@media (prefers-reduced-motion: reduce) {
    .lp-hero, .lp-stats-bar, .lp-how, .lp-features, .lp-recent, .lp-faq, .lp-cta-bottom, .lp-footer {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .fi { animation: none; }
}

/* =========================================================
   MOBILE BOTTOM NAV — sadece mobilde (< 768px)
   ========================================================= */
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 768px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 950;
        display: flex;
        background: var(--bg-card);
        border-top: 1px solid var(--border-1);
        padding: 8px 0 max(8px, env(safe-area-inset-bottom, 8px));
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .mbn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        color: var(--text-3);
        text-decoration: none !important;
        font-size: 10px;
        font-weight: 600;
        transition: color 0.15s, transform 0.15s;
        min-height: 44px;
    }
    .mbn-item i {
        font-size: 20px;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .mbn-item:active i {
        transform: scale(0.88);
    }
    .mbn-item.active {
        color: var(--mint-600);
    }
    .mbn-item.active i {
        transform: scale(1.08);
    }
    /* Body padding ki bottom nav içeriği kapatmasın */
    body.has-page-wrap {
        padding-bottom: 76px;
    }
    /* Mobilde FAB'ı üste al (bottom nav altta) */
    .support-fab-mini {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Mobilde bazı sayfalarda support-fab gereksiz (bottom nav'da zaten var) */
    .mobile-bottom-nav ~ .support-fab-mini {
        display: none;
    }
}

/* =========================================================
   EMPTY STATES — güzel illüstrasyon + CTA
   ========================================================= */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    max-width: 480px;
    margin: 40px auto;
}
.empty-illus {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--mint-50), var(--bg-soft));
    border: 1px solid var(--mint-200);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.empty-illus::before {
    content: '';
    position: absolute;
    top: -30%; left: -30%;
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(16,185,129,0.15), transparent 70%);
    animation: empty-orbit 8s linear infinite;
}
@keyframes empty-orbit {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(200%, 200%) rotate(360deg); }
}
.empty-illus i {
    font-size: 52px;
    color: var(--mint-500);
    position: relative;
    z-index: 1;
    animation: empty-bob 3s ease-in-out infinite;
}
@keyframes empty-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.empty-state h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.empty-state p {
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
}
.empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.empty-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.42);
}

/* =========================================================
   LOADING SKELETONS — gri animasyonlu placeholder'lar
   ========================================================= */
.skel {
    position: relative;
    background: var(--bg-soft);
    border-radius: 8px;
    overflow: hidden;
}
.skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.5) 50%,
        transparent
    );
    animation: skel-shimmer 1.6s infinite;
}
:root[data-theme="dark"] .skel::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.05) 50%,
        transparent
    );
}
@keyframes skel-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.skel-line { height: 14px; border-radius: 6px; }
.skel-line-lg { height: 22px; border-radius: 6px; }
.skel-circle { border-radius: 50%; }
.skel-rect { border-radius: 10px; }

/* =========================================================
   PRICES SHOP GRID
   ========================================================= */
.shop-wrap {
    max-width: 100%;
    padding: 20px clamp(20px, 3vw, 48px);
}
.shop-head {
    margin-bottom: 28px;
}
.shop-head h1 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}
.shop-head p {
    color: var(--text-2);
    font-size: 15px;
    margin: 0;
}

/* Filters bar */
.shop-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    margin-bottom: 20px;
    position: sticky;
    top: 70px;
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.shop-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.shop-search input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-1);
    font-family: inherit;
}
.shop-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 13px;
}

.shop-rarity-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.shop-chip {
    padding: 7px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s;
    font-family: inherit;
}
.shop-chip:hover {
    border-color: var(--mint-400);
    color: var(--text-1);
}
.shop-chip.active {
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    border-color: transparent;
}

.shop-sort {
    padding: 10px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    cursor: pointer;
    font-family: inherit;
}

/* Grid */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.shop-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.shop-card:hover {
    transform: translateY(-4px);
    border-color: var(--mint-300);
    box-shadow: 0 14px 32px rgba(0,0,0,0.08);
}
.shop-card-art {
    position: relative;
    height: 130px;
    background: linear-gradient(135deg, var(--mint-50), var(--bg-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.shop-card-art::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 30%, rgba(16,185,129,0.2), transparent 60%);
    pointer-events: none;
}
.shop-card:hover .shop-card-art::before {
    animation: shop-glow-pulse 2s infinite;
}
@keyframes shop-glow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.shop-card-art i {
    font-size: 52px;
    color: var(--mint-600);
    position: relative;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shop-card:hover .shop-card-art i {
    transform: scale(1.12) rotate(-6deg);
}
.shop-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.shop-card-rarity {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-2);
    align-self: flex-start;
}
.shop-card-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.shop-card-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--mint-700);
    margin-top: auto;
}
.shop-card-price .range-sep { color: var(--text-3); margin: 0 4px; font-weight: 400; }
.shop-card-price .usdt-label {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
    margin-left: 4px;
}
.shop-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--bg-soft);
    color: var(--text-1) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 10px;
    margin-top: 8px;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.shop-card:hover .shop-card-btn {
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
.shop-card-btn i { font-size: 11px; }

/* Rarity colors for shop cards */
.shop-card.r-chroma   .shop-card-rarity { background: linear-gradient(90deg, rgba(168,85,247,0.15), rgba(236,72,153,0.15)); color: #a855f7; }
.shop-card.r-ancient  .shop-card-rarity { background: rgba(168,85,247,0.1); color: #9333ea; }
.shop-card.r-vintage  .shop-card-rarity { background: rgba(236,72,153,0.1); color: #db2777; }
.shop-card.r-godly    .shop-card-rarity { background: rgba(245,158,11,0.1); color: #d97706; }
.shop-card.r-legendary .shop-card-rarity { background: rgba(234,179,8,0.1); color: #a16207; }
.shop-card.r-rare     .shop-card-rarity { background: rgba(59,130,246,0.1); color: #2563eb; }
.shop-card.r-uncommon .shop-card-rarity { background: rgba(16,185,129,0.1); color: var(--mint-700); }
.shop-card.r-common   .shop-card-rarity { background: rgba(107,114,128,0.1); color: #4b5563; }

.shop-card.r-chroma .shop-card-art   { background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(236,72,153,0.08)); }
.shop-card.r-chroma .shop-card-art i { color: #a855f7; }
.shop-card.r-ancient .shop-card-art i { color: #9333ea; }
.shop-card.r-godly .shop-card-art i { color: #f59e0b; }
.shop-card.r-legendary .shop-card-art i { color: #eab308; }
.shop-card.r-rare .shop-card-art i { color: #3b82f6; }

@media (max-width: 500px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .shop-card-art { height: 100px; }
    .shop-card-art i { font-size: 40px; }
    .shop-card-name { font-size: 13px; }
}

/* =========================================================
   SOCIAL PROOF — avatar row, trust badges
   ========================================================= */
.lp-social-proof {
    padding: 50px clamp(20px, 5vw, 80px);
    text-align: center;
    background: var(--bg-soft);
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
}
.lp-sp-text {
    font-size: 14px;
    color: var(--text-3);
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.lp-sp-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.lp-sp-avatars {
    display: flex;
}
.lp-sp-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    border: 3px solid var(--bg-soft);
    margin-left: -10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.lp-sp-avatar:first-child { margin-left: 0; }
.lp-sp-avatar.avatar-more {
    background: var(--bg-card);
    color: var(--text-2);
    border-color: var(--bg-soft);
    font-size: 11px;
}
.lp-sp-badges {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.lp-sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
}
.lp-sp-badge i {
    color: var(--mint-500);
    font-size: 13px;
}

/* =========================================================
   TOTAL EARNED — history page celebratory display
   ========================================================= */
.earnings-celebrate {
    background: linear-gradient(135deg, var(--mint-50), rgba(16,185,129,0.05));
    border: 1px solid var(--mint-200);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.earnings-celebrate::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(16,185,129,0.1), transparent 70%);
    pointer-events: none;
}
.ec-left { position: relative; z-index: 1; }
.ec-label {
    font-size: 12px;
    color: var(--mint-700);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 6px;
}
.ec-amount {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    line-height: 1;
}
.ec-amount .ec-currency {
    font-size: 0.5em;
    color: var(--mint-700);
    font-weight: 700;
    margin-left: 6px;
    vertical-align: top;
    position: relative;
    top: 0.3em;
}
.ec-sub {
    font-size: 14px;
    color: var(--text-2);
    margin-top: 8px;
}
.ec-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 10px 25px rgba(16,185,129,0.35);
    position: relative;
    z-index: 1;
}

:root[data-theme="dark"] .earnings-celebrate {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
}

/* =========================================================
   SCROLL PROGRESS INDICATOR — üstte mint çubuk
   ========================================================= */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
    width: 0%;
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(16,185,129,0.4);
}

/* =========================================================
   404 PAGE
   ========================================================= */
.err-404-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}
.err-404 {
    max-width: 480px;
}
.err-404-code {
    font-size: clamp(80px, 15vw, 160px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 16px;
    animation: err-float 4s ease-in-out infinite;
}
@keyframes err-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.err-404 h2 {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 10px;
}
.err-404 p {
    color: var(--text-2);
    font-size: 15px;
    margin: 0 0 24px;
}

/* =========================================================
   CHAT PAGE — floating items'ı gizle (dikkat dağıtır)
   ========================================================= */
body.chat-page .floating-items-bg,
.app:has(.chat-container) ~ .floating-items-bg {
    display: none;
}

/* =========================================================
   EMPTY STATE V2 — SVG illustration ile
   ========================================================= */
.empty-state-v2 {
    text-align: center;
    padding: 60px 24px;
    max-width: 440px;
    margin: 40px auto;
}
.empty-state-v2 .empty-illust {
    width: 180px; height: 140px;
    margin: 0 auto 24px;
    display: block;
}
.empty-state-v2 h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-1);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.empty-state-v2 p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0 0 24px;
}
.empty-state-v2 .empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
.empty-state-v2 .empty-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.42);
}
.empty-state-v2 .empty-cta:active { transform: scale(0.96); }

/* =========================================================
   HISTORY TIMELINE — dikey çizgi + günlere göre gruplama
   ========================================================= */
.trade-timeline {
    position: relative;
    padding-left: 8px;
}
.tl-group {
    margin-bottom: 32px;
}
.tl-group:last-child { margin-bottom: 0; }
.tl-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-left: 4px;
}
.tl-group-label {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.tl-group-count {
    background: var(--mint-50);
    color: var(--mint-700);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--mint-200);
}
:root[data-theme="dark"] .tl-group-count {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--mint-400);
}

.tl-group-items {
    position: relative;
}
.tl-group-items::before {
    content: '';
    position: absolute;
    left: 15px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--border-1);
    border-radius: 1px;
}

.tl-item {
    position: relative;
    padding-left: 48px;
    margin-bottom: 14px;
    animation: tl-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tl-item:last-child { margin-bottom: 0; }
@keyframes tl-item-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.tl-dot {
    position: absolute;
    left: 6px; top: 16px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--text-3);
    z-index: 2;
    transition: all 0.2s ease;
}
.tl-item-completed .tl-dot {
    background: var(--mint-500);
    border-color: var(--mint-500);
    color: #fff;
    box-shadow: 0 0 0 4px var(--mint-50);
}
.tl-item-problem .tl-dot {
    background: #EF4444;
    border-color: #EF4444;
    color: #fff;
    box-shadow: 0 0 0 4px #FEE2E2;
}
.tl-item-cancelled .tl-dot {
    background: #9CA3AF;
    border-color: #9CA3AF;
    color: #fff;
}
.tl-item-pending .tl-dot {
    background: #F59E0B;
    border-color: #F59E0B;
    color: #fff;
    animation: tl-dot-pulse 2s infinite;
}
@keyframes tl-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

:root[data-theme="dark"] .tl-item-completed .tl-dot {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}
:root[data-theme="dark"] .tl-item-problem .tl-dot {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.tl-content {
    /* trade-card zaten var */
}

/* Mobile — timeline daha dar */
@media (max-width: 600px) {
    .tl-item { padding-left: 40px; }
    .tl-group-items::before { left: 12px; }
    .tl-dot { left: 3px; width: 18px; height: 18px; }
}

/* =========================================================
   CONFETTI (canvas-confetti için placeholder canvas)
   ========================================================= */
.confetti-canvas {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

/* =========================================================
   HISTORY PAGINATION — numbered (yeniden eklendi)
   ========================================================= */
.hist-paginate {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin: 40px auto 12px;
    flex-wrap: wrap;
}
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.15s ease;
    user-select: none;
}
.hp-btn:hover:not(.hp-disabled):not(.hp-active) {
    border-color: var(--mint-400);
    color: var(--text-1);
    transform: translateY(-1px);
}
.hp-active {
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);
}
.hp-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.hp-dots {
    color: var(--text-3);
    padding: 0 8px;
    font-weight: 700;
    font-size: 15px;
}
.hp-showing {
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    margin-top: 8px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .hp-btn { min-width: 36px; height: 36px; font-size: 13px; padding: 0 10px; }
    .hist-paginate { gap: 6px; }
}

/* =========================================================
   Z-INDEX FIX — Topbar & dropdown her zaman önde
   Landing stili topbar her sayfada
   ========================================================= */

/* Topbar ve dropdown'lar her zaman üstte */
.topbar {
    position: sticky;
    top: 0;
    z-index: 500;  /* content (z:1) ve floating-items (z:0) üstünde */
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: color-mix(in srgb, var(--bg-card) 85%, transparent);
}

/* Dropdown'lar topbar'ın üstünde, floating'in de üstünde */
.lang-menu,
.user-menu {
    z-index: 600 !important;
}

.lang-switcher,
.user-switcher {
    position: relative;
    z-index: 500;
}

/* Prices/profile/history page'lerdeki dropdown'lar da üstte */
.filter-dropdown,
.sort-dropdown,
.dropdown-menu {
    z-index: 550 !important;
}

/* Floating items main content'in daima altında */
.floating-items-bg { z-index: 0 !important; }
main.app { position: relative; z-index: 2; }
.topbar { z-index: 500 !important; }

/* Support FAB en önde */
.support-fab-mini { z-index: 900 !important; }

/* Mobile bottom nav — drawer'dan geri, dropdown'lardan önde */
.mobile-bottom-nav { z-index: 450 !important; }

/* =========================================================
   TOPBAR NAV LINKS — landing ile uyumlu (tüm sayfalar)
   ========================================================= */
.topbar .brand {
    flex: 0 0 auto !important;  /* brand sol */
    margin-right: 8px;
}
.topbar-nav {
    display: flex;
    gap: 4px;
    flex: 1;
    margin-left: 16px;
    align-items: center;
}
.topbar-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: var(--text-2);
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.15s;
}
.topbar-nav-link i {
    font-size: 13px;
    opacity: 0.8;
}
.topbar-nav-link:hover {
    background: var(--bg-soft);
    color: var(--text-1);
}
.topbar-nav-link.active {
    background: var(--mint-50);
    color: var(--mint-700);
    font-weight: 700;
}
.topbar-nav-link.active i { opacity: 1; }
:root[data-theme="dark"] .topbar-nav-link.active {
    background: rgba(16, 185, 129, 0.12);
    color: var(--mint-400);
}

/* Mobilde topbar nav gizlenir, bottom nav zaten var */
@media (max-width: 900px) {
    .topbar-nav { display: none; }
}

/* Topbar actions sağda kalsın */
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Lp section arka plan unification — user requested hepsi aynı */
.lp-features { background: transparent !important; }
.lp-recent { background: transparent !important; }

/* =========================================================
   FLOATING ITEMS V2 — webp resimler + yukarıdan aşağıya akış
   Eski .fi tanımlarını override eder
   ========================================================= */
.floating-items-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;  /* override eski opacity 0.5 */
}
img.fi {
    position: absolute;
    width: 90px; height: auto;
    opacity: 0.18;  /* daha görünür (öncesi 0.08) */
    filter: blur(0.5px);  /* daha keskin */
    animation: fi-fall linear infinite;
    will-change: transform;
    object-fit: contain;
}

/* 6 item farklı x pozisyonu, farklı duration, farklı delay */
img.fi-1 { left: 5%;  width: 100px; animation-duration: 22s; animation-delay: 0s;   }
img.fi-2 { left: 22%; width: 90px;  animation-duration: 28s; animation-delay: -6s;  }
img.fi-3 { left: 40%; width: 110px; animation-duration: 24s; animation-delay: -12s; }
img.fi-4 { left: 58%; width: 95px;  animation-duration: 26s; animation-delay: -3s;  }
img.fi-5 { left: 74%; width: 105px; animation-duration: 30s; animation-delay: -15s; }
img.fi-6 { left: 88%; width: 85px;  animation-duration: 23s; animation-delay: -9s;  }

@keyframes fi-fall {
    0%   { transform: translateY(-10vh) rotate(-8deg); }
    100% { transform: translateY(110vh) rotate(8deg); }
}

/* Dark mode'da biraz daha saydam */
:root[data-theme="dark"] img.fi {
    opacity: 0.13;
    filter: blur(0.5px) brightness(1.1);
}

/* Mobilde sayıyı azalt (performans) */
@media (max-width: 700px) {
    img.fi-3, img.fi-5 { display: none; }
    img.fi { width: 70px !important; }
}

/* Kullanıcı reduce-motion açıksa sabit dursun */
@media (prefers-reduced-motion: reduce) {
    img.fi { animation: none; top: 30%; }
}

/* =========================================================
   APP WRAPPER — Sayfa bazlı width
   - Chat sayfası: 860px (dar chat için ideal)
   - Diğer sayfalar: full-width
   Chat sayfasında body'de .chat-page class'ı olacak.
   Landing'de body'de .landing-body class'ı zaten var.
   Diğerlerini: .has-page-wrap + DEĞİL chat-page
   ========================================================= */
body:not(.chat-page) main.app {
    max-width: 100% !important;
    height: auto !important;
    min-height: 100vh;
}

body:not(.chat-page) .topbar {
    padding: 14px clamp(20px, 4vw, 48px) !important;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-main {
    padding: 60px clamp(20px, 4vw, 60px) 100px;
    width: 100%;
}
.contact-container {
    max-width: 820px;
    margin: 0 auto;
}
.contact-title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    color: var(--text-1);
    line-height: 1.05;
}
.contact-intro {
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0 0 40px;
}

.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 40px;
}
.contact-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    text-decoration: none !important;
    color: var(--text-1);
    transition: all 0.2s ease;
}
.contact-card:hover {
    border-color: var(--mint-400);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.cc-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}
.cc-icon-email   { background: linear-gradient(135deg, #3B82F6, #1E40AF); }
.cc-icon-discord { background: linear-gradient(135deg, #5865F2, #4752C4); }
.cc-icon-support { background: linear-gradient(135deg, var(--mint-400), var(--mint-600)); }

.cc-body { flex: 1; min-width: 0; }
.cc-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 5px;
}
.cc-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
    word-break: break-all;
    margin-bottom: 3px;
}
.cc-hint {
    font-size: 13px;
    color: var(--text-3);
}
.cc-ext {
    font-size: 14px;
    color: var(--text-3);
    flex-shrink: 0;
}

.contact-faq {
    background: var(--bg-soft);
    border-radius: 16px;
    padding: 28px 32px;
}
.contact-faq h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.contact-faq ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.contact-faq li {
    display: flex; align-items: flex-start; gap: 12px;
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.55;
}
.contact-faq li i {
    color: var(--mint-500);
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

@media (max-width: 600px) {
    .contact-main { padding: 40px 16px 80px; }
    .contact-card { padding: 16px; gap: 14px; }
    .cc-icon { width: 44px; height: 44px; font-size: 17px; }
    .contact-faq { padding: 22px; }
}

/* =========================================================
   FLOATING ITEMS V3 — daha bulanık + random drift
   (Önceki fi-fall animasyonu kaldırıldı)
   ========================================================= */
img.fi {
    opacity: 0.13 !important;
    filter: blur(3px) !important;  /* daha bulanık — göz yormaz */
    animation: fi-drift-smooth var(--dur, 30s) ease-in-out infinite !important;
    transform-origin: center;
}

img.fi-1 {
    left: 6%;  top: 12%; width: 110px;
    --dur: 34s;
    animation-delay: 0s !important;
}
img.fi-2 {
    left: 78%; top: 8%;  width: 95px;
    --dur: 28s;
    animation-delay: -5s !important;
    animation-name: fi-drift-alt !important;
}
img.fi-3 {
    left: 15%; top: 52%; width: 120px;
    --dur: 32s;
    animation-delay: -12s !important;
}
img.fi-4 {
    left: 68%; top: 58%; width: 100px;
    --dur: 30s;
    animation-delay: -7s !important;
    animation-name: fi-drift-alt !important;
}
img.fi-5 {
    left: 3%;  top: 75%; width: 90px;
    --dur: 26s;
    animation-delay: -18s !important;
}
img.fi-6 {
    left: 82%; top: 72%; width: 105px;
    --dur: 36s;
    animation-delay: -3s !important;
    animation-name: fi-drift-alt !important;
}

@keyframes fi-drift-smooth {
    0%   { transform: translate(0, 0) rotate(-6deg) scale(1); }
    25%  { transform: translate(40px, -30px) rotate(4deg) scale(1.04); }
    50%  { transform: translate(-20px, 40px) rotate(8deg) scale(0.96); }
    75%  { transform: translate(30px, 20px) rotate(-4deg) scale(1.02); }
    100% { transform: translate(0, 0) rotate(-6deg) scale(1); }
}
@keyframes fi-drift-alt {
    0%   { transform: translate(0, 0) rotate(6deg) scale(1); }
    25%  { transform: translate(-30px, 30px) rotate(-4deg) scale(0.97); }
    50%  { transform: translate(30px, -30px) rotate(-8deg) scale(1.05); }
    75%  { transform: translate(-20px, 10px) rotate(4deg) scale(0.98); }
    100% { transform: translate(0, 0) rotate(6deg) scale(1); }
}

/* Dark mode */
:root[data-theme="dark"] img.fi {
    opacity: 0.09 !important;
    filter: blur(3px) brightness(1.15) !important;
}

@media (prefers-reduced-motion: reduce) {
    img.fi { animation: none !important; }
}

/* =========================================================
   LANDING — topbar çizgisi ve diğer sayfalardaki kırılmaları düzelt
   ========================================================= */
/* Landing'de topbar alt çizgi yok (hero'ya sorunsuz akar) */
body.landing-body .topbar,
body:not(.chat-page) .topbar {
    border-bottom: none !important;
}

/* Landing'de body bg ve hero bg arasındaki geçiş yumuşak */
body.landing-body {
    background: var(--bg-app);
}
body.landing-body main.app {
    background: transparent !important;
    padding: 0 !important;  /* hero kendi padding'ini kurar */
}

/* Hero, topbar'dan sonra padding eklemeli (sticky topbar 70px) */
.lp-hero {
    padding-top: 80px !important;
}

/* Landing: body'de .landing-body yok, content'te .landing-wrapper var */
body:has(.landing-wrapper) .topbar {
    border-bottom: none !important;
}
body:has(.landing-wrapper) main.app {
    padding: 0 !important;
    background: transparent !important;
}

/* =========================================================
   CHAT PAGE — Artık full-width (landing ile uyumlu)
   Chat konuşma column içeride ortalı kalır ama sayfa arka planı tüm ekrana
   ========================================================= */
body.chat-page main.app {
    max-width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    padding: 0 !important;
}

body.chat-page .topbar {
    padding: 14px clamp(20px, 4vw, 48px) !important;
    border-bottom: none !important;
}

/* Chat konuşma içeriği ortalı kalır (okunabilirlik) ama page bg tüm ekranda */
body.chat-page .chat-container,
body.chat-page .messages-container,
body.chat-page .input-container,
body.chat-page .chat-content {
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* Chat'te de landing gradient/floating arka plan aktif olsun */
body.chat-page {
    background: var(--bg-app);
}

/* Chat'teki eski background override'ları iptal (eğer varsa) */
body.chat-page .app {
    background: transparent !important;
}

/* =========================================================
   SUPPORT FAB — sol alt, siyah border yok
   Button element reset
   ========================================================= */
button.support-fab-mini,
a.support-fab-mini,
.support-fab-mini {
    position: fixed !important;
    bottom: 22px !important;
    left: 22px !important;
    top: auto !important;
    right: auto !important;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600)) !important;
    border: none !important;  /* siyah kenar */
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important;
    text-decoration: none !important;
    z-index: 900;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.support-fab-mini:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 32px rgba(16, 185, 129, 0.55) !important;
}
.support-fab-mini:focus {
    outline: none !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4), 0 0 0 4px rgba(16, 185, 129, 0.2) !important;
}
.support-fab-mini:active {
    transform: scale(0.94);
}

/* Mobile: bottom nav varsa FAB biraz yukarı */
@media (max-width: 768px) {
    body.has-page-wrap .support-fab-mini {
        bottom: 80px !important;  /* bottom nav yüksekliği + margin */
        left: 16px !important;
        width: 48px; height: 48px;
        font-size: 18px;
    }
}

/* =========================================================
   PAGE CONTENT WRAPPER — landing dışında standart genişlik
   ========================================================= */
/* page-wrap ve contact-main tüm sayfalarda kullanılıyor */
body:not(.chat-page) .page-wrap,
body:not(.chat-page) .contact-main {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 24px clamp(20px, 4vw, 48px);
    box-sizing: border-box;
}

/* Landing wrapper kendi padding'ini kurar */
body:has(.landing-wrapper) main.app {
    padding: 0 !important;
}

/* Topbar: main.app full-width olunca topbar da otomatik full */
.topbar {
    width: 100%;
    padding: 14px clamp(20px, 4vw, 48px) !important;
    box-sizing: border-box;
}

/* Tüm sayfalarda footer varsa full-width */
.app > footer,
.app > .lp-footer {
    width: 100%;
    margin-top: auto;
}

/* =========================================================
   PRICES — Search + Custom dropdown
   ========================================================= */
.shop-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 220px;
    flex: 1;
    max-width: 320px;
}
.shop-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-3);
    font-size: 13px;
    pointer-events: none;
}
.shop-search {
    width: 100%;
    height: 42px;
    padding: 0 40px 0 38px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-1);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.shop-search:focus {
    border-color: var(--mint-400);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.shop-search::placeholder { color: var(--text-3); }
.shop-search-clear {
    position: absolute;
    right: 8px;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--bg-soft);
    border: none;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.shop-search-clear:hover { background: var(--border-1); color: var(--text-1); }

/* Custom dropdown */
.shop-sort-wrap {
    position: relative;
    flex-shrink: 0;
}
.shop-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 42px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 200px;
}
.shop-sort-btn:hover {
    border-color: var(--mint-400);
}
.shop-sort-btn > i:first-child {
    color: var(--mint-600);
    font-size: 13px;
}
.shop-sort-btn #shop-sort-label {
    flex: 1;
    text-align: left;
}
.shop-sort-chev {
    font-size: 11px;
    color: var(--text-3);
    transition: transform 0.2s ease;
}
.shop-sort-wrap.open .shop-sort-chev {
    transform: rotate(180deg);
    color: var(--mint-600);
}
.shop-sort-wrap.open .shop-sort-btn {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.shop-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: shop-sort-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: top center;
}
@keyframes shop-sort-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.shop-sort-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 0.1s;
}
.shop-sort-opt:hover {
    background: var(--bg-soft);
    color: var(--text-1);
}
.shop-sort-opt.active {
    background: var(--mint-50);
    color: var(--mint-700);
}
.shop-sort-opt i {
    font-size: 12px;
    color: var(--text-3);
    width: 14px;
    text-align: center;
}
.shop-sort-opt.active i {
    color: var(--mint-600);
}

:root[data-theme="dark"] .shop-sort-opt.active {
    background: rgba(16, 185, 129, 0.12);
    color: var(--mint-400);
}
:root[data-theme="dark"] .shop-sort-opt.active i {
    color: var(--mint-400);
}

/* Filters row layout — responsive */
.shop-filters,
.shop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.shop-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

@media (max-width: 600px) {
    .shop-sort-btn { min-width: 160px; font-size: 13px; }
    .shop-search-wrap { min-width: 100%; order: -1; }
}

/* =========================================================
   SITE FOOTER — Ortak, tüm sayfalarda
   ========================================================= */
.site-footer {
    margin-top: 80px;
    padding: 32px clamp(20px, 4vw, 48px);
    border-top: 1px solid var(--border-1);
    background: var(--bg-card);
    width: 100%;
}
.site-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.site-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.site-footer-logo {
    width: 36px; height: 36px;
    border-radius: 10px;
}
.site-footer-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.site-footer-copy {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}
.site-footer-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.site-footer-links a {
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.site-footer-links a:hover {
    color: var(--mint-600);
}
.site-footer-note {
    font-size: 12px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 6px;
}
.site-footer-note i {
    color: var(--mint-500);
}
@media (max-width: 700px) {
    .site-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }
}

/* =========================================================
   TOPBAR + FOOTER UNIFICATION — tüm sayfalarda landing boyutu
   ========================================================= */

/* Topbar her sayfada aynı padding (landing ile uyumlu) */
body .topbar,
body.has-page-wrap .topbar,
body.chat-page .topbar {
    padding: 16px clamp(20px, 4vw, 48px) !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 72px;
    box-sizing: border-box;
}

/* Brand ve nav yatay align uniformly */
.topbar .brand {
    min-height: 40px;
}
.topbar-nav-link {
    padding: 10px 16px !important;
    min-height: 40px;
}

/* Footer her sayfada aynı boyut ve spacing */
body .site-footer {
    padding: 40px clamp(20px, 4vw, 48px) !important;
    margin-top: 80px !important;
    min-height: 120px;
    box-sizing: border-box;
}
.site-footer-inner {
    min-height: 40px;
}

/* Chat sayfası footer'ı alt kısma sticky değil, sayfa sonunda */
body.chat-page .site-footer { margin-top: 40px !important; }

/* =========================================================
   ADMIN — Robux payment badge
   ========================================================= */
.at-robux-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, #FEF3C7, #FCD34D22);
    border: 1px solid #F59E0B55;
    border-radius: 10px;
    font-size: 13px;
    color: #92400E;
    flex-wrap: wrap;
}
.at-robux-info i {
    color: #D97706;
    font-size: 15px;
}
.at-robux-info strong {
    letter-spacing: 0.04em;
    color: #92400E;
}
.at-robux-amount {
    font-weight: 800;
    color: #92400E;
}
.at-robux-target {
    font-family: ui-monospace, SFMono-Regular, monospace;
    background: rgba(255,255,255,0.6);
    padding: 2px 8px;
    border-radius: 6px;
    word-break: break-all;
}
:root[data-theme="dark"] .at-robux-info {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #FCD34D;
}
:root[data-theme="dark"] .at-robux-info strong,
:root[data-theme="dark"] .at-robux-amount {
    color: #FCD34D;
}

/* =========================================================
   TOPBAR FULL-WIDTH FIX — kenarlardaki boşlukları kaldır
   Sorun: main.app'in padding'i topbar'ı daraltıyordu
   Çözüm: main.app padding sıfır, padding sadece içerik wrapper'larında
   ========================================================= */

/* Body margin/padding sıfır — tarayıcı default'ları için */
body { margin: 0 !important; padding: 0 !important; }
html { margin: 0; padding: 0; }

/* main.app artık padding taşımıyor — topbar'ı daraltmıyor */
body:not(.chat-page) main.app {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 100vh;
}

/* Topbar full-width — sola sağa kenara yapışsın */
.topbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px clamp(20px, 4vw, 48px) !important;
    box-sizing: border-box !important;
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: color-mix(in srgb, var(--bg-card) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-1);
}

/* Landing — topbar border-bottom yok (hero'ya geçişli) */
body:has(.landing-wrapper) .topbar {
    border-bottom: none !important;
}

/* Padding sadece page içerik wrapper'larında */
body:not(.chat-page) .page-wrap,
body:not(.chat-page) .contact-main {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 32px clamp(20px, 4vw, 48px);
    box-sizing: border-box;
}

/* Landing wrapper'ın kendi padding'i var, dokunma */
body:has(.landing-wrapper) main.app > .landing-wrapper {
    padding: 0;
}

/* Footer full-width */
.site-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px clamp(20px, 4vw, 48px) !important;
    margin: 80px 0 0 0 !important;
    box-sizing: border-box;
}

/* Scroll progress indicator üstte (topbar sticky üstünde) */
.scroll-progress {
    position: fixed;
    top: 0;
    z-index: 999;
}

/* =========================================================
   *** KESIN FIX *** — Tüm çakışan kuralların üstüne son söz
   Bu blok CSS dosyasının SONUNDA — cascade'te en güçlü.
   ========================================================= */

/* Body overflow sadece chat'te hidden, diğer sayfalarda scroll edilebilir */
body:not(.chat-page) {
    overflow: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
}

/* main.app kesin full-width, padding sıfır — chat hariç */
body:not(.chat-page) main.app,
body:not(.chat-page) .app,
body.has-page-wrap main.app:not(:has(.landing-wrapper)) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
}

/* Topbar kesin full-width, tepeye yapışsın */
body:not(.chat-page) .topbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px clamp(20px, 4vw, 48px) !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    box-sizing: border-box !important;
}

/* Sayfa içeriği ortalı, max 1400px, kendi padding'i */
body:not(.chat-page) .page-wrap,
body:not(.chat-page) .contact-main,
body:not(.chat-page) .shop-wrap {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 32px clamp(20px, 4vw, 48px) !important;
    box-sizing: border-box !important;
}

/* Footer kesin full-width, sayfa sonunda */
body:not(.chat-page) .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px clamp(20px, 4vw, 48px) !important;
    margin: 80px 0 0 0 !important;
    box-sizing: border-box !important;
}

/* Landing: topbar alt çizgi yok, geçişli */
body:has(.landing-wrapper) .topbar {
    border-bottom: none !important;
    background-color: color-mix(in srgb, var(--bg-card) 75%, transparent) !important;
}

/* html/body reset — hiçbir margin/padding olmasın */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   MASCOT — Landing hero avatar + peeking + CTA
   ========================================================= */
.lp-chat-avatar-mascot {
    padding: 0 !important;
    overflow: hidden;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
}
.lp-chat-avatar-mascot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Büyük peeking mascot, chat mockup'ın yanında */
.lp-hero-right { position: relative; }
.lp-hero-mascot {
    position: absolute;
    bottom: -30px;
    left: -70px;
    width: 160px;
    height: auto;
    z-index: 3;
    animation: mascot-bob 3.5s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(16, 185, 129, 0.18));
    pointer-events: none;
}
@keyframes mascot-bob {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-12px) rotate(3deg); }
}
@media (max-width: 1100px) {
    .lp-hero-mascot { width: 120px; left: -40px; }
}
@media (max-width: 960px) {
    .lp-hero-mascot { display: none; }
}

/* CTA'da mascot */
.lp-cta-bottom { position: relative; overflow: hidden; }
.lp-cta-mascot {
    position: absolute;
    bottom: 20px;
    right: 6%;
    width: 180px;
    height: auto;
    opacity: 0.85;
    z-index: 0;
    animation: mascot-wave 4s ease-in-out infinite;
    pointer-events: none;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.08));
}
@keyframes mascot-wave {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-6px); }
}
.lp-cta-inner { position: relative; z-index: 1; }

@media (max-width: 900px) {
    .lp-cta-mascot { width: 110px; right: 4%; opacity: 0.6; }
}
@media (max-width: 600px) {
    .lp-cta-mascot { display: none; }
}

/* =========================================================
   TRUST / SOCIAL PROOF BADGES
   ========================================================= */
.lp-trust {
    padding: 50px clamp(20px, 5vw, 80px);
}
.lp-trust-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}
.lp-trust-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    transition: all 0.2s ease;
}
.lp-trust-badge:hover {
    transform: translateY(-2px);
    border-color: var(--mint-300);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.lp-trust-badge-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}
.lp-trust-badge-label {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.lp-trust-badge-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 3px;
    font-weight: 500;
}
.lp-trust-discord .lp-trust-badge-label {
    color: #5865F2;
}
:root[data-theme="dark"] .lp-trust-discord .lp-trust-badge-label {
    color: #7289DA;
}

/* =========================================================
   CHAT SAYFASI — Arka plan footer ile match
   Kullanıcı "footer kısmındaki gibi olsun" istedi
   ========================================================= */
body.chat-page {
    background: var(--bg-card) !important;  /* footer ile aynı renk */
}
body.chat-page main.app,
body.chat-page .app {
    background: transparent !important;
}
:root[data-theme="dark"] body.chat-page {
    background: var(--bg-card) !important;
}

/* =========================================================
   LOADING SKELETONS — polling update'leri için
   ========================================================= */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-soft) 0%,
        var(--border-1) 50%,
        var(--bg-soft) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    display: inline-block;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line { height: 14px; width: 100%; }
.skeleton-line.sm { height: 10px; width: 60%; }
.skeleton-line.lg { height: 20px; width: 80%; }
.skeleton-block { height: 60px; width: 100%; border-radius: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }

/* Skeleton card — history/prices'ta trade/product yerine */
.skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: center;
}
.skeleton-card .skel-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:root[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
}

/* =========================================================
   *** CHAT PAGE — DEFINITIVE FIX ***
   Chat sayfası kendi yapısıyla çalışır (160px dar konuşma kolonu değil)
   Önceki tüm chat-page kuralları override edilir
   ========================================================= */

/* Body: scroll disabled (chat içinde kendi scroll'u var) */
body.chat-page {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--bg-app) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* main.app chat'te tam ekran */
body.chat-page main.app,
body.chat-page .app {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Topbar chat'te üstte sabit, küçük yükseklik */
body.chat-page .topbar {
    flex-shrink: 0 !important;
    width: 100% !important;
    padding: 12px clamp(16px, 3vw, 32px) !important;
    position: relative !important;  /* sticky DEĞİL, flex item */
    top: auto !important;
    border-bottom: 1px solid var(--border-1) !important;
    z-index: auto !important;
}

/* Chat history — kalan tüm alan, scroll edilebilir */
body.chat-page .chat-history,
body.chat-page .messages-container {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-width: 860px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 20px clamp(16px, 3vw, 24px) !important;
    box-sizing: border-box !important;
}

/* Input bar altta sabit */
body.chat-page .input-bar,
body.chat-page .chat-input-container,
body.chat-page .input-container {
    flex-shrink: 0 !important;
    max-width: 860px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 12px clamp(16px, 3vw, 24px) !important;
    background: var(--bg-app) !important;
    border-top: 1px solid var(--border-1) !important;
    box-sizing: border-box !important;
}

/* Chat'te footer GÖRÜNMESIN — zaten tam ekran chat UI */
body.chat-page .site-footer,
body.chat-page .lp-footer {
    display: none !important;
}

/* Mobile bottom nav chat'te gizli (support FAB var) */
body.chat-page .mobile-bottom-nav { display: none !important; }

/* =========================================================
   MOBILE BOTTOM NAV — her sayfada görünmesini garantile
   ========================================================= */
@media (max-width: 768px) {
    body.has-page-wrap .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 950 !important;
    }
    /* Body altına padding — content bottom-nav'ın altına girmesin */
    body.has-page-wrap:not(.chat-page) {
        padding-bottom: 76px !important;
    }
}
@media (max-width: 768px) {
    body.chat-page .mobile-bottom-nav { display: none !important; }
}

/* Shop sort dropdown — hidden attribute'unu zorla gizle */
.shop-sort-menu[hidden] {
    display: none !important;
}

/* =========================================================
   SHOP RARITY DROPDOWN — Mobile (chips yerine)
   Desktop: chips görünür, dropdown gizli
   Mobile (<= 700px): chips gizli, dropdown görünür
   ========================================================= */
.shop-rarity-wrap { display: none; position: relative; flex-shrink: 0; }

@media (max-width: 700px) {
    .shop-chips { display: none !important; }
    .shop-rarity-wrap { display: block; width: 100%; }
    .shop-rarity-btn { width: 100%; justify-content: space-between; }
}

.shop-rarity-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 42px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 160px;
}
.shop-rarity-btn:hover { border-color: var(--mint-400); }
.shop-rarity-btn > i:first-child { color: var(--mint-600); font-size: 13px; }
.shop-rarity-btn #shop-rarity-label { flex: 1; text-align: left; }
.shop-rarity-wrap.open .shop-sort-chev { transform: rotate(180deg); color: var(--mint-600); }
.shop-rarity-wrap.open .shop-rarity-btn {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.shop-rarity-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: shop-sort-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 60vh;
    overflow-y: auto;
}
.shop-rarity-menu[hidden] { display: none !important; }

.shop-rarity-opt {
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 0.1s;
}
.shop-rarity-opt:hover { background: var(--bg-soft); color: var(--text-1); }
.shop-rarity-opt.active {
    background: var(--mint-50);
    color: var(--mint-700);
}
:root[data-theme="dark"] .shop-rarity-opt.active {
    background: rgba(16, 185, 129, 0.12);
    color: var(--mint-400);
}

/* Toolbar mobile stack layout */
@media (max-width: 700px) {
    .shop-toolbar {
        flex-direction: column;
        gap: 10px;
    }
    .shop-search-wrap {
        width: 100%;
        max-width: 100%;
    }
    .shop-sort-wrap {
        width: 100%;
    }
    .shop-sort-btn { width: 100%; justify-content: space-between; }
}

/* =========================================================
   FOOTER BADGES — SSL + Discord (opsiyonel)
   ========================================================= */
.site-footer-badges {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.sf-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.sf-badge i { font-size: 11px; }

.sf-badge-ssl {
    background: var(--mint-50);
    color: var(--mint-700);
    border: 1px solid var(--mint-200);
}
.sf-badge-discord {
    background: rgba(88, 101, 242, 0.1);
    color: #5865F2;
    border: 1px solid rgba(88, 101, 242, 0.25);
}

:root[data-theme="dark"] .sf-badge-ssl {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--mint-400);
}
:root[data-theme="dark"] .sf-badge-discord {
    background: rgba(88, 101, 242, 0.14);
    border-color: rgba(88, 101, 242, 0.3);
    color: #889BFF;
}

@media (max-width: 700px) {
    .site-footer-badges { justify-content: center; }
}

/* Contact page — footer düzgün otursun */
body:not(.chat-page) .contact-main {
    padding-bottom: 60px !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   *** PERSONALITY PASS — AI kokusunu azalt ***
   Accent color + mixed typography + speech bubbles + micro-rotations
   ========================================================= */

/* Accent color (turuncu) — mint + beyaz palette'e karakter katar */
:root {
    --accent-orange: #F97316;
    --accent-orange-light: #FB923C;
    --accent-orange-bg: #FFF7ED;
}
:root[data-theme="dark"] {
    --accent-orange-bg: rgba(249, 115, 22, 0.1);
}

/* =========================================================
   HERO TITLE — Tipografik asimetri (her kelime farklı karakterde)
   ========================================================= */
.lp-hero-title {
    font-family: 'Manrope', -apple-system, sans-serif;
    line-height: 1.05;
    letter-spacing: -0.03em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 0.25em;
    align-items: baseline;
}
.lp-title-1 {
    font-weight: 600;
    color: var(--text-2);
}
.lp-title-2 {
    font-weight: 900;
    color: var(--text-1);
    font-style: italic;
    letter-spacing: -0.04em;
    transform: translateY(2px);
    display: inline-block;
}
.lp-title-3 {
    font-weight: 600;
    color: var(--text-2);
}
.lp-title-accent {
    font-weight: 900;
    color: var(--accent-orange);
    display: inline-block;
    transform: rotate(-1.5deg);
    position: relative;
    padding: 0 0.1em;
}
.lp-title-accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.02em;
    height: 0.12em;
    background: var(--accent-orange);
    opacity: 0.18;
    border-radius: 999px;
    transform: skewX(-6deg);
    z-index: -1;
}
.lp-title-4 {
    font-weight: 700;
    color: var(--text-1);
}
.lp-title-accent-small {
    color: var(--accent-orange);
    display: inline-block;
    transform: rotate(8deg);
    font-weight: 900;
}

/* =========================================================
   MASCOT — Breathing + mouse tracking + speech bubble
   ========================================================= */
.lp-mascot-group {
    position: relative;
    display: inline-block;
    isolation: isolate;
}
.lp-mascot-hero {
    position: absolute;
    bottom: -30px;
    left: -70px;
    z-index: 3;
    pointer-events: none;
}
.lp-mascot-cta {
    position: absolute;
    bottom: 20px;
    right: 6%;
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 1100px) {
    .lp-mascot-hero { left: -40px; }
}
@media (max-width: 960px) {
    .lp-mascot-hero { display: none; }
}
@media (max-width: 900px) {
    .lp-mascot-cta { opacity: 0.6; }
    .lp-mascot-cta .lp-cta-mascot { width: 110px; }
    .lp-mascot-cta .lp-mascot-bubble { display: none; }
}
@media (max-width: 600px) {
    .lp-mascot-cta { display: none; }
}

/* Mascot itself — breathing animation + mouse-follow translate */
.lp-mascot-anim {
    animation: mascot-breathe 4s ease-in-out infinite;
    transform-origin: bottom center;
    transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    translate: var(--mx, 0) var(--my, 0);
    filter: drop-shadow(0 10px 20px rgba(16, 185, 129, 0.18));
    will-change: transform, translate;
}
@keyframes mascot-breathe {
    0%, 100% { transform: scale(1) rotate(-4deg); }
    50%      { transform: scale(1.03) rotate(-2deg) translateY(-4px); }
}

/* Speech bubble */
.lp-mascot-bubble {
    position: absolute;
    top: -16px;
    right: -40px;
    background: #fff;
    color: #0F172A;
    padding: 10px 16px;
    border-radius: 18px 18px 18px 4px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12), 0 0 0 2px var(--mint-200);
    white-space: nowrap;
    z-index: 5;
    animation: bubble-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both,
               bubble-wiggle 4s ease-in-out 1.5s infinite;
    transform-origin: bottom left;
}
.lp-mascot-bubble-left {
    right: auto;
    left: -40px;
    top: -10px;
    border-radius: 18px 18px 4px 18px;
    transform-origin: bottom right;
    animation: bubble-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both,
               bubble-wiggle-alt 4s ease-in-out 1.5s infinite;
}
:root[data-theme="dark"] .lp-mascot-bubble {
    background: #1E293B;
    color: #F1F5F9;
    box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 0 2px rgba(16, 185, 129, 0.3);
}

@keyframes bubble-pop {
    from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes bubble-wiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    50%      { transform: rotate(-3deg) scale(1.02); }
}
@keyframes bubble-wiggle-alt {
    0%, 100% { transform: rotate(0) scale(1); }
    50%      { transform: rotate(3deg) scale(1.02); }
}

/* =========================================================
   TRADE CARDS — Random micro-rotation (via --rot CSS var)
   Her kart -2.4 ile +2.4 derece arası asimetrik
   ========================================================= */
.lp-trade-card-v2 {
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
.lp-trade-card-v2:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.02);
    z-index: 2;
}

/* =========================================================
   SECTION TITLE REVEAL — scroll'a göre kelime kelime
   ========================================================= */
[data-reveal-title] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal-title].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Section başlıklarına hafif rotate + italic emphasis */
.lp-section-head h2 {
    display: inline-block;
    position: relative;
}
.lp-section-head h2::first-letter {
    color: var(--accent-orange);
}

/* =========================================================
   STATS BAR — rakamlar asimetrik baseline'da
   ========================================================= */
.lp-stats-inner .lp-stat:nth-child(odd)  { transform: translateY(-3px); }
.lp-stats-inner .lp-stat:nth-child(even) { transform: translateY(3px); }

/* Feature cards hafif farklı rotate */
.lp-feat-card:nth-child(1) { transform: rotate(-0.8deg); }
.lp-feat-card:nth-child(2) { transform: rotate(0.5deg); }
.lp-feat-card:nth-child(3) { transform: rotate(-0.3deg); }
.lp-feat-card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.lp-feat-card:hover { transform: rotate(0) translateY(-6px); }

/* =========================================================
   CTA başlık accent — "?" turuncu ve eğik
   ========================================================= */
.lp-cta-bottom h2 {
    font-style: italic;
    letter-spacing: -0.03em;
}

/* =========================================================
   Reduced motion — animasyonları kes
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .lp-mascot-anim,
    .lp-mascot-bubble,
    .lp-trade-card-v2,
    .lp-feat-card,
    .lp-stats-inner .lp-stat {
        animation: none !important;
        transform: none !important;
    }
    [data-reveal-title] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   *** LANDING POLISH PASS #2 ***
   Live indicator, converter, section badges, comparison,
   top items chart, scroll-to-top, fresh deals mobile scroll,
   how-it-works timeline mobile, hero mobile cleanup, topbar mobile
   ========================================================= */

/* =========================================================
   LIVE INDICATOR — hero'da "Dealer şu an ne yapıyor"
   ========================================================= */
.lp-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--mint-200);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin: 18px 0 0 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
}
.lp-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: live-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    50%      { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}
:root[data-theme="dark"] .lp-live-indicator {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}

/* =========================================================
   USDT ↔ ROBUX CONVERTER — hero inline widget
   ========================================================= */
.lp-converter {
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    max-width: 440px;
}
.lp-conv-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-orange);
    margin-bottom: 10px;
}
.lp-conv-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp-conv-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-1);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.15s;
}
.lp-conv-input-wrap:focus-within {
    border-color: var(--mint-500);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.lp-conv-input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-1);
    width: 100%;
    font-family: 'Manrope', sans-serif;
    -moz-appearance: textfield;
}
.lp-conv-input::-webkit-outer-spin-button,
.lp-conv-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lp-conv-unit {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: 0.05em;
    margin-left: 8px;
    flex-shrink: 0;
}
.lp-conv-swap {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-3);
    flex-shrink: 0;
}

/* =========================================================
   SECTION BADGES — "01 / HOW" mini-label
   ========================================================= */
.lp-section-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: var(--accent-orange);
    margin-bottom: 12px;
    padding: 4px 12px;
    background: var(--accent-orange-bg);
    border-radius: 999px;
    border: 1px solid rgba(249, 115, 22, 0.2);
    text-transform: uppercase;
}

/* =========================================================
   COMPARISON TABLE — "Dealer vs Others"
   ========================================================= */
.lp-compare {
    max-width: 720px;
    margin: 60px auto 0;
    padding: 0 clamp(16px, 4vw, 32px);
}
.lp-compare-head {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.lp-compare-table {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.lp-compare-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    border-bottom: 1px solid var(--border-1);
}
.lp-compare-row:last-child { border-bottom: none; }
.lp-compare-header-row {
    background: var(--bg-soft);
    font-weight: 800;
    font-size: 13px;
    color: var(--text-2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.lp-compare-cell {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}
.lp-compare-label {
    font-weight: 700;
    color: var(--text-2);
}
.lp-compare-us {
    color: var(--mint-700);
    background: var(--mint-50);
    font-weight: 800;
}
.lp-compare-us i {
    color: var(--mint-600);
    font-size: 12px;
}
.lp-compare-them {
    color: var(--text-3);
    background: var(--bg-soft);
}
.lp-compare-them i {
    color: #EF4444;
    font-size: 12px;
}
.lp-compare-them i.fa-question,
.lp-compare-them i.fa-clock { color: #F59E0B; }
:root[data-theme="dark"] .lp-compare-us {
    background: rgba(16, 185, 129, 0.1);
    color: var(--mint-400);
}
:root[data-theme="dark"] .lp-compare-header-row { background: rgba(255,255,255,0.03); }

@media (max-width: 600px) {
    .lp-compare-row { grid-template-columns: 1fr 1fr 1fr; }
    .lp-compare-cell { padding: 10px 12px; font-size: 12px; }
    .lp-compare-label { font-size: 12px; }
}

/* =========================================================
   TOP ITEMS BAR CHART — "ne ödüyoruz"
   ========================================================= */
.lp-top-items {
    max-width: 720px;
    margin: 40px auto 0;
    padding: 24px clamp(16px, 4vw, 32px);
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.lp-top-head {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 16px;
    text-align: center;
}
.lp-top-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-top-row {
    display: grid;
    grid-template-columns: 140px 1fr 100px;
    gap: 14px;
    align-items: center;
}
.lp-top-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-top-bar-wrap {
    height: 12px;
    background: var(--bg-soft);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.lp-top-bar {
    height: 100%;
    width: var(--bar, 50%);
    background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
    border-radius: 999px;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
    animation: bar-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bar-grow {
    from { width: 0; }
    to { width: var(--bar, 50%); }
}
.lp-top-row.rarity-CHROMA .lp-top-bar {
    background: linear-gradient(90deg, #A78BFA, #F472B6, #FBBF24);
}
.lp-top-row.rarity-ANCIENT .lp-top-bar {
    background: linear-gradient(90deg, #8B5CF6, #C084FC);
}
.lp-top-row.rarity-GODLY .lp-top-bar {
    background: linear-gradient(90deg, #F59E0B, #FCD34D);
}
.lp-top-price {
    font-size: 15px;
    font-weight: 900;
    color: var(--mint-700);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lp-top-price span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    margin-left: 3px;
}
.lp-top-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--mint-600);
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: gap 0.2s;
}
.lp-top-link:hover { color: var(--mint-700); }

@media (max-width: 600px) {
    .lp-top-row { grid-template-columns: 100px 1fr 80px; gap: 10px; }
    .lp-top-name { font-size: 12px; }
    .lp-top-price { font-size: 13px; }
}

/* =========================================================
   SCROLL-TO-TOP MASCOT BUTTON
   ========================================================= */
.lp-scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mint-500);
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: visible;
}
.lp-scroll-top img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    animation: scroll-top-bob 2s ease-in-out infinite;
}
.lp-scroll-top > i {
    color: #fff;
    font-size: 20px;
}
.lp-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.lp-scroll-top:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.5);
}
.lp-scroll-top:active { transform: scale(0.95); }
@keyframes scroll-top-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-3px) rotate(3deg); }
}
.lp-scroll-top-bubble {
    position: absolute;
    right: 66px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #0F172A;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.lp-scroll-top:hover .lp-scroll-top-bubble { opacity: 1; }
:root[data-theme="dark"] .lp-scroll-top-bubble {
    background: #1E293B;
    color: #F1F5F9;
}
@media (max-width: 600px) {
    .lp-scroll-top { bottom: 90px; right: 16px; width: 48px; height: 48px; }
    .lp-scroll-top img { width: 36px; height: 36px; }
    .lp-scroll-top-bubble { display: none; }
}

/* =========================================================
   FRESH DEALS — MOBILE HORIZONTAL SCROLL
   Desktop: grid, Mobile: yatay kaydırılabilir mini kartlar
   ========================================================= */
@media (max-width: 700px) {
    .lp-recent-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        overflow-x: auto;
        overflow-y: visible;
        padding: 6px 16px 16px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -16px;
    }
    .lp-recent-grid::-webkit-scrollbar { display: none; }

    .lp-trade-card-v2 {
        flex: 0 0 150px !important;
        min-width: 150px;
        max-width: 150px;
        padding: 14px 12px !important;
        scroll-snap-align: start;
        transform: rotate(0deg) !important;  /* mobile'da eğik olmasın, sığamaz */
    }
    .lp-trade-v2-item {
        font-size: 13px !important;
        line-height: 1.2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    .lp-trade-v2-price { font-size: 14px !important; }
    .lp-trade-v2-user,
    .lp-trade-v2-time {
        font-size: 10px !important;
    }
    /* Sağ tarafta fade indicator — daha fazla var işareti */
    .lp-recent { position: relative; }
    .lp-recent::after {
        content: '';
        position: absolute;
        top: 140px;
        bottom: 16px;
        right: 0;
        width: 40px;
        background: linear-gradient(90deg, transparent, var(--bg-base));
        pointer-events: none;
        z-index: 2;
    }
}

/* =========================================================
   HOW IT WORKS — MOBILE VERTICAL TIMELINE
   ========================================================= */
@media (max-width: 700px) {
    .lp-steps {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        position: relative;
        padding-left: 40px;
        max-width: 420px;
        margin: 0 auto;
    }
    .lp-steps::before {
        content: '';
        position: absolute;
        left: 18px;
        top: 0;
        bottom: 20px;
        width: 2px;
        background: var(--mint-200);
    }
    .lp-step {
        position: relative;
        padding: 16px 0 16px 20px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .lp-step::before {
        content: attr(data-step-num);
        position: absolute;
        left: -40px;
        top: 18px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--mint-500);
        color: #fff;
        font-weight: 900;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    }
    .lp-step-num { display: none !important; }
    .lp-step h3 { font-size: 15px !important; margin: 0 0 4px 0 !important; }
    .lp-step p { font-size: 13px !important; }
    .lp-step-icon { display: none !important; }
}

/* =========================================================
   STATS BAR MOBILE — çerçevesiz 2x2
   ========================================================= */
@media (max-width: 700px) {
    .lp-stats-bar { padding: 30px 16px !important; }
    .lp-stats-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px 12px !important;
    }
    .lp-stat {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        transform: none !important;
        text-align: left;
    }
    .lp-stat > i { display: none !important; }
    .lp-stat-val { font-size: 22px !important; }
    .lp-stat-lbl { font-size: 11px !important; }
}

/* =========================================================
   FEATURES MOBILE — tek satır emoji+metin
   ========================================================= */
@media (max-width: 700px) {
    .lp-feats {
        display: flex !important;
        flex-direction: column;
        gap: 16px !important;
    }
    .lp-feat {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        transform: none !important;
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 14px;
        align-items: start;
        text-align: left;
    }
    .lp-feat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        grid-row: span 2;
    }
    .lp-feat h3 { font-size: 15px !important; margin: 4px 0 2px !important; }
    .lp-feat p { font-size: 13px !important; line-height: 1.4 !important; }
}

/* =========================================================
   HERO MOBILE — trust items gizli, tek CTA büyük
   ========================================================= */
@media (max-width: 700px) {
    .lp-hero { padding: 40px 16px 30px !important; }
    .lp-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .lp-hero-right { display: none; }
    .lp-hero-title { font-size: clamp(32px, 9vw, 44px) !important; gap: 0.1em 0.2em !important; }
    .lp-hero-sub { font-size: 15px !important; line-height: 1.5 !important; }

    .lp-hero-cta { flex-direction: column; gap: 10px !important; }
    .lp-hero-cta .lp-btn-primary {
        width: 100%;
        justify-content: center;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
    .lp-hero-cta .lp-btn-ghost {
        width: 100%;
        background: transparent;
        padding: 10px !important;
        font-size: 13px !important;
        justify-content: center;
    }

    /* Trust items mobile'da gizli — stats bar aynı bilgi veriyor */
    .lp-hero-trust { display: none !important; }

    .lp-live-indicator {
        width: 100%;
        justify-content: center;
        text-align: center;
        font-size: 12px !important;
    }
    .lp-converter { max-width: 100% !important; }
    .lp-conv-row { flex-direction: column; align-items: stretch; gap: 8px !important; }
    .lp-conv-swap { text-align: center; margin: 4px 0; }
}

/* =========================================================
   FLOATING ITEMS — mobile'da azalt (performans)
   ========================================================= */
@media (max-width: 700px) {
    .fi-5, .fi-6 { display: none !important; }
    .fi-1, .fi-2, .fi-3, .fi-4 {
        animation-duration: 90s !important;  /* yavaşlat, CPU tasarruf */
        opacity: 0.08 !important;
    }
}

/* =========================================================
   TOPBAR MOBILE — nav hamburger
   Brand tag gizli, nav links gizli → mobile bottom nav zaten var
   ========================================================= */
@media (max-width: 860px) {
    .topbar .brand-tag { display: none !important; }
    .topbar-nav { display: none !important; }
}
@media (max-width: 500px) {
    .topbar .brand-text { display: none !important; }
    .topbar { padding: 10px 14px !important; }
    .topbar .brand-mark img { width: 34px !important; height: 34px !important; }
}

/* =========================================================
   FOOTER "made by humans" line
   ========================================================= */
.site-footer-human {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
    letter-spacing: 0.02em;
}
:root[data-theme="dark"] .site-footer-human { opacity: 0.7; }

/* =========================================================
   BUTTON ARROW — micro interaction
   ========================================================= */
.lp-btn-primary { position: relative; overflow: hidden; }
.lp-btn-arrow {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-left: 4px;
}
.lp-btn-primary:hover .lp-btn-arrow {
    transform: translateX(4px);
}

/* =========================================================
   *** PERSONALITY PASS #3 ***
   Font migration + Price widget + Custom cursor + View Transitions
   + Cleanup of removed features
   ========================================================= */

/* =========================================================
   FONT SYSTEM — Manrope'dan çık: Inter (body) + Space Grotesk (display)
   ========================================================= */
:root {
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-serif:   'Instrument Serif', Georgia, serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
body {
    font-family: var(--font-body) !important;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';  /* Inter stylistic alternates */
    letter-spacing: -0.011em;
}
h1, h2, h3, h4, .lp-hero-title, .page-title, .lp-section-head h2 {
    font-family: var(--font-display) !important;
    letter-spacing: -0.025em;
}
/* Fiyatlar monospace — tabular aligned */
.lp-pc-price, .lp-trade-v2-price, .shop-card-price, .trade-card .trade-price,
.history-card .hc-price, .lp-stat-val {
    font-family: var(--font-mono) !important;
    font-feature-settings: 'tnum';
}

/* =========================================================
   HIDE REMOVED FEATURES (safeguard — HTML zaten silindi ama
   style rules kalmış olabilir, bunlar artık match etmiyor
   ve style.css'te ölü kod ama problem değil)
   Live indicator + converter HTML kaldırıldı, CSS hâlâ var ama match etmiyor.
   ========================================================= */

/* =========================================================
   PRICE CHECK WIDGET — Hero'daki interactive item search
   ========================================================= */
.lp-price-check {
    margin-top: 20px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-1);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
    max-width: 520px;
    position: relative;
}
.lp-pc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-orange);
    margin-bottom: 12px;
}
.lp-pc-label i {
    color: var(--accent-orange);
    font-size: 13px;
}

.lp-pc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-soft);
    border: 2px solid var(--border-1);
    border-radius: 14px;
    padding: 0 14px;
    transition: all 0.2s;
    height: 52px;
}
.lp-pc-input-wrap:focus-within {
    border-color: var(--mint-500);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.lp-pc-icon {
    color: var(--text-3);
    font-size: 15px;
    margin-right: 10px;
    flex-shrink: 0;
}
.lp-pc-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    font-family: var(--font-body);
    width: 100%;
    padding: 0;
    min-width: 0;
}
.lp-pc-input::placeholder {
    color: var(--text-3);
    font-weight: 500;
}
.lp-pc-clear {
    background: var(--bg-input);
    border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-2);
    transition: all 0.15s;
    flex-shrink: 0;
}
.lp-pc-clear:hover { background: var(--border-1); color: var(--text-1); }

/* Suggestions dropdown */
.lp-pc-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 20px;
    right: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: pc-fade-in 0.15s ease-out;
}
.lp-pc-suggestions[hidden] { display: none !important; }
@keyframes pc-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lp-pc-sug {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: background 0.12s;
}
.lp-pc-sug:hover { background: var(--bg-soft); }
.lp-pc-sug-rarity {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.lp-pc-sug-name {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
}
.lp-pc-sug-price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--mint-700);
}

/* Result card — match bulununca */
.lp-pc-result {
    margin-top: 14px;
    padding: 16px;
    background: linear-gradient(135deg, var(--mint-50), var(--accent-orange-bg));
    border: 2px solid var(--mint-300);
    border-radius: 14px;
    animation: pc-result-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-pc-result[hidden] { display: none !important; }
@keyframes pc-result-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.lp-pc-result-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.lp-pc-matched {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-pc-rarity {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-2);
    display: inline-block;
    width: fit-content;
}
.lp-pc-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
.lp-pc-price-block {
    text-align: right;
}
.lp-pc-price {
    font-size: 32px;
    font-weight: 900;
    color: var(--mint-700);
    font-family: var(--font-mono) !important;
    font-feature-settings: 'tnum';
    line-height: 1;
}
.lp-pc-unit {
    font-size: 10px;
    font-weight: 800;
    color: var(--mint-600);
    letter-spacing: 0.1em;
    margin-top: 2px;
}
.lp-pc-sell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--mint-500);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    font-family: var(--font-body);
    transition: all 0.2s;
    cursor: pointer;
}
.lp-pc-sell-btn:hover {
    background: var(--mint-600);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.3);
}

.lp-pc-empty {
    margin-top: 12px;
    padding: 14px;
    background: var(--bg-soft);
    border: 1px dashed var(--border-1);
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
    font-weight: 500;
}
.lp-pc-empty[hidden] { display: none !important; }

/* Rarity colors for suggestions + result card */
.lp-pc-rarity.r-chroma, .lp-pc-sug-rarity.r-chroma {
    background: linear-gradient(135deg, #A78BFA22, #F472B622, #FBBF2422);
    color: #7C3AED;
}
.lp-pc-rarity.r-ancient, .lp-pc-sug-rarity.r-ancient {
    background: rgba(139, 92, 246, 0.15); color: #7C3AED;
}
.lp-pc-rarity.r-vintage, .lp-pc-sug-rarity.r-vintage {
    background: rgba(244, 114, 182, 0.15); color: #DB2777;
}
.lp-pc-rarity.r-godly, .lp-pc-sug-rarity.r-godly {
    background: rgba(245, 158, 11, 0.15); color: #D97706;
}
.lp-pc-rarity.r-legendary, .lp-pc-sug-rarity.r-legendary {
    background: rgba(251, 191, 36, 0.15); color: #CA8A04;
}
.lp-pc-rarity.r-rare, .lp-pc-sug-rarity.r-rare {
    background: rgba(59, 130, 246, 0.15); color: #2563EB;
}

:root[data-theme="dark"] .lp-pc-result {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(249, 115, 22, 0.08));
    border-color: rgba(16, 185, 129, 0.3);
}

@media (max-width: 700px) {
    .lp-price-check { padding: 14px; max-width: 100%; }
    .lp-pc-input-wrap { height: 48px; }
    .lp-pc-input { font-size: 15px; }
    .lp-pc-price { font-size: 26px; }
    .lp-pc-name { font-size: 14px; }
}

/* =========================================================
   VIEW TRANSITIONS API — native sayfa geçişleri
   Chrome 111+, Safari 18+, graceful fallback
   ========================================================= */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: vt-fade-out 0.2s ease-out both;
}
::view-transition-new(root) {
    animation: vt-fade-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vt-fade-out {
    to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
}

/* =========================================================
   SELECTION COLOR — brand consistency
   ========================================================= */
::selection {
    background: var(--accent-orange);
    color: #fff;
}
:root[data-theme="dark"] ::selection {
    background: var(--mint-500);
    color: #0B1F17;
}

/* =========================================================
   SCROLLBAR — custom branded
   ========================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb {
    background: var(--mint-400);
    border-radius: 999px;
    border: 2px solid var(--bg-soft);
}
::-webkit-scrollbar-thumb:hover { background: var(--mint-500); }

/* =========================================================
   FOCUS RINGS — tutarlı, accessible
   ========================================================= */
*:focus-visible {
    outline: 3px solid var(--mint-500);
    outline-offset: 3px;
    border-radius: 4px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline-offset: 2px;
}

/* =========================================================
   PLACEHOLDER — placeholder shown animate (Inter variable)
   ========================================================= */
@keyframes placeholder-hint {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}
.lp-pc-input:placeholder-shown + .lp-pc-icon {
    animation: placeholder-hint 2s ease-in-out infinite;
}

/* =========================================================
   *** PRICES PAGE PROFESSIONAL PASS ***
   Trending carousel, rarity gradient borders, range slider,
   favorites, quick-sell modal, mobile 2-col
   ========================================================= */

/* =========================================================
   TRENDING THIS WEEK — horizontal scroll
   ========================================================= */
.shop-trending {
    margin: 0 0 32px 0;
    padding: 20px 0;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--mint-50), var(--accent-orange-bg));
    border: 1px solid var(--mint-200);
    overflow: hidden;
    position: relative;
}
.shop-trending-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-orange);
}
.shop-trending-head i {
    font-size: 15px;
    animation: fire-flicker 1.4s ease-in-out infinite;
}
@keyframes fire-flicker {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50%      { transform: scale(1.15) rotate(3deg); }
}
.shop-trending-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 24px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--mint-400) transparent;
    -webkit-overflow-scrolling: touch;
}
.shop-trending-scroll::-webkit-scrollbar { height: 6px; }
.shop-trending-scroll::-webkit-scrollbar-thumb { background: var(--mint-400); border-radius: 999px; }
.shop-trending-card {
    flex: 0 0 180px;
    min-width: 180px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-1);
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    scroll-snap-align: start;
}
.shop-trending-card:hover {
    transform: translateY(-4px);
    border-color: var(--mint-500);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.18);
}
.st-rarity {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 8px;
    background: var(--bg-soft);
    color: var(--text-2);
}
.st-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-price {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 800;
    color: var(--mint-700);
}
.st-price span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    margin-left: 4px;
}
.st-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--accent-orange);
    color: #fff;
}
/* Rarity tints for trending */
.shop-trending-card.r-chroma  .st-rarity { background: linear-gradient(90deg, #A78BFA33, #F472B633, #FBBF2433); color: #7C3AED; }
.shop-trending-card.r-ancient .st-rarity { background: rgba(139, 92, 246, 0.15); color: #7C3AED; }
.shop-trending-card.r-vintage .st-rarity { background: rgba(244, 114, 182, 0.15); color: #DB2777; }
.shop-trending-card.r-godly   .st-rarity { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.shop-trending-card.r-legendary .st-rarity { background: rgba(251, 191, 36, 0.15); color: #CA8A04; }
.shop-trending-card.r-rare    .st-rarity { background: rgba(59, 130, 246, 0.15); color: #2563EB; }

/* =========================================================
   TOOLBAR — multi-row layout
   ========================================================= */
.shop-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    margin-bottom: 24px;
    position: sticky;
    top: 80px;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.shop-toolbar-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.shop-toolbar-row .shop-search-wrap { flex: 1; min-width: 200px; }

/* Favorites toggle */
.shop-fav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 42px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    color: var(--text-2);
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
    transition: all 0.15s;
    flex-shrink: 0;
}
.shop-fav-toggle i { color: #F59E0B; font-size: 15px; }
.shop-fav-toggle:hover { border-color: #F59E0B; background: rgba(245, 158, 11, 0.05); }
.shop-fav-toggle.has-favs i { color: #F59E0B; filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)); }
.shop-fav-toggle.toggled {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-color: #F59E0B;
    color: #92400E;
}
.shop-fav-count {
    font-size: 11px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-1);
    min-width: 20px;
    text-align: center;
}
.shop-fav-toggle.toggled .shop-fav-count { background: rgba(255,255,255,0.7); color: #92400E; }

/* Multi-select chips with colored dots */
.shop-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-1);
    border-radius: 999px;
    color: var(--text-2);
    font-weight: 700;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.shop-chip:hover { border-color: var(--mint-400); color: var(--text-1); }
.shop-chip.active {
    background: var(--mint-50);
    border-color: var(--mint-500);
    color: var(--mint-700);
}
:root[data-theme="dark"] .shop-chip.active {
    background: rgba(16, 185, 129, 0.12);
    color: var(--mint-400);
}
.chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chip-dot-chroma    { background: linear-gradient(135deg, #A78BFA, #F472B6, #FBBF24); }
.chip-dot-ancient   { background: #8B5CF6; }
.chip-dot-vintage   { background: #F472B6; }
.chip-dot-godly     { background: #F59E0B; }
.chip-dot-legendary { background: #FBBF24; }
.chip-dot-rare      { background: #3B82F6; }

/* Price range slider */
.shop-range-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}
.shop-range-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.shop-range-value {
    color: var(--text-1);
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}
.shop-range-slider {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
}
.shop-range-track {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    background: var(--bg-soft);
    border-radius: 999px;
    transform: translateY(-50%);
}
.shop-range-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
    border-radius: 999px;
    left: 0; right: 0;
}
.shop-range-input {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    z-index: 2;
}
.shop-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--mint-500);
    border: 3px solid var(--bg-card);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.15s;
}
.shop-range-input::-webkit-slider-thumb:hover { transform: scale(1.2); }
.shop-range-input::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--mint-500);
    border: 3px solid var(--bg-card);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* =========================================================
   SHOP CARD — Rarity gradient borders + fav star + img
   ========================================================= */
.shop-card {
    position: relative;
    background: var(--bg-card);
    border-radius: 18px;
    padding: 16px;
    border: 2px solid var(--border-1);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.shop-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* CHROMA — rainbow rotating conic gradient border */
.shop-card.r-chroma {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        conic-gradient(from var(--angle, 0deg), #A78BFA, #F472B6, #FBBF24, #34D399, #60A5FA, #A78BFA) border-box;
    border: 2px solid transparent;
    animation: chroma-rotate 6s linear infinite;
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes chroma-rotate {
    to { --angle: 360deg; }
}

/* ANCIENT — holographic purple */
.shop-card.r-ancient {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(135deg, #8B5CF6, #C084FC, #E879F9, #8B5CF6) border-box;
    border: 2px solid transparent;
    background-size: 100% 100%, 300% 300%;
    animation: holo-shift 4s ease-in-out infinite;
}
@keyframes holo-shift {
    0%, 100% { background-position: 0% 0%, 0% 0%; }
    50%      { background-position: 0% 0%, 100% 100%; }
}

/* VINTAGE — pink-gold shimmer */
.shop-card.r-vintage {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(135deg, #F472B6, #FBBF24, #F472B6) border-box;
    border: 2px solid transparent;
}

/* GODLY — gold glow */
.shop-card.r-godly {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(135deg, #F59E0B, #FCD34D, #F59E0B) border-box;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.1), inset 0 0 20px rgba(245, 158, 11, 0.05);
}
.shop-card.r-godly:hover {
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.25), inset 0 0 20px rgba(245, 158, 11, 0.08);
}

/* LEGENDARY */
.shop-card.r-legendary {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(135deg, #FBBF24, #FDE68A) border-box;
    border: 2px solid transparent;
}

/* RARE */
.shop-card.r-rare {
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(135deg, #3B82F6, #60A5FA) border-box;
    border: 2px solid transparent;
}

/* Favorite star button */
.shop-fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
}
.shop-fav-btn i {
    color: var(--text-3);
    font-size: 14px;
    transition: all 0.2s;
}
.shop-fav-btn:hover i {
    color: #F59E0B;
    transform: scale(1.2);
}
.shop-fav-btn.active {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-color: #F59E0B;
}
.shop-fav-btn.active i {
    color: #F59E0B;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
    animation: fav-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fav-pop {
    0% { transform: scale(0.5) rotate(-20deg); }
    60% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Shop card art — image + fallback icon */
.shop-card-art {
    position: relative;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--bg-soft), var(--mint-50));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
}
.shop-card-img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-card:hover .shop-card-img {
    transform: scale(1.08) rotate(-2deg);
}
.shop-card-icon-fallback {
    font-size: 48px;
    color: var(--mint-600);
    opacity: 0.6;
}

/* Robux dual price label */
.shop-card-robux {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    margin: 2px 0 10px 0;
}

/* Actions row — quick sell icon + sell button */
.shop-card-actions {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.shop-card-quick {
    width: 38px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-light));
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
}
.shop-card-quick:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(249, 115, 22, 0.4);
}
.shop-card-quick i { font-size: 13px; }
.shop-card-btn {
    flex: 1;
    /* existing styling retained */
}

/* =========================================================
   QUICK SELL MODAL
   ========================================================= */
.qs-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s;
}
.qs-modal.open { opacity: 1; }
.qs-modal[hidden] { display: none !important; }
.qs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
}
.qs-dialog {
    position: relative;
    background: var(--bg-card);
    border-radius: 24px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qs-modal.open .qs-dialog { transform: translateY(0) scale(1); }
.qs-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: none;
    cursor: pointer;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.qs-close:hover { background: var(--border-1); color: var(--text-1); transform: rotate(90deg); }

.qs-head { text-align: center; margin-bottom: 24px; }
.qs-rarity {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
    background: var(--bg-soft);
    color: var(--text-2);
}
.qs-rarity.r-chroma    { background: linear-gradient(90deg, #A78BFA22, #F472B622, #FBBF2422); color: #7C3AED; }
.qs-rarity.r-ancient   { background: rgba(139, 92, 246, 0.15); color: #7C3AED; }
.qs-rarity.r-vintage   { background: rgba(244, 114, 182, 0.15); color: #DB2777; }
.qs-rarity.r-godly     { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.qs-rarity.r-legendary { background: rgba(251, 191, 36, 0.15); color: #CA8A04; }
.qs-rarity.r-rare      { background: rgba(59, 130, 246, 0.15); color: #2563EB; }

.qs-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--text-1);
    margin: 0;
    letter-spacing: -0.025em;
}
.qs-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px;
    background: linear-gradient(135deg, var(--mint-50), var(--accent-orange-bg));
    border-radius: 16px;
    margin-bottom: 24px;
}
.qs-price-col { text-align: center; }
.qs-price-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--text-3);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.qs-price-val {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 800;
    color: var(--mint-700);
}
.qs-price-divider {
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.qs-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.qs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    font-family: inherit;
    border: none;
    cursor: pointer;
}
.qs-btn-primary {
    background: var(--bg-soft);
    color: var(--text-1);
    border: 1.5px solid var(--border-1);
}
.qs-btn-primary:hover {
    background: var(--border-1);
    transform: translateY(-1px);
}
.qs-btn-accent {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.qs-btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.45);
}
.qs-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
    font-style: italic;
}

:root[data-theme="dark"] .qs-price-row {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(249, 115, 22, 0.08));
}

/* =========================================================
   MOBILE — 2 sütun grid, daha kompakt kart
   ========================================================= */
@media (max-width: 700px) {
    .shop-toolbar {
        padding: 14px;
        top: 70px;
    }
    .shop-toolbar-row {
        flex-wrap: nowrap;
    }
    .shop-toolbar-row .shop-search-wrap { flex: 1; min-width: 0; }
    .shop-fav-toggle { padding: 0 12px; }
    .shop-fav-toggle span:not(.shop-fav-count) { display: none; }

    /* Chips still visible but smaller */
    .shop-chips { display: none; }  /* mobile'da dropdown ile seçiyor */

    /* 2 column grid */
    .shop-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .shop-card {
        padding: 12px 10px;
        border-radius: 14px;
    }
    .shop-card-art { margin-bottom: 10px; border-radius: 10px; }
    .shop-card-rarity { font-size: 9px !important; padding: 2px 6px !important; }
    .shop-card-name { font-size: 13px !important; margin-bottom: 6px !important; }
    .shop-card-price { font-size: 16px !important; }
    .shop-card-price .usdt-label { font-size: 9px !important; }
    .shop-card-robux { font-size: 10px !important; margin: 2px 0 8px; }
    .shop-card-actions { gap: 4px; }
    .shop-card-quick { width: 32px; }
    .shop-card-quick i { font-size: 11px; }
    .shop-card-btn { padding: 7px 10px !important; font-size: 11px !important; }
    .shop-card-btn i { font-size: 10px; }
    .shop-fav-btn { width: 26px; height: 26px; top: 6px; right: 6px; }
    .shop-fav-btn i { font-size: 11px; }

    .shop-trending-card { flex: 0 0 150px; min-width: 150px; padding: 12px; }
    .st-name { font-size: 13px; }
    .st-price { font-size: 16px; }

    .qs-dialog { padding: 24px 20px 18px; }
    .qs-title { font-size: 22px; }
    .qs-price-val { font-size: 24px; }
}

/* =========================================================
   Rarity label animations on cards
   ========================================================= */
.shop-card-rarity {
    position: relative;
    z-index: 1;
}
.shop-card.r-chroma .shop-card-rarity {
    background: linear-gradient(90deg, #A78BFA, #F472B6, #FBBF24);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chroma-text-shift 3s ease-in-out infinite;
    font-weight: 900;
}
@keyframes chroma-text-shift {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

/* =========================================================
   *** PRICES FINAL CLEANUP ***
   Range slider border fix, sell button animation,
   search main, filter polish
   ========================================================= */

/* =========================================================
   RANGE SLIDER — kenarları sade, rarity border devralmasın
   ========================================================= */
.shop-range-slider,
.shop-range-track,
.shop-range-fill,
.shop-range-input,
.shop-price-inputs,
.shop-price-input-wrap,
.shop-price-input {
    background-clip: padding-box !important;
    border-image: none !important;
}
/* Range slider container — sadece hafif shadow, border yok */
.shop-range-slider {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0;
}
.shop-range-track {
    background: var(--bg-soft) !important;
    border: none !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.shop-range-fill {
    background: linear-gradient(90deg, var(--mint-500), var(--mint-600)) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.shop-range-input::-webkit-slider-thumb {
    background: var(--mint-500) !important;
    border: 3px solid var(--bg-card) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 1px var(--border-1) !important;
}
.shop-range-input::-moz-range-thumb {
    background: var(--mint-500) !important;
    border: 3px solid var(--bg-card) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* Price inputs — sade */
.shop-price-input-wrap {
    background: var(--bg-soft) !important;
    border: 1.5px solid var(--border-1) !important;
    transition: all 0.15s;
}
.shop-price-input-wrap:focus-within {
    border-color: var(--mint-500) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* =========================================================
   SHOP CARD — Sell button ANIMATED (pulse + shine)
   ========================================================= */
.shop-card-btn {
    position: relative;
    overflow: hidden;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    padding: 12px !important;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.shop-card-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-card-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.4) !important;
    background: linear-gradient(135deg, var(--mint-600), var(--mint-700)) !important;
}
.shop-card-btn:hover::before {
    left: 100%;
}
.shop-card-btn:active {
    transform: translateY(0) scale(0.98) !important;
}
.shop-card-btn i {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-card-btn:hover i {
    transform: translateX(3px);
}

/* Pulse atımı — hover yokken her 4 saniyede bir subtle pulse */
@keyframes shop-btn-breathe {
    0%, 94%, 100% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); }
    97%           { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45), 0 0 0 6px rgba(16, 185, 129, 0.1); }
}
.shop-card-btn {
    animation: shop-btn-breathe 4s ease-in-out infinite;
}
.shop-card-btn:hover { animation: none; }

/* =========================================================
   HERO SEARCH — ortalı büyük
   ========================================================= */
.shop-hero-search {
    max-width: 720px;
    margin: 0 auto 36px;
    padding: 0 20px;
}
.shop-hero-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 2px solid var(--border-1);
    border-radius: 18px;
    padding: 0 20px;
    height: 64px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-hero-search-inner:focus-within {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12), 0 16px 40px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.shop-hero-search-inner > i:first-child {
    font-size: 18px;
    color: var(--mint-600);
    margin-right: 14px;
}
.shop-hero-search-inner .shop-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-1);
    font-family: var(--font-body);
    padding: 0;
    min-width: 0;
}
.shop-hero-search-inner .shop-search::placeholder {
    color: var(--text-3);
    font-weight: 500;
}
.shop-hero-search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--bg-soft);
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--border-1);
    flex-shrink: 0;
}
.shop-hero-search-inner .shop-search-clear {
    background: var(--bg-soft);
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-2);
    transition: all 0.15s;
    margin-right: 8px;
    flex-shrink: 0;
}
.shop-hero-search-inner .shop-search-clear:hover { background: var(--border-1); color: var(--text-1); }

@media (max-width: 700px) {
    .shop-hero-search-inner { height: 54px; padding: 0 16px; }
    .shop-hero-search-inner .shop-search { font-size: 15px; }
    .shop-hero-search-inner > i:first-child { font-size: 15px; margin-right: 10px; }
    .shop-hero-search-kbd { display: none; }
}

/* =========================================================
   SIDEBAR FILTER — görseldeki gibi
   ========================================================= */
.shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}
.shop-sidebar {
    position: sticky;
    top: 90px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.shop-sidebar-close { display: none; }

.shop-filter-section {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-1);
}
.shop-filter-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.shop-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0 0 12px 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    color: var(--text-2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
}
.shop-filter-head i {
    font-size: 11px;
    color: var(--text-3);
    transition: transform 0.2s;
}
.shop-filter-section.collapsed .shop-filter-head i { transform: rotate(180deg); }
.shop-filter-section.collapsed .shop-filter-body { display: none; }

.shop-filter-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Price inputs (min — max) */
.shop-price-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.shop-price-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-1);
    border-radius: 10px;
    padding: 0 10px;
    height: 40px;
}
.shop-price-prefix {
    font-family: var(--font-mono);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 700;
    margin-right: 6px;
}
.shop-price-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    width: 100%;
    -moz-appearance: textfield;
    padding: 0;
}
.shop-price-input::-webkit-outer-spin-button,
.shop-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-price-dash {
    color: var(--text-3);
    font-weight: 700;
    font-size: 14px;
}

/* Rarity colored tiles — görseldeki gibi square butonlar */
.shop-rarity-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.shop-rarity-tile {
    position: relative;
    aspect-ratio: 1;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: all 0.15s;
}
.shop-rarity-tile-inner {
    display: block;
    width: 100%; height: 100%;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-rarity-tile:hover .shop-rarity-tile-inner { transform: scale(0.92); }
.shop-rarity-tile.active {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--mint-400);
}
.shop-rarity-tile.active .shop-rarity-tile-inner { transform: scale(0.88); }

/* Tile background — rarity'e özel gradient */
.tile-chroma .shop-rarity-tile-inner {
    background: linear-gradient(135deg, #A78BFA, #F472B6, #FBBF24, #34D399);
}
.tile-ancient .shop-rarity-tile-inner {
    background: linear-gradient(135deg, #8B5CF6, #C084FC);
}
.tile-vintage .shop-rarity-tile-inner {
    background: linear-gradient(135deg, #F472B6, #EC4899);
}
.tile-godly .shop-rarity-tile-inner {
    background: linear-gradient(135deg, #F59E0B, #FCD34D);
}
.tile-legendary .shop-rarity-tile-inner {
    background: linear-gradient(135deg, #FBBF24, #FDE68A);
}
.tile-rare .shop-rarity-tile-inner {
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
}

/* Favorites toggle in sidebar */
.shop-sidebar-fav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-1);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-2);
    font-weight: 700;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    transition: all 0.15s;
}
.shop-sidebar-fav i { color: #F59E0B; font-size: 14px; }
.shop-sidebar-fav:hover { border-color: #F59E0B; }
.shop-sidebar-fav.toggled {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-color: #F59E0B;
    color: #92400E;
}
.shop-sidebar-fav .count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-1);
}
.shop-sidebar-fav.toggled .count { background: rgba(255,255,255,0.7); color: #92400E; }

/* =========================================================
   MOBILE — sidebar → bottom drawer
   ========================================================= */
.shop-filter-fab {
    display: none;
}
@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar {
        position: fixed;
        inset: 0;
        top: auto;
        max-height: 80vh;
        border-radius: 24px 24px 0 0;
        padding: 24px 20px 80px;
        z-index: 9000;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 -20px 60px rgba(0,0,0,0.3);
    }
    .shop-sidebar.open { transform: translateY(0); }
    .shop-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 16px; right: 16px;
        width: 32px; height: 32px;
        background: var(--bg-soft);
        border: none;
        border-radius: 50%;
        color: var(--text-2);
        cursor: pointer;
    }
    .shop-filter-fab {
        display: flex;
        position: fixed;
        bottom: 90px;
        right: 16px;
        width: 52px; height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
        border: none;
        color: #fff;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        z-index: 800;
        box-shadow: 0 10px 24px rgba(16, 185, 129, 0.4);
    }
    .shop-filter-fab i { font-size: 18px; }
    .shop-filter-fab .badge {
        position: absolute;
        top: -4px; right: -4px;
        background: var(--accent-orange);
        color: #fff;
        font-size: 10px;
        font-weight: 900;
        padding: 2px 6px;
        border-radius: 999px;
        min-width: 18px;
        text-align: center;
    }
    .shop-filter-fab .badge[data-count="0"] { display: none; }
    .shop-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 8999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    .shop-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* =========================================================
   Item name truncate — uzun isimler
   ========================================================= */
.shop-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.8em;
}

/* =========================================================
   *** SP-PRICES v2 — Temiz yeniden yazım ***
   Tüm sp-* prefix'li class'lar. Eski shop-* kuralları
   artık kullanılmıyor (HTML'de yoklar).
   ========================================================= */

/* -------- SEARCH HERO -------- */
.sp-search {
    max-width: 720px;
    margin: 8px auto 28px;
    padding: 0 16px;
}
.sp-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 2px solid var(--border-1);
    border-radius: 16px;
    padding: 0 18px;
    height: 60px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-search-box:focus-within {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12), 0 12px 28px rgba(0,0,0,0.06);
}
.sp-search-box > i:first-child {
    color: var(--mint-600);
    font-size: 17px;
    margin-right: 12px;
    flex-shrink: 0;
}
.sp-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-1);
    font-family: inherit;
    padding: 0;
    min-width: 0;
}
.sp-search-box input::placeholder {
    color: var(--text-3);
    font-weight: 500;
}
.sp-search-box button {
    background: var(--bg-soft);
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-2);
    margin-right: 8px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.sp-search-box button:hover { background: var(--border-1); color: var(--text-1); }
.sp-search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 6px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    color: var(--text-3);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 700px) {
    .sp-search-box { height: 50px; padding: 0 14px; }
    .sp-search-box input { font-size: 15px; }
    .sp-search-kbd { display: none; }
}

/* -------- LAYOUT -------- */
.sp-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .sp-layout { grid-template-columns: 1fr; }
}

/* -------- SIDEBAR -------- */
.sp-sidebar {
    position: sticky;
    top: 90px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.sp-sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-1);
}
.sp-sidebar-head h3 {
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    color: var(--text-1);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.sp-reset-btn {
    background: transparent;
    border: 1.5px solid var(--border-1);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.sp-reset-btn:hover {
    border-color: var(--mint-500);
    color: var(--mint-700);
    background: var(--mint-50);
}
:root[data-theme="dark"] .sp-reset-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--mint-400);
}
.sp-sidebar-close {
    display: none;
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    background: var(--bg-soft);
    border: none;
    border-radius: 50%;
    color: var(--text-2);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.sp-section {
    margin-bottom: 20px;
}
.sp-section:last-child { margin-bottom: 0; }
.sp-section-head {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* -------- PRICE INPUTS -------- */
.sp-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sp-price-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-1);
    border-radius: 10px;
    padding: 0 10px;
    height: 40px;
    transition: all 0.15s;
}
.sp-price-input-wrap:focus-within {
    border-color: var(--mint-500);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.sp-price-pref {
    color: var(--text-3);
    font-size: 13px;
    font-weight: 700;
    margin-right: 6px;
    font-family: ui-monospace, monospace;
}
.sp-price-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: ui-monospace, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    width: 100%;
    -moz-appearance: textfield;
    padding: 0;
    min-width: 0;
}
.sp-price-input-wrap input::-webkit-outer-spin-button,
.sp-price-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-price-dash {
    color: var(--text-3);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

/* -------- RARITY TILES -------- */
.sp-rarity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.sp-tile {
    position: relative;
    aspect-ratio: 1;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    overflow: visible;
    transition: all 0.15s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: inherit;
}
.sp-tile-fill {
    display: block;
    width: 100%; height: 100%;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.25);
}
.sp-tile:hover .sp-tile-fill { transform: scale(0.94); }
.sp-tile-check {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255,255,255,0.95);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10B981;
    font-size: 11px;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.sp-tile.active {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--mint-400), 0 4px 12px rgba(16, 185, 129, 0.3);
}
.sp-tile.active .sp-tile-fill { transform: scale(0.86); }
.sp-tile.active .sp-tile-check {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.sp-tile-chroma    .sp-tile-fill { background: linear-gradient(135deg, #A78BFA, #F472B6, #FBBF24, #34D399); }
.sp-tile-ancient   .sp-tile-fill { background: linear-gradient(135deg, #8B5CF6, #C084FC); }
.sp-tile-vintage   .sp-tile-fill { background: linear-gradient(135deg, #F472B6, #EC4899); }
.sp-tile-godly     .sp-tile-fill { background: linear-gradient(135deg, #F59E0B, #FCD34D); }
.sp-tile-legendary .sp-tile-fill { background: linear-gradient(135deg, #FBBF24, #FDE68A); }
.sp-tile-rare      .sp-tile-fill { background: linear-gradient(135deg, #3B82F6, #60A5FA); }

/* -------- SORT RADIO -------- */
.sp-sort-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-sort-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}
.sp-sort-opt:hover { background: var(--bg-soft); color: var(--text-1); }
.sp-sort-opt input {
    accent-color: var(--mint-500);
    cursor: pointer;
    width: 16px; height: 16px;
    flex-shrink: 0;
}
.sp-sort-opt:has(input:checked) {
    background: var(--mint-50);
    color: var(--mint-700);
}
:root[data-theme="dark"] .sp-sort-opt:has(input:checked) {
    background: rgba(16, 185, 129, 0.12);
    color: var(--mint-400);
}

/* -------- RESULT META -------- */
.sp-result-meta {
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 16px;
    font-weight: 500;
}
.sp-result-meta span {
    color: var(--text-1);
    font-weight: 800;
    font-family: ui-monospace, monospace;
}

/* -------- GRID -------- */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* -------- CARD (value card, SADE border, NO gradient) -------- */
.sp-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.sp-card:hover {
    transform: translateY(-4px);
    border-color: var(--mint-400);
    box-shadow: 0 16px 32px rgba(0,0,0,0.08);
}
.sp-card:hover .sp-card-arrow {
    transform: translateX(4px);
    color: var(--mint-600);
}

.sp-card-top {
    display: flex;
    justify-content: flex-start;
}
.sp-card-rarity {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-soft);
    color: var(--text-2);
}
.sp-card-rarity.rarity-chroma    { background: linear-gradient(90deg, rgba(167,139,250,0.2), rgba(244,114,182,0.2), rgba(251,191,36,0.2)); color: #7C3AED; }
.sp-card-rarity.rarity-ancient   { background: rgba(139, 92, 246, 0.15); color: #7C3AED; }
.sp-card-rarity.rarity-vintage   { background: rgba(244, 114, 182, 0.15); color: #DB2777; }
.sp-card-rarity.rarity-godly     { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.sp-card-rarity.rarity-legendary { background: rgba(251, 191, 36, 0.15); color: #CA8A04; }
.sp-card-rarity.rarity-rare      { background: rgba(59, 130, 246, 0.15); color: #2563EB; }
:root[data-theme="dark"] .sp-card-rarity.rarity-ancient   { background: rgba(139, 92, 246, 0.2); color: #C4B5FD; }
:root[data-theme="dark"] .sp-card-rarity.rarity-vintage   { background: rgba(244, 114, 182, 0.2); color: #F9A8D4; }
:root[data-theme="dark"] .sp-card-rarity.rarity-godly     { background: rgba(245, 158, 11, 0.2); color: #FCD34D; }
:root[data-theme="dark"] .sp-card-rarity.rarity-legendary { background: rgba(251, 191, 36, 0.2); color: #FDE68A; }
:root[data-theme="dark"] .sp-card-rarity.rarity-rare      { background: rgba(59, 130, 246, 0.2); color: #93C5FD; }

.sp-card-img {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--bg-soft), var(--mint-50));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
:root[data-theme="dark"] .sp-card-img {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(16, 185, 129, 0.06));
}
.sp-card-img img {
    width: 75%; height: 75%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-card:hover .sp-card-img img { transform: scale(1.08) rotate(-2deg); }
.sp-card-img i {
    font-size: 44px;
    color: var(--mint-600);
    opacity: 0.55;
}

.sp-card-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.6em;
}

/* Sparkline mini chart */
.sp-card-spark {
    height: 24px;
    margin: -4px 0;
}
.sp-card-spark svg {
    width: 100%;
    height: 100%;
    display: block;
}
.sp-spark-line {
    fill: none;
    stroke: var(--mint-500);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
}
.sp-card:hover .sp-spark-line {
    opacity: 1;
    stroke: var(--mint-600);
}

.sp-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    margin-top: auto;
}
.sp-card-price {
    flex: 1;
    min-width: 0;
}
.sp-card-usdt {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 800;
    color: var(--mint-700);
    letter-spacing: -0.01em;
}
.sp-card-usdt span {
    font-size: 10px;
    color: var(--text-3);
    font-weight: 700;
    margin-left: 2px;
}
.sp-card-robux {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
    margin-top: 2px;
}
.sp-card-arrow {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 11px;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}

:root[data-theme="dark"] .sp-card-usdt { color: var(--mint-400); }

/* Empty state */
.sp-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-3);
}
.sp-empty i {
    font-size: 36px;
    margin-bottom: 16px;
    opacity: 0.4;
}
.sp-empty h3 {
    font-size: 18px;
    color: var(--text-1);
    margin: 0 0 6px;
}
.sp-empty p {
    font-size: 14px;
    margin: 0;
}

/* -------- MOBILE FILTER FAB -------- */
.sp-filter-fab {
    display: none;
    position: fixed;
    bottom: 92px;
    right: 16px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    border: none;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 800;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.4);
    font-family: inherit;
}
.sp-filter-fab i { font-size: 18px; }
.sp-filter-fab-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: #F97316;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}
.sp-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 8999;
    opacity: 0;
    transition: opacity 0.25s;
}
.sp-sidebar-backdrop.open { display: block; opacity: 1; }

@media (max-width: 900px) {
    .sp-filter-fab { display: flex; }
    .sp-sidebar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: auto;
        max-height: 80vh;
        border-radius: 20px 20px 0 0;
        padding: 28px 20px 40px;
        z-index: 9000;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 -20px 60px rgba(0,0,0,0.3);
    }
    .sp-sidebar.open { transform: translateY(0); }
    .sp-sidebar-close { display: flex; }
}

@media (max-width: 700px) {
    .sp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .sp-card { padding: 12px; border-radius: 14px; gap: 10px; }
    .sp-card-name { font-size: 13px; min-height: 2.4em; }
    .sp-card-usdt { font-size: 16px; }
    .sp-card-usdt span { font-size: 9px; }
    .sp-card-robux { font-size: 10px; }
    .sp-card-arrow { width: 26px; height: 26px; font-size: 10px; }
    .sp-card-rarity { font-size: 9px; padding: 3px 8px; }
}

/* -------- MODAL (detail popup) -------- */
.sp-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s;
}
.sp-modal.open { opacity: 1; }
.sp-modal[hidden] { display: none !important; }
.sp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
}
.sp-modal-dialog {
    position: relative;
    background: var(--bg-card);
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-modal.open .sp-modal-dialog { transform: translateY(0) scale(1); }

.sp-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.15s;
    font-family: inherit;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.sp-modal-close:hover { transform: rotate(90deg); }

.sp-modal-img {
    aspect-ratio: 1.6;
    background: linear-gradient(135deg, var(--bg-soft), var(--mint-50));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}
:root[data-theme="dark"] .sp-modal-img {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(16, 185, 129, 0.1));
}
.sp-modal-img img {
    width: 55%; height: 75%;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.2));
}
.sp-modal-img i {
    font-size: 100px;
    color: var(--mint-500);
    opacity: 0.6;
}

.sp-modal-body {
    padding: 24px 28px 28px;
}

.sp-modal-rarity {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-2);
    margin-bottom: 10px;
}
.sp-modal-rarity.rarity-chroma    { background: linear-gradient(90deg, rgba(167,139,250,0.2), rgba(244,114,182,0.2), rgba(251,191,36,0.2)); color: #7C3AED; }
.sp-modal-rarity.rarity-ancient   { background: rgba(139, 92, 246, 0.15); color: #7C3AED; }
.sp-modal-rarity.rarity-vintage   { background: rgba(244, 114, 182, 0.15); color: #DB2777; }
.sp-modal-rarity.rarity-godly     { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.sp-modal-rarity.rarity-legendary { background: rgba(251, 191, 36, 0.15); color: #CA8A04; }
.sp-modal-rarity.rarity-rare      { background: rgba(59, 130, 246, 0.15); color: #2563EB; }

.sp-modal-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-1);
    margin: 0 0 20px;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.sp-modal-prices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 18px;
    background: linear-gradient(135deg, var(--mint-50), rgba(249, 115, 22, 0.06));
    border-radius: 14px;
    margin-bottom: 22px;
}
:root[data-theme="dark"] .sp-modal-prices {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(249, 115, 22, 0.08));
}
.sp-modal-price-col { text-align: center; }
.sp-modal-price-lbl {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--text-3);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sp-modal-price-val {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 26px;
    font-weight: 800;
    color: var(--mint-700);
    letter-spacing: -0.01em;
}
:root[data-theme="dark"] .sp-modal-price-val { color: var(--mint-400); }
.sp-modal-price-div {
    color: var(--text-3);
    font-size: 18px;
    font-weight: 700;
}

/* Chart */
.sp-modal-chart-wrap {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-soft);
    border-radius: 12px;
    border: 1px solid var(--border-1);
}
.sp-modal-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.sp-modal-chart-trend {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0;
    text-transform: none;
}
.sp-modal-chart-trend.up {
    background: rgba(16, 185, 129, 0.15);
    color: var(--mint-700);
}
.sp-modal-chart-trend.down {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}
:root[data-theme="dark"] .sp-modal-chart-trend.up { color: var(--mint-400); }
.sp-modal-chart {
    width: 100%;
    height: 120px;
    display: block;
}

.sp-modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}
.sp-modal-stat {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-soft);
    border-radius: 10px;
    border: 1px solid var(--border-1);
}
.sp-modal-stat-lbl {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sp-modal-stat-val {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-1);
}

.sp-modal-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}
.sp-modal-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, var(--mint-600), var(--mint-700));
    color: #fff !important;
    text-decoration: none !important;
}
.sp-modal-cta i:last-child { transition: transform 0.2s; }
.sp-modal-cta:hover i:last-child { transform: translateX(4px); }

@media (max-width: 600px) {
    .sp-modal-dialog { max-width: 100%; border-radius: 20px 20px 0 0; margin-top: auto; max-height: 92vh; }
    .sp-modal-name { font-size: 22px; }
    .sp-modal-price-val { font-size: 22px; }
    .sp-modal-img { aspect-ratio: 2; }
    .sp-modal-img img { width: 50%; height: 70%; }
}

/* =========================================================
   *** SP-PRICES v3 — BORDER CLEANUP + REAL CHART ***
   Yeşil seçim border'larını kaldır — sadece checkmark / fill
   Search focus: sade, border yok
   Sort opt active: sade, kenar yok
   Tile hover: rarity ismi tooltip
   Modal chart: Chart.js canvas wrap
   ========================================================= */

/* --- SEARCH BOX: focus'ta border yok, sadece subtle shadow --- */
.sp-search-box {
    border: 1.5px solid var(--border-1) !important;
    transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s !important;
}
.sp-search-box:focus-within {
    border-color: var(--border-1) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important;
}
:root[data-theme="dark"] .sp-search-box:focus-within {
    box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
}

/* --- RARITY TILE: yeşil ring ve yeşil border YOK
     Sadece checkmark gözüksün. Fill scale ile küçülsün. --- */
.sp-tile {
    border: 2px solid transparent !important;
    box-shadow: none !important;
    overflow: hidden;
    position: relative;
}
.sp-tile:hover .sp-tile-fill { transform: scale(0.94); }
.sp-tile.active {
    border-color: transparent !important;
    box-shadow: none !important;
}
.sp-tile.active .sp-tile-fill {
    transform: scale(0.86);
    filter: brightness(0.85);
}

.sp-tile-check {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255,255,255,0.95);
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10B981;
    font-size: 12px;
    font-weight: 900;
    opacity: 0;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 3;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    pointer-events: none;
}
.sp-tile.active .sp-tile-check {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- TILE HOVER TOOLTIP — rarity ismi --- */
.sp-tile::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0F172A;
    color: #F9FAFB;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.sp-tile::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0F172A;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 10;
}
.sp-tile:hover::after,
.sp-tile:hover::before {
    opacity: 1;
}
.sp-tile:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* --- SORT OPT: seçilen seçenekte koyu kenar YOK
     Sadece hafif background, radio mint olsun --- */
.sp-sort-opt {
    border: none !important;
    background: transparent;
}
.sp-sort-opt:hover {
    background: var(--bg-soft) !important;
}
.sp-sort-opt:has(input:checked) {
    background: var(--bg-soft) !important;
    color: var(--text-1) !important;
    border: none !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] .sp-sort-opt:has(input:checked) {
    background: rgba(255,255,255,0.04) !important;
    color: var(--text-1) !important;
}
/* Radio noktası sade mint */
.sp-sort-opt input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-1);
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s;
}
.sp-sort-opt input[type="radio"]:checked {
    border-color: var(--mint-500);
    background: var(--mint-500);
    box-shadow: inset 0 0 0 3px var(--bg-card);
}
:root[data-theme="dark"] .sp-sort-opt input[type="radio"]:checked {
    box-shadow: inset 0 0 0 3px #0F172A;
}

/* --- PRICE INPUT FOCUS: yeşil shadow kaldır, sadece border sade --- */
.sp-price-input-wrap:focus-within {
    border-color: var(--border-1) !important;
    background: var(--bg-card) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
:root[data-theme="dark"] .sp-price-input-wrap:focus-within {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* --- RESET BUTTON: yeşil hover yok, sade gri --- */
.sp-reset-btn:hover {
    border-color: var(--text-3) !important;
    color: var(--text-1) !important;
    background: var(--bg-soft) !important;
}

/* --- CARD HOVER: yeşil border yok, sade shadow --- */
.sp-card:hover {
    border-color: var(--border-1) !important;
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.08);
}

/* --- SPARKLINE'I KART İÇİNDEN KALDIR (HTML'den silindi ama stil temizliği) --- */
.sp-card-spark { display: none !important; }

/* --- MODAL CHART: SVG wrap kalktı, Canvas wrap geldi --- */
.sp-modal-chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}
.sp-modal-chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
/* Chart wrap dış stili */
.sp-modal-chart-wrap {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-soft);
    border-radius: 14px;
    border: 1px solid var(--border-1);
}
.sp-modal-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sp-modal-chart-trend {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0;
    text-transform: none;
}
.sp-modal-chart-trend.up {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}
.sp-modal-chart-trend.down {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}
:root[data-theme="dark"] .sp-modal-chart-trend.up { color: #34D399; }
:root[data-theme="dark"] .sp-modal-chart-trend.down { color: #F87171; }

/* Mobile adjust */
@media (max-width: 600px) {
    .sp-modal-chart-canvas-wrap { height: 180px; }
}

/* =========================================================
   *** SP-PRICES v4 — Final polish ***
   Search focus border kaldır, tooltip 2-satır, mobile fix
   ========================================================= */

/* --- SEARCH INPUT: iç kenarlık / outline hepsi kaldırıldı --- */
#sp-search-input,
.sp-search-box input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#sp-search-input:focus,
#sp-search-input:active,
.sp-search-box input:focus,
.sp-search-box input:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
/* Search box dış kutunun focus state'i — sadece subtle shadow */
.sp-search-box {
    border: 1.5px solid var(--border-1) !important;
    background: var(--bg-card) !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
}
.sp-search-box:focus-within {
    border-color: var(--border-1) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important;
}
:root[data-theme="dark"] .sp-search-box:focus-within {
    box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
}
/* Chrome autofill hali — mint sızıntısı olmasın */
#sp-search-input:-webkit-autofill,
#sp-search-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    -webkit-text-fill-color: var(--text-1) !important;
    caret-color: var(--text-1);
}

/* --- RARITY TILE TOOLTIP: "Godly / Rarity level" 2-satırlı güzel tooltip --- */
.sp-tile::after,
.sp-tile::before { content: none !important; }

.sp-tile-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #1F2937;
    color: #F9FAFB;
    padding: 8px 14px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 100;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.sp-tile-tip-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #F9FAFB;
}
.sp-tile-tip-sub {
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    letter-spacing: 0.04em;
}
.sp-tile-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1F2937;
}
.sp-tile:hover .sp-tile-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- 8 RARITY TILE RENKLERİ — MM2 official rarity colors --- */
/* Grid 4x2 for 8 tiles (was 3x2) */
.sp-rarity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 900px) {
    .sp-rarity-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 380px) {
    .sp-rarity-grid { grid-template-columns: repeat(3, 1fr); }
}

.sp-tile-common    .sp-tile-fill { background: linear-gradient(135deg, #9CA3AF, #D1D5DB); }
.sp-tile-uncommon  .sp-tile-fill { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
.sp-tile-rare      .sp-tile-fill { background: linear-gradient(135deg, #22C55E, #4ADE80); }
.sp-tile-legendary .sp-tile-fill { background: linear-gradient(135deg, #EF4444, #F87171); }
.sp-tile-godly     .sp-tile-fill { background: linear-gradient(135deg, #FBBF24, #FDE68A); }
.sp-tile-ancient   .sp-tile-fill { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
.sp-tile-vintage   .sp-tile-fill { background: linear-gradient(135deg, #EC4899, #F472B6); }
.sp-tile-unique    .sp-tile-fill { background: linear-gradient(135deg, #F97316, #FB923C); }

/* Card rarity badge renkleri güncelle */
.sp-card-rarity.rarity-common    { background: rgba(156, 163, 175, 0.18); color: #4B5563; }
.sp-card-rarity.rarity-uncommon  { background: rgba(59, 130, 246, 0.15); color: #2563EB; }
.sp-card-rarity.rarity-rare      { background: rgba(34, 197, 94, 0.15);  color: #16A34A; }
.sp-card-rarity.rarity-legendary { background: rgba(239, 68, 68, 0.15);  color: #DC2626; }
.sp-card-rarity.rarity-godly     { background: rgba(251, 191, 36, 0.18); color: #D97706; }
.sp-card-rarity.rarity-ancient   { background: rgba(139, 92, 246, 0.15); color: #7C3AED; }
.sp-card-rarity.rarity-vintage   { background: rgba(236, 72, 153, 0.15); color: #DB2777; }
.sp-card-rarity.rarity-unique    { background: rgba(249, 115, 22, 0.15); color: #EA580C; }

:root[data-theme="dark"] .sp-card-rarity.rarity-common    { background: rgba(156, 163, 175, 0.2); color: #D1D5DB; }
:root[data-theme="dark"] .sp-card-rarity.rarity-uncommon  { background: rgba(59, 130, 246, 0.2);  color: #93C5FD; }
:root[data-theme="dark"] .sp-card-rarity.rarity-rare      { background: rgba(34, 197, 94, 0.2);   color: #86EFAC; }
:root[data-theme="dark"] .sp-card-rarity.rarity-legendary { background: rgba(239, 68, 68, 0.2);   color: #FCA5A5; }
:root[data-theme="dark"] .sp-card-rarity.rarity-godly     { background: rgba(251, 191, 36, 0.2);  color: #FCD34D; }
:root[data-theme="dark"] .sp-card-rarity.rarity-ancient   { background: rgba(139, 92, 246, 0.2);  color: #C4B5FD; }
:root[data-theme="dark"] .sp-card-rarity.rarity-vintage   { background: rgba(236, 72, 153, 0.2);  color: #F9A8D4; }
:root[data-theme="dark"] .sp-card-rarity.rarity-unique    { background: rgba(249, 115, 22, 0.2);  color: #FDBA74; }

/* Modal rarity badge — aynı */
.sp-modal-rarity.rarity-common    { background: rgba(156, 163, 175, 0.18); color: #4B5563; }
.sp-modal-rarity.rarity-uncommon  { background: rgba(59, 130, 246, 0.15); color: #2563EB; }
.sp-modal-rarity.rarity-rare      { background: rgba(34, 197, 94, 0.15);  color: #16A34A; }
.sp-modal-rarity.rarity-legendary { background: rgba(239, 68, 68, 0.15);  color: #DC2626; }
.sp-modal-rarity.rarity-godly     { background: rgba(251, 191, 36, 0.18); color: #D97706; }
.sp-modal-rarity.rarity-ancient   { background: rgba(139, 92, 246, 0.15); color: #7C3AED; }
.sp-modal-rarity.rarity-vintage   { background: rgba(236, 72, 153, 0.15); color: #DB2777; }
.sp-modal-rarity.rarity-unique    { background: rgba(249, 115, 22, 0.15); color: #EA580C; }

/* =========================================================
   MOBILE SIDEBAR FIX — ✕ butonu reset'in üstünü kapatmayacak
   ========================================================= */
@media (max-width: 900px) {
    /* Header'ı çarpıya yer ver — sağda padding */
    .sp-sidebar-head {
        padding-right: 48px !important;  /* ✕ butonu için yer */
        padding-top: 4px;
    }
    /* ✕ butonu absolute, sidebar-head üstünde değil */
    .sp-sidebar-close {
        top: 20px !important;
        right: 20px !important;
        z-index: 10;
    }
    /* Reset butonu güvenli mesafede */
    .sp-reset-btn {
        position: relative;
        z-index: 1;
    }
    /* Padding-top artır ki ✕ butonu kafesin içine girsin */
    .sp-sidebar {
        padding-top: 24px !important;
    }
}

/* =========================================================
   RESPONSIVE — Tüm cihazlar için optimize
   ========================================================= */

/* Tablet ve altı — sidebar bottom sheet */
@media (max-width: 900px) {
    .sp-layout { grid-template-columns: 1fr !important; gap: 16px; }
    .sp-result-meta { padding-left: 4px; }
}

/* Medium mobile 700px */
@media (max-width: 700px) {
    .shop-head h1 { font-size: 28px !important; }
    .shop-head p { font-size: 14px !important; }
    .sp-search { padding: 0 12px; margin-bottom: 20px; }
    .sp-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .sp-card { padding: 10px !important; border-radius: 12px !important; gap: 8px !important; }
    .sp-card-img { border-radius: 10px; }
    .sp-card-name { font-size: 13px !important; min-height: 2.4em; }
    .sp-card-usdt { font-size: 15px !important; }
    .sp-card-usdt span { font-size: 9px !important; }
    .sp-card-robux { font-size: 10px !important; }
    .sp-card-arrow { width: 24px !important; height: 24px !important; font-size: 10px; }
    .sp-card-rarity { font-size: 9px !important; padding: 3px 8px !important; }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
    .shop-head h1 { font-size: 24px !important; }
    .sp-grid { gap: 8px !important; }
    .sp-card-img i { font-size: 32px; }

    /* Sidebar mobile — daha büyük touch area */
    .sp-sidebar { padding: 28px 16px 40px !important; }
    .sp-tile { border-radius: 8px; }
    .sp-price-input-wrap { height: 44px; }
    .sp-price-input-wrap input { font-size: 16px; }  /* iOS zoom fix */
    .sp-sort-opt { padding: 10px 12px; font-size: 14px; }

    /* Modal mobile */
    .sp-modal { padding: 0; }
    .sp-modal-dialog {
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .sp-modal-img { aspect-ratio: 1.8; border-radius: 0 !important; }
    .sp-modal-body { padding: 20px 16px 24px !important; }
    .sp-modal-name { font-size: 22px !important; }
    .sp-modal-price-val { font-size: 22px !important; }
    .sp-modal-stats { gap: 6px; }
    .sp-modal-stat { padding: 10px 4px; }
    .sp-modal-stat-lbl { font-size: 9px; }
    .sp-modal-stat-val { font-size: 12px; }
    .sp-modal-chart-canvas-wrap { height: 160px; }
}

/* Extra small 380px */
@media (max-width: 380px) {
    .sp-search-box { height: 46px; padding: 0 12px; }
    .sp-search-box input { font-size: 14px; }
    .sp-search-box > i:first-child { font-size: 14px; }
}

/* Tall mobile (landscape short) */
@media (max-width: 900px) and (max-height: 600px) {
    .sp-sidebar { max-height: 92vh !important; }
    .sp-modal-dialog { max-height: 95vh !important; }
}

/* Input zoom fix — iOS Safari */
@supports (-webkit-touch-callout: none) {
    input[type="number"],
    input[type="text"],
    input[type="search"] {
        font-size: 16px !important;  /* Prevent iOS zoom on focus */
    }
}

/* Reduce motion — accessibility */
@media (prefers-reduced-motion: reduce) {
    .sp-card, .sp-card-img img, .sp-tile, .sp-tile-fill,
    .sp-modal-dialog, .sp-tile-tip {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   Item image fit — görsel ortalı ve crop'siz
   ========================================================= */
.sp-card-img img,
.sp-modal-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* =========================================================
   *** SP-PRICES v5 — MINI MODAL + PRICE INPUT FIX + CHART ICON ***
   ========================================================= */

/* --- PRICE INPUT: iç border/outline hepsi kaldır --- */
#sp-price-min,
#sp-price-max,
.sp-price-input-wrap input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -moz-appearance: textfield !important;
    background: transparent !important;
}
#sp-price-min:focus,
#sp-price-max:focus,
.sp-price-input-wrap input:focus,
.sp-price-input-wrap input:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
/* Autofill sızıntı önle */
#sp-price-min:-webkit-autofill,
#sp-price-max:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-soft) inset !important;
    -webkit-text-fill-color: var(--text-1) !important;
    caret-color: var(--text-1);
}
/* Dış kutu focus: hafif shadow, mint border yok */
.sp-price-input-wrap {
    border: 1.5px solid var(--border-1) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.sp-price-input-wrap:focus-within {
    border-color: var(--border-1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    background: var(--bg-card) !important;
}
:root[data-theme="dark"] .sp-price-input-wrap:focus-within {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* =========================================================
   MODAL MINI — görsel + USDT/Robux + chat CTA kaldırıldı
   Sadece rarity badge + name + chart + stats
   ========================================================= */
.sp-modal-dialog {
    max-width: 440px !important;
    max-height: 82vh !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
.sp-modal-body {
    padding: 22px !important;
    overflow-y: auto;
    max-height: 82vh;
}

/* Kaldırılan elementler — safety */
.sp-modal-img,
.sp-modal-prices,
.sp-modal-cta {
    display: none !important;
}

/* Head: rarity + name */
.sp-modal-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    padding-right: 40px;  /* ✕ butonu için yer */
}
.sp-modal-rarity {
    display: inline-block;
    width: fit-content;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-2);
    text-transform: uppercase;
}
.sp-modal-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-1);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Chart wrap — kompakt */
.sp-modal-chart-wrap {
    margin-bottom: 14px !important;
    padding: 14px !important;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: 12px;
}
.sp-modal-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.sp-modal-chart-trend {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0;
    text-transform: none;
}
.sp-modal-chart-canvas-wrap {
    height: 160px;
    position: relative;
}

/* Stats compact */
.sp-modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 0 !important;
}
.sp-modal-stat {
    padding: 10px 6px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    text-align: center;
}
.sp-modal-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sp-modal-stat-val {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-1);
}

/* Close button küçük ve sağ-üst */
.sp-modal-close {
    position: absolute;
    top: 14px !important;
    right: 14px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--bg-soft) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.sp-modal-close:hover {
    background: var(--border-1) !important;
    color: var(--text-1) !important;
    transform: rotate(90deg);
}
.sp-modal-close i { font-size: 13px; }

/* Mobile — full-width bottom sheet */
@media (max-width: 600px) {
    .sp-modal { padding: 0; align-items: flex-end; }
    .sp-modal-dialog {
        max-width: 100% !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }
    .sp-modal-name { font-size: 18px; }
    .sp-modal-chart-canvas-wrap { height: 140px; }
    .sp-modal-stat-val { font-size: 11px; }
}

/* =========================================================
   CHART ICON — kart sağındaki chart-line icon styling
   ========================================================= */
.sp-card-arrow i {
    font-size: 12px;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-card:hover .sp-card-arrow {
    background: var(--mint-500);
    color: #fff;
}
.sp-card:hover .sp-card-arrow i {
    transform: scale(1.15);
}

/* =========================================================
   *** SP-PRICES v6 — CARD IMG RARITY BG + CHEVRON + KBD REMOVE ***
   ========================================================= */

/* --- Arrow icon styling (chevron back) --- */
.sp-card-arrow i {
    font-size: 11px;
}

/* --- Search kbd artık HTML'de YOK; safety olarak gizle --- */
.sp-search-kbd { display: none !important; }

/* =========================================================
   CARD IMG BACKGROUND — rarity'ye göre
   Her rarity kendi gradient tint'i (soft, background olarak)
   ========================================================= */

/* Light mode */
.sp-card.r-common    .sp-card-img { background: linear-gradient(135deg, rgba(156, 163, 175, 0.20), rgba(209, 213, 219, 0.35)); }
.sp-card.r-uncommon  .sp-card-img { background: linear-gradient(135deg, rgba(59, 130, 246, 0.18),  rgba(147, 197, 253, 0.32)); }
.sp-card.r-rare      .sp-card-img { background: linear-gradient(135deg, rgba(34, 197, 94, 0.18),   rgba(134, 239, 172, 0.32)); }
.sp-card.r-legendary .sp-card-img { background: linear-gradient(135deg, rgba(239, 68, 68, 0.18),   rgba(252, 165, 165, 0.32)); }
.sp-card.r-godly     .sp-card-img { background: linear-gradient(135deg, rgba(251, 191, 36, 0.22),  rgba(253, 230, 138, 0.40)); }
.sp-card.r-ancient   .sp-card-img { background: linear-gradient(135deg, rgba(139, 92, 246, 0.20),  rgba(196, 181, 253, 0.35)); }
.sp-card.r-vintage   .sp-card-img { background: linear-gradient(135deg, rgba(236, 72, 153, 0.18),  rgba(249, 168, 212, 0.32)); }
.sp-card.r-unique    .sp-card-img { background: linear-gradient(135deg, rgba(249, 115, 22, 0.20),  rgba(253, 186, 116, 0.35)); }

/* CHROMA — rainbow gradient (prices.json'da hala olabilir) */
.sp-card.r-chroma .sp-card-img {
    background: linear-gradient(135deg,
        rgba(167, 139, 250, 0.30),
        rgba(244, 114, 182, 0.30),
        rgba(251, 191, 36, 0.30),
        rgba(52, 211, 153, 0.30),
        rgba(96, 165, 250, 0.30)
    );
    background-size: 200% 200%;
    animation: chroma-bg-shift 6s ease-in-out infinite;
}
@keyframes chroma-bg-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Dark mode — daha koyu ve saturated */
:root[data-theme="dark"] .sp-card.r-common    .sp-card-img { background: linear-gradient(135deg, rgba(156, 163, 175, 0.10), rgba(75, 85, 99, 0.20)); }
:root[data-theme="dark"] .sp-card.r-uncommon  .sp-card-img { background: linear-gradient(135deg, rgba(59, 130, 246, 0.18),  rgba(30, 64, 175, 0.25)); }
:root[data-theme="dark"] .sp-card.r-rare      .sp-card-img { background: linear-gradient(135deg, rgba(34, 197, 94, 0.18),   rgba(21, 128, 61, 0.25)); }
:root[data-theme="dark"] .sp-card.r-legendary .sp-card-img { background: linear-gradient(135deg, rgba(239, 68, 68, 0.18),   rgba(153, 27, 27, 0.25)); }
:root[data-theme="dark"] .sp-card.r-godly     .sp-card-img { background: linear-gradient(135deg, rgba(251, 191, 36, 0.22),  rgba(180, 83, 9, 0.25)); }
:root[data-theme="dark"] .sp-card.r-ancient   .sp-card-img { background: linear-gradient(135deg, rgba(139, 92, 246, 0.22),  rgba(91, 33, 182, 0.25)); }
:root[data-theme="dark"] .sp-card.r-vintage   .sp-card-img { background: linear-gradient(135deg, rgba(236, 72, 153, 0.20),  rgba(157, 23, 77, 0.25)); }
:root[data-theme="dark"] .sp-card.r-unique    .sp-card-img { background: linear-gradient(135deg, rgba(249, 115, 22, 0.20),  rgba(154, 52, 18, 0.25)); }

:root[data-theme="dark"] .sp-card.r-chroma .sp-card-img {
    background: linear-gradient(135deg,
        rgba(167, 139, 250, 0.35),
        rgba(244, 114, 182, 0.35),
        rgba(251, 191, 36, 0.35),
        rgba(52, 211, 153, 0.35),
        rgba(96, 165, 250, 0.35)
    );
    background-size: 200% 200%;
    animation: chroma-bg-shift 6s ease-in-out infinite;
}

/* Icon fallback rengi rarity'ye göre */
.sp-card.r-common    .sp-card-img i { color: #6B7280; }
.sp-card.r-uncommon  .sp-card-img i { color: #2563EB; }
.sp-card.r-rare      .sp-card-img i { color: #16A34A; }
.sp-card.r-legendary .sp-card-img i { color: #DC2626; }
.sp-card.r-godly     .sp-card-img i { color: #D97706; }
.sp-card.r-ancient   .sp-card-img i { color: #7C3AED; }
.sp-card.r-vintage   .sp-card-img i { color: #DB2777; }
.sp-card.r-unique    .sp-card-img i { color: #EA580C; }
.sp-card.r-chroma    .sp-card-img i { color: #A855F7; }

:root[data-theme="dark"] .sp-card.r-common    .sp-card-img i { color: #9CA3AF; }
:root[data-theme="dark"] .sp-card.r-uncommon  .sp-card-img i { color: #60A5FA; }
:root[data-theme="dark"] .sp-card.r-rare      .sp-card-img i { color: #4ADE80; }
:root[data-theme="dark"] .sp-card.r-legendary .sp-card-img i { color: #F87171; }
:root[data-theme="dark"] .sp-card.r-godly     .sp-card-img i { color: #FCD34D; }
:root[data-theme="dark"] .sp-card.r-ancient   .sp-card-img i { color: #A78BFA; }
:root[data-theme="dark"] .sp-card.r-vintage   .sp-card-img i { color: #F472B6; }
:root[data-theme="dark"] .sp-card.r-unique    .sp-card-img i { color: #FB923C; }
:root[data-theme="dark"] .sp-card.r-chroma    .sp-card-img i { color: #D8B4FE; }


/* =========================================================
   *** GLOBAL INPUT POLISH (site-wide) ***
   Hiçbir input/textarea'nın iç kenarı, browser default outline'ı,
   autofill sarı'sı, -webkit-* dash'i olmasın
   ========================================================= */

/* 1. Tüm input/textarea/select default outline kaldır, odaktaysa kendi stilini uygula */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid transparent;  /* kendimiz custom ring veriyoruz, default kaldır */
}

/* 2. Chrome autofill'in sarı arkaplan sızıntısı (tüm sitede) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card, #fff) inset !important;
    -webkit-text-fill-color: var(--text-1, #111827) !important;
    caret-color: var(--text-1, #111827);
    transition: background-color 9999s ease-in-out 0s;
}
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus,
:root[data-theme="dark"] textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card, #1F2937) inset !important;
    -webkit-text-fill-color: var(--text-1, #F9FAFB) !important;
}

/* 3. Number input spinner'ları (up/down arrow) kaldır — temiz görünsün */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 4. iOS Safari date/tel/email alanlarında border-radius'un bozulması */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
textarea {
    border-radius: inherit;
}





/* =========================================================
   *** CHAT PAGE V13 — CINEMATIC REDESIGN ***
   Dolu dolu hero, çok animasyon, 3D tilt, spotlight, counters,
   scroll reveals, floating items, rotating rarities
   Background diğer sayfalarla aynı (_header.php'den geliyor)
   ========================================================= */

/* ============ SCROLL + BODY FIX ============ */
body.chat-page {
    overflow: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
}
body.chat-page main.app,
body.chat-page .app {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.chat-page .chat-container,
body.chat-page .messages-container,
body.chat-page .input-container,
body.chat-page .chat-content { all: unset; }
body.chat-page .site-footer { display: none !important; }
body.chat-page .support-fab { display: none !important; }
body.chat-page .floating-items-bg,
body.chat-page .mesh-bg {
    pointer-events: none !important;
    position: fixed !important;
    z-index: 0 !important;
}

/* ============ STAGE ============ */
.chat-stage {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 22px 200px;
    position: relative;
    z-index: 1;
}
@media (max-width: 860px) {
    .chat-stage { padding: 12px 14px 180px; }
}

/* ============ MOUSE SPOTLIGHT (soft follow) ============ */
.mouse-spotlight {
    position: fixed;
    pointer-events: none;
    inset: 0;
    z-index: 1;
    background: radial-gradient(
        400px circle at var(--mx, 50%) var(--my, 50%),
        rgba(16, 185, 129, 0.08),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s;
}
body.chat-page #welcome-view:not(.hidden) ~ .mouse-spotlight,
body.chat-page .mouse-spotlight {
    opacity: 1;
}
body.chat-page #welcome-view.hidden ~ * .mouse-spotlight { opacity: 0; }

/* ============ HERO FLOATING ITEMS (sadece welcome'da animates) ============ */
.hero-floaters {
    position: absolute;
    inset: 0 0 200px 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.hf {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: hf-float 14s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15));
}
.hf-1 { top: 8%;  left: 4%;  background-image: url('/assets/harvester.webp');        animation-delay: 0s;   }
.hf-2 { top: 12%; right: 5%; background-image: url('/assets/chroma_evergreen.webp'); animation-delay: -2s;  width: 52px; height: 52px; }
.hf-3 { top: 48%; left: 2%;  background-image: url('/assets/gingerscope.webp');      animation-delay: -4s;  width: 38px; height: 38px; }
.hf-4 { top: 52%; right: 3%; background-image: url('/assets/icepiercer.webp');       animation-delay: -6s;  width: 46px; height: 46px; }
.hf-5 { top: 80%; left: 8%;  background-image: url('/assets/turkey.webp');           animation-delay: -8s;  width: 40px; height: 40px; }
.hf-6 { top: 75%; right: 8%; background-image: url('/assets/ctg3.webp');             animation-delay: -10s; width: 50px; height: 50px; }
@keyframes hf-float {
    0%   { opacity: 0; transform: translateY(20px) rotate(-8deg); }
    10%  { opacity: 0.65; }
    50%  { opacity: 0.5; transform: translateY(-20px) rotate(8deg); }
    90%  { opacity: 0.65; }
    100% { opacity: 0; transform: translateY(20px) rotate(-8deg); }
}
body.chat-page #welcome-view.hidden ~ .hero-floaters,
body.chat-page.chat-active .hero-floaters { display: none; }
@media (max-width: 700px) {
    .hf { opacity: 0.3 !important; }
    .hf-3, .hf-5 { display: none; }
}

/* ============ CHAT STATUS BAR (chat açılınca, welcome görünmüyorken) ============ */
.chat-status {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 14px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-1);
    border-radius: 100px;
    margin: 0 0 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    animation: cs-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-status.visible { display: flex; }
@keyframes cs-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.cs-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}
.cs-dot-wrap {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400, #34D399), var(--mint-600, #059669));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.cs-dot-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--mint-400);
    opacity: 0;
    animation: cs-ring 1.8s ease-out infinite;
}
@keyframes cs-ring {
    0%   { transform: scale(0.8); opacity: 0.55; }
    100% { transform: scale(1.4); opacity: 0; }
}
.cs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}
.cs-info { min-width: 0; }
.cs-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.cs-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}
.cs-step {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-1);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}
.cs-step.active {
    width: 24px;
    border-radius: 100px;
    background: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.cs-step.done { background: var(--mint-400); }
.cs-reset {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 11px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.cs-reset:hover {
    background: var(--text-1);
    color: var(--bg-card);
    transform: rotate(-60deg);
}
@media (max-width: 600px) {
    .chat-status { padding: 8px 10px; gap: 10px; }
    .cs-sub { display: none; }
    .cs-steps { gap: 5px; }
}

/* ============ HERO ============ */
.stage-hero {
    position: relative;
    z-index: 2;
    padding: 20px 0 60px;
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Hero badge */
.h-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 100px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--mint-700, #047857);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
:root[data-theme="dark"] .h-badge {
    background: rgba(16, 185, 129, 0.12);
    color: var(--mint-400);
}
.h-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
    animation: hb-pulse 1.8s ease-in-out infinite;
}
@keyframes hb-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.15); }
}

/* Headline */
.h-headline {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: var(--text-1);
    margin: 0 0 18px;
    max-width: 880px;
}
.h-line1, .h-line2 {
    display: block;
    font-size: clamp(40px, 7vw, 82px);
}
.h-line2 {
    margin-top: 4px;
}
.h-italic {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-700, #047857));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}
.h-em {
    color: var(--text-1);
    margin-left: 0.2em;
}

.h-lead {
    font-size: clamp(15px, 1.6vw, 17px);
    color: var(--text-2);
    max-width: 640px;
    line-height: 1.55;
    margin: 0 0 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
.h-lead-rotator {
    display: inline-flex;
    position: relative;
    min-height: 1.5em;
    min-width: 150px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 800;
    color: var(--mint-600, #059669);
    font-size: 0.95em;
}
.hr-item {
    position: absolute;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
    white-space: nowrap;
}
.hr-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* CTA */
.h-cta-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}
.h-cta {
    position: relative;
    padding: 16px 28px 16px 26px;
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-600, #059669));
    color: #fff;
    border: none;
    border-radius: 100px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: -0.01em;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.4);
}
.h-cta-content {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.h-cta-content i { font-size: 14px; }
.h-cta-arrow { transition: transform 0.25s; }
.h-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.55);
}
.h-cta:hover .h-cta-arrow { transform: translateX(4px); }
.h-cta:active { transform: translateY(-1px) scale(0.97); }
/* Shimmer */
.h-cta-glow {
    position: absolute;
    top: 0; bottom: 0;
    left: -100%;
    width: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer {
    0%   { left: -100%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}
.h-cta-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}
.h-cta-hint i { color: var(--mint-500); font-size: 11px; }

/* Stats strip */
.h-stats {
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 20px 28px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-1);
    border-radius: 20px;
    margin-bottom: 60px;
    max-width: 720px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.h-stat { flex: 1; text-align: center; min-width: 0; }
.h-stat-val {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-1);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.h-stat-lbl {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-3);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.h-stat-div {
    width: 1px;
    background: var(--border-1);
    margin: 4px 0;
}
@media (max-width: 600px) {
    .h-stats { padding: 16px; gap: 10px; }
    .h-stat-lbl { font-size: 9px; letter-spacing: 0.02em; }
}

/* Section label */
.h-section-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--text-3);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.h-section-label::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--mint-500);
    border-radius: 2px;
}

/* Quick tiles (4 — 3D tilt) */
.h-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 0;
    perspective: 1000px;
}
@media (max-width: 680px) { .h-tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 420px) { .h-tiles { grid-template-columns: 1fr; } }
.h-tile {
    position: relative;
    padding: 24px 20px 22px;
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border-1);
    border-radius: 18px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.h-tile:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.10);
}
.h-tile:active { transform: translateY(0) scale(0.97) !important; }
.h-tile-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    border-radius: inherit;
}
.h-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}
.t-chroma .h-tile-icon  { background: linear-gradient(135deg, #A78BFA, #F472B6, #FBBF24); box-shadow: 0 8px 20px rgba(244, 114, 182, 0.35); }
.t-godly .h-tile-icon   { background: linear-gradient(135deg, #F59E0B, #FCD34D); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35); }
.t-ancient .h-tile-icon { background: linear-gradient(135deg, #8B5CF6, #A78BFA); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.35); }
.t-vintage .h-tile-icon { background: linear-gradient(135deg, #EC4899, #F472B6); box-shadow: 0 8px 20px rgba(236, 72, 153, 0.35); }
.h-tile-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: 3px;
    position: relative;
    z-index: 2;
}
.h-tile-price {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    position: relative;
    z-index: 2;
}
.h-tile-go {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-3);
    transition: all 0.25s;
    z-index: 2;
}
.h-tile:hover .h-tile-go {
    background: var(--text-1);
    color: var(--bg-card);
    transform: translateX(2px);
}

/* Process zigzag */
.h-process { margin-bottom: 80px; }
.hp-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}
.hp-step {
    padding: 24px 20px 22px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}
.hp-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.hp-step::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--mint-500);
    opacity: 0.5;
    transition: opacity 0.25s;
}
.hp-step:hover::before { opacity: 1; }
.hp-step-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.hp-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint-600);
    font-size: 14px;
    margin-bottom: 12px;
}
.hp-step-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.hp-step-text {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
}
.hp-arrow {
    font-size: 14px;
    color: var(--text-3);
    opacity: 0.4;
}
@media (max-width: 780px) {
    .hp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .hp-arrow { display: none; }
}

/* Feature grid */
.h-features { margin-bottom: 60px; }
.hf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.hf-card {
    padding: 22px 22px 20px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.08);
}
.hf-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    margin-bottom: 14px;
}
.hf-mint   { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 16px rgba(16, 185, 129, 0.3); }
.hf-blue   { background: linear-gradient(135deg, #3B82F6, #2563EB); box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3); }
.hf-amber  { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3); }
.hf-purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); box-shadow: 0 8px 16px rgba(139, 92, 246, 0.3); }
.hf-pink   { background: linear-gradient(135deg, #EC4899, #DB2777); box-shadow: 0 8px 16px rgba(236, 72, 153, 0.3); }
.hf-green  { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 8px 16px rgba(34, 197, 94, 0.3); }
.hf-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.hf-desc {
    font-size: 13px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.55;
}

/* Bottom nudge */
.h-bottom-nudge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--bg-soft);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
}
.hbn-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mint-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    animation: hbn-bounce 1.8s ease-in-out infinite;
}
@keyframes hbn-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

/* ============ CHAT VIEW ============ */
.stage-chat { padding: 0 0 24px; }
.msg-stream { display: flex; flex-direction: column; gap: 18px; }
.msg-stream > * {
    animation: msg-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============ COMPOSER ============ */
.chat-stage .composer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 30;
    padding: 0 22px;
    pointer-events: none;
}
.chat-stage .composer-inner {
    pointer-events: auto;
    max-width: 740px;
    margin: 0 auto;
}
@media (max-width: 860px) {
    .chat-stage .composer { bottom: 80px; padding: 0 14px; }
}
.chat-stage .composer-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 7px 7px 13px;
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border-1);
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
:root[data-theme="dark"] .chat-stage .composer-box {
    background: rgba(31, 41, 55, 0.96);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.chat-stage .composer-box:focus-within {
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04);
}
.chat-stage .composer-tool {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-soft); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--text-2); font-size: 14px;
    transition: all 0.2s;
}
.chat-stage .composer-tool:hover { background: var(--border-1); color: var(--text-1); }
.chat-stage .composer-tool .picker-logo { width: 20px; height: 20px; object-fit: contain; }
.chat-stage #chat-input {
    flex: 1; background: transparent; padding: 10px 0;
    font-size: 15px; font-family: inherit; color: var(--text-1); min-width: 0;
}
.chat-stage #chat-input::placeholder { color: var(--text-3); opacity: 1; }
.chat-stage .send-btn {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600, #059669));
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 15px;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.chat-stage .send-btn:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.5);
}
.chat-stage .send-btn:active { transform: scale(0.92); }
.chat-stage .pet-dropdown {
    position: absolute;
    bottom: calc(100% + 10px); left: 0; right: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    max-height: 340px; overflow-y: auto;
    box-shadow: 0 14px 42px rgba(0,0,0,0.14);
    z-index: 30;
    animation: pd-slide-up 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pd-slide-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ OFFER CARD ============ */
.chat-stage .msg-stream [data-type="offer"],
.chat-stage .msg-stream [data-type="bundle_offer"] {
    align-self: stretch !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.offer-card {
    position: relative; display: block;
    border-radius: 20px !important;
    padding: 24px 26px !important;
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border-1);
    box-shadow: 0 10px 28px rgba(0,0,0,0.06);
    transition: transform 0.25s, box-shadow 0.25s;
    overflow: visible !important;
    margin-top: 12px !important;
}
.offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.09);
}
.offer-card::before {
    content: 'OFFER';
    position: absolute;
    top: -11px; left: 24px;
    font-size: 9px; font-weight: 900;
    letter-spacing: 0.2em;
    padding: 5px 14px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    z-index: 2;
}
[data-type="bundle_offer"].offer-card::before {
    content: 'BUNDLE';
    background: linear-gradient(135deg, #F59E0B, #EC4899);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.offer-card.rar-chroma {
    background: linear-gradient(var(--bg-card, #fff), var(--bg-card, #fff)) padding-box,
                linear-gradient(135deg, #A78BFA, #F472B6, #FBBF24, #34D399, #60A5FA) border-box;
    background-size: 100% 100%, 300% 300%;
    border: 2px solid transparent;
    animation: rar-chroma-shift 8s ease-in-out infinite;
}
@keyframes rar-chroma-shift {
    0%, 100% { background-position: 0% 0%, 0% 50%; }
    50%      { background-position: 0% 0%, 100% 50%; }
}
.offer-card.rar-ancient   { background: linear-gradient(var(--bg-card, #fff), var(--bg-card, #fff)) padding-box, linear-gradient(135deg, #8B5CF6, #C084FC) border-box; border: 2px solid transparent; }
.offer-card.rar-vintage   { background: linear-gradient(var(--bg-card, #fff), var(--bg-card, #fff)) padding-box, linear-gradient(135deg, #EC4899, #F472B6) border-box; border: 2px solid transparent; }
.offer-card.rar-godly     { background: linear-gradient(var(--bg-card, #fff), var(--bg-card, #fff)) padding-box, linear-gradient(135deg, #F59E0B, #FCD34D) border-box; border: 2px solid transparent; box-shadow: 0 14px 32px rgba(245, 158, 11, 0.2); }
.offer-card.rar-legendary { background: linear-gradient(var(--bg-card, #fff), var(--bg-card, #fff)) padding-box, linear-gradient(135deg, #EF4444, #F87171) border-box; border: 2px solid transparent; }
.offer-card.rar-rare      { background: linear-gradient(var(--bg-card, #fff), var(--bg-card, #fff)) padding-box, linear-gradient(135deg, #22C55E, #4ADE80) border-box; border: 2px solid transparent; }
:root[data-theme="dark"] .offer-card { background: var(--bg-card, #1F2937) !important; }
:root[data-theme="dark"] .offer-card.rar-chroma    { background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, #A78BFA, #F472B6, #FBBF24, #34D399, #60A5FA) border-box; }
:root[data-theme="dark"] .offer-card.rar-ancient   { background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, #8B5CF6, #C084FC) border-box; }
:root[data-theme="dark"] .offer-card.rar-vintage   { background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, #EC4899, #F472B6) border-box; }
:root[data-theme="dark"] .offer-card.rar-godly     { background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, #F59E0B, #FCD34D) border-box; }
:root[data-theme="dark"] .offer-card.rar-legendary { background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, #EF4444, #F87171) border-box; }
:root[data-theme="dark"] .offer-card.rar-rare      { background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, #22C55E, #4ADE80) border-box; }

.oc-head {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 18px; align-items: center;
    margin-bottom: 16px;
}
.oc-image {
    width: 84px; height: 84px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft);
    font-size: 34px; color: var(--text-3);
    overflow: hidden;
}
.offer-card.rar-common    .oc-image { background: linear-gradient(135deg, rgba(156,163,175,0.2), rgba(209,213,219,0.35)); }
.offer-card.rar-uncommon  .oc-image { background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(147,197,253,0.32)); }
.offer-card.rar-rare      .oc-image { background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(134,239,172,0.32)); }
.offer-card.rar-legendary .oc-image { background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(252,165,165,0.32)); }
.offer-card.rar-godly     .oc-image { background: linear-gradient(135deg, rgba(251,191,36,0.24), rgba(253,230,138,0.42)); }
.offer-card.rar-ancient   .oc-image { background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(196,181,253,0.38)); }
.offer-card.rar-vintage   .oc-image { background: linear-gradient(135deg, rgba(236,72,153,0.20), rgba(249,168,212,0.35)); }
.offer-card.rar-chroma    .oc-image {
    background: linear-gradient(135deg, rgba(167,139,250,0.3), rgba(244,114,182,0.3), rgba(251,191,36,0.3), rgba(52,211,153,0.3));
    background-size: 200% 200%;
    animation: rar-chroma-shift 6s ease-in-out infinite;
}
.oc-image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.oc-info { min-width: 0; }
.oc-rarity {
    display: inline-block;
    font-size: 10px; font-weight: 900;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--bg-soft);
    color: var(--text-2);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.oc-name {
    font-size: 20px; font-weight: 800;
    color: var(--text-1);
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.oc-price-block { text-align: right; flex-shrink: 0; }
.oc-price-main {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 28px; font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.oc-price-sub {
    margin-top: 4px;
    font-size: 11px; font-weight: 600;
    color: var(--text-3);
    font-family: ui-monospace, monospace;
}
@media (max-width: 520px) {
    .oc-head { grid-template-columns: 64px 1fr; gap: 14px; }
    .oc-image { width: 64px; height: 64px; font-size: 26px; }
    .oc-price-block {
        grid-column: 1 / -1;
        text-align: left;
        display: flex; align-items: baseline; gap: 12px;
        padding-top: 12px;
        border-top: 1px dashed var(--border-1);
    }
    .oc-price-main { font-size: 24px; }
}

/* ============ PRICE HISTORY PEEK ============ */
.ph-peek {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    transition: opacity 0.3s;
    animation: peek-fade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes peek-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.ph-peek.loading { opacity: 0.5; }
.ph-peek-left { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.ph-peek-lbl {
    display: flex; align-items: center; gap: 5px;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-3);
}
.ph-peek-val {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 800; font-size: 14px;
    color: var(--text-1);
}
.ph-peek-spark { flex: 1; height: 28px; max-width: 110px; min-width: 50px; }
.ph-peek-spark.trend-up { color: var(--mint-600, #059669); }
.ph-peek-spark.trend-down { color: #EF4444; }
.ph-peek-range {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 10px; font-family: ui-monospace, monospace;
    color: var(--text-3); font-weight: 700;
    text-align: right; flex-shrink: 0; line-height: 1.2;
}
:root[data-theme="dark"] .ph-peek { background: rgba(255,255,255,0.04); }

/* ============ GAMEPASS MODAL ============ */
.gp-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
}
.gp-modal.open { opacity: 1; pointer-events: auto; }
.gp-modal.hidden { display: none; }
.gp-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.gp-dialog {
    position: relative;
    width: 100%; max-width: 460px;
    background: var(--bg-card, #fff);
    border-radius: 22px;
    padding: 30px 28px 26px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.gp-modal.open .gp-dialog { transform: translateY(0) scale(1); }
.gp-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: none; cursor: pointer;
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: all 0.2s;
}
.gp-close:hover { background: var(--border-1); color: var(--text-1); transform: rotate(90deg); }
.gp-head { text-align: center; margin-bottom: 20px; }
.gp-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #F59E0B, #FCD34D);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}
.gp-title {
    font-size: 20px; font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.gp-sub {
    font-size: 13px; color: var(--text-2);
    margin: 0; line-height: 1.5;
}
.gp-robux-pill {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    margin: 18px 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(252, 211, 77, 0.16));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 100px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 17px; font-weight: 800;
    color: #B45309;
}
:root[data-theme="dark"] .gp-robux-pill {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(252, 211, 77, 0.20));
    color: #FCD34D;
}
.gp-robux-pill i { font-size: 14px; }
.gp-robux-lbl {
    font-family: inherit;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    opacity: 0.7;
}
.gp-field { margin: 18px 0; }
.gp-label {
    display: block;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 8px;
}
.gp-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--text-1);
    transition: border-color 0.2s;
}
.gp-input:focus { border-color: var(--text-2); }
.gp-input::placeholder { color: var(--text-3); opacity: 1; }
.gp-err {
    margin-top: 8px; padding: 8px 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444; border-radius: 8px;
    font-size: 12px; font-weight: 600;
}
.gp-tutorial {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 18px;
}
.gp-tutorial:hover { background: rgba(239, 68, 68, 0.1); transform: translateY(-1px); }
.gp-tutorial .fa-youtube { color: #FF0000; font-size: 24px; flex-shrink: 0; }
.gp-tutorial span { flex: 1; }
.gpt-title { font-size: 13px; font-weight: 800; color: var(--text-1); line-height: 1.2; }
.gpt-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.gpt-arrow { color: var(--text-3); font-size: 11px; transition: transform 0.2s; }
.gp-tutorial:hover .gpt-arrow { transform: translate(2px, -2px); color: var(--text-2); }
.gp-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600, #059669));
    color: #fff; border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px; font-weight: 800;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.gp-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.45);
}
.gp-submit:active { transform: translateY(0) scale(0.98); }

/* ============ NO FOCUS RING (global) ============ */
*:focus, *:focus-visible,
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible,
button:focus, button:focus-visible,
a:focus, a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
input:-webkit-autofill, textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card, #fff) inset !important;
    -webkit-text-fill-color: var(--text-1, #111827) !important;
    caret-color: var(--text-1);
    transition: background-color 9999s ease-in-out 0s;
}
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card, #1F2937) inset !important;
    -webkit-text-fill-color: var(--text-1, #F9FAFB) !important;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .hf, .h-cta-glow, .cs-dot-wrap::after, .h-badge-dot, .hr-item {
        animation: none !important;
    }
}


/* =========================================================
   V13.1 — Tutorial single card (3 steps inline)
   ========================================================= */
.h-tutorial {
    margin-top: 40px;
    padding: 28px 28px 26px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-1);
    border-radius: 22px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.05);
    max-width: 720px;
}
.ht-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.ht-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600, #059669));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.35);
}
.ht-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--text-3);
}
.ht-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-top: 2px;
}
.ht-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ht-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: relative;
}
.ht-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: -16px;
    width: 2px;
    background: var(--border-1);
    border-radius: 2px;
}
.ht-step-n {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border: 2px solid var(--border-1);
}
.ht-step-body { flex: 1; min-width: 0; padding-top: 2px; }
.ht-step-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.ht-step-desc {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.55;
}

/* =========================================================
   *** CHAT PAGE V14 — final polish ***
   - trade-steps labels (not dots)
   - need-help-fab mascot
   - how-grid 3 cards (01-02-03)
   - trade info card HORIZONTAL redesign
   - Done button styling
   - Hide pm-ro-pending (Admin will provide)
   ========================================================= */

/* ============ TRADE STEPS (progress with labels) ============ */
.trade-steps {
    display: none;
    align-items: center;
    gap: 0;
    padding: 12px 16px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    margin: 0 0 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    animation: ts-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-x: auto;
    scrollbar-width: none;
}
.trade-steps::-webkit-scrollbar { display: none; }
.trade-steps.visible { display: flex; }
@keyframes ts-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ts-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0.45;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
    min-width: 60px;
}
.ts-step.active, .ts-step.done { opacity: 1; }
.ts-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}
.ts-step.active .ts-dot {
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-600, #059669));
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
.ts-step.active .ts-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--mint-400);
    animation: ts-ring 1.8s ease-out infinite;
    opacity: 0;
}
@keyframes ts-ring {
    0%   { transform: scale(0.9); opacity: 0.55; }
    100% { transform: scale(1.4); opacity: 0; }
}
.ts-step.done .ts-dot {
    background: var(--mint-400);
    color: #fff;
}
.ts-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
}
.ts-step.active .ts-label { color: var(--mint-700, #047857); }
:root[data-theme="dark"] .ts-step.active .ts-label { color: var(--mint-400); }
.ts-step.done .ts-label { color: var(--text-2); }
.ts-line {
    flex: 1;
    height: 2px;
    background: var(--border-1);
    border-radius: 2px;
    margin: 16px 8px 0;
    min-width: 16px;
    transition: background 0.3s;
}
.trade-steps[data-active="offer"]    .ts-line:nth-of-type(2),
.trade-steps[data-active="accept"]   .ts-line:nth-of-type(2),
.trade-steps[data-active="accept"]   .ts-line:nth-of-type(4),
.trade-steps[data-active="payment"]  .ts-line:nth-of-type(2),
.trade-steps[data-active="payment"]  .ts-line:nth-of-type(4),
.trade-steps[data-active="payment"]  .ts-line:nth-of-type(6),
.trade-steps[data-active="done"]     .ts-line {
    background: var(--mint-400);
}
.ts-reset {
    width: 36px;
    height: 36px;
    margin-left: 14px;
    margin-top: 0;
    align-self: center;
    border-radius: 50%;
    background: var(--bg-soft);
    border: none;
    color: var(--text-2);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.ts-reset:hover {
    background: var(--text-1);
    color: var(--bg-card);
    transform: rotate(-60deg);
}
.ts-reset:active { transform: rotate(180deg) scale(0.92); }
@media (max-width: 640px) {
    .trade-steps { padding: 10px 12px; }
    .ts-label { display: none; }
    .ts-step { min-width: auto; }
    .ts-line { margin-top: 0; }
    .ts-reset { width: 30px; height: 30px; margin-left: 8px; }
}

/* ============ HOW IT WORKS GRID (3 cards) ============ */
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 36px 0 40px;
}
@media (max-width: 720px) { .how-grid { grid-template-columns: 1fr; } }
.how-card {
    position: relative;
    padding: 22px 22px 20px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.how-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mint-500), var(--mint-400));
    opacity: 0;
    transition: opacity 0.3s;
}
.how-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.08);
    border-color: rgba(16, 185, 129, 0.3);
}
.how-card:hover::before { opacity: 1; }
.how-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}
.how-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(52, 211, 153, 0.08));
    color: var(--mint-600, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 14px;
    transition: all 0.3s;
}
:root[data-theme="dark"] .how-icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--mint-400);
}
.how-card:hover .how-icon {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    transform: scale(1.08);
}
.how-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.how-text {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
}

/* ============ NEED HELP FAB (mascot bottom-right) ============ */
.need-help-fab {
    position: fixed;
    left: 22px;       /* SOL taraf */
    right: auto;
    bottom: 22px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px 6px 6px;
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-600, #059669));
    border: none;
    border-radius: 100px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.35), 0 2px 6px rgba(0,0,0,0.06);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    animation: nhf-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1s backwards;
}
@keyframes nhf-enter {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.need-help-fab:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.5), 0 2px 6px rgba(0,0,0,0.08);
}
.need-help-fab:active { transform: translateY(-1px) scale(0.97); }

/* Avatar — headphone character */
.nhf-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    padding: 6px;
    animation: nhf-wobble 3s ease-in-out infinite;
    box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.15);
}
@keyframes nhf-wobble {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}
.nhf-avatar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22C55E;
    border: 2px solid #fff;
    animation: nhf-live 1.8s ease-in-out infinite;
}
@keyframes nhf-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); transform: scale(1); }
    50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); transform: scale(1.08); }
}
.nhf-svg {
    width: 100%;
    height: 100%;
    color: var(--mint-600, #059669);
}
.nhf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.nhf-bubble {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
@media (max-width: 500px) {
    .need-help-fab {
        left: 14px;
        right: auto;
        bottom: 90px;
        padding: 5px 14px 5px 5px;
    }
    .nhf-avatar { width: 38px; height: 38px; padding: 4px; }
    .nhf-bubble { font-size: 12px; }
}

/* Hide need-help-fab when support drawer open */
body.support-open .need-help-fab { opacity: 0; pointer-events: none; transform: translateY(10px); }

/* ============ TRADE INFO CARD — HORIZONTAL REDESIGN ============ */
/* Hedef: yatay, kompakt, 3 kolonlu grid */
.trade-info-card,
.chat-message.trade-info,
[data-type="trade_info"] {
    align-self: stretch !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override: mevcut tic-section kartını yeniden düzenle */
.trade-info-card,
[data-type="trade_info"] > .chat-message,
.chat-message.trade-info {
    position: relative;
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border-1);
    border-radius: 20px;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.trade-info-card::before,
.chat-message.trade-info::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--mint-500, #10B981), #F59E0B, var(--mint-600, #059669));
    background-size: 200% 100%;
    animation: tic-shift 6s ease-in-out infinite;
}
@keyframes tic-shift {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 0%; }
}
/* Sections daha dar */
.trade-info-card .tic-section,
.chat-message.trade-info .tic-section {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-1);
    margin: 0;
}
.trade-info-card .tic-section:last-child,
.chat-message.trade-info .tic-section:last-child {
    border-bottom: none;
}
.trade-info-card .tic-label,
.chat-message.trade-info .tic-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
}
.trade-info-card .tic-value,
.chat-message.trade-info .tic-value,
.trade-info-card .tic-row,
.chat-message.trade-info .tic-row {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.4;
}

/* Admin will provide -> hide entirely */
.pm-ro-pending {
    display: none !important;
}

/* Done button (replaces Discord) */
.tic-done-btn {
    flex: 1;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border: none;
    font-family: inherit;
    background: linear-gradient(135deg, #22C55E, #16A34A);
    color: #fff;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tic-done-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(34, 197, 94, 0.5);
}
.tic-done-btn:active { transform: translateY(0) scale(0.97); }
.tic-done-btn.tic-done-clicked {
    background: linear-gradient(135deg, #059669, #047857);
    pointer-events: none;
}
.tic-done-btn.tic-done-clicked i {
    animation: tic-done-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tic-done-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}



/* =========================================================
   V14.1 — SUPPORT DRAWER (chat sayfası için, SOL TARAFTAN açılır)
   ========================================================= */
body.chat-page #hdr-support-drawer.chat-drawer,
body.chat-page #hdr-support-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(420px, 100vw) !important;
    height: 100vh !important;
    background: var(--bg-card, #fff) !important;
    border-right: 1px solid var(--border-1) !important;
    border-left: none !important;
    box-shadow: 14px 0 42px rgba(0,0,0,0.12) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 1001 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.chat-page #hdr-support-drawer.open {
    transform: translateX(0) !important;
}

/* Backdrop chat sayfasında net çalışsın */
body.chat-page #hdr-usd-backdrop.chat-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s !important;
    z-index: 1000 !important;
}
body.chat-page #hdr-usd-backdrop.chat-drawer-backdrop.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Drawer iç stilleri — özel kaynakları (user-drawer gibi) yeniden de tanımla */
body.chat-page #hdr-support-drawer .chat-drawer-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border-1);
    flex: 0 0 auto;
}
body.chat-page #hdr-support-drawer .chat-drawer-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.chat-page #hdr-support-drawer .chat-drawer-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
}
body.chat-page #hdr-support-drawer #hdr-usd-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: none;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.2s;
}
body.chat-page #hdr-support-drawer #hdr-usd-close:hover {
    background: var(--border-1);
    color: var(--text-1);
    transform: rotate(90deg);
}
@media (max-width: 500px) {
    body.chat-page #hdr-support-drawer,
    body.chat-page #hdr-support-drawer.chat-drawer {
        width: 100vw !important;
    }
}

/* =========================================================
   V14.2 — SUPPORT CHAT ENHANCEMENTS
   - Admin online status strip
   - Topic chips (step 1)
   - Back button + screenshot attach
   ========================================================= */

/* Status strip — admin online/offline */
body.chat-page #hdr-support-drawer .sup-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    margin: 0;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-1);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}
.sup-status-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sup-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9CA3AF;
    transition: background 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
}
.sup-status[data-online="true"] .sup-status-dot {
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    animation: sup-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes sup-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.sup-status[data-online="true"] .sup-status-text { color: var(--mint-700, #047857); }
:root[data-theme="dark"] .sup-status[data-online="true"] .sup-status-text { color: var(--mint-400); }
.sup-status[data-online="false"] .sup-status-text { color: var(--text-3); }
.sup-status-eta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
}
.sup-status-eta i { font-size: 10px; opacity: 0.7; }

/* Step 1 — topic chips */
body.chat-page #hdr-support-drawer .sup-step-1 {
    padding: 20px 22px 16px;
    flex: 0 0 auto;
}
.sup-step-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 14px;
}
.sup-topics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sup-topic {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 10px;
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-1);
    text-align: left;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    line-height: 1.2;
}
.sup-topic:hover {
    transform: translateY(-2px);
    border-color: var(--mint-500);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.15);
}
.sup-topic:active { transform: translateY(0) scale(0.97); }
.sup-topic-ic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    color: var(--text-2);
    font-size: 12px;
    flex-shrink: 0;
    transition: all 0.2s;
}
.sup-topic:hover .sup-topic-ic {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600, #059669));
    color: #fff;
}

/* Step 2 — back button */
.sup-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--bg-soft);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    transition: all 0.2s;
    align-self: flex-start;
    margin-bottom: 12px;
}
.sup-back-btn:hover {
    background: var(--border-1);
    color: var(--text-1);
}
.sup-back-btn i { font-size: 10px; }

/* Attach row */
.sup-attach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sup-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg-soft);
    border: 1px dashed var(--border-1);
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    transition: all 0.2s;
}
.sup-attach-btn:hover {
    background: var(--border-1);
    color: var(--text-1);
    border-style: solid;
    border-color: var(--mint-500);
}
.sup-attach-btn i { font-size: 13px; }

.sup-file-preview {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--border-1);
    flex-shrink: 0;
}
.sup-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sup-file-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: background 0.2s;
}
.sup-file-remove:hover { background: #EF4444; }

/* =========================================================
   V14.3 — Create Ticket preview card
   Topic seçimi → Preview card → Create Ticket → Message form
   ========================================================= */

/* Step 2 container (preview) */
body.chat-page #hdr-support-drawer .sup-step-2.sup-ticket-preview {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 0 0 auto;
}
body.chat-page #hdr-support-drawer .sup-step-2.sup-ticket-preview[hidden] {
    display: none !important;
}

/* Preview card — büyük topic özet */
.sup-preview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(52, 211, 153, 0.04));
    border: 1.5px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
}
.sup-preview-ic {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-600, #059669));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28);
}
.sup-preview-body { flex: 1; min-width: 0; }
.sup-preview-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--text-3);
    margin-bottom: 3px;
}
.sup-preview-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
}

.sup-preview-hint {
    margin: 0;
    padding: 0 4px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
}

/* Create Ticket button — big mint CTA */
.sup-create-ticket-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    width: 100%;
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-600, #059669));
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
    position: relative;
    overflow: hidden;
}
.sup-create-ticket-btn::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -100%;
    width: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: sup-ct-shimmer 3.5s ease-in-out infinite;
}
@keyframes sup-ct-shimmer {
    0%   { left: -100%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}
.sup-create-ticket-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45);
}
.sup-create-ticket-btn:active { transform: translateY(0) scale(0.97); }
.sup-create-ticket-btn .sup-ct-arrow {
    transition: transform 0.2s;
}
.sup-create-ticket-btn:hover .sup-ct-arrow {
    transform: translateX(4px);
}
.sup-create-ticket-btn i:first-child {
    font-size: 16px;
}

/* Step 3 — message form padding fix */
body.chat-page #hdr-support-drawer .usd-open-form[hidden] {
    display: none !important;
}

/* =========================================================
   V14.4 — Ticket açılana kadar message composer gizli
   .chat-drawer-composer[hidden] kuralı display: flex'i override etmeli
   ========================================================= */
.chat-drawer-composer[hidden] {
    display: none !important;
}
.usd-chat-body[hidden] {
    display: none !important;
}
.usd-open-form[hidden],
.sup-step-1[hidden],
.sup-step-2[hidden] {
    display: none !important;
}

/* =========================================================
   V14.5 — Support chat: avatar, bubble, composer fix, mobile
   ========================================================= */

/* Mobile nav support button — button element styled like anchor */
.mobile-bottom-nav .mbn-support-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    /* mbn-item styling inherits */
}

/* Message list container */
#hdr-support-drawer .usd-chat-body,
#hdr-support-drawer .chat-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-soft, #F9FAFB);
}

/* Message row (avatar + body) */
.cd-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 100%;
}
.cd-msg.cd-msg-user {
    flex-direction: row-reverse;
    align-self: flex-end;
    max-width: 90%;
}
.cd-msg.cd-msg-admin {
    align-self: flex-start;
    max-width: 90%;
}

/* Avatar */
.cd-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 13px;
    color: #fff;
    overflow: hidden;
    position: relative;
}
.cd-avatar-admin {
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-600, #059669));
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.cd-avatar-admin i {
    font-size: 15px;
    color: #fff;
}
.cd-avatar-admin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cd-avatar-user {
    background: #6366F1; /* overridden inline by hsl */
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Message body */
.cd-msg-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}
.cd-msg-user .cd-msg-body {
    align-items: flex-end;
}

/* Meta (who + time) */
.cd-msg-meta {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 10px;
    font-weight: 700;
    padding: 0 6px;
}
.cd-msg-who {
    color: var(--text-2);
    letter-spacing: 0.02em;
}
.cd-msg-admin .cd-msg-who {
    color: var(--mint-700, #047857);
}
:root[data-theme="dark"] .cd-msg-admin .cd-msg-who { color: var(--mint-400); }
.cd-msg-time {
    color: var(--text-3);
    font-family: ui-monospace, monospace;
    font-size: 9px;
}

/* Bubble */
.cd-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    word-wrap: break-word;
    max-width: 100%;
    border: 1px solid transparent;
}
.cd-msg-user .cd-msg-bubble {
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-600, #059669));
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}
.cd-msg-admin .cd-msg-bubble {
    background: var(--bg-card, #fff);
    color: var(--text-1);
    border-color: var(--border-1);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
:root[data-theme="dark"] .cd-msg-admin .cd-msg-bubble {
    background: #1F2937;
    border-color: #374151;
}

/* Attachment thumbnail */
.cd-msg-attach {
    display: block;
    margin-top: 4px;
    max-width: 200px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-1);
    transition: transform 0.2s;
}
.cd-msg-attach:hover {
    transform: scale(1.02);
}
.cd-msg-attach img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: cover;
}

/* System message (closed ticket) */
.cd-system {
    align-self: center;
    padding: 8px 14px;
    background: var(--bg-card, #fff);
    border: 1px dashed var(--border-1);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Empty state */
.cd-empty {
    align-self: center;
    color: var(--text-3);
    font-size: 12px;
    font-style: italic;
    padding: 24px;
}

/* Chat composer (write a message) — only when ticket is open */
#hdr-support-drawer .chat-drawer-composer {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border-1);
    background: var(--bg-card, #fff);
    flex: 0 0 auto;
}
#hdr-support-drawer .chat-drawer-composer[hidden] {
    display: none !important;
}
#hdr-support-drawer .chat-drawer-composer textarea {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-soft, #F9FAFB);
    border: 1.5px solid var(--border-1);
    border-radius: 100px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-1);
    resize: none;
    min-height: 40px;
    max-height: 120px;
    line-height: 1.4;
}
#hdr-support-drawer .chat-drawer-composer .btn-primary {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--mint-500, #10B981), var(--mint-600, #059669));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.15s;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
#hdr-support-drawer .chat-drawer-composer .btn-primary:hover { transform: scale(1.05); }
#hdr-support-drawer .chat-drawer-composer .btn-primary:active { transform: scale(0.95); }

/* Mobile drawer full screen */
@media (max-width: 500px) {
    body.chat-page #hdr-support-drawer,
    body.chat-page #hdr-support-drawer.chat-drawer,
    #hdr-support-drawer.chat-drawer,
    #hdr-support-drawer {
        width: 100vw !important;
    }
    .cd-msg-bubble { font-size: 13px; }
    .cd-avatar { width: 30px; height: 30px; font-size: 12px; }
    .cd-avatar-admin i { font-size: 13px; }
}

/* Dark mode refinements */
:root[data-theme="dark"] #hdr-support-drawer .usd-chat-body,
:root[data-theme="dark"] #hdr-support-drawer .chat-drawer-body {
    background: #111827;
}

/* ============================================================================
   MM2.CASH REBRAND — APPEND TO style.css END (v7 — revised)
   ============================================================================
   Bu blok mevcut style.css'in EN SONUNA yapıştırılır. Hiçbir mevcut satır
   silinmez. Tüm yeni class'lar `-v7` suffix'li, eski UI bozulmaz.

   İÇERİK:
     1. Dark mode force-light
     2. Header: brand wordmark (MM2.CASH) — logo img yerine
     3. Language flags: ROUNDED-SQUARE (login/register butonlarıyla uyumlu)
     4. Topbar v7 — sticky shadow
     5. Auth CTA v7 — Login (ghost) + Register (primary)
     6. User card v7 — username + Profile label + avatar
     7. Footer v7 — 4-col grid, social buttons, minimal (BLOXSWAPS/STARPETS stili)
   ============================================================================ */


/* ========================================================================
   1) DARK MODE → FORCE LIGHT
   ======================================================================== */
:root,
:root[data-theme="light"],
:root[data-theme="dark"],
:root[data-theme="auto"] {
    color-scheme: light only !important;
}
:root[data-theme="dark"] {
    --bg-base:  #F0FAF4 !important;
    --bg-soft:  #E4F5EA !important;
    --bg-card:  #FFFFFF !important;
    --bg-glass: rgba(255, 255, 255, 0.72) !important;
    --bg-input: #FFFFFF !important;
    --text-1:   #0B1F17 !important;
    --text-2:   #3B5144 !important;
    --text-3:   #6B8478 !important;
    --text-4:   #9AB0A3 !important;
    --border-1: rgba(11, 31, 23, 0.08) !important;
    --border-2: rgba(11, 31, 23, 0.14) !important;
}
.theme-toggle,
#theme-toggle-btn {
    display: none !important;
}


/* ========================================================================
   2) HEADER BRAND v7 — MM2.CASH wordmark
   Eski .brand-mark, .brand-text, .brand-name, .brand-tag CSS'i style.css'te
   var; onları DOM'dan çıkardık ama CSS'te bırakıyoruz (başka yerde ref
   olabilir). Yeni brand `.brand-v7` ile kendi stil adasına sahip.
   ======================================================================== */
.brand-v7 {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    padding: 4px 10px 4px 4px;
    border-radius: 12px;
    transition: transform 0.15s ease;
}
.brand-v7:hover { transform: translateY(-1px); }
.brand-v7:active { transform: scale(0.98); }

.brand-logo-v7 {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 10px rgba(16, 185, 129, 0.28));
    transition: filter 0.2s ease;
}
.brand-v7:hover .brand-logo-v7 {
    filter: drop-shadow(0 6px 14px rgba(16, 185, 129, 0.45));
}
.brand-logo-v7 svg { width: 100%; height: 100%; display: block; }

.brand-wordmark-v7 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-1);
    line-height: 1;
    white-space: nowrap;
}
.brand-wordmark-v7 .brand-dot-v7 {
    color: var(--mint-500);
    font-weight: 800;
    display: inline-block;
    /* Küçük ama belirgin — "dot as accent" */
}

/* Mobilde wordmark kaybolsun, sadece logo kalsın (eski .brand-tag gibi) */
@media (max-width: 520px) {
    .brand-wordmark-v7 { display: none; }
    .brand-v7 { gap: 0; padding: 4px; }
}


/* ========================================================================
   3) LANGUAGE FLAGS — ROUNDED SQUARE (not circle)
   Login/register butonlarıyla uyumlu. flagcdn PNG dikdörtgen zaten;
   border-radius ile kenarları yumuşatıyoruz.
   ======================================================================== */
/* Mevcut .lang-flag 1:1 object-cover ile yuvarlatılıyor olabilir style.css'te —
   v7 specificity ile overrride. Hem ana button hem menü item için. */
.lang-btn .lang-flag,
.lang-btn-v2 .lang-flag,
.lang-item .lang-flag {
    border-radius: 4px !important;     /* yuvarlak DEĞİL, hafif köşeli */
    object-fit: cover;
    width: 22px;
    height: 16px;
    display: block;
    box-shadow: 0 0 0 1px rgba(11, 31, 23, 0.06);
}

/* Dropdown içi daha büyük */
.lang-menu .lang-item .lang-flag {
    width: 24px;
    height: 17px;
}


/* ========================================================================
   4) TOPBAR v7 — sticky shadow (scroll ile)
   ======================================================================== */
.topbar.is-scrolled-v7 {
    box-shadow:
        0 1px 0 rgba(11, 31, 23, 0.04),
        0 8px 24px rgba(11, 31, 23, 0.06);
    border-bottom-color: var(--border-1);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}


/* ========================================================================
   5) AUTH CTA v7 — Login (ghost) + Register (primary)
   ======================================================================== */
.auth-cta-v7 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-btn-v7 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.15s ease,
                box-shadow 0.18s ease,
                border-color 0.15s ease,
                color 0.15s ease;
    white-space: nowrap;
}
.auth-btn-v7-ghost {
    color: var(--text-2);
    background: transparent;
    border-color: var(--border-2);
}
.auth-btn-v7-ghost:hover {
    background: var(--mint-50);
    color: var(--mint-700);
    border-color: var(--mint-300);
}
.auth-btn-v7-ghost:active { transform: scale(0.97); }

.auth-btn-v7-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 4px 12px rgba(16, 185, 129, 0.32);
}
.auth-btn-v7-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 8px 20px rgba(16, 185, 129, 0.45);
}
.auth-btn-v7-primary:active { transform: scale(0.97); }
.auth-btn-v7-primary i {
    font-size: 11px;
    transition: transform 0.18s ease;
}
.auth-btn-v7-primary:hover i { transform: translateX(3px); }


/* ========================================================================
   6) USER CARD v7 — zengin avatar + username + "Profile" label
   ======================================================================== */
.user-switcher-v7 { position: relative; }

.user-card-btn-v7 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 12px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.user-card-btn-v7:hover {
    border-color: var(--mint-300);
    background: var(--mint-50);
}
.user-switcher-v7.open .user-card-btn-v7 {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.ucb-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    gap: 3px;
}
.ucb-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ucb-role {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.02em;
}
.ucb-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.ucb-avatar-letter {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    font-family: 'Inter', sans-serif;
}
.ucb-status-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    background: #10B981;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
}

/* User menu v7 — zengin dropdown */
.user-menu-v7 {
    min-width: 240px;
    padding: 6px;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(11, 31, 23, 0.15);
}
.user-menu-v7 .user-menu-header {
    background: linear-gradient(135deg, var(--mint-50), var(--bg-soft));
    border-radius: 12px;
    margin-bottom: 4px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: none;
}
.user-menu-v7 .user-menu-header .user-avatar {
    width: 44px;
    height: 44px;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.user-menu-v7 .user-menu-header .user-name {
    font-size: 14.5px;
    font-weight: 800;
}
.user-menu-v7 .user-menu-header .user-stats {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.user-menu-v7 .user-menu-header .user-stats i {
    color: var(--mint-600);
    font-size: 11px;
}
.user-menu-v7 .user-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease;
}
.user-menu-v7 .user-menu-link i {
    width: 18px;
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
}
.user-menu-v7 .user-menu-link:hover {
    background: var(--mint-50);
    color: var(--mint-700);
}
.user-menu-v7 .user-menu-link:hover i {
    color: var(--mint-600);
}
.user-menu-divider-v7 {
    height: 1px;
    background: var(--border-1);
    margin: 6px 4px;
}
.user-menu-danger-v7 {
    color: #B91C1C !important;
}
.user-menu-danger-v7 i {
    color: #B91C1C !important;
}
.user-menu-danger-v7:hover {
    background: #FEE2E2 !important;
    color: #991B1B !important;
}
.user-menu-danger-v7:hover i {
    color: #991B1B !important;
}

@media (max-width: 760px) {
    .ucb-info { display: none; }
    .user-card-btn-v7 { padding: 4px; }
    .auth-btn-v7-ghost { padding: 0 12px; font-size: 12.5px; }
    .auth-btn-v7-primary { padding: 0 14px; font-size: 12.5px; }
}


/* ========================================================================
   7) FOOTER v7 — STARPETS inspired, no underlines, subtle glow
   ======================================================================== */
.site-footer-v7 {
    margin-top: 96px !important;
    padding: 56px clamp(20px, 4vw, 48px) 32px !important;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(16, 185, 129, 0.08), transparent 70%),
        linear-gradient(to bottom, transparent 0%, var(--bg-soft) 30%),
        var(--bg-base);
    border-top: 1px solid var(--border-1);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
/* Subtle top accent line — fosfor glow */
.site-footer-v7::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    max-width: 560px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mint-400), transparent);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    opacity: 0.6;
    pointer-events: none;
}
.site-footer-v7 .site-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* Grid — 3 col (brand wide + 2 link cols) */
.sfv7-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.2fr;
    gap: 64px;
}

/* ==================== BRAND COLUMN ==================== */
.sfv7-col-brand {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 480px;
}
.sfv7-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    width: fit-content;
    transition: transform 0.2s ease;
}
.sfv7-brand-link:hover { transform: translateY(-1px); }
.sfv7-brand-link:hover .sfv7-brand-logo {
    filter: drop-shadow(0 8px 20px rgba(16, 185, 129, 0.55));
}
.sfv7-brand-logo {
    filter: drop-shadow(0 4px 14px rgba(16, 185, 129, 0.3));
    display: inline-flex;
    align-items: center;
    transition: filter 0.25s ease;
}
.sfv7-brand-wordmark {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.028em;
    line-height: 1;
}
.sfv7-brand-wordmark .sfv7-brand-dot {
    color: var(--mint-500);
    font-weight: 800;
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

/* Copyright */
.sfv7-copyright {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: 0.01em;
    margin-top: 4px;
}

/* Long disclaimer */
.sfv7-disclaimer {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    max-width: 440px;
}

/* ==================== SOCIAL ROW ==================== */
.sfv7-social-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.sfv7-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease,
                box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}
.sfv7-social-btn:hover {
    transform: translateY(-3px);
    color: #fff;
}
.sfv7-social-btn:active { transform: scale(0.92); }

/* Brand-colored hover states */
.sfv7-social-btn.sfv7-social-discord:hover {
    background: #5865F2;
    border-color: #5865F2;
    box-shadow: 0 8px 18px rgba(88, 101, 242, 0.45);
}
.sfv7-social-btn.sfv7-social-x:hover {
    background: #0F1419;
    border-color: #0F1419;
    box-shadow: 0 8px 18px rgba(15, 20, 25, 0.45);
}
.sfv7-social-btn.sfv7-social-telegram:hover {
    background: #229ED9;
    border-color: #229ED9;
    box-shadow: 0 8px 18px rgba(34, 158, 217, 0.45);
}
.sfv7-social-btn.sfv7-social-youtube:hover {
    background: #FF0000;
    border-color: #FF0000;
    box-shadow: 0 8px 18px rgba(255, 0, 0, 0.4);
}

/* Live online count caption */
.sfv7-social-caption {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mint-700);
    width: fit-content;
    margin-top: -2px;
}
.sfv7-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2),
                0 0 10px rgba(34, 197, 94, 0.6);
    animation: sfv7-live-pulse 1.8s ease-in-out infinite;
}
.sfv7-live-text strong {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}
@keyframes sfv7-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* ==================== LINK COLUMNS ==================== */
.sfv7-col-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text-1);
    margin: 0 0 18px;
    padding: 0;
    border: none;
    display: block;
}
.sfv7-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sfv7-link-list a {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.2s ease;
    width: fit-content;
}
.sfv7-link-list a:hover {
    color: var(--mint-700);
    transform: translateX(2px);
}

/* ==================== CONTACTS BLOCK (STARPETS style) ==================== */
.sfv7-contacts {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-1);
}
.sfv7-contacts-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 10px;
    letter-spacing: -0.005em;
}
.sfv7-contact-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 6px;
    line-height: 1.4;
}
.sfv7-contact-item i {
    color: var(--mint-600);
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.sfv7-contact-item a {
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.15s ease;
    font-weight: 500;
}
.sfv7-contact-item a:hover {
    color: var(--mint-700);
}
.sfv7-contact-item-static {
    color: var(--text-3);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .sfv7-grid {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 40px;
    }
}
@media (max-width: 760px) {
    .site-footer-v7 {
        padding: 40px 20px 24px !important;
        margin-top: 56px !important;
    }
    .sfv7-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
    }
    .sfv7-col-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }
    .sfv7-brand-wordmark { font-size: 22px; }
    .sfv7-disclaimer { max-width: 100%; }
}
@media (max-width: 440px) {
    .sfv7-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .sfv7-col-support .sfv7-contacts {
        margin-top: 20px;
        padding-top: 16px;
    }
}

/* ============================================================================
   END OF v7 FOOTER BLOCK
   ============================================================================ */



/* ========================================================================
   8) AUTH MODAL v7 — standalone login/register modal
   Her sayfada çalışır, script.js'ten bağımsız.
   ======================================================================== */
.authv7-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 23, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.authv7-overlay.open { opacity: 1; }

.authv7-modal {
    background: var(--bg-card);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    padding: 32px 28px 24px;
    box-shadow: 0 30px 80px rgba(11, 31, 23, 0.3);
    position: relative;
    transform: scale(0.94) translateY(12px);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.authv7-overlay.open .authv7-modal {
    transform: scale(1) translateY(0);
}

.authv7-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--bg-soft);
    border: none;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s ease;
}
.authv7-close:hover {
    background: var(--border-1);
    color: var(--text-1);
    transform: rotate(90deg);
}

.authv7-head {
    text-align: center;
    margin-bottom: 24px;
}
.authv7-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--mint-400), var(--mint-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}
.authv7-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-1);
    margin: 0 0 6px;
}
.authv7-sub {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 0;
    line-height: 1.5;
}

.authv7-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.authv7-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.authv7-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: 0.02em;
}

.authv7-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-base);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.authv7-input-wrap:focus-within {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.authv7-prefix {
    padding: 0 10px 0 14px;
    color: var(--mint-600);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.authv7-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text-1);
    padding: 12px 14px 12px 0;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.authv7-input:focus,
.authv7-input:focus-visible,
.authv7-input:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}
/* Chrome/Safari autofill sarı background'ını kaldır */
.authv7-input:-webkit-autofill,
.authv7-input:-webkit-autofill:hover,
.authv7-input:-webkit-autofill:focus,
.authv7-input:-webkit-autofill:active {
    -webkit-background-clip: text !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-base) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-base) inset !important;
    -webkit-text-fill-color: var(--text-1) !important;
    caret-color: var(--text-1);
    transition: background-color 9999s ease-in-out 0s;
}
.authv7-input-prefix {
    padding-left: 0;
}
.authv7-input::placeholder {
    color: var(--text-4);
    opacity: 1;
}
.authv7-input::selection {
    background: var(--mint-200);
    color: var(--text-1);
}

.authv7-eye {
    border: none;
    background: transparent;
    color: var(--text-3);
    padding: 0 14px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
}
.authv7-eye:hover { color: var(--text-1); }

.authv7-error {
    background: #FEE2E2;
    color: #B91C1C;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    min-height: 0;
    display: none;
}
.authv7-error:not(:empty) {
    display: block;
    animation: authv7-shake 0.35s ease;
}
@keyframes authv7-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.authv7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 16px rgba(16, 185, 129, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease;
    margin-top: 4px;
}
.authv7-submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 10px 24px rgba(16, 185, 129, 0.48);
}
.authv7-submit:active { transform: scale(0.97); }
.authv7-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}
.authv7-submit i {
    font-size: 12px;
    transition: transform 0.15s ease;
}
.authv7-submit:hover i { transform: translateX(3px); }
.authv7-submit.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}
.authv7-submit.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    transform: translate(-50%, -50%);
    animation: authv7-spin 0.7s linear infinite;
}
@keyframes authv7-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.authv7-switch {
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-3);
}
.authv7-switch button {
    background: none;
    border: none;
    color: var(--mint-700);
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
}
.authv7-switch button:hover { text-decoration: underline; }

/* Mobilde tam genişlik */
@media (max-width: 520px) {
    .authv7-modal {
        padding: 24px 20px 20px;
        border-radius: 16px;
    }
    .authv7-icon { width: 48px; height: 48px; font-size: 18px; }
    .authv7-title { font-size: 20px; }
}


/* ============================================================================
   MM2.CASH — HISTORY PAGE v7.2 (clean rewrite)
   ============================================================================
   Tüm class'lar `hdv7-` prefix'li. Eski class'ları etkilemez.
   ============================================================================ */

/* Eski pseudo dot'ları kapat (çift nokta fix) */
.hdv7-status.status-badge::before,
.hdv7-card .status-badge::before,
.hdv7-status::before { display: none !important; content: none !important; }


/* ============================================================================
   1) HERO DASHBOARD CARD
   ============================================================================ */
.hdv7-hero {
    margin: 0 0 28px;
    padding: 28px 32px;
    background:
        radial-gradient(ellipse 80% 60% at 10% 0%, rgba(16, 185, 129, 0.07), transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 24px;
    box-shadow:
        0 1px 2px rgba(11, 31, 23, 0.04),
        0 20px 48px rgba(11, 31, 23, 0.06);
    position: relative;
    overflow: hidden;
}
.hdv7-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mint-400), transparent);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
    opacity: 0.5;
    pointer-events: none;
}

.hdv7-hero-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-1);
    margin-bottom: 24px;
}

.hdv7-earned { min-width: 0; }

.hdv7-label-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.hdv7-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mint-700);
    padding: 5px 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 999px;
    margin: 0;
}
.hdv7-label i { font-size: 11px; }

/* ===== CURRENCY TOGGLE (Binance-style pill) ===== */
.hdv7-cur-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    position: relative;
}
.hdv7-cur-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: transparent;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.22s ease,
                box-shadow 0.22s ease,
                transform 0.18s ease;
    white-space: nowrap;
}
.hdv7-cur-btn i {
    font-size: 10px;
    opacity: 0.7;
    transition: opacity 0.22s ease, color 0.22s ease;
}
.hdv7-cur-btn:hover { color: var(--text-1); }
.hdv7-cur-btn:hover i { opacity: 1; }
.hdv7-cur-btn.is-active {
    background: var(--bg-card);
    color: var(--mint-700);
    box-shadow: 0 1px 3px rgba(11, 31, 23, 0.1),
                0 2px 6px rgba(16, 185, 129, 0.15);
}
.hdv7-cur-btn.is-active i { opacity: 1; color: var(--mint-600); }

.hdv7-amount {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 6px 0 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.hdv7-amount-num {
    font-size: clamp(40px, 6vw, 64px);
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--text-1), var(--mint-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hdv7-amount-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--mint-700);
    letter-spacing: 0.05em;
}
.hdv7-sub {
    font-size: 13.5px;
    color: var(--text-3);
    font-weight: 500;
}

/* Chart */
.hdv7-chart {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 210px;
}
.hdv7-chart-label {
    font-family: 'Space Grotesk', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hdv7-spark {
    width: 200px;
    height: 48px;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.25));
}
.hdv7-spark-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: hdv7-spark-draw 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
@keyframes hdv7-spark-draw { to { stroke-dashoffset: 0; } }
.hdv7-spark-area {
    opacity: 0;
    animation: hdv7-spark-fade 0.8s ease-out 1.2s forwards;
}
@keyframes hdv7-spark-fade { to { opacity: 1; } }

/* ===== METRICS GRID ===== */
.hdv7-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.hdv7-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hdv7-metric:hover {
    transform: translateY(-2px);
    border-color: var(--mint-300);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.1);
}
.hdv7-m-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mint-100), var(--mint-50));
    color: var(--mint-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.hdv7-m-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hdv7-m-val {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.hdv7-m-val-text { font-size: 14.5px; font-weight: 700; }
.hdv7-m-num { font-variant-numeric: tabular-nums; }
.hdv7-m-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 700;
    color: var(--mint-700);
    letter-spacing: 0.05em;
}
.hdv7-m-lbl {
    font-size: 11px; font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.01em;
}
.hdv7-m-empty { color: var(--text-4); }


/* ============================================================================
   2) TOOLBAR (search + sort) — CLEAN REWRITE
   ============================================================================ */
.hdv7-toolbar { margin: 0 0 18px; }

.hdv7-search-form {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* --- SEARCH --- */
.hdv7-search {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    padding: 0 14px;
    height: 44px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    cursor: text;
}
.hdv7-search:hover { border-color: var(--mint-300); }
.hdv7-search:focus-within {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.hdv7-search-icon {
    color: var(--text-3);
    font-size: 13px;
    margin-right: 10px;
    flex-shrink: 0;
    transition: color 0.18s ease;
}
.hdv7-search:focus-within .hdv7-search-icon { color: var(--mint-600); }

/* Input — tüm kenarlar temiz */
.hdv7-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-1);
    padding: 0;
    margin: 0;
    line-height: 1.3;
    height: 100%;
}
.hdv7-search-input::placeholder { color: var(--text-4); font-weight: 500; opacity: 1; }
.hdv7-search-input:focus,
.hdv7-search-input:focus-visible,
.hdv7-search-input:active,
.hdv7-search-input:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
}
.hdv7-search-input:-webkit-autofill,
.hdv7-search-input:-webkit-autofill:hover,
.hdv7-search-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    -webkit-text-fill-color: var(--text-1) !important;
    caret-color: var(--text-1);
    transition: background-color 9999s ease-in-out 0s;
}

/* --- SORT (native select, clean wrapper, iç içe border YOK) --- */
.hdv7-sort-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 1.5px solid var(--border-1);
    border-radius: 12px;
    height: 44px;
    min-width: 190px;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}
.hdv7-sort-wrap:hover { border-color: var(--mint-300); }
.hdv7-sort-wrap:focus-within {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.hdv7-sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: var(--mint-600);
    font-size: 13px;
    flex-shrink: 0;
    pointer-events: none;
    border-right: 1px solid var(--border-1);
}

/* Native select: tüm default style'ları ez */
.hdv7-sort-native {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-1);
    cursor: pointer;
    padding: 0 36px 0 12px;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.01em;
}
.hdv7-sort-native:focus,
.hdv7-sort-native:focus-visible,
.hdv7-sort-native:active {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
}
.hdv7-sort-native::-ms-expand { display: none; }
.hdv7-sort-native option {
    background: var(--bg-card);
    color: var(--text-1);
    font-weight: 600;
}

.hdv7-sort-chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 10px;
    pointer-events: none;
    transition: color 0.18s ease, transform 0.2s ease;
    display: inline-flex;
}
.hdv7-sort-wrap:hover .hdv7-sort-chev { color: var(--mint-600); }
.hdv7-sort-wrap:focus-within .hdv7-sort-chev {
    color: var(--mint-600);
    transform: translateY(-50%) rotate(180deg);
}


/* ============================================================================
   3) FILTER PILL BARS (status + date) — toggle pill gibi
   ============================================================================ */
.hdv7-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 24px;
}

.hdv7-pill-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}
.hdv7-pill-label {
    font-family: 'Space Grotesk', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
    min-width: 52px;
}

/* Pill group — Binance/currency toggle ile aynı taban */
.hdv7-pill-group {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    padding: 4px;
    background: var(--bg-soft);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.hdv7-pill-group::-webkit-scrollbar { display: none; }

.hdv7-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-3);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.22s ease,
        box-shadow 0.28s ease,
        transform 0.18s ease;
    position: relative;
    overflow: hidden;
}
.hdv7-pill i {
    font-size: 11px;
    opacity: 0.65;
    transition: opacity 0.22s ease, color 0.22s ease, transform 0.25s ease;
}
.hdv7-pill:hover {
    color: var(--text-1);
    background: rgba(255, 255, 255, 0.5);
}
.hdv7-pill:hover i { opacity: 1; }

.hdv7-pill.is-active {
    background: var(--bg-card);
    color: var(--mint-700);
    box-shadow:
        0 1px 3px rgba(11, 31, 23, 0.1),
        0 3px 8px rgba(16, 185, 129, 0.15);
}
.hdv7-pill.is-active i {
    opacity: 1;
    color: var(--mint-600);
}

/* Subtle flash on becoming active */
.hdv7-pill.is-active::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: radial-gradient(ellipse at top, rgba(16, 185, 129, 0.08), transparent 70%);
    pointer-events: none;
    animation: hdv7-pill-flash 0.55s ease-out;
}
@keyframes hdv7-pill-flash {
    0%   { opacity: 0; transform: scale(0.8); }
    40%  { opacity: 1; }
    100% { opacity: 0.6; transform: scale(1); }
}

.hdv7-pill:active { transform: scale(0.96); }


/* ============================================================================
   4) AJAX RESULTS WRAPPER
   ============================================================================ */
.hdv7-results {
    position: relative;
    min-height: 120px;
    transition: opacity 0.2s ease;
}
.hdv7-results.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.hdv7-results.is-loading::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(16, 185, 129, 0.15);
    border-top-color: var(--mint-500);
    animation: hdv7-spin 0.7s linear infinite;
    pointer-events: none;
    z-index: 10;
}
@keyframes hdv7-spin { to { transform: translateX(-50%) rotate(360deg); } }


/* ============================================================================
   5) TIMELINE GROUPS
   ============================================================================ */
.hdv7-timeline {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 8px;
}
.hdv7-timeline::before { display: none; }
.hdv7-timeline .tl-group-items::before { display: none; }
.hdv7-timeline .tl-item { padding-left: 0; margin-bottom: 0; }
.hdv7-timeline .tl-item::before,
.hdv7-timeline .tl-dot { display: none; }

.hdv7-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0;
    border: none;
}
.hdv7-group-label {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.hdv7-group-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--mint-700);
    padding: 3px 9px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.hdv7-group-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-1), transparent);
    margin-left: 4px;
}
.hdv7-group-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ============================================================================
   6) TRADE CARD
   ============================================================================ */
.hdv7-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 18px;
    padding: 18px 22px 16px 28px;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease,
                border-color 0.15s ease;
    overflow: hidden;
}
.hdv7-card:hover {
    transform: translateY(-2px);
    border-color: var(--mint-300);
    box-shadow:
        0 1px 2px rgba(11, 31, 23, 0.04),
        0 12px 28px rgba(11, 31, 23, 0.08);
}

.hdv7-rarity-stripe {
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--text-4);
    box-shadow: 0 0 12px rgba(107, 132, 120, 0.3);
    transition: box-shadow 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}
.hdv7-card:hover .hdv7-rarity-stripe { top: 8%; bottom: 8%; }

.hdv7-rar-chroma    .hdv7-rarity-stripe { background: linear-gradient(180deg, #ff0080, #00b8d4, #ff8c00); box-shadow: 0 0 14px rgba(255, 0, 128, 0.5); }
.hdv7-rar-ancient   .hdv7-rarity-stripe { background: #B91C1C; box-shadow: 0 0 12px rgba(185, 28, 28, 0.5); }
.hdv7-rar-vintage   .hdv7-rarity-stripe { background: #BE185D; box-shadow: 0 0 12px rgba(190, 24, 93, 0.5); }
.hdv7-rar-godly     .hdv7-rarity-stripe { background: #B45309; box-shadow: 0 0 12px rgba(180, 83, 9, 0.5); }
.hdv7-rar-legendary .hdv7-rarity-stripe { background: #C2410C; box-shadow: 0 0 12px rgba(194, 65, 12, 0.5); }
.hdv7-rar-rare      .hdv7-rarity-stripe { background: #1D4ED8; box-shadow: 0 0 12px rgba(29, 78, 216, 0.5); }
.hdv7-rar-uncommon  .hdv7-rarity-stripe { background: #15803D; box-shadow: 0 0 12px rgba(21, 128, 61, 0.5); }
.hdv7-rar-common    .hdv7-rarity-stripe { background: #475569; box-shadow: 0 0 10px rgba(71, 85, 105, 0.3); }
.hdv7-rar-fr  .hdv7-rarity-stripe { background: #0369A1; box-shadow: 0 0 12px rgba(3, 105, 161, 0.5); }
.hdv7-rar-nfr .hdv7-rarity-stripe { background: #6D28D9; box-shadow: 0 0 12px rgba(109, 40, 217, 0.5); }
.hdv7-rar-mfr .hdv7-rarity-stripe { background: #B45309; box-shadow: 0 0 12px rgba(180, 83, 9, 0.5); }
.hdv7-rar-mr  .hdv7-rarity-stripe { background: #B91C1C; box-shadow: 0 0 12px rgba(185, 28, 28, 0.5); }

.hdv7-card-completed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, transparent 40%), var(--bg-card);
}
.hdv7-card-cancelled { opacity: 0.72; }

.hdv7-card-main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.hdv7-card-left { min-width: 0; }

.hdv7-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.hdv7-item-name {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
}
.hdv7-rarity-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 999px;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.hdv7-rar-emoji { font-size: 11px; line-height: 1; }

.hdv7-rar-bg-chroma {
    background: linear-gradient(90deg, #ff008022, #00b8d422, #ff8c0022);
    color: #7C3AED;
    border: 1px solid rgba(124, 58, 237, 0.2);
}
.hdv7-rar-bg-ancient   { background: rgba(185, 28, 28, 0.1);   color: #B91C1C; }
.hdv7-rar-bg-vintage   { background: rgba(190, 24, 93, 0.1);   color: #BE185D; }
.hdv7-rar-bg-godly     { background: rgba(180, 83, 9, 0.12);   color: #B45309; }
.hdv7-rar-bg-legendary { background: rgba(194, 65, 12, 0.1);   color: #C2410C; }
.hdv7-rar-bg-rare      { background: rgba(29, 78, 216, 0.1);   color: #1D4ED8; }
.hdv7-rar-bg-uncommon  { background: rgba(21, 128, 61, 0.1);   color: #15803D; }
.hdv7-rar-bg-common    { background: rgba(71, 85, 105, 0.1);   color: #475569; }

.hdv7-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
}
.hdv7-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-3);
    font-weight: 500;
}
.hdv7-meta-item i { font-size: 10px; opacity: 0.65; }
.hdv7-meta-item code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--bg-soft);
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.02em;
}
.hdv7-copy {
    width: 22px; height: 22px;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 10px;
    transition: background 0.15s ease, color 0.15s ease;
}
.hdv7-copy:hover { background: var(--mint-50); color: var(--mint-700); }
.hdv7-copy.copied { background: var(--mint-100); color: var(--mint-700); }

.hdv7-payinfo {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hdv7-pay-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mint-700);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 6px;
}
.hdv7-pay-chip i { font-size: 10px; }
.hdv7-tx-chip {
    background: var(--bg-soft);
    border-color: var(--border-1);
    color: var(--text-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.hdv7-tx-chip code {
    font-family: inherit;
    background: transparent;
    padding: 0;
    color: var(--text-2);
}
.hdv7-tx-chip .hdv7-copy { margin-left: 2px; }

.hdv7-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.hdv7-price {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.025em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.hdv7-price-num { font-size: 26px; }
.hdv7-card-completed .hdv7-price-num {
    background: linear-gradient(135deg, var(--mint-600), var(--mint-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hdv7-price-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--mint-700);
    letter-spacing: 0.05em;
}

/* Status badge — single dot only */
.hdv7-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 10px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
}
.hdv7-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    display: inline-block;
}
.hdv7-status-completed { background: rgba(16, 185, 129, 0.12); color: #047857; }
.hdv7-status-pending   { background: rgba(245, 158, 11, 0.12); color: #B45309; }
.hdv7-status-pending .hdv7-status-dot {
    animation: hdv7-pending-pulse 1.6s ease-in-out infinite;
}
@keyframes hdv7-pending-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    70%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.hdv7-status-cancelled { background: rgba(107, 114, 128, 0.12); color: #4B5563; }


/* ============================================================================
   7) STATUS RAIL (progress 2-step)
   ============================================================================ */
.hdv7-rail {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 0 2px;
    border-top: 1px dashed var(--border-1);
    margin-top: 4px;
}
.hdv7-rail-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.4;
    transition: opacity 0.25s ease;
}
.hdv7-step-done { opacity: 1; }
.hdv7-step-cancelled { opacity: 0.5; }
.hdv7-step-cancelled .hdv7-rail-dot { background: rgba(107, 114, 128, 0.12) !important; color: #4B5563 !important; }
.hdv7-step-cancelled .hdv7-rail-label { color: #4B5563 !important; }

.hdv7-rail-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}
.hdv7-step-done .hdv7-rail-dot {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.hdv7-rail-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.02em;
    transition: color 0.25s ease;
}
.hdv7-step-done .hdv7-rail-label { color: var(--mint-700); }

.hdv7-rail-line {
    flex: 1;
    height: 2px;
    background: var(--border-1);
    border-radius: 2px;
    min-width: 12px;
    margin: 0 6px;
    transition: background 0.3s ease;
    position: relative;
    overflow: hidden;
}
.hdv7-rail-line.is-done {
    background: linear-gradient(90deg, var(--mint-400), var(--mint-500));
}

/* Fresh complete glow */
.hdv7-card.is-fresh { animation: hdv7-fresh-glow 2.5s ease-out; }
@keyframes hdv7-fresh-glow {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    30%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2), 0 12px 32px rgba(16, 185, 129, 0.25); }
    100% { box-shadow: 0 1px 2px rgba(11, 31, 23, 0.04), 0 12px 28px rgba(11, 31, 23, 0.08); }
}

.hdv7-timeline ~ .hist-paginate { margin-top: 28px; }


/* ============================================================================
   8) RESPONSIVE — Tablet (≤ 900px)
   ============================================================================ */
@media (max-width: 900px) {
    .hdv7-hero { padding: 24px 22px; border-radius: 20px; }
    .hdv7-hero-top {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hdv7-chart {
        align-items: flex-start;
        width: 100%;
        min-width: 0;
    }
    .hdv7-spark { width: 100%; }
    .hdv7-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .hdv7-pill-row { gap: 10px; }
    .hdv7-pill-label { min-width: auto; }
}


/* ============================================================================
   9) RESPONSIVE — Mobile (≤ 600px)
   ============================================================================ */
@media (max-width: 600px) {
    .hdv7-hero {
        padding: 20px 18px;
        border-radius: 18px;
        margin-bottom: 22px;
    }
    .hdv7-label-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .hdv7-amount { gap: 6px; }
    .hdv7-amount-num { font-size: 38px; }
    .hdv7-amount-unit { font-size: 14px; }
    .hdv7-sub { font-size: 12.5px; }

    .hdv7-search-form {
        flex-direction: column;
        gap: 10px;
    }
    .hdv7-sort-wrap { min-width: 100%; width: 100%; }

    .hdv7-filters { gap: 12px; margin-bottom: 20px; }
    .hdv7-pill-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .hdv7-pill-group { width: 100%; }
    .hdv7-pill {
        padding: 8px 12px;
        font-size: 12px;
        flex: 1 1 0;
    }

    .hdv7-card {
        padding: 16px 18px 14px 22px;
        border-radius: 14px;
    }
    .hdv7-card-main {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .hdv7-card-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-top: 10px;
        border-top: 1px dashed var(--border-1);
    }
    .hdv7-item-name { font-size: 16px; }
    .hdv7-price-num { font-size: 22px; }
    .hdv7-rail { gap: 2px; }
    .hdv7-rail-label { display: none; }
    .hdv7-rail-line { min-width: 20px; margin: 0 2px; }
}

/* ==== hdv7-sort CUSTOM DROPDOWN (v7.3) ==== */
.hdv7-sort-wrap { position: relative; }

.hdv7-sort-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important; height: 0 !important;
    padding: 0 !important;
}

.hdv7-sort-trigger {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-1);
    padding: 0 36px 0 12px;
    text-align: left;
    letter-spacing: 0.01em;
    min-width: 0;
}
.hdv7-sort-trigger-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdv7-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow:
        0 1px 3px rgba(11, 31, 23, 0.06),
        0 16px 40px rgba(11, 31, 23, 0.12);
    padding: 6px;
    z-index: 1001;  /* ← değişti */
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top center;
    pointer-events: none;
    transition:
        opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.hdv7-sort-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mint-400), transparent);
    opacity: 0.6;
    pointer-events: none;
}
.hdv7-sort-wrap.is-open .hdv7-sort-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.hdv7-sort-wrap.is-open {
    border-color: var(--mint-500) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
    overflow: visible !important;
    z-index: 1001;          /* ← YENİ */
    position: relative;     /* ← YENİ */
}
.hdv7-sort-wrap.is-open .hdv7-sort-chev {
    color: var(--mint-600);
    transform: translateY(-50%) rotate(180deg);
}

.hdv7-sort-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    user-select: none;
    opacity: 0;
    transform: translateY(-4px);
}
.hdv7-sort-wrap.is-open .hdv7-sort-option {
    animation: hdv7-opt-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(1) { animation-delay: 0.02s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(2) { animation-delay: 0.06s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(3) { animation-delay: 0.10s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(4) { animation-delay: 0.14s; }
@keyframes hdv7-opt-in {
    to { opacity: 1; transform: translateY(0); }
}

.hdv7-sort-option:hover { background: var(--bg-soft); color: var(--text-1); }
.hdv7-sort-option-icon {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-soft);
    color: var(--text-3);
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
.hdv7-sort-option:hover .hdv7-sort-option-icon {
    background: var(--mint-100);
    color: var(--mint-700);
}
.hdv7-sort-option.is-selected {
    background: linear-gradient(90deg, rgba(16,185,129,0.08), transparent);
    color: var(--mint-700);
}
.hdv7-sort-option.is-selected .hdv7-sort-option-icon {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.hdv7-sort-option-check {
    margin-left: auto;
    color: var(--mint-600);
    font-size: 11px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hdv7-sort-option.is-selected .hdv7-sort-option-check {
    opacity: 1;
    transform: scale(1);
}

.hdv7-sort-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 998;  /* ← değişti */
    display: none;
}
body.hdv7-sort-open .hdv7-sort-backdrop { display: block; }
/* ============================================================================
   10) RESPONSIVE — Small mobile (≤ 380px)
   ============================================================================ */
@media (max-width: 380px) {
    .hdv7-hero { padding: 18px 14px; }
    .hdv7-amount-num { font-size: 34px; }
    .hdv7-metrics { grid-template-columns: 1fr; }

    .hdv7-pill { padding: 7px 10px; font-size: 11.5px; }
    .hdv7-pill i { font-size: 10px; }

    .hdv7-card { padding: 14px 16px 12px 20px; }
}


/* ============================================================================
   MM2.CASH — HISTORY SORT DROPDOWN FIX (v7.4)
   ============================================================================
   Bu bloğu style.css'in EN SONUNA yapıştır.
   Eğer style.css'te zaten "hdv7-sort CUSTOM DROPDOWN" başlıklı bir block
   varsa, onu SİL, bu block'u yerine koy.
   ============================================================================ */

/* Wrap — open iken yeni stacking context oluştur (menu'yü sahneye çıkarır) */
.hdv7-sort-wrap {
    position: relative;
}
.hdv7-sort-wrap.is-open {
    z-index: 1000;
    overflow: visible !important;
    border-color: var(--mint-500) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}
.hdv7-sort-wrap.is-open .hdv7-sort-chev {
    color: var(--mint-600);
    transform: translateY(-50%) rotate(180deg);
}

/* Native select — JS ile gizle, form verisini sağlar */
.hdv7-sort-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Trigger — native select'in yerine geçen butonun görünümü */
.hdv7-sort-trigger {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-1);
    padding: 0 36px 0 12px;
    text-align: left;
    letter-spacing: 0.01em;
    min-width: 0;
    user-select: none;
}
.hdv7-sort-trigger-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* tıklama parent'a gitsin */
}

/* Dropdown menu — pop-up */
.hdv7-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow:
        0 1px 3px rgba(11, 31, 23, 0.06),
        0 16px 40px rgba(11, 31, 23, 0.12);
    padding: 6px;
    z-index: 10;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top center;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.22s;
}
.hdv7-sort-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mint-400), transparent);
    opacity: 0.6;
    pointer-events: none;
}
.hdv7-sort-wrap.is-open .hdv7-sort-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

/* Option */
.hdv7-sort-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    user-select: none;
    position: relative;
    opacity: 0;
    transform: translateY(-4px);
}
.hdv7-sort-option > * { pointer-events: none; } /* tıklama parent'a gitsin */
.hdv7-sort-wrap.is-open .hdv7-sort-option {
    animation: hdv7-opt-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(1) { animation-delay: 0.02s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(2) { animation-delay: 0.06s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(3) { animation-delay: 0.10s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(4) { animation-delay: 0.14s; }
@keyframes hdv7-opt-in {
    to { opacity: 1; transform: translateY(0); }
}

.hdv7-sort-option:hover {
    background: var(--bg-soft);
    color: var(--text-1);
}
.hdv7-sort-option-icon {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-soft);
    color: var(--text-3);
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
.hdv7-sort-option:hover .hdv7-sort-option-icon {
    background: var(--mint-100);
    color: var(--mint-700);
}
.hdv7-sort-option.is-selected {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), transparent);
    color: var(--mint-700);
}
.hdv7-sort-option.is-selected .hdv7-sort-option-icon {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.hdv7-sort-option-check {
    margin-left: auto;
    color: var(--mint-600);
    font-size: 11px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hdv7-sort-option.is-selected .hdv7-sort-option-check {
    opacity: 1;
    transform: scale(1);
}

/* Backdrop YOK — outside click için document listener yeterli.
   Backdrop pointer-events'i yakalayıp menu'ye ulaşmayı engelliyordu. */
.hdv7-sort-backdrop {
    display: none !important;
}

/* ============================================================================
   END FIX
   ============================================================================ */
/* ============================================================================
   END v7.2
   ============================================================================ */
   
   /* ============================================================================
   MM2.CASH — FINAL OVERRIDE (v8)
   ============================================================================
   Bu bloğu style.css'in EN SONUNA yapıştır.
   Eğer önceki "hdv7-sort CUSTOM DROPDOWN" block'ları varsa ve bozuksa,
   onları silmek yerine üzerine bu block'u koy — !important ile override eder.

   İçerik:
     1. Tüm input/textarea/select — focus'ta yeşil neon/glow KAPALI
     2. Auth modal — input focus'ta border glow KAPALI
     3. Search input — focus'ta glow KAPALI
     4. Sort dropdown — working version (tıklanabilir)
     5. Pill group — focus glow KAPALI
   ============================================================================ */


/* ==========================================================================
   1) GLOBAL — Hiçbir input/textarea/select/password alanı focus'ta
      yeşil neon/glow göstermesin. Sadece hafif border rengi değişsin.
   ========================================================================== */
input:focus,
input:focus-visible,
input:active,
textarea:focus,
textarea:focus-visible,
textarea:active,
select:focus,
select:focus-visible,
select:active,
button:focus,
button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Autofill sarı background'ını her yerde kapat */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card, #fff) inset !important;
    -webkit-text-fill-color: var(--text-1, #0B1F17) !important;
    caret-color: var(--text-1, #0B1F17) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Number input spinner'ları kaldır */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ==========================================================================
   2) AUTH MODAL — focus'ta NEON YOK, sadece border mint rengine dönsün
   ========================================================================== */
.authv7-input-wrap:focus-within {
    border-color: var(--mint-400) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.authv7-input,
.authv7-input:focus,
.authv7-input:focus-visible,
.authv7-input:active,
.authv7-input:hover {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
}
.authv7-input::selection {
    background: var(--mint-200);
    color: var(--text-1);
}


/* ==========================================================================
   3) HISTORY TOOLBAR — Search & Sort wrap'leri focus'ta NEON YOK
   ========================================================================== */
.hdv7-search:focus-within {
    border-color: var(--mint-400) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.hdv7-search-input,
.hdv7-search-input:focus,
.hdv7-search-input:focus-visible,
.hdv7-search-input:active,
.hdv7-search-input:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
}


/* ==========================================================================
   4) PILL GROUP — is-active flash kaldır (sadece subtle background)
   ========================================================================== */
.hdv7-pill.is-active::before {
    display: none !important;
}
.hdv7-pill.is-active {
    background: var(--bg-card) !important;
    color: var(--mint-700) !important;
    box-shadow: 0 1px 3px rgba(11, 31, 23, 0.1) !important;
}


/* ==========================================================================
   5) SORT DROPDOWN — Çalışan temiz version
   ========================================================================== */

/* Wrap — open iken stacking context kurar */
.hdv7-sort-wrap {
    position: relative;
}
.hdv7-sort-wrap.is-open {
    z-index: 1000;
    overflow: visible !important;
    border-color: var(--mint-400) !important;
    box-shadow: none !important;
}
.hdv7-sort-wrap.is-open .hdv7-sort-chev {
    color: var(--mint-600);
    transform: translateY(-50%) rotate(180deg);
}

/* Native select — görsel gizle, form değerini korur */
.hdv7-sort-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Trigger button */
.hdv7-sort-trigger {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-1);
    padding: 0 36px 0 12px;
    text-align: left;
    letter-spacing: 0.01em;
    min-width: 0;
    user-select: none;
}
.hdv7-sort-trigger-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Dropdown menu */
.hdv7-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow:
        0 1px 3px rgba(11, 31, 23, 0.06),
        0 16px 40px rgba(11, 31, 23, 0.12);
    padding: 6px;
    z-index: 10;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top center;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.22s;
}
.hdv7-sort-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mint-400), transparent);
    opacity: 0.5;
    pointer-events: none;
}
.hdv7-sort-wrap.is-open .hdv7-sort-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

/* Option */
.hdv7-sort-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    user-select: none;
    position: relative;
    opacity: 0;
    transform: translateY(-4px);
}
.hdv7-sort-option > * {
    pointer-events: none;
}
.hdv7-sort-wrap.is-open .hdv7-sort-option {
    animation: hdv7-opt-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(1) { animation-delay: 0.02s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(2) { animation-delay: 0.06s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(3) { animation-delay: 0.10s; }
.hdv7-sort-wrap.is-open .hdv7-sort-option:nth-child(4) { animation-delay: 0.14s; }
@keyframes hdv7-opt-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hdv7-sort-option:hover {
    background: var(--bg-soft);
    color: var(--text-1);
}
.hdv7-sort-option-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-soft);
    color: var(--text-3);
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
.hdv7-sort-option:hover .hdv7-sort-option-icon {
    background: var(--mint-100);
    color: var(--mint-700);
}
.hdv7-sort-option.is-selected {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), transparent);
    color: var(--mint-700);
}
.hdv7-sort-option.is-selected .hdv7-sort-option-icon {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff;
}
.hdv7-sort-option-check {
    margin-left: auto;
    color: var(--mint-600);
    font-size: 11px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hdv7-sort-option.is-selected .hdv7-sort-option-check {
    opacity: 1;
    transform: scale(1);
}

/* Backdrop KAPALI — document listener ile outside click zaten çalışıyor */
.hdv7-sort-backdrop {
    display: none !important;
}


/* ==========================================================================
   6) SORT WRAP HOVER — neon kaldır, sadece border değişsin
   ========================================================================== */
.hdv7-sort-wrap:hover {
    border-color: var(--mint-300) !important;
    box-shadow: none !important;
}
.hdv7-sort-wrap:focus-within {
    border-color: var(--mint-400) !important;
    box-shadow: none !important;
}


/* ==========================================================================
   7) SEARCH HOVER — neon kaldır
   ========================================================================== */
.hdv7-search:hover {
    border-color: var(--mint-300) !important;
    box-shadow: none !important;
}


/* ============================================================================
   END v8 OVERRIDE
   ============================================================================ */