:root {
    --bg: #0b1220;
    --text: #eaf0ff;
    --muted: #9fb0d0;
    --line: rgba(255,255,255,.08);
    --primary: #6ea8fe;
    --primary2: #3b82f6;
    --danger: #ff6b6b;
    --shadow: 0 30px 80px rgba(0,0,0,.35);
}

/* Sayfa kabuğu */
.all-listings {
    padding: 26px 0 18px;
    color: var(--text);
}

.listings-title {
    margin: 0 0 16px;
    font-weight: 1000;
    letter-spacing: .2px;
    color: var(--text);
}

/* Filtre toggle butonu */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    color: rgba(234,240,255,.9);
    font-weight: 900;
    cursor: pointer;
    transition: .15s ease;
}

    .filter-toggle-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(110,168,254,.35);
        box-shadow: 0 20px 50px rgba(0,0,0,.25);
    }

    .filter-toggle-btn i {
        color: rgba(110,168,254,.95);
    }

/* Filtre panel (overlay + drawer) */
.filter-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    display: none;
    z-index: 999;
    padding: 18px;
}

    .filter-panel.active {
        display: block;
    }

.filter-panel-header {
    position: absolute;
    right: 18px;
    top: 18px;
    width: min(560px, 92vw);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(11,18,32,.92);
}

    .filter-panel-header h5 {
        margin: 0;
        font-weight: 1000;
        letter-spacing: .2px;
    }

.close-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    color: rgba(234,240,255,.9);
    font-size: 22px;
    cursor: pointer;
    transition: .15s ease;
}

    .close-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(110,168,254,.35);
    }

.filter-form {
    position: absolute;
    right: 18px;
    top: 70px;
    width: min(560px, 92vw);
    border: 1px solid var(--line);
    border-radius: 0 0 18px 18px;
    background: rgba(11,18,32,.92);
    padding: 14px;
    box-shadow: var(--shadow);
}

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    /* input/select karanlık tema */
    .filter-grid .form-control,
    .filter-grid .form-select {
        border-radius: 12px;
        border: 1px solid var(--line);
        background: rgba(10,16,28,.65);
        color: var(--text);
        padding: 10px 12px;
        outline: none;
        box-shadow: none;
    }

        .filter-grid .form-control::placeholder {
            color: rgba(159,176,208,.75);
        }

        .filter-grid .form-control:focus,
        .filter-grid .form-select:focus {
            border-color: rgba(110,168,254,.65);
            box-shadow: 0 0 0 4px rgba(110,168,254,.12);
        }

    /* Filtrele butonu (bootstrap primary override gibi) */
    .filter-grid .btn.btn-primary {
        background: linear-gradient(180deg, rgba(110,168,254,.95), rgba(59,130,246,.85));
        border-color: rgba(110,168,254,.55);
        border-radius: 12px;
        font-weight: 900;
    }

/* Mobil: filtre grid tek kolon */
@media (max-width: 560px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }
}

/* Listing table görünümü */
.listings-table {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.table-header {
    display: grid;
    grid-template-columns: 90px 120px 110px 1.2fr 160px 130px 170px;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(11,18,32,.75);
    border-bottom: 1px solid var(--line);
    color: rgba(159,176,208,.9);
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-size: 12px;
}

.table-row {
    display: grid;
    grid-template-columns: 90px 120px 110px 1.2fr 160px 130px 170px;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    text-decoration: none;
    color: rgba(234,240,255,.92);
    border-top: 1px solid var(--line);
    transition: .15s ease;
    background: rgba(255,255,255,.01);
}

    .table-row:hover {
        transform: translateY(-1px);
        background: rgba(110,168,254,.06);
        border-top-color: rgba(110,168,254,.18);
    }

.col-id {
    font-weight: 1000;
    color: rgba(110,168,254,.95);
}

.col-image img {
    width: 110px;
    height: 72px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--line);
    display: block;
}

/* Fiyat */
.col-price {
    font-weight: 1000;
    letter-spacing: .2px;
    text-align: right;
    white-space: nowrap;
}

/* Responsive: tabloyu kart gibi yap */
@media (max-width: 992px) {
    .table-header {
        display: none;
    }

    .table-row {
        grid-template-columns: 120px 1fr;
        grid-template-areas:
            "img title"
            "img meta"
            "img price";
        gap: 10px;
        padding: 14px;
    }

    .col-image {
        grid-area: img;
    }

        .col-image img {
            width: 120px;
            height: 92px;
        }

    .table-row > div:nth-child(3) { /* Tür */
        grid-area: title;
        font-weight: 1000;
        color: rgba(110,168,254,.95);
    }

    .table-row > div:nth-child(4) { /* Konum */
        grid-area: meta;
        color: rgba(234,240,255,.86);
    }

    .table-row > div:nth-child(5),
    .table-row > div:nth-child(6) {
        display: none; /* buildType + roomPlan mobilde gerekirse açarız */
    }

    .col-price {
        grid-area: price;
        text-align: left;
        color: var(--text);
    }

    .col-id {
        display: none;
    }
}

/* Çok küçük ekran */
@media (max-width: 420px) {
    .table-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "img"
            "title"
            "meta"
            "price";
    }

    .col-image img {
        width: 100%;
        height: 180px;
    }
}