/* ================================================================
   SNL // COMPONENTS.CSS — Bileşenler
   ================================================================
   Satır     : ~200
   Değişiklik:
     - map-filter-btn tekrar kaldırıldı (index.html'deki style ile)
     - settings-card tekrar kaldırıldı (index.html'deki style ile)
     - Tüm stiller var() kullanıyor
     - Ürün kartı hover efekti eklendi
     - Harita filtreleri tutarlı
================================================================ */

/* ================================================================
   ÜRÜN KARTI
================================================================ */

.product-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       12px;
    margin-bottom: 8px;
    display:       flex;
    gap:           10px;
    align-items:   center;
    transition:    border-color 0.2s, transform 0.2s;
}

.product-card:hover {
    border-color: var(--accent);
    transform:    translateY(-1px);
}

.product-card img {
    width:         50px;
    height:        50px;
    object-fit:    cover;
    border-radius: 8px;
    flex-shrink:   0;
}

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

.product-price {
    color:       var(--neon);
    font-weight: 700;
    font-size:   14px;
}

/* ================================================================
   AYARLAR KARTLARI
================================================================ */

.settings-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       16px;
    margin-bottom: 10px;
}

.settings-card-title {
    font-family:    var(--font-title);
    font-size:      11px;
    font-weight:    700;
    color:          var(--neon);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.theme-btn {
    flex:          1;
    padding:       8px;
    border-radius: 8px;
    border:        1px solid var(--border);
    background:    var(--surface2);
    color:         var(--muted);
    font-family:   var(--font-main);
    font-weight:   700;
    font-size:     13px;
    cursor:        pointer;
    transition:    all 0.2s;
    width:         auto;
}

.theme-btn.active {
    background:    var(--gradient);
    color:         #fff;
    border-color:  transparent;
}

.theme-btn:hover:not(.active) {
    border-color: var(--accent);
    color:        var(--neon);
    box-shadow:   none;
    transform:    none;
}

/* ================================================================
   HARİTA
================================================================ */

#map {
    height:        35vh;
    width:         100%;
    border-radius: 12px;
    border:        1px solid var(--border);
    margin-bottom: 10px;
}

.map-filter-btn {
    background:    var(--surface2);
    color:         var(--muted);
    border:        1px solid var(--border);
    padding:       6px 14px;
    border-radius: 20px;
    font-family:   var(--font-main);
    font-weight:   700;
    font-size:     12px;
    cursor:        pointer;
    transition:    all 0.15s;
    width:         auto;
}

.map-filter-btn.active {
    background:   var(--gradient);
    color:        #fff;
    border-color: transparent;
}

.map-filter-btn:hover:not(.active) {
    border-color: var(--accent);
    color:        var(--neon);
    box-shadow:   none;
    transform:    none;
}

/* ================================================================
   DISPLAY AREA (eski chat)
================================================================ */

.display-area {
    height:        160px;
    overflow-y:    auto;
    background:    var(--bg);
    border-radius: 8px;
    padding:       10px;
    border:        1px solid var(--border);
}

.message {
    background:    rgba(168,85,247,0.05);
    border-left:   3px solid var(--accent);
    padding:       6px 12px;
    margin-bottom: 8px;
    border-radius: 0 6px 6px 0;
    font-size:     14px;
    word-break:    break-all;
    color:         var(--text);
}

.whisper    { border-left-color: var(--pink) !important; color: var(--pink) !important; font-style: italic; }
.system-msg { border-left-color: var(--muted) !important; color: var(--muted) !important; font-size: 12px; }

/* ================================================================
   İŞ İLANI KARTLARI
================================================================ */

.job-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       16px;
    margin-bottom: 10px;
    transition:    border-color 0.2s;
}

.job-card:hover { border-color: var(--accent); }

/* ================================================================
   FEED KART
================================================================ */

.feed-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow:      hidden;
}

/* ================================================================
   DATE DIVIDER (DM Mesajları)
================================================================ */

.chat-date-divider {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          8px 0;
}

.chat-date-divider span {
    background:    var(--surface2);
    color:         var(--muted);
    font-size:     11px;
    padding:       3px 12px;
    border-radius: 20px;
    border:        1px solid var(--border);
}

.new-messages-divider {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          8px 0;
}

.new-messages-divider span {
    background:    rgba(99,102,241,0.15);
    color:         var(--neon);
    font-size:     11px;
    font-weight:   700;
    padding:       3px 12px;
    border-radius: 20px;
    border:        1px solid var(--accent);
}

/* ================================================================
   KARANLIK TEMA OVERRIDE (index.html'deki eski dark-theme)
================================================================ */

body.dark-theme .settings-card,
body.dark-theme .profile-info-wrap,
body.dark-theme .profile-tabs,
body.dark-theme .chat-page-wrap,
body.dark-theme .panel,
body.dark-theme .modal,
body.dark-theme .inbox-container,
body.dark-theme .conversations-panel,
body.dark-theme .chat-panel,
body.dark-theme .chat-header,
body.dark-theme .chat-input-area,
body.dark-theme .conversation-item {
    background:   var(--surface) !important;
    border-color: var(--border) !important;
    color:        var(--text) !important;
}

body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
    background:   var(--bg) !important;
    border-color: var(--border) !important;
    color:        var(--text) !important;
}