/* ═══════════════════════════════════════════════════════════
       NEXCPM DESIGN SYSTEM
       ═══════════════════════════════════════════════════════════ */
    :root {
      --font-main: 'Inter', system-ui, sans-serif;
      --font-display: 'Space Grotesk', 'Inter', sans-serif;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --transition: all .25s cubic-bezier(.4,0,.2,1);
      --shadow-sm: 0 2px 8px rgba(0,0,0,.12);
      --shadow-md: 0 4px 20px rgba(0,0,0,.18);
      --shadow-lg: 0 8px 40px rgba(0,0,0,.25);
      --glass-bg: rgba(255,255,255,.04);
      --glass-border: rgba(255,255,255,.08);
    }

    /* ── Theme: Siyah / Beyaz ── */
    [data-theme="black-white"] {
      --bg-primary: #0a0a0b;
      --bg-secondary: #121214;
      --bg-tertiary: #1a1a1e;
      --bg-card: #141416;
      --bg-glass: rgba(20,20,22,.85);
      --text-primary: #f4f4f5;
      --text-secondary: #a1a1aa;
      --text-muted: #6b7280;
      --accent: #ffffff;
      --accent-hover: #e4e4e7;
      --accent-text: #0a0a0b;
      --accent-glow: rgba(255,255,255,.12);
      --border: rgba(255,255,255,.08);
      --border-strong: rgba(255,255,255,.14);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #f59e0b;
      --info: #3b82f6;
      --chat-bg: #0e0e10;
      --chat-pattern: rgba(255,255,255,.015);
    }

    /* ── Theme: Siyah / Mavi ── */
    [data-theme="black-blue"] {
      --bg-primary: #060a14;
      --bg-secondary: #0a1120;
      --bg-tertiary: #101a30;
      --bg-card: #0c1428;
      --bg-glass: rgba(12,20,40,.88);
      --text-primary: #e8eefc;
      --text-secondary: #8fa3c8;
      --text-muted: #5a6a8a;
      --accent: #3b82f6;
      --accent-hover: #2563eb;
      --accent-text: #ffffff;
      --accent-glow: rgba(59,130,246,.22);
      --border: rgba(59,130,246,.14);
      --border-strong: rgba(59,130,246,.28);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #f59e0b;
      --info: #60a5fa;
      --chat-bg: #080d18;
      --chat-pattern: rgba(59,130,246,.02);
    }

    /* ── Theme: Siyah / Pembe ── */
    [data-theme="black-pink"] {
      --bg-primary: #0d060a;
      --bg-secondary: #150a10;
      --bg-tertiary: #1e0f18;
      --bg-card: #180c13;
      --bg-glass: rgba(24,12,19,.88);
      --text-primary: #fce8f3;
      --text-secondary: #c88fa8;
      --text-muted: #8a5a70;
      --accent: #ec4899;
      --accent-hover: #db2777;
      --accent-text: #ffffff;
      --accent-glow: rgba(236,72,153,.22);
      --border: rgba(236,72,153,.14);
      --border-strong: rgba(236,72,153,.28);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #f59e0b;
      --info: #f472b6;
      --chat-bg: #0f070b;
      --chat-pattern: rgba(236,72,153,.02);
    }

    /* ── Theme: Siyah / Turuncu ── */
    [data-theme="black-orange"] {
      --bg-primary: #0d0805;
      --bg-secondary: #140d08;
      --bg-tertiary: #1e130a;
      --bg-card: #180f09;
      --bg-glass: rgba(24,15,9,.88);
      --text-primary: #fceee0;
      --text-secondary: #c89a6a;
      --text-muted: #8a6a45;
      --accent: #f97316;
      --accent-hover: #ea580c;
      --accent-text: #ffffff;
      --accent-glow: rgba(249,115,22,.22);
      --border: rgba(249,115,22,.14);
      --border-strong: rgba(249,115,22,.28);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #fbbf24;
      --info: #fb923c;
      --chat-bg: #0f0a06;
      --chat-pattern: rgba(249,115,22,.02);
    }

    /* ── Theme: Siyah / Mor ── */
    [data-theme="black-purple"] {
      --bg-primary: #0a0612;
      --bg-secondary: #100a1c;
      --bg-tertiary: #180e28;
      --bg-card: #140c20;
      --bg-glass: rgba(20,12,32,.88);
      --text-primary: #ede8fc;
      --text-secondary: #a88fc8;
      --text-muted: #6a558a;
      --accent: #8b5cf6;
      --accent-hover: #7c3aed;
      --accent-text: #ffffff;
      --accent-glow: rgba(139,92,246,.22);
      --border: rgba(139,92,246,.14);
      --border-strong: rgba(139,92,246,.28);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #f59e0b;
      --info: #a78bfa;
      --chat-bg: #0c0814;
      --chat-pattern: rgba(139,92,246,.02);
    }

    /* ── Theme: Mor / Beyaz ── */
    [data-theme="purple-white"] {
      --bg-primary: #f5f3ff;
      --bg-secondary: #ede9fe;
      --bg-tertiary: #ddd6fe;
      --bg-card: #ffffff;
      --bg-glass: rgba(255,255,255,.92);
      --text-primary: #1e1b2e;
      --text-secondary: #5a5470;
      --text-muted: #8a84a0;
      --accent: #7c3aed;
      --accent-hover: #6d28d9;
      --accent-text: #ffffff;
      --accent-glow: rgba(124,58,237,.18);
      --border: rgba(124,58,237,.12);
      --border-strong: rgba(124,58,237,.24);
      --success: #16a34a;
      --danger: #dc2626;
      --warning: #d97706;
      --info: #7c3aed;
      --chat-bg: #ede9fe;
      --chat-pattern: rgba(124,58,237,.03);
      --glass-bg: rgba(124,58,237,.04);
      --glass-border: rgba(124,58,237,.1);
      --shadow-sm: 0 2px 8px rgba(124,58,237,.08);
      --shadow-md: 0 4px 20px rgba(124,58,237,.12);
      --shadow-lg: 0 8px 40px rgba(124,58,237,.16);
    }

    /* ═══ RESET & BASE ═══ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-main);
      background: var(--bg-primary);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      transition: background .3s ease, color .3s ease;
    }
    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    input, textarea, select { font-family: inherit; color: inherit; }
    a { color: var(--accent); text-decoration: none; }
    img { max-width: 100%; display: block; -webkit-user-drag: none; }
    body { -webkit-user-select: none; user-select: none; }
    input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* Hard fallback for hosts whose templates override the site's default colors. */
    html[data-theme="black-white"],
    html[data-theme="black-white"] body,
    html[data-theme="black-white"] #authScreen {
      background-color: #0a0a0b !important;
      color: #f4f4f5 !important;
    }
    html[data-theme="black-white"] #authScreen .auth-card {
      background: #141416 !important;
      color: #f4f4f5 !important;
      border: 1px solid rgba(255,255,255,.12) !important;
    }
    html[data-theme="black-white"] #authScreen input {
      background: #1a1a1e !important;
      color: #f4f4f5 !important;
      border-color: rgba(255,255,255,.18) !important;
    }
    html[data-theme="black-white"] #authScreen label,
    html[data-theme="black-white"] #authScreen .auth-brand-tag {
      color: #d4d4d8 !important;
    }

    /* ═══ AUTH SCREEN ═══ */
    #authScreen {
      position: fixed; inset: 0; z-index: 1000;
      background: var(--bg-primary);
      display: flex; align-items: center; justify-content: center;
      overflow-y: auto; padding: 20px;
      transition: opacity .4s ease, visibility .4s;
    }
    #authScreen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .auth-container {
      width: 100%; max-width: 440px;
      display: flex; flex-direction: column; gap: 0;
      animation: authSlideUp .5s ease;
    }
    @keyframes authSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    .auth-brand { text-align: center; margin-bottom: 32px; }
    .auth-brand-logo {
      font-family: var(--font-display); font-size: 38px; font-weight: 700;
      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; letter-spacing: -1px; margin-bottom: 8px;
    }
    .auth-brand-tag { font-size: 14px; color: var(--text-secondary); }
    .auth-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-xl); padding: 32px;
      box-shadow: var(--shadow-lg);
    }
    .auth-tabs { display: flex; gap: 4px; background: var(--bg-tertiary); border-radius: var(--radius-md); padding: 4px; margin-bottom: 24px; }
    .auth-tab {
      flex: 1; padding: 10px 16px; border-radius: var(--radius-sm);
      font-size: 14px; font-weight: 600; color: var(--text-secondary);
      transition: var(--transition); min-height: 44px;
    }
    .auth-tab.active { background: var(--accent); color: var(--accent-text); }
    .auth-form { display: flex; flex-direction: column; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
    .form-input {
      width: 100%; padding: 12px 16px; border-radius: var(--radius-md);
      background: var(--bg-tertiary); border: 1px solid var(--border);
      color: var(--text-primary); font-size: 15px; outline: none;
      transition: var(--transition); min-height: 48px;
    }
    .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
    .form-input::placeholder { color: var(--text-muted); }
    .form-error {
      padding: 12px 16px; border-radius: var(--radius-md);
      background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2);
      color: var(--danger); font-size: 13px; display: none;
    }
    .form-error.show { display: block; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 24px; border-radius: var(--radius-md);
      font-size: 15px; font-weight: 600; transition: var(--transition);
      min-height: 48px; flex-shrink: 0; white-space: nowrap;
    }
    .btn-primary { background: var(--accent); color: var(--accent-text); }
    .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }
    .btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
    .btn-secondary:hover { background: var(--border); }
    .btn-danger { background: rgba(239,68,68,.12); color: var(--danger); border: 1px solid rgba(239,68,68,.2); }
    .btn-danger:hover { background: rgba(239,68,68,.2); }
    .btn-google {
      background: var(--bg-tertiary); color: var(--text-primary);
      border: 1px solid var(--border); width: 100%;
    }
    .btn-google:hover { background: var(--border); }
    .btn-google i { color: #4285F4; font-size: 18px; }
    .auth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0; }
    .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .auth-divider span { font-size: 12px; color: var(--text-muted); }
    .auth-footer { text-align: center; margin-top: 20px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
    .username-check { font-size: 12px; margin-top: 2px; }
    .username-check.ok { color: var(--success); }
    .username-check.err { color: var(--danger); }

    /* ═══ APP LAYOUT ═══ */
    #app { display: none; min-height: 100vh; }
    #app.active { display: flex; }

    /* ── Sidebar ── */
    .sidebar {
      width: 260px; flex-shrink: 0; height: 100vh;
      background: var(--bg-secondary); border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
      position: fixed; left: 0; top: 0; z-index: 100;
      transition: transform .3s ease;
    }
    .sidebar-logo {
      padding: 20px 24px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 10px;
    }
    .sidebar-logo-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
      display: flex; align-items: center; justify-content: center;
      color: var(--accent-text); font-weight: 700; font-size: 16px;
      font-family: var(--font-display); flex-shrink: 0;
    }
    .sidebar-logo-text { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); }
    .sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
    .sidebar-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 16px 12px 6px; }
    .nav-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px; border-radius: var(--radius-md);
      color: var(--text-secondary); font-size: 14px; font-weight: 500;
      transition: var(--transition); min-height: 44px; width: 100%; text-align: left;
    }
    .nav-item:hover { background: var(--glass-bg); color: var(--text-primary); }
    .nav-item.active { background: var(--accent-glow); color: var(--accent); font-weight: 600; }
    .nav-item i { width: 20px; text-align: center; font-size: 16px; flex-shrink: 0; }
    .nav-badge {
      margin-left: auto; background: var(--accent); color: var(--accent-text);
      font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; min-width: 20px; text-align: center;
    }
    .sidebar-user {
      padding: 16px; border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 10px;
    }
    .sidebar-user-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--accent); color: var(--accent-text);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 14px; flex-shrink: 0; overflow: hidden;
    }
    .sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .sidebar-user-info { flex: 1; min-width: 0; }
    .sidebar-user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sidebar-user-status { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
    .status-dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); }

    /* ── Main Area ── */
    .main-area { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; }

    /* ── Topbar ── */
    .topbar {
      height: 64px; background: var(--bg-glass); backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px;
      padding: 0 24px; position: sticky; top: 0; z-index: 90;
    }
    .topbar-search { flex: 1; max-width: 480px; position: relative; }
    .topbar-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }
    .topbar-search input {
      width: 100%; padding: 10px 14px 10px 40px; border-radius: var(--radius-md);
      background: var(--bg-tertiary); border: 1px solid var(--border);
      color: var(--text-primary); font-size: 14px; outline: none;
      transition: var(--transition); min-height: 42px;
    }
    .topbar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
    .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .topbar-btn {
      width: 42px; height: 42px; border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-secondary); font-size: 17px;
      transition: var(--transition); position: relative; flex-shrink: 0;
      background: var(--bg-tertiary); border: 1px solid var(--border);
    }
    .topbar-btn:hover { background: var(--border); color: var(--text-primary); }
    .topbar-btn .notif-dot {
      position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
      background: var(--danger); border-radius: 50%; border: 2px solid var(--bg-primary);
    }
    .topbar-avatar {
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--accent); color: var(--accent-text);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 14px; cursor: pointer; flex-shrink: 0;
      overflow: hidden; border: 2px solid var(--border-strong);
    }
    .topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .topbar-avatar.premium-ring { border-color: var(--warning); box-shadow: 0 0 8px rgba(245,158,11,.3); }
    .mobile-menu-btn { display: none; }

    /* ── Content ── */
    .content { flex: 1; padding: 24px; max-width: 1200px; width: 100%; margin: 0 auto; }
    .page { display: none; animation: pageFadeIn .3s ease; }
    .page.active { display: block; }
    @keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .page-header { margin-bottom: 24px; }
    .page-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 4px; }
    .page-subtitle { font-size: 14px; color: var(--text-secondary); }

    /* ── Cards & Grids ── */
    .card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 20px;
      transition: var(--transition);
    }
    .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
    .grid { display: grid; gap: 16px; }
    .grid-listings { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }

    /* ── Stats ── */
    .stat-card { display: flex; flex-direction: column; gap: 8px; }
    .stat-icon {
      width: 44px; height: 44px; border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; }
    .stat-label { font-size: 13px; color: var(--text-secondary); }

    /* ── Listing Card ── */
    .listing-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden;
      transition: var(--transition); cursor: pointer;
      display: flex; flex-direction: column;
    }
    .listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
    .listing-card.premium-card {
      border: 2px solid transparent;
      background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6, #3b82f6, #22c55e) border-box;
      box-shadow: 0 0 20px rgba(245,158,11,.12);
    }
    .listing-card.boosted-card { border-color: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }
    .listing-image { width: 100%; height: 180px; object-fit: cover; background: var(--bg-tertiary); }
    .listing-image-placeholder {
      width: 100%; height: 180px; background: var(--bg-tertiary);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); font-size: 36px;
    }
    .listing-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .listing-title { font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .listing-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .listing-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .listing-tag {
      font-size: 11px; font-weight: 600; padding: 3px 8px;
      border-radius: 6px; background: var(--bg-tertiary); color: var(--text-secondary);
    }
    .listing-tag.premium-tag { background: rgba(245,158,11,.15); color: var(--warning); }
    .listing-tag.boosted-tag { background: var(--accent-glow); color: var(--accent); }
    .listing-tag.category-tag { background: var(--accent-glow); color: var(--accent); }
    .listing-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
    .listing-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .listing-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
    .listing-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .listing-username { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .listing-time { font-size: 11px; color: var(--text-muted); }
    .listing-actions { display: flex; gap: 4px; }
    .listing-action-btn {
      width: 36px; height: 36px; border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-secondary); font-size: 14px; transition: var(--transition); flex-shrink: 0;
    }
    .listing-action-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
    .listing-action-btn.favorited { color: var(--danger); }
    .listing-action-btn.favorited i::before { content: "\f004"; font-weight: 900; }

    /* ── Banner Ad ── */
    .banner-ad {
      grid-column: 1 / -1; border-radius: var(--radius-lg);
      background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
      border: 1px dashed var(--border-strong);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 24px; gap: 6px; min-height: 100px;
    }
    .banner-ad-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
    .banner-ad-text { font-size: 14px; color: var(--text-secondary); }

    /* ── Filter Bar ── */
    .filter-bar {
      display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
      align-items: center;
    }
    .filter-select {
      padding: 10px 14px; border-radius: var(--radius-md);
      background: var(--bg-tertiary); border: 1px solid var(--border);
      color: var(--text-primary); font-size: 14px; outline: none;
      min-height: 42px; cursor: pointer;
    }
    .filter-select:focus { border-color: var(--accent); }

    /* ── Chat ── */
    .chat-layout { display: flex; gap: 0; height: calc(100vh - 112px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); }
    .chat-sidebar { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-secondary); }
    .chat-sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); }
    .chat-sidebar-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
    .chat-conversations { flex: 1; overflow-y: auto; }
    .chat-conv-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px; cursor: pointer; transition: var(--transition);
      border-bottom: 1px solid var(--border); width: 100%; text-align: left; min-height: 68px;
    }
    .chat-conv-item:hover { background: var(--glass-bg); }
    .chat-conv-item.active { background: var(--accent-glow); border-left: 3px solid var(--accent); }
    .chat-conv-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; position: relative; overflow: visible; }
    .chat-conv-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .chat-conv-avatar .status-dot { position: absolute; bottom: 1px; right: 1px; border: 2px solid var(--bg-secondary); }
    .chat-conv-info { flex: 1; min-width: 0; }
    .chat-conv-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-conv-preview { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
    .chat-conv-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
    .chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .chat-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: var(--bg-secondary); flex-shrink: 0; }
    .chat-header-info { flex: 1; min-width: 0; }
    .chat-header-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
    .chat-header-status { font-size: 12px; color: var(--text-muted); }
    .chat-header-status.online { color: var(--success); }
    .chat-messages {
      flex: 1; overflow-y: auto; padding: 20px;
      background: var(--chat-bg);
      background-image: radial-gradient(circle, var(--chat-pattern) 1px, transparent 1px);
      background-size: 24px 24px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .chat-msg { display: flex; margin-bottom: 4px; }
    .chat-msg.own { justify-content: flex-end; }
    .chat-msg-bubble {
      max-width: 70%; padding: 10px 14px; border-radius: 16px;
      font-size: 14px; line-height: 1.5; word-wrap: break-word;
    }
    .chat-msg:not(.own) .chat-msg-bubble { background: var(--bg-tertiary); color: var(--text-primary); border-bottom-left-radius: 4px; }
    .chat-msg.own .chat-msg-bubble { background: var(--accent); color: var(--accent-text); border-bottom-right-radius: 4px; }
    .chat-msg-time { font-size: 10px; opacity: .6; margin-top: 4px; display: block; text-align: right; }
    .chat-msg.own .chat-msg-time { color: var(--accent-text); }
    .chat-msg:not(.own) .chat-msg-time { color: var(--text-muted); }
    .chat-typing { padding: 4px 20px; font-size: 12px; color: var(--text-muted); font-style: italic; min-height: 24px; flex-shrink: 0; }
    .chat-input-area { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; background: var(--bg-secondary); flex-shrink: 0; }
    .chat-input {
      flex: 1; padding: 12px 16px; border-radius: var(--radius-md);
      background: var(--bg-tertiary); border: 1px solid var(--border);
      color: var(--text-primary); font-size: 14px; outline: none;
      transition: var(--transition); min-height: 46px; min-width: 0;
    }
    .chat-input:focus { border-color: var(--accent); }
    .chat-send-btn {
      width: 46px; height: 46px; border-radius: var(--radius-md);
      background: var(--accent); color: var(--accent-text);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; transition: var(--transition); flex-shrink: 0;
    }
    .chat-send-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
    .chat-send-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
    .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); }
    .chat-empty i { font-size: 48px; opacity: .3; }
    .chat-back-btn { display: none; }

    /* ── Modal ── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 500;
      background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      padding: 20px; opacity: 0; visibility: hidden;
      transition: opacity .3s, visibility .3s;
    }
    .modal-overlay.open { opacity: 1; visibility: visible; }
    .modal {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-xl); width: 100%; max-width: 520px;
      max-height: 90vh; overflow-y: auto;
      transform: scale(.95) translateY(10px);
      transition: transform .3s ease; box-shadow: var(--shadow-lg);
    }
    .modal-overlay.open .modal { transform: scale(1) translateY(0); }
    .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
    .modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
    .modal-close { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition); flex-shrink: 0; }
    .modal-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
    .modal-body { padding: 24px; }
    .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

    /* ── Theme Grid ── */
    .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .theme-option {
      border: 2px solid var(--border); border-radius: var(--radius-md);
      overflow: hidden; cursor: pointer; transition: var(--transition);
      display: flex; flex-direction: column;
    }
    .theme-option:hover { border-color: var(--border-strong); transform: translateY(-2px); }
    .theme-option.active { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
    .theme-preview { height: 60px; display: flex; }
    .theme-preview > div { flex: 1; }
    .theme-name { padding: 8px; font-size: 12px; font-weight: 600; text-align: center; background: var(--bg-tertiary); }

    /* ── Notifications Panel ── */
    .notif-panel {
      position: fixed; top: 70px; right: 24px; width: 360px; max-height: 480px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
      z-index: 200; display: none; flex-direction: column; overflow: hidden;
    }
    .notif-panel.open { display: flex; animation: pageFadeIn .2s ease; }
    .notif-panel-header { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
    .notif-panel-list { overflow-y: auto; flex: 1; }
    .notif-item { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
    .notif-item.unread { background: var(--accent-glow); }
    .notif-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; color: var(--accent); }
    .notif-content { flex: 1; min-width: 0; }
    .notif-text { font-size: 13px; line-height: 1.4; }
    .notif-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    /* ── Profile Dropdown ── */
    .profile-dropdown {
      position: fixed; top: 70px; right: 24px; width: 240px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
      z-index: 200; display: none; overflow: hidden;
    }
    .profile-dropdown.open { display: block; animation: pageFadeIn .2s ease; }
    .profile-dropdown-header { padding: 16px; border-bottom: 1px solid var(--border); }
    .profile-dropdown-name { font-weight: 700; font-size: 14px; }
    .profile-dropdown-username { font-size: 12px; color: var(--text-muted); }
    .profile-dropdown-item {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 10px 16px; font-size: 14px; color: var(--text-secondary);
      transition: var(--transition); min-height: 42px; text-align: left;
    }
    .profile-dropdown-item:hover { background: var(--glass-bg); color: var(--text-primary); }
    .profile-dropdown-item i { width: 18px; text-align: center; }

    /* ── Toast ── */
    #toastContainer { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
    .toast {
      padding: 14px 20px; border-radius: var(--radius-md);
      background: var(--bg-card); border: 1px solid var(--border);
      color: var(--text-primary); font-size: 14px; font-weight: 500;
      box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px;
      animation: toastSlideIn .3s ease; max-width: 360px;
    }
    @keyframes toastSlideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
    .toast.success { border-left: 3px solid var(--success); }
    .toast.error { border-left: 3px solid var(--danger); }
    .toast.info { border-left: 3px solid var(--info); }

    /* ── Bottom Nav (Mobile) ── */
    .bottom-nav {
      display: none; position: fixed; bottom: 0; left: 0; right: 0;
      background: var(--bg-glass); backdrop-filter: blur(20px);
      border-top: 1px solid var(--border); z-index: 100;
      padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    }
    .bottom-nav-inner { display: flex; justify-content: space-around; align-items: center; }
    .bottom-nav-item {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      color: var(--text-muted); font-size: 10px; font-weight: 600;
      padding: 6px 12px; border-radius: var(--radius-md);
      transition: var(--transition); min-height: 52px; justify-content: center;
    }
    .bottom-nav-item i { font-size: 20px; }
    .bottom-nav-item.active { color: var(--accent); }

    /* ── Admin ── */
    .admin-table { width: 100%; border-collapse: collapse; }
    .admin-table th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
    .admin-table td { padding: 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
    .admin-table tr:hover td { background: var(--glass-bg); }
    .admin-actions { display: flex; gap: 6px; }
    .admin-action-btn {
      padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
      transition: var(--transition); min-height: 32px; flex-shrink: 0;
    }
    .admin-action-btn.edit { background: rgba(59,130,246,.12); color: var(--info); }
    .admin-action-btn.edit:hover { background: rgba(59,130,246,.22); }
    .admin-action-btn.danger { background: rgba(239,68,68,.12); color: var(--danger); }
    .admin-action-btn.danger:hover { background: rgba(239,68,68,.22); }
    .admin-action-btn.success { background: rgba(34,197,94,.12); color: var(--success); }
    .admin-action-btn.success:hover { background: rgba(34,197,94,.22); }
    .admin-tabs { display: flex; gap: 4px; background: var(--bg-tertiary); border-radius: var(--radius-md); padding: 4px; margin-bottom: 20px; overflow-x: auto; }
    .admin-tab { padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: var(--transition); white-space: nowrap; flex-shrink: 0; min-height: 38px; }
    .admin-tab.active { background: var(--accent); color: var(--accent-text); }

    /* ── Premium Page ── */
    .premium-hero { text-align: center; padding: 40px 20px; }
    .premium-price { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: var(--warning); }
    .premium-features { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
    .premium-feature { display: flex; align-items: center; gap: 12px; font-size: 15px; }
    .premium-feature i { color: var(--warning); font-size: 18px; flex-shrink: 0; }

    /* ── Upload Zone ── */
    .upload-zone {
      border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
      padding: 32px; text-align: center; cursor: pointer;
      transition: var(--transition); color: var(--text-secondary);
    }
    .upload-zone:hover { border-color: var(--accent); background: var(--accent-glow); }
    .upload-zone i { font-size: 32px; margin-bottom: 8px; color: var(--text-muted); }
    .upload-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .upload-preview-item { position: relative; width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; }
    .upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
    .upload-preview-remove {
      position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
      background: rgba(0,0,0,.7); color: #fff; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 10px;
    }

    /* ── Empty State ── */
    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
    .empty-state i { font-size: 48px; margin-bottom: 16px; opacity: .3; }
    .empty-state p { font-size: 15px; }

    /* ── Detail Modal ── */
    .listing-detail-images { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
    .listing-detail-images img { width: 200px; height: 140px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
    .listing-detail-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
    .listing-detail-desc { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 16px; white-space: pre-wrap; }
    .listing-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

    /* ── Legal Pages ── */
    .legal-content { max-width: 720px; }
    .legal-content h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 24px 0 12px; color: var(--text-primary); }
    .legal-content p { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 12px; }
    .legal-content ul { margin: 0 0 12px 20px; }
    .legal-content li { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 6px; }

    /* ═══ RESPONSIVE ═══ */
    @media (max-width: 1024px) {
      .sidebar { transform: translateX(-100%); }
      .sidebar.open { transform: translateX(0); }
      .main-area { margin-left: 0; }
      .mobile-menu-btn { display: flex; }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .content { padding: 16px; padding-bottom: 90px; }
      .topbar { padding: 0 16px; }
      .topbar-search { display: none; }
      .bottom-nav { display: block; }
      .grid-listings { grid-template-columns: 1fr; }
      .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
      .chat-layout { height: calc(100vh - 160px); flex-direction: column; }
      .chat-sidebar { width: 100%; height: 100%; border-right: none; }
      .chat-main { display: none; }
      .chat-layout.chat-open .chat-sidebar { display: none; }
      .chat-layout.chat-open .chat-main { display: flex; }
      .chat-back-btn { display: flex; }
      .notif-panel, .profile-dropdown { right: 16px; left: 16px; width: auto; }
      .theme-grid { grid-template-columns: repeat(2, 1fr); }
      .modal { max-width: 100%; }
      .auth-card { padding: 24px; }
    }

    /* Blogger/iframe dayanıklılığı ve mobil gezinme düzeltmeleri */
    html, body { min-height:100%; background:var(--bg-primary,#0a0a0b)!important; color:var(--text-primary,#f4f4f5); }
    body { margin:0!important; padding:0!important; font-family:var(--font-main,system-ui,sans-serif); }
    #app { min-height:100vh; background:var(--bg-primary,#0a0a0b); }
    .main-area, .content, .page { background:transparent; }
    .page { display:none; }
    .page.active { display:block; }
    .sidebar { z-index:1200; }
    .sidebar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:1190; display:none; }
    .sidebar-backdrop.open { display:block; }
    .sidebar-mobile-head { display:none; }
    @media(max-width:1024px) {
      .sidebar { z-index:1200; width:min(88vw,360px); }
      .sidebar-mobile-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
      .sidebar-mobile-close { border:0; border-radius:10px; min-width:42px; min-height:42px; color:var(--text-primary); background:var(--bg-tertiary); font-size:20px; }
      .bottom-nav { z-index:1000; }
    }
    .premium-socials { display:grid; gap:10px; margin-top:14px; }
    .premium-social-link { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; color:var(--text-primary); text-decoration:none; background:var(--bg-secondary); }
    .premium-social-link i { width:22px; text-align:center; font-size:20px; }
    .premium-social-link:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  

/* Reward/Monetag UI and mobile Blogger-safe fallback */
.reward-ad-box{display:grid;gap:14px;padding:8px 0;color:var(--text-primary)}
.reward-ad-box p{line-height:1.55;color:var(--text-secondary)}
.reward-countdown{font-size:20px;font-weight:800;color:var(--accent)!important}
.reward-ad-box button{width:100%;min-height:46px}
.reward-ad-box button:disabled{opacity:.45;cursor:not-allowed}
.monetag-ad-slot{min-height:72px;display:grid;place-items:center;margin-top:10px;border:1px dashed var(--border);border-radius:12px;color:var(--text-secondary);font-size:12px}
@media(max-width:767px){body{overflow-x:hidden}.banner-ad{min-width:0;max-width:100%}}