:root{
    --bg:#f6f7fb;
    --text:#111827;
    --muted:#6b7280;
    --line:#e5e7eb;
    --brand:#f97316;
    --brand2:#fb7185;
    --ok:#16a34a;
    --shadow: 0 10px 24px rgba(17,24,39,.08);
    --radius:16px;
    --max:1200px;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color:var(--text);
    background:var(--bg);
    line-height:1.45;
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 16px}
.muted{color:var(--muted)}
.link{color:#111827; font-weight:950; font-size:13px}
.link:hover{text-decoration:underline}

/* Header */
header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-.2px}
.logo{
    width:36px; height:36px; border-radius:12px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    display:grid; place-items:center; color:#fff; font-weight:900;
    box-shadow: 0 12px 22px rgba(249,115,22,.18);
}
.searchTop{flex:1; display:flex; gap:10px; align-items:center; max-width:720px}
.input{
    flex:1; display:flex; align-items:center; gap:10px;
    background:#fff; border:1px solid var(--line);
    border-radius:14px; padding:10px 12px;
}
.input input{width:100%; border:0; outline:0; font-weight:800; font-size:14px}
.select{
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
    font-weight:900;
    font-size:14px;
    min-width:160px;
}
.actions{display:flex; gap:8px; align-items:center}
.btn{
    border:1px solid var(--line);
    background:#fff;
    padding:10px 12px;
    border-radius:14px;
    font-weight:900;
    font-size:14px;
    cursor:pointer;
    transition:.12s ease;
    display:inline-flex; align-items:center; gap:8px;
    white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.btn.primary{border-color:transparent; background: linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff}

/* HERO */
.hero{padding:16px 0 0 0}

/* Vitrin + Yan Kategori */
.heroSplit{
    display:grid;
    grid-template-columns: 260px 1fr;
    gap:16px;
    align-items:flex-start;
}


.breedSide{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
    position:sticky;
    top:90px;
}
.breedSide h3{
    margin:0 0 12px 0;
    font-size:15px;
    letter-spacing:-.2px;
}
.breedItem{
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
    padding:10px 12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:950;
    cursor:pointer;
    margin-bottom:8px;
    transition:.12s ease;
}
.breedItem:hover{background:#fafafa}
.breedItem.active{
    border-color: rgba(249,115,22,.55);
    background: linear-gradient(180deg, rgba(249,115,22,.12), #fff);
    box-shadow: 0 8px 16px rgba(249,115,22,.18);
}
.breedItem em{
    font-style:normal;
    font-size:12px;
    color:var(--muted);
    font-weight:900;
}
.allBreeds{
    display:block;
    margin-top:10px;
    font-size:13px;
    font-weight:950;
    color:#111827;
}
.allBreeds:hover{text-decoration:underline}

/* Vitrin card */
.heroCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
}
.heroTop{
    padding:14px 14px 10px 14px;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
}
.heroTop h1{margin:0; font-size:18px; letter-spacing:-.2px}
.heroTop p{margin:0; color:var(--muted); font-weight:800; font-size:13px}

/* Vitrin Grid (scroll yok) */
.vitrinGrid{
    padding:12px;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
}
.vCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius: 14px;
    overflow:hidden;
    box-shadow: 0 6px 14px rgba(17,24,39,.06);
    cursor:pointer;
    transition:.12s ease;
}
.vCard:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.vImg{
    height:96px;
    background:
            radial-gradient(200px 110px at 25% 20%, rgba(249,115,22,.24), transparent 55%),
            radial-gradient(220px 110px at 90% 40%, rgba(251,113,133,.20), transparent 60%),
            linear-gradient(135deg, rgba(17,24,39,.08), rgba(17,24,39,.02));
    position:relative;
}
.badge{
    position:absolute; left:8px; top:8px;
    background: var(--ok);
    color:#fff;
    font-weight:950; font-size:10px;
    padding:5px 8px; border-radius:999px;
}
.vBody{padding:10px}
.vTitle{margin:0; font-size:12.5px; font-weight:1000}
.vMeta{margin-top:6px; color:black; font-size:11px; font-weight:850; display:flex; gap:6px; flex-wrap:wrap}

/* Quick filter bar */
.quickBar{
    margin-top:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:12px;
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 160px;
    gap:10px;
    align-items:center;
}
.qWrap{display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:10px 12px}
.qWrap input{border:0; outline:0; width:100%; font-weight:900}
.qSelect{
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
    font-weight:950;
    width:100%;
}
.qBtn{
    border:0;
    border-radius:14px;
    padding:12px 12px;
    font-weight:1000;
    cursor:pointer;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color:#fff;
    box-shadow: 0 14px 26px rgba(249,115,22,.16);
}

/* Sections */
section.block{padding:18px 0}
.contentTop{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
    margin:4px 0 10px 0;
}
.contentTop h2{margin:0; font-size:16px}
.sort select{
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
    font-weight:950;
}

/* City discover */
.barCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
}
.barHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.barHead h3{margin:0; font-size:16px; letter-spacing:-.2px}

.cityGrid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:12px;
}
.cityTile{
    border:1px solid var(--line);
    background:#fff;
    border-radius:18px;
    padding:14px;
    box-shadow: 0 10px 18px rgba(17,24,39,.06);
    cursor:pointer;
    transition:.12s ease;
    position:relative;
    overflow:hidden;
    min-height:92px;
}
.cityTile:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.cityTile::after{
    content:"";
    position:absolute; inset:-40px -60px auto auto;
    width:160px; height:160px;
    background: radial-gradient(circle at 30% 30%, rgba(249,115,22,.18), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(251,113,133,.16), transparent 62%);
    transform: rotate(18deg);
}
.cityTile b{display:block; font-size:14px; position:relative; z-index:1}
.cityTile span{display:block; margin-top:6px; font-size:12px; color:var(--muted); font-weight:900; position:relative; z-index:1}

/* Latest grid */
.grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
}
.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius: 16px;
    overflow:hidden;
    box-shadow: 0 8px 18px rgba(17,24,39,.06);
    transition:.12s ease;
}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.img{
    height:150px;
    background:
            radial-gradient(240px 140px at 20% 25%, rgba(249,115,22,.20), transparent 55%),
            radial-gradient(260px 140px at 85% 30%, rgba(59,130,246,.12), transparent 60%),
            linear-gradient(135deg, rgba(17,24,39,.10), rgba(17,24,39,.02));
    position:relative;
}
.tagTop{
    position:absolute; left:10px; top:10px;
    background: var(--ok);
    color:#fff;
    padding:6px 10px;
    border-radius:999px;
    font-weight:950;
    font-size:11px;
}
.body{padding:12px}
.title{margin:0; font-weight:1000; font-size:14px}
.meta{margin-top:6px; color:var(--muted); font-weight:900; font-size:12px; display:flex; gap:8px; flex-wrap:wrap}
.ctaRow{display:flex; gap:8px; margin-top:10px}
.small{
    flex:1;
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
    padding:10px 10px;
    font-weight:1000;
    cursor:pointer;
}
.small.primary{border-color:transparent; background: linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff}


.breedGrid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:12px;
}
.breedTile{
    border:1px solid var(--line);
    background:#fff;
    border-radius:18px;
    padding:14px;
    box-shadow: 0 10px 18px rgba(17,24,39,.06);
    cursor:pointer;
    transition:.12s ease;
    display:flex;
    gap:12px;
    align-items:center;
    min-height:78px;
}
.breedTile:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.breedThumb{
    width:46px;
    height:46px;
    border-radius:16px;
   
    background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(251,113,133,.10));
    display:grid;
    place-items:center;
    flex:0 0 auto;
    overflow:hidden;
}
.breedThumb svg{width:32px; height:32px; opacity:.95}
.breedText b{display:block; font-size:14px}
.breedText span{display:block; margin-top:2px; font-size:12px; color:black; font-weight:900}

/* ===== MODERN FOOTER ===== */
.siteFooter{
    margin-top:32px;
    background:
            radial-gradient(600px 220px at 10% -10%, rgba(249,115,22,.12), transparent 60%),
            radial-gradient(600px 220px at 90% -10%, rgba(251,113,133,.12), transparent 60%),
            #ffffff;
    border-top:1px solid var(--line);
}
.footerWrap{
    padding:42px 0 18px 0;
}
.footerGrid{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap:28px;
}
.footerCol h4{
    margin:0 0 14px 0;
    font-size:16px;
    letter-spacing:.2px;
    text-transform:none;
    color:black;
}
.footerBrand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:1000;
    font-size:18px;
}
.footerDesc{
    margin-top:14px;
    color:black;
    font-weight:normal;
    font-size:14px;
    max-width:44ch;
    line-height:1.55;
}
.trustRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}
.trustBadge{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:#fafafa;
    border:1px solid var(--line);
    font-size:12px;
    font-weight:normal;
}
.footerList{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:10px;
}
.footerList a{
    color:black;
    font-weight:500;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.12s ease;
}
.footerList a:hover{
    color:#111827;
    transform: translateX(2px);
}
.footerCta{
    background: linear-gradient(180deg, rgba(249,115,22,.10), rgba(251,113,133,.06));
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    box-shadow: var(--shadow);
}
.footerCta h5{
    margin:0;
    font-size:18px;
    letter-spacing:-.2px;
}
.footerCta p{
    margin:8px 0 14px 0;
    color:black;
    font-weight:normal;
    font-size:13px;
}
.footerCtaActions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.footerBottom{
    border-top:1px dashed var(--line);
    margin-top:26px;
    padding:14px 0 0 0;
}
.footerBottomRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
.footerBottomRow .tiny{
    font-size:12px;
    color:black;
    font-weight:850;
}

/* Responsive */
@media (max-width: 1100px){
    .vitrinGrid{grid-template-columns: repeat(4, 1fr)}
    .grid{grid-template-columns: repeat(2, 1fr)}
    .cityGrid{grid-template-columns: repeat(3, 1fr)}
    .quickBar{grid-template-columns: 1fr 1fr;}
    .qBtn{grid-column: 1 / -1}
    .breedGrid{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width: 1020px){
    .searchTop{display:none}
    .heroSplit{grid-template-columns: 1fr}
    .breedSide{position:relative; top:auto}
    .footerGrid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 820px){
    .vitrinGrid{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width: 640px){
    .grid{grid-template-columns: 1fr}
    .vitrinGrid{grid-template-columns: repeat(2, 1fr)}
    .cityGrid{grid-template-columns: 1fr}
    .vImg{height:92px}
    .breedGrid{grid-template-columns: 1fr}
    .footerGrid{grid-template-columns: 1fr}
}

/* ===== Listings Page ===== */
.listTop{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.listSplit{
    display:grid;
    grid-template-columns: 320px 1fr;
    gap:16px;
    align-items:flex-start;
}

.filterCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
    position:sticky;
    top:90px;
}
.filterHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.filterHead h3{
    margin:0;
    font-size:15px;
    letter-spacing:-.2px;
}
.filterForm{display:grid; gap:10px}
.fRow{display:grid; gap:6px}
.fLabel{
    font-size:12px !important;
    font-weight:950;
    color:black!important;
    letter-spacing:.2px;
}


/* Sadece Arama için istersen */
.fRow:first-of-type .fLabel{
    text-align:center;
    font-size:16px !important;
}

.chips{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.chip{
    border:1px solid var(--line);
    background:#fafafa;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:950;
    color:#111827;
}
.chip:hover{transform: translateY(-1px); box-shadow: var(--shadow)}

.pager{
    margin-top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
.pBtn{
    border:1px solid var(--line);
    background:#fff;
    padding:10px 12px;
    border-radius:14px;
    font-weight:950;
}
.pBtn.disabled{
    opacity:.55;
    pointer-events:none;
}
.pNums{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.pNum{
    border:1px solid var(--line);
    background:#fff;
    padding:8px 10px;
    border-radius:12px;
    font-weight:950;
    min-width:38px;
    text-align:center;
}
.pNum.active{
    border-color:transparent;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color:#fff;
    box-shadow: 0 12px 22px rgba(249,115,22,.14);
}
.pDots{color:var(--muted); font-weight:950; padding:0 4px}

@media (max-width: 1100px){
    .listSplit{grid-template-columns: 1fr}
    .filterCard{position:relative; top:auto}
}

/* ===== Listing Detail ===== */
.crumb{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:10px;
    font-weight:900;
    font-size:13px;
    color:var(--muted);
}
.crumbLink{color:var(--muted)}
.crumbLink:hover{color:var(--text); text-decoration:underline}
.crumbSep{opacity:.65}
.crumbHere{color:var(--text)}

.detailTop{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.dTitle{
    margin:0;
    font-size:22px;
    letter-spacing:-.3px;
}
.dSub{
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    color:var(--muted);
    font-weight:900;
    font-size:13px;
}
.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fafafa;
    color:#111827;
    font-weight:950;
    font-size:12px;
}
.pill.soft{
    border-color: rgba(249,115,22,.25);
    background: linear-gradient(180deg, rgba(249,115,22,.12), rgba(251,113,133,.06));
}
.dot{opacity:.6}

.dPrice{
    min-width:180px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow: var(--shadow);
    padding:12px 14px;
}
.priceLabel{
    color:var(--muted);
    font-weight:950;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.2px;
}
.priceVal{
    margin-top:4px;
    font-size:18px;
    font-weight:1000;
    letter-spacing:-.2px;
}

.detailSplit{
    display:grid;
    grid-template-columns: 1fr 340px;
    gap:16px;
    align-items:flex-start;
}

/* Gallery */
.galleryCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
}
.galleryMain{
    height:320px;
    position:relative;
    background:
            radial-gradient(500px 220px at 20% 20%, rgba(249,115,22,.22), transparent 60%),
            radial-gradient(520px 220px at 85% 35%, rgba(251,113,133,.18), transparent 62%),
            linear-gradient(135deg, rgba(17,24,39,.10), rgba(17,24,39,.02));
}
.galleryMainPh{
    position:absolute; inset:0;
    opacity:.9;
}
.galleryThumbs{
    padding:12px;
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:10px;
    border-top:1px solid var(--line);
    background: #fff;
}
.gThumb{
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
    padding:0;
    overflow:hidden;
    cursor:pointer;
    transition:.12s ease;
    height:62px;
}
.gThumb:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.gThumb.active{
    border-color: rgba(249,115,22,.55);
    box-shadow: 0 10px 20px rgba(249,115,22,.14);
}
.gThumbPh{
    display:block;
    width:100%;
    height:100%;
    background:
            radial-gradient(140px 70px at 20% 30%, rgba(249,115,22,.22), transparent 60%),
            radial-gradient(140px 70px at 85% 45%, rgba(251,113,133,.18), transparent 62%),
            linear-gradient(135deg, rgba(17,24,39,.10), rgba(17,24,39,.02));
}

/* Info/Desc */
.infoCard, .descCard{
    margin-top:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
}
.infoGrid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
}
.infoItem{
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
}
.infoKey{
    color:var(--muted);
    font-weight:950;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.2px;
}
.infoVal{
    margin-top:4px;
    font-weight:1000;
}
.badgeRow{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.miniBadge{
    border:1px solid var(--line);
    background:#fafafa;
    border-radius:999px;
    padding:7px 10px;
    font-weight:950;
    font-size:12px;
}

.secTitle{
    margin:0 0 10px 0;
    font-size:15px;
    letter-spacing:-.2px;
}
.descText{
    margin:0;
    color:#111827;
    font-weight:850;
    line-height:1.65;
}

/* Contact */
.contactCard{
    position:sticky;
    top:90px;
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
}
.contactHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}
.contactTitle{
    font-weight:1000;
    font-size:16px;
    letter-spacing:-.2px;
}
.contactBox{
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
    background:#fff;
}
.contactActions{
    margin-top:12px;
    display:grid;
    gap:10px;
}
.contactActions .btn{
    width:100%;
    justify-content:center;
}
.reportBox{
    margin-top:12px;
    border:1px dashed var(--line);
    border-radius:18px;
    padding:12px;
    background:#fafafa;
}

/* Responsive */
@media (max-width:1100px){
    .detailSplit{grid-template-columns: 1fr}
    .contactCard{position:relative; top:auto}
    .galleryThumbs{grid-template-columns: repeat(4, 1fr)}
}
@media (max-width:640px){
    .galleryMain{height:240px}
    .galleryThumbs{grid-template-columns: repeat(3, 1fr)}
    .infoGrid{grid-template-columns: 1fr}
}

/* ===== Post Create (/ilan-ver) ===== */
.postHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.pTitle{margin:0; font-size:22px; letter-spacing:-.3px}

.toastOk{
    border:1px solid rgba(22,163,74,.25);
    background: rgba(22,163,74,.08);
    padding:12px 14px;
    border-radius:18px;
    font-weight:950;
    margin: 10px 0 14px 0;
}

.postSplit{
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:16px;
    align-items:flex-start;
}
.postCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
}
.postCardHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}
.postCardHead h3{
    margin:0;
    font-size:15px;
    letter-spacing:-.2px;
}
.postForm{display:block}

.formGrid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:12px;
}
.fRow{display:grid; gap:7px}
.fLabel{
    font-size:12px;
    font-weight:950;
    color:var(--muted);
    
    letter-spacing:.2px;
}
.fInput, .fSelect, .fText{
    border:1px solid var(--line);
    border-radius:14px;
    padding:11px 12px;
    font-weight:900;
    font-size:14px;
    outline:none;
    background:#fff;
}
.fText{resize:vertical; line-height:1.55}
.fInput:focus, .fSelect:focus, .fText:focus{
    border-color: rgba(249,115,22,.5);
    box-shadow: 0 0 0 4px rgba(249,115,22,.10);
}
.fHint{
    font-size:12px;
    color:var(--muted);
    font-weight:850;
}
.fErr{
    font-size:12px;
    font-weight:900;
    color:#b91c1c;
    min-height:14px;
}

.checkRow{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.check{
    border:1px solid var(--line);
    background:#fafafa;
    border-radius:999px;
    padding:8px 10px;
    font-weight:950;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:8px;
}
.check input{transform: translateY(1px)}

.divider{
    height:1px;
    background: var(--line);
    margin:14px 0;
}

.uploadBox{
    border:1px dashed var(--line);
    background:
            linear-gradient(180deg, rgba(249,115,22,.06), rgba(251,113,133,.04));
    border-radius:18px;
    padding:12px;
    display:flex;
    align-items:center;
    gap:12px;
}
.fileInput{
    width:140px;
    max-width:100%;
}
.uploadMeta{
    display:grid;
    gap:4px;
    font-weight:900;
    font-size:13px;
}
.photoGrid{
    margin-top:10px;
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:10px;
}
.photoItem{
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    height:72px;
    position:relative;
    background:#fff;
}
.photoItem img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.photoItem button{
    position:absolute;
    right:6px; top:6px;
    border:0;
    border-radius:999px;
    padding:6px 8px;
    cursor:pointer;
    font-weight:950;
    background: rgba(17,24,39,.70);
    color:#fff;
}

.postActions{
    margin-top:12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* Side */
.postSide{
    position:sticky;
    top:90px;
    display:grid;
    gap:12px;
}
.sideCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
}
.sideHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.sideHead h4{
    margin:0;
    font-size:14px;
    letter-spacing:-.2px;
}
.previewCard{
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    box-shadow: 0 8px 18px rgba(17,24,39,.06);
}
.limitBox{
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
    background:#fff;
}
.limitRow{display:flex; align-items:center; justify-content:space-between; gap:10px}
.limitBar{
    margin-top:10px;
    height:10px;
    border-radius:999px;
    background:#f3f4f6;
    overflow:hidden;
    border:1px solid var(--line);
}
.limitBar span{
    display:block;
    height:100%;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.sideActions{
    margin-top:10px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.ruleList{
    margin:0;
    padding-left:18px;
    display:grid;
    gap:8px;
    color:#111827;
    font-weight:850;
    line-height:1.5;
}

@media (max-width:1100px){
    .postSplit{grid-template-columns: 1fr}
    .postSide{position:relative; top:auto}
    .photoGrid{grid-template-columns: repeat(4, 1fr)}
}
@media (max-width:640px){
    .formGrid{grid-template-columns: 1fr}
    .photoGrid{grid-template-columns: repeat(3, 1fr)}
}

/* ===== Auth صفحات ===== */
.authWrap{
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:16px;
    align-items:flex-start;
}
.authCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:16px;
}
.authHead{
    display:grid;
    gap:8px;
    margin-bottom:12px;
}
.authForm{
    display:grid;
    gap:12px;
}
.authFoot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-top:6px;
}
.authError{
    border:1px solid rgba(185,28,28,.25);
    background: rgba(185,28,28,.06);
    padding:10px 12px;
    border-radius:14px;
    font-weight:900;
    font-size:13px;
    display:grid;
    gap:6px;
}
@media (max-width:1100px){
    .authWrap{grid-template-columns: 1fr}
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.pageHero{padding:18px 0 8px}
.kvkkHero .heroBox{
    background:linear-gradient(135deg, rgba(249,115,22,.14), rgba(251,113,133,.10));
    border:1px solid rgba(17,24,39,.06);
    border-radius:22px;
    box-shadow:0 10px 24px rgba(17,24,39,.08);
    padding:18px;
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    gap:14px;
}
.heroKicker{display:inline-flex;gap:8px;align-items:center;font-weight:800;color:#9a3412;font-size:13px}
.heroTitle{margin:6px 0 6px;font-size:26px;letter-spacing:-.02em}
.heroDesc{margin:0;color:black}
.heroCallout{
    margin-top:12px;
    display:flex;gap:10px;align-items:flex-start;
    background:linear-gradient(135deg, rgba(22,163,74,.10), rgba(17,24,39,.02));
    border:1px solid rgba(22,163,74,.18);
    border-radius:16px;
    padding:12px;
}
.heroCallout .t{font-weight:900}
.heroCallout .d{color:black}

.metaRow{display:flex;gap:8px;flex-wrap:wrap}
.metaPill{
    display:inline-flex;gap:8px;align-items:center;
    padding:8px 10px;border-radius:999px;
    background:rgba(255,255,255,.8);
    border:1px solid rgba(17,24,39,.08);
    font-size:13px;color:black;
}
.btnRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{
    border:1px solid rgba(17,24,39,.10);
    background:#fff;
    border-radius:12px;
    padding:10px 12px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(17,24,39,.06);
}
.btnPrimary{
    border-color:rgba(249,115,22,.35);
    background:linear-gradient(135deg, rgba(249,115,22,.18), rgba(251,113,133,.12));
}

.pageContent{padding:10px 0 56px}
.kvkkGrid{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.kvkkSide{position:sticky;top:16px}
.sideCard{
    background:#fff;border:1px solid rgba(17,24,39,.08);
    border-radius:16px;box-shadow:0 10px 24px rgba(17,24,39,.08);
    overflow:hidden;
}
.sideHead{padding:14px;border-bottom:1px solid #e5e7eb}
.sideTitle{font-weight:900}
.sideDesc{color:#6b7280;font-size:13px;margin-top:6px}
.sideNav{display:flex;flex-direction:column;gap:6px;padding:10px}
.sideLink{
    text-decoration:none;
    padding:10px 10px;
    border-radius:12px;
    color:#6b7280;
    border:1px solid transparent;
}
.sideLink:hover{background:rgba(17,24,39,.03);color:#111827}
.sideLink.active{
    background:rgba(249,115,22,.10);
    border-color:rgba(249,115,22,.20);
    color:#9a3412;
}

.card{
    background:#fff;border:1px solid rgba(17,24,39,.08);
    border-radius:16px;box-shadow:0 10px 24px rgba(17,24,39,.08);
    overflow:hidden;
}
.cardHeader{
    padding:16px;border-bottom:1px solid #e5e7eb;
    display:flex;justify-content:space-between;gap:12px;align-items:flex-start
}
.cardTitle{font-weight:900;font-size:18px}
.cardSub{color:black;font-size:14px;margin-top:6px}
.badgeRow{display:flex;gap:8px;flex-wrap:wrap}
.badge{
    display:inline-flex;gap:8px;align-items:center;
    padding:8px 10px;border-radius:999px;
    background:rgba(17,24,39,.03);
    border:1px solid rgba(17,24,39,.06);
    color:#6b7280;font-size:13px
}
.cardBody{padding:16px}
.kvkkSection{padding:14px 0;border-top:1px solid rgba(17,24,39,.06)}
.kvkkSection:first-child{border-top:0}
.secTitle{margin:0 0 8px;font-size:18px;letter-spacing:-.01em}
.muted{color:#6b7280}
.kvkkList{margin:10px 0 0;padding-left:18px}
.kvkkList li{margin:6px 0}
code{background:rgba(17,24,39,.04);border:1px solid rgba(17,24,39,.06);padding:2px 6px;border-radius:8px}

.acc{margin-top:10px;border:1px solid rgba(17,24,39,.08);border-radius:14px;padding:10px 12px;background:rgba(17,24,39,.02)}
.acc summary{cursor:pointer;font-weight:900;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.accCaret{
    width:28px;height:28px;border-radius:12px;
    display:grid;place-items:center;
    background:rgba(249,115,22,.10);
    border:1px solid rgba(249,115,22,.18);
    color:#9a3412;
}
.accBody{margin-top:10px;color:#6b7280;font-size:14px}

.infoBox{
    margin-top:12px;display:flex;gap:10px;align-items:flex-start;
    background:rgba(249,115,22,.08);
    border:1px solid rgba(249,115,22,.16);
    border-radius:16px;padding:12px;
}
.infoBox .t{font-weight:900}
.infoBox .d{color:#6b7280}

@media (max-width: 980px){
    .kvkkHero .heroBox{grid-template-columns:1fr}
    .kvkkGrid{grid-template-columns:1fr}
    .kvkkSide{position:relative;top:auto}
}
@media print{
    .kvkkSide,.btnRow{display:none !important}
    .pageHero{padding:0}
    .kvkkHero .heroBox,.card{box-shadow:none}
}
.cardHeadText{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.badgeUnderTitle{
    margin-top:6px;
}
/* KVKK sayfasında global .badgeRow/.badge çakışmasın diye ayrı sınıf */
.kvkkPage .kvkkBadgeRow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
    position:static;     /* garanti */
    inset:auto;          /* garanti */
    transform:none;      /* garanti */
}

.kvkkPage .kvkkBadge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background:rgba(17,24,39,.03);
    border:1px solid rgba(17,24,39,.06);
    color:#6b7280;
    font-size:13px;
    position:static;     /* garanti */
    transform:none;      /* garanti */
}
.fRow--switch{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.switch{
    position:relative;
    width:44px;
    height:24px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background:#e5e7eb;
    border-radius:999px;
    transition:.2s;
}

.slider::before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:white;
    border-radius:50%;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
    transition:.2s;
}

.switch input:checked + .slider{
    background:var(--brand);
}

.switch input:checked + .slider::before{
    transform:translateX(20px);
}
/* Kart görsel alanı */
.cardImg{
    width: 100%;
    aspect-ratio: 4 / 3;   /* 1/1 (kare) de yapabilirsin */
    border-radius: 16px 16px 0 0; /* kartın üst köşeleri */
    overflow: hidden;
    background: #e5e7eb;   /* resim yüklenene kadar hoş bir zemin */
}

/* Resmi alana oturt */
.cardImg img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;      /* kırpar, ama taşma olmaz */
    object-position: center;
}

.grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 1100px){
    .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
    .grid{ grid-template-columns: 1fr; }
}
.card{
    display:flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 30px rgba(17,24,39,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
    transform: translateY(-4px);
    border-color: rgba(249,115,22,.25); /* --brand */
    box-shadow: 0 18px 44px rgba(17,24,39,.10);
}

.cardBody{
    padding: 14px 14px 16px;
    display:flex;
    flex-direction: column;
    gap: 8px;
}
.cardTitle{
    font-weight: 800;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -.2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cardMeta{
    color: #475569;
    font-size: 13px;
    line-height: 1.35;
    display:flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cardLoc{
    margin-top: 2px;
    color: black;
    font-size: 15px;
    display:flex;
    align-items:center;
    gap: 6px;
}
.cardLoc::before{
    content:"📍";
    font-size: 13px;
    opacity:.9;
}
.tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(17,24,39,.08);
    background: #fff;
    color:#0f172a;
}

.tag--soft{
    background: rgba(15,23,42,.04);
    border-color: rgba(15,23,42,.06);
    color:#334155;
}
.selectWrap{
    position:relative;
}

.qSelect{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    width:100%;
    padding:12px 42px 12px 14px;
    font-size:14px;
    font-weight:600;

    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    color:#0f172a;

    transition:border-color .2s ease, box-shadow .2s ease;
}

.qSelect:focus{
    outline:none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

/* sağdaki ok */
.selectIcon{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    font-size:14px;
    color:#64748b;
}

/* disabled */
.qSelect:disabled{
    background:#f1f5f9;
    color:#94a3b8;
    cursor:not-allowed;
}
/* Panel */
.filterCard{
    background:#fff;
    border:1px solid rgba(17,24,39,.08);
    border-radius:18px;
    box-shadow: 0 14px 40px rgba(17,24,39,.06);
    padding: 14px;
    position: sticky;
    top: 14px;
}

.filterHead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding: 2px 2px 10px;
    border-bottom:1px solid rgba(15,23,42,.06);
    margin-bottom: 12px;
}

.filterTitle{
    font-weight:900;
    letter-spacing:-.3px;
    font-size:16px;
}

.filterSub{
    margin-top:4px;
    font-size:12px;
    color:black;
    font-weight:700;
}

.link{
    background:transparent;
    border:0;
    color:var(--brand);
    font-weight:800;
    cursor:pointer;
    padding:8px 10px;
    border-radius:12px;
}
.link:hover{ background: rgba(249,115,22,.10); }

.filterForm{ display:flex; flex-direction:column; gap:12px; }

/* Label */
.fLabel{
    display:block;
    font-size:12px;
    font-weight:900;
    color:#334155;
    margin-bottom:6px;
    letter-spacing:.2px;
}
.fLabel--center{ text-align:center; }

/* Search */
.qWrap{
    border:1px solid rgba(15,23,42,.10);
    border-radius:14px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.qWrap--big{ padding: 12px 14px; }

.qIcon{ opacity:.75; }

.qWrap input{
    width:100%;
    border:0;
    outline:0;
    font-size:14px;
    font-weight:700;
    color:#0f172a;
    background:transparent;
}
.qWrap:focus-within{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

.hint{
    margin-top:6px;
    font-size:12px;
    color:#94a3b8;
    text-align:center;
    font-weight:700;
}

/* Select */
.selectWrap{ position:relative; }

.qSelect{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    width:100%;
    padding:12px 42px 12px 14px;
    font-size:14px;
    font-weight:800;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.10);
    background:#fff;
    color:#0f172a;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.qSelect:focus{
    outline:none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.qSelect:disabled{
    background:#f1f5f9;
    color:#94a3b8;
    cursor:not-allowed;
}

.selectIcon{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    color:#64748b;
    font-size:14px;
}

/* Section divider */
.divider{
    height:1px;
    background: rgba(15,23,42,.06);
    margin: 4px 0 0;
}
.fGroupTitle{
    font-size:14px;
    font-weight:900;
    color:black;
    letter-spacing:.3px;
    margin-top:2px;
}

/* Switch rows */
.fRow--switch{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 10px 12px;
    border:1px solid rgba(15,23,42,.06);
    border-radius:14px;
    background: rgba(15,23,42,.02);
}

.switchHint{
    font-size:12px;
    color:black;
    font-weight:700;
    margin-top:2px;
}

/* Buttons */
.filterActions{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    margin-top:4px;
}

.qBtn{
    border-radius:14px;
    padding: 12px 12px;
    font-weight:900;
    border:1px solid rgba(15,23,42,.10);
    cursor:pointer;
}

.qBtn--primary{
    background: var(--brand);
    color:#fff;
    border-color: transparent;
}
.qBtn--primary:hover{ filter: brightness(.98); }

.qBtn--ghost{
    background:#fff;
    color:#0f172a;
}
.qBtn--ghost:hover{ background: rgba(15,23,42,.03); }

/* Chips alanı */
.chips{
    margin-top: 12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
/* Pagination container */
.pager{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top: 18px;
    padding: 10px 0 26px;
}

/* Buttons */
.pBtn{
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    color:#0f172a;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
    box-shadow: 0 8px 22px rgba(17,24,39,.06);
}

.pBtn:hover{
    transform: translateY(-1px);
    border-color: rgba(249,115,22,.35);
    box-shadow: 0 12px 28px rgba(17,24,39,.10);
}

.pBtn:active{ transform: translateY(0); }

/* Active page */
.pBtn.isActive{
    background: var(--brand);
    color:#fff;
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(249,115,22,.22);
}

/* Disabled */
.pBtn:disabled{
    opacity:.45;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}

/* Dots */
.pDots{
    color:#94a3b8;
    font-weight:900;
    padding: 0 4px;
    user-select:none;
}
.searchTop {
    display: flex;
    gap: 10px;
    align-items: center;
}

.searchTop .input {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    border-radius: 10px;
}

.searchTop input {
    border: 0;
    outline: 0;
    min-width: 220px;
}

.searchTop .select {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.searchTop .btn {
    height: 40px;
}
.toastOk, .toastErr{
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 99999;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 18px 40px rgba(17,24,39,.12);
    max-width: 340px;
}

.toastOk{
    background: rgba(22,163,74,.12);
    border: 1px solid rgba(22,163,74,.25);
    color: #14532d;
}

.toastErr{
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.20);
    color: #7f1d1d;
}
/* MOBİL: filtre üstte yapışmasın */
@media (max-width: 1100px){
    .filterCard{
        position: relative !important;
        top: auto !important;
    }
}
@media (max-width: 1100px){
    .listSplit{
        grid-template-columns: 1fr !important;
    }
    .filterCard{
        width: 100%;
        margin-bottom: 12px;
    }
}
/* Mobil filtre drawer + backdrop */
@media (max-width: 1100px){

    /* Mobilde filtre butonu görünür */
    .mFilterBtn{
        display: inline-flex;
        align-items:center;
        justify-content:center;
        width: 100%;
        margin: 8px 0 12px;
        border: 1px solid rgba(17,24,39,.10);
        background: #fff;
        padding: 12px 14px;
        border-radius: 14px;
        font-weight: 900;
        box-shadow: 0 10px 24px rgba(17,24,39,.06);
    }

    /* Desktop'ta bu buton gereksiz */
    /* (desktop için aşağıda ayrıca kapatıyoruz) */

    .mCloseBtn{
        display: inline-flex;
        align-items:center;
        justify-content:center;
        border: 1px solid rgba(17,24,39,.10);
        background: #fff;
        padding: 8px 10px;
        border-radius: 12px;
        font-weight: 900;
        cursor: pointer;
        white-space: nowrap;
    }

    /* backdrop */
    .filterBackdrop{
        position: fixed;
        inset: 0;
        background: rgba(17,24,39,.45);
        opacity: 0;
        pointer-events: none;
        transition: .18s ease;
        z-index: 9998;
    }

    /* filtre panel (kapalı) */
    .filterCard{
        position: fixed !important;
        left: 12px;
        right: 12px;
        top: 70px;      /* header yüksekliğin */
        bottom: 12px;
        z-index: 9999;

        overflow: auto;
        -webkit-overflow-scrolling: touch;

        transform: translateY(10px);
        opacity: 0;
        pointer-events: none;
    }

    /* açıkken */
    body.filter-open .filterCard{
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    body.filter-open .filterBackdrop{
        opacity: 1;
        pointer-events: auto;
    }

    /* body scroll kilitle */
    body.filter-open{
        overflow: hidden;
    }

    /* Mobilde layout tek kolon */
    .listSplit{
        grid-template-columns: 1fr !important;
    }
}

/* Desktop'ta mobil buton/kapat gizli */
@media (min-width: 1101px){
    .mFilterBtn{ display:none; }
    .mCloseBtn{ display:none; }
    .filterBackdrop{ display:none; }
}