/* ==============================================
   AdaArabam — Listings Sayfası
   ============================================== */

.page-listings { padding: 24px 0 64px; }

.breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); margin-bottom:16px; }
.breadcrumb a { color:var(--text-secondary); transition:color .2s; }
.breadcrumb a:hover { color:var(--accent-red); }
.breadcrumb .sep { opacity:.4; }

/* ── Satıcı Profil Kartı (seller=X filtresinde) ── */
.seller-profile-card {
    display:flex; align-items:center; gap:16px;
    background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:16px 20px; margin-bottom:16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.seller-profile-card__avatar {
    width:72px; height:72px; border-radius:50%;
    background: linear-gradient(135deg, var(--accent-red), #b71c1c);
    flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    border:3px solid #fff; box-shadow: 0 0 0 2px var(--border);
}
.seller-profile-card__avatar img { width:100%; height:100%; object-fit:cover; }
.seller-profile-card__avatar--logo {
    border-radius: 12px;
    background: #fff;
    padding: 4px;
}
.seller-profile-card__avatar--logo img { object-fit: contain; }
.seller-profile-card__initials {
    color:#fff; font-weight:700; font-size:24px;
    font-family: var(--font-display);
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
}
.seller-profile-card__info { flex:1; min-width:0; }
.seller-profile-card__name {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-bottom:6px;
}
.seller-profile-card__name h2 {
    font-family: var(--font-display);
    font-size:1.15rem; font-weight:700; margin:0;
    color: var(--text-primary);
}
.seller-profile-card__badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:12px;
    font-size:11px; font-weight:600;
}
.seller-profile-card__badge--owner { background: #e3f2fd; color: #1565C0; }
.seller-profile-card__badge--dealer { background: #fff3e0; color: #e65100; }
.seller-profile-card__meta {
    display:flex; flex-wrap:wrap; gap:14px;
    font-size:12px; color: var(--text-secondary);
}
.seller-profile-card__meta i { color: var(--accent-red); margin-right:3px; }
.seller-profile-card__bio {
    margin:8px 0 0; font-size:12px; color: var(--text-secondary);
    line-height:1.5;
}
@media (max-width: 600px) {
    .seller-profile-card { flex-direction:column; text-align:center; }
    .seller-profile-card__name { justify-content:center; }
    .seller-profile-card__meta { justify-content:center; }
}

/* Layout */
.listings-layout { display:grid; grid-template-columns: 290px 1fr; gap:24px; align-items:start; }

/* ── Sidebar: normal akış ── */
.filter-sidebar {
    background:#fff;
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.filter-sidebar > form { margin:0; }

.filter-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid var(--border-light);
    background:#fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Filtrele butonu — viewport altına sticky pinli (takip ediyor) */
.filter-bottom-submit {
    padding: 12px 14px;
    background: #fff;
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    position: sticky;
    bottom: 20px;
    z-index: 8;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    margin-top: -1px;
}
.filter-bottom-submit .btn {
    height: 46px;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
}
.filter-header h3 { font-size:16px; font-weight:800; }
.filter-clear { font-size:12px; color:var(--accent-red); font-weight:600; margin-left:auto; }
.filter-clear:hover { text-decoration:underline; }
.filter-close-mobile { display:none; background:none; border:none; color:var(--text-secondary); cursor:pointer; padding:4px; margin-left:10px; }

.filter-scroll { display:block; }

/* Accordion panel */
.filter-panel { border-bottom:1px solid var(--border-light); }
.filter-panel.is-static { padding:14px 18px; }
.filter-panel.is-static .filter-panel__body { padding:0; }

.filter-panel__head {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    background:#fff;
    border:none;
    cursor:pointer;
    font-family: var(--font-display);
    font-size:14px;
    font-weight:700;
    color:var(--text-primary);
    transition: background .15s;
    text-align:left;
}
.filter-panel__head:hover { background:var(--bg); }
.filter-panel__head .chev {
    color: var(--text-muted);
    transition: transform .2s var(--ease);
    flex-shrink:0;
}
.filter-panel.is-open .filter-panel__head .chev { transform: rotate(180deg); color:var(--accent-red); }
.filter-panel.is-open .filter-panel__head { color:var(--accent-red); }

.filter-panel__body {
    display:none;
    padding: 0 18px 16px;
}
.filter-panel.is-open .filter-panel__body,
.filter-panel.is-static .filter-panel__body { display:block; }

/* ── Marka & Model & Paket Drill-Down Picker ── */
.mmp { font-family: var(--font-body); }
.mmp__crumbs {
    display:flex; flex-wrap:wrap; align-items:center; gap:4px;
    font-size:12px; color: var(--text-secondary);
    padding: 8px 10px; background:#f7f7f8; border-radius:6px;
    margin-bottom:8px;
}
.mmp__crumb { font-weight:500; }
.mmp__crumb.is-link { color: var(--accent-red); cursor:pointer; text-decoration:none; }
.mmp__crumb.is-link:hover { text-decoration: underline; }
.mmp__crumb.is-current { color: var(--text-primary); font-weight:700; }
.mmp__sep { color:#bbb; font-size:11px; }

.mmp__list {
    list-style:none; margin:0; padding:0;
    max-height: 260px; overflow-y:auto;
    border:1px solid var(--border); border-radius:8px;
    background:#fff;
}
.mmp__item {
    padding: 9px 12px; border-bottom:1px solid var(--border);
    cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    font-size:13px; color: var(--text-primary);
    transition: background .12s, color .12s;
}
.mmp__item:last-child { border-bottom:0; }
.mmp__item:hover { background: var(--red-light, #FFEBEE); color: var(--accent-red); }
.mmp__item:hover .mmp__arr { color: var(--accent-red); }
.mmp__arr { color:#bbb; font-style:normal; font-size:14px; font-weight:700; }

.mmp__loading, .mmp__empty {
    padding: 12px; color: var(--text-secondary);
    font-size:12px; text-align:center; font-style:italic;
}
.mmp__final {
    padding: 14px; display:flex; flex-direction:column;
    align-items:flex-start; gap:4px;
    background: linear-gradient(180deg, #fff, var(--red-light, #FFEBEE));
}
.mmp__final i { color: var(--success, #2E7D32); font-size: 18px; }
.mmp__final strong { font-size:13px; color: var(--text-primary); }
.mmp__final small { color: var(--text-secondary); font-size:12px; }
.mmp__reset {
    margin-top:8px; padding:6px 10px; font-size:12px;
    background:transparent; border:1px solid var(--accent-red);
    color: var(--accent-red); border-radius:6px; cursor:pointer;
    font-weight:600;
}
.mmp__reset:hover { background: var(--accent-red); color:#fff; }

/* Body içi elemanlar */
.filter-checks,
.filter-radios { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.filter-check,
.filter-radio { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); cursor:pointer; padding:5px 4px; border-radius:4px; transition:background .15s; }
.filter-check:hover,
.filter-radio:hover { background:var(--bg); }
.filter-check input,
.filter-radio input { accent-color: var(--accent-red); cursor:pointer; }
.filter-check em { margin-left:auto; font-size:11px; color:var(--text-muted); font-style:normal; }

.filter-range { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.filter-range .form-input,
.filter-range .form-select { font-size:13px; padding:8px 10px; height:36px; }

.filter-colors { display:flex; flex-wrap:wrap; gap:8px; }
.filter-color { position:relative; width:28px; height:28px; border-radius:50%; cursor:pointer; }
.filter-color input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.filter-color .sw { display:block; width:100%; height:100%; border-radius:50%; border:2px solid var(--border); transition: all .15s; }
.filter-color input:checked + .sw { border-color:var(--accent-red); box-shadow:0 0 0 2px rgba(198,40,40,.18); transform:scale(1.08); }

.filter-sidebar .form-select,
.filter-sidebar .form-input { height:38px; font-size:13px; }

/* ── Filtre paneli için kompakt Select2 ── */
.filter-sidebar .select2-container { width:100% !important; }
.filter-sidebar .select2-container--default .select2-selection--single {
    height:38px;
    border:1.5px solid var(--border-light);
    background:var(--bg);
    border-radius:var(--radius-sm);
    display:flex; align-items:center;
    padding:0 26px 0 10px;
    transition: border-color .15s, box-shadow .15s;
}
.filter-sidebar .select2-container--default.select2-container--focus .select2-selection--single,
.filter-sidebar .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px rgba(198,40,40,.08);
    background:#fff;
}
.filter-sidebar .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height:36px; color:var(--text-primary); font-size:13px; padding:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
}
.filter-sidebar .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); }
.filter-sidebar .select2-container--default .select2-selection--single .select2-selection__arrow { height:36px; right:6px; top:0; }
.filter-sidebar .select2-container--default .select2-selection--single .select2-selection__clear {
    position:absolute; right:24px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; line-height:14px; text-align:center;
    font-weight:700; font-size:10px;
    background:var(--border-light); color:var(--text-muted);
    border-radius:50%; margin:0; padding:0;
}
.filter-sidebar .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    background: var(--accent-red); color:#fff;
}
.filter-sidebar .select2-container--disabled .select2-selection--single { background:#f3f3f3; opacity:.7; }

/* Yıl min/max grid içinde de düzgün */
.filter-range .select2-container { width:100% !important; }

/* Filtre dropdown — daha kompakt */
.filter-s2-dropdown .select2-results__option { padding:8px 12px; font-size:13px; }

/* Eski footer stili (artık kullanılmıyor ama geriye dönük kalsın) */
.filter-sticky-footer { display: none; }

/* ── Topbar ── */
.listings-topbar { background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; margin-bottom:14px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; box-shadow:var(--shadow-card); }
.listings-count { font-size:14px; color:var(--text-secondary); }
.listings-count strong { color:var(--accent-red); font-size:16px; font-weight:800; }
.listings-tabs { display:flex; gap:2px; background:var(--bg); border-radius:var(--radius-pill); padding:3px; }
.listings-tab { font-size:13px; font-weight:600; padding:7px 16px; border-radius:var(--radius-pill); color:var(--text-secondary); transition: all .2s; }
.listings-tab:hover { color:var(--text-primary); }
.listings-tab.active { background:var(--accent-red); color:#fff; box-shadow: var(--shadow-red); }
.listings-tools { margin-left:auto; display:flex; align-items:center; gap:10px; }
.listings-sort select { height:36px; font-size:13px; padding-right:30px; }
.listings-view-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.view-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; color:var(--text-muted); transition: all .15s; border-right:1px solid var(--border); }
.view-btn:last-child { border-right:none; }
.view-btn:hover { color:var(--text-primary); background:var(--bg); }
.view-btn.active { background:var(--primary-dark); color:#fff; }

.listings-mobile-filter-btn { display:none; }

/* ── Tablo görünümü (Sahibinden tarzı) ── */
.listings-table-wrap {
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
    overflow-x:auto;
}
.listings-table { width:100%; border-collapse:collapse; font-size:12.5px; min-width:980px; }
.listings-table thead { background:var(--primary-dark); }
.listings-table thead th {
    text-align:left; color:#fff;
    font-family:var(--font-display);
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
    padding:11px 10px; white-space:nowrap;
}
.listings-table tbody tr {
    border-bottom:1px solid var(--border-light);
    cursor:pointer;
    transition: background .12s;
    background:#fff;
}
.listings-table tbody tr:hover { background:#F7F7F7; }
.listings-table td { padding:8px 10px; vertical-align:middle; color:var(--text-primary); }

.listings-table .lr-img { width:92px; padding:8px 10px; }
.listings-table .lr-img img {
    width:76px; height:56px; object-fit:cover;
    border-radius:4px; border:1px solid var(--border-light);
    display:block;
}
.listings-table .lr-img .no-image-sm {
    width:76px; height:56px; background:var(--bg); border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted);
}

.listings-table .lr-brand {
    font-weight:700; color:var(--text-primary); white-space:nowrap;
}
.listings-table .lr-model { color:var(--text-secondary); white-space:nowrap; }
.listings-table .lr-title {
    min-width:260px; max-width:420px;
}
.listings-table .lr-title a {
    color:var(--text-primary);
    font-weight:700;
    line-height:1.35;
    display:inline;
}
.listings-table .lr-title a:hover { color:var(--accent-red); text-decoration:underline; }
.listings-table .lr-star { color:var(--gold); font-size:13px; margin-right:2px; }

/* Paket pill etiketi (Premium Galeri vb.) */
.tier-pill {
    display:inline-block;
    margin-left:6px;
    padding:2px 8px;
    font-size:10.5px;
    font-weight:700;
    border-radius:3px;
    text-transform:uppercase;
    letter-spacing:.03em;
    vertical-align:middle;
}
.tier-pill--standard { background:var(--border-light); color:var(--text-secondary); }
.tier-pill--gold     { background:var(--gold-light); color:#8a6d1a; }
.tier-pill--premium  { background:var(--red-light); color:var(--accent-red); }
.tier-pill--vip      { background:var(--accent-red); color:#fff; }

.listings-table .lr-year,
.listings-table .lr-km,
.listings-table .lr-color { color:var(--text-secondary); white-space:nowrap; }
.listings-table .lr-price {
    color:var(--accent-red);
    font-weight:800;
    white-space:nowrap;
    font-size:13.5px;
}

/* Tarih & konum — 2 satır stacked */
.listings-table .lr-date,
.listings-table .lr-city {
    white-space:nowrap;
    line-height:1.3;
}
.listings-table .lr-date span,
.listings-table .lr-city span {
    display:block;
    font-size:12px;
    color:var(--text-secondary);
}
.listings-table .lr-date span:first-child { color:var(--text-primary); font-weight:600; }
.listings-table .lr-city span:first-child { color:var(--text-primary); font-weight:600; }

/* Bold ilan — başlık ve marka siyah kalın */
.listing-row--bold .lr-title a,
.listing-row--bold .lr-brand { font-weight:900; color:#000; }

/* Highlighted (renkli) — hafif kırmızımsı */
.listing-row--highlighted { background: #FFF5F5 !important; }
.listing-row--highlighted:hover { background: #FFEBEB !important; }

/* Showcase (öne çıkan) — güçlü kırmızı tonu */
.listing-row--showcase {
    background: #FFEDED !important;
    box-shadow: inset 3px 0 0 var(--accent-red);
}
.listing-row--showcase:hover { background:#FFE0E0 !important; }
.listing-row--showcase .lr-title a { color:#000; font-weight:800; }

/* Topped (başa sabit) — gold üst çizgi + pin */
.listing-row--topped { box-shadow: inset 0 3px 0 var(--gold); }
.listing-row--topped .lr-title a::before { content: "📌 "; font-size:12px; }

/* ── Grid görünümü ── */
.listings-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }

/* Grid: showcase rengini kırmızıya çevir */
.listings-grid .listing-card--showcase,
.listings-list .listing-card--showcase {
    background: var(--red-light);
    border-color: var(--accent-red);
}
.listings-grid .listing-card--showcase::before,
.listings-list .listing-card--showcase::before { background: var(--accent-red) !important; }

/* Bold ilan başlığını siyah kalın yap */
.listings-grid .listing-card--bold .listing-card__title,
.listings-list .listing-card--bold .listing-card__title { color:#000; font-weight:800; }

/* Highlighted ilan */
.listings-grid .listing-card--highlighted,
.listings-list .listing-card--highlighted { background:#FFF4F4; }

/* ── Liste görünümü ── */
.listings-list { display:flex; flex-direction:column; gap:12px; }
.listings-list .listing-card { flex-direction:row; align-items:stretch; }
.listings-list .listing-card--list .listing-card__image { width:220px; flex-shrink:0; }
.listings-list .listing-card--list .listing-card__body { flex:1; padding:14px 16px; }

/* ── Pagination ── */
.pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:28px; flex-wrap:wrap; }
.pagination__btn { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--text-secondary); background:#fff; transition: all .15s; }
.pagination__btn:hover { border-color:var(--accent-red); color:var(--accent-red); }
.pagination__btn--active { background:var(--accent-red); border-color:var(--accent-red); color:#fff; }
.pagination__btn--active:hover { color:#fff; }
.pagination__btn--disabled { opacity:.4; cursor:not-allowed; }
.pagination__btn--disabled:hover { border-color:var(--border); color:var(--text-secondary); }
.pagination__gap { padding:0 6px; color:var(--text-muted); }

/* ── Empty state ── */
.empty-state { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:64px 24px; text-align:center; color:var(--text-secondary); }
.empty-state svg { color:var(--text-muted); margin-bottom:16px; }
.empty-state h3 { font-size:20px; margin-bottom:6px; }
.empty-state p { margin-bottom:20px; font-size:14px; }

/* ══════════════════════════════════════════════════
   MOBİL
   ══════════════════════════════════════════════════ */

@media (max-width: 992px) {
    .listings-layout { grid-template-columns: 1fr !important; }

    /* Sidebar bottom-sheet olarak aşağıdan yukarı çıkar */
    .filter-sidebar {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 88vh !important;
        max-height: 88vh !important;
        align-self: auto !important;
        transform: translateY(100%);
        transition: transform .3s var(--ease);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        border: none;
        box-shadow: 0 -8px 32px rgba(0,0,0,.25);
        z-index: 2100;
    }
    .filter-sidebar.open { transform: translateY(0); }

    .filter-close-mobile { display: inline-flex; }

    /* Sayfa üstündeki küçük "Filtrele" butonunu gizle — altta barı kullanacağız */
    .listings-mobile-filter-btn { display: none !important; }

    /* Sayfa altında sabit bottom action bar */
    .mobile-filter-bar {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 16px rgba(0,0,0,.08);
        z-index: 900;
        gap: 8px;
    }
    .mobile-filter-bar .btn {
        flex: 1;
        height: 46px;
        font-size: 14px;
        font-weight: 700;
    }
    body.has-mobile-filter-bar { padding-bottom: 72px; }

    /* Tablo görünümü mobilde kart gibi render edilsin */
    .listings-table-wrap { overflow: visible; border: none; background: transparent; box-shadow: none; }
    .listings-table { min-width: 0 !important; border-collapse: separate; }
    .listings-table thead { display: none !important; }
    .listings-table tbody { display: block; }
    .listings-table tr {
        display: grid !important;
        grid-template-columns: 100px 1fr;
        grid-template-rows: auto auto auto;
        gap: 4px 12px;
        background: #fff !important;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        padding: 10px;
        box-shadow: var(--shadow-card);
    }
    .listings-table .lr-img {
        grid-row: 1 / span 3;
        padding: 0 !important;
        width: auto !important;
    }
    .listings-table .lr-img img {
        width: 100px !important;
        height: 75px !important;
        border-radius: 6px;
    }
    .listings-table .lr-title {
        grid-column: 2;
        grid-row: 1;
        min-width: 0 !important; max-width: none !important;
        padding: 0 !important;
    }
    .listings-table .lr-title a { font-size: 13px; line-height: 1.3; }
    .listings-table .lr-brand,
    .listings-table .lr-model,
    .listings-table .lr-year,
    .listings-table .lr-km,
    .listings-table .lr-color,
    .listings-table .lr-date {
        display: none !important;  /* mobilde gizle — sadece başlık + fiyat + konum */
    }
    .listings-table .lr-price {
        grid-column: 2;
        grid-row: 2;
        padding: 0 !important;
        font-size: 15px !important;
    }
    .listings-table .lr-city {
        grid-column: 2;
        grid-row: 3;
        padding: 0 !important;
        font-size: 11px;
    }
    .listings-table .lr-city span { display: inline !important; font-size: 11px !important; }
    .listings-table .lr-city span + span::before { content: " / "; }
}

@media (max-width: 600px) {
    .listings-topbar { padding:10px; gap:10px; }
    .listings-tabs { order:3; width:100%; }
    .listings-tools { order:4; width:100%; justify-content:space-between; margin-left:0; }
    .listings-grid { grid-template-columns: repeat(2, 1fr); gap:10px; }
    .listings-list .listing-card--list { flex-direction:column; }
    .listings-list .listing-card--list .listing-card__image { width:100%; }
    /* view toggle görünür — kullanıcı grid/list/table seçebilsin */
    .listings-view-toggle { display: flex; }
    .listings-view-toggle .view-btn { width:34px; height:34px; }
}