/* ==================================================
   SAYFA LAYOUT
================================================== */
.page{
    max-width:1400px;
    margin:2rem auto;
    padding:0 1.6rem;
    min-height: calc(100vh - 72px - 120px);
}

.layout{
    display:grid;
    grid-template-columns:18rem 1fr; /* filtre | liste */
    gap:1.6rem;
}

/* ==================================================
   FILTER PANEL
================================================== */
.filters{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px;
    position:sticky;
    top:calc(2rem + 72px);                  /* sayfa üstünden boşluk */
    align-self:start;
    height:max-content;
}

/* Filtre başlığı */
.filters h2{
    margin:0 0 1.4rem;
    font-size:1.3rem;
    font-weight:600;
    color:var(--text);
}
.no-filters{
    background:#f9fafb; /* hafif gri arka plan */
    border:1px dashed var(--border);
    border-radius:12px;
    padding:1rem;
    text-align:center;
    font-size:0.95rem;
    color:var(--muted);
}

/* Filtre grubu */
.filter-group{
    margin-bottom:1.6rem;
}

/* Grup başlığı */
.filter-title{
    font-size:0.95rem;
    font-weight:600;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:0.6rem;
    margin-bottom:0.6rem;
}

.filter-title::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
}

/* Seçenekler */
.filter-options{
    display:flex;
    flex-wrap:wrap;
    gap:0.55rem;
}

.filter-options input{
    display:none;
}

.filter-options label{
    padding:0.6rem 2.2rem 0.6rem 0.9rem;
    border-radius:999px;
    border:0.1rem solid var(--border);
    font-size:0.95rem;
    cursor:pointer;
    background:#fff;
    position:relative;
    white-space:nowrap;
    transition:.15s;
}

.filter-options span{
    font-size:0.85rem;
    color:var(--muted);
}

/* Seçili durum */
.filter-options input:checked + label{
    background:#e6f8f2;
    border-color:var(--primary);
    color:var(--primary);
}

.filter-options input:checked + label::after{
    content:"✔";
    position:absolute;
    right:0.8rem;
    font-size:0.75rem;
    color:var(--primary);
}
/* =====================
   AKTİF FİLTRELER
===================== */
.active-filters{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:0.8rem;
    padding:0.8rem;
    margin-bottom:1rem;
}

.active-filters-title{
    font-size:0.867rem;
    color:var(--muted);
    margin-bottom:0.533rem;
}

.active-filters-list{
    display:flex;
    flex-wrap:wrap;
    gap:0.533rem;
}

/* Her aktif filtre tıklanabilir */
.active-filter{
    display:flex;
    align-items:center;
    gap:0.4rem;
    background:var(--primary-soft);
    color:var(--primary);
    padding:0.333rem 0.667rem;
    border-radius:999px;
    font-size:0.867rem;
    border:0.067rem solid var(--primary);

    cursor: pointer; /* tüm filtre tıklanabilir */
    transition:0.15s; /* hover geçişleri için */
}

/* Label kalın */
.active-filter .filter-label{
    font-weight:600;
}

/* Çarpı işareti stilleri */
.active-filter .filter-remove{
    font-size:0.8rem;
    opacity:0.8;
    transition:0.15s;
}

/* Hover efekti */
.active-filter:hover{
    background:rgba(0,185,142,0.15); /* soft hover */
}

.active-filter:hover .filter-remove{
    color:var(--primary-dark);
    opacity:1;
}


/* ==================================================
   LIST
================================================== */
.list{
    display:flex;
    flex-direction:column;
    gap:0.8rem;
}
.no-listings{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:2rem;
    text-align:center;
    font-size:1.1rem;
    color:var(--muted);
}
.list-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

/* Kart */
.list-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:0.8rem;
    display:grid;
    grid-template-columns:10rem 1fr 8rem;
    gap:0.8rem;
    align-items:center;
    transition:.15s;
}

.list-link:hover .list-item{
    border-color:var(--primary);
    box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* Görsel */
.item-image{
    height:100px;
    border-radius:12px;
    overflow:hidden;
}

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

/* İçerik */
.item-content{
    display:flex;
    flex-direction:column;
    gap:0.3rem;
}

.item-title{
    font-size:1.05rem;
    font-weight:600;
    color:var(--text);
}

.item-location{
    font-size:0.93rem;
    color:var(--muted);
}

.item-features{
    display:flex;
    gap:0.4rem;
    flex-wrap:wrap;
}

.item-feature{
    font-size:0.85rem;
    background:#f1f5f9;
    padding:0.2rem 0.55rem;
    border-radius:999px;
}

/* Fiyat */
.item-price{
    text-align:right;
}

.item-price strong{
    font-size:1.2rem;
    color:var(--primary);
}

/* ==================================================
   PAGINATION (ileri/geri yok, modern)
================================================== */
.pagination{
    margin-top:1.6rem;
    display:flex;
    justify-content:center;
    gap:0.5rem;
}

.pagination a{
    width:2.6rem;
    height:2.6rem;
    border-radius:10%;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:var(--text);
    background:#fff;
    font-weight:500;
    transition: all 0.2s;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
    
    line-height: 1; /* veya 1em */
}

.pagination a:hover{
    /* background:var(--primary-light);
    border-color:var(--primary-light);
    color:#fff; */
    color:var(--primary-light);
    transform: translateY(-1px);
}

.pagination a.active{
    /* background:var(--primary-light);
    border-color:var(--primary-light);
    color:#fff; */
    color:var(--primary-light);
    font-weight:600;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

/* ==================================================
   RESPONSIVE
================================================== */
@media(max-width:900px){
    .layout{
        grid-template-columns:1fr;
    }

    .filters{
        position:relative;
        top:auto;
        margin-bottom:1.6rem;
    }

    .list-item{
        grid-template-columns:1fr;
    }

    .item-price{
        text-align:left;
    }
}