:root{--b:#0f172a;--m:#64748b;--bg:#f6f7fb;--c:#ffffff;--br:14px}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--b)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:18px}
.topbar{display:flex;gap:16px;justify-content:space-between;align-items:center;background:var(--c);border-radius:var(--br);padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.title{font-weight:800;font-size:18px}
.subtitle{color:var(--m);font-size:13px;margin-top:4px}
.search{display:flex;gap:10px;align-items:center}
.search input{width:320px;max-width:42vw;padding:10px 12px;border-radius:12px;border:1px solid rgba(15,23,42,.12);outline:none}
.search button,.btn{padding:10px 12px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:#0f172a;color:#fff;cursor:pointer}
.btn.ghost{background:transparent;color:var(--b)}
.actions{display:flex;gap:10px;align-items:center}

.layout{display:grid;grid-template-columns:290px 1fr;gap:16px;margin-top:16px}
@media(max-width:980px){.layout{grid-template-columns:1fr}.search input{width:100%}}

.filters{background:var(--c);border-radius:var(--br);padding:14px;box-shadow:0 8px 20px rgba(15,23,42,.06);height:fit-content}
.filter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.filter-title{font-weight:800}
.mini{font-size:12px;color:var(--m)}
.filter-block{border-top:1px solid rgba(15,23,42,.08);padding-top:12px;margin-top:12px}
.filter-label{font-weight:700;margin-bottom:8px}
.filter-options{display:flex;flex-wrap:wrap;gap:8px;max-height:190px;overflow:auto;padding-right:6px}
.opt{font-size:12px;padding:7px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);background:#fff}
.opt.active{background:#0f172a;color:#fff;border-color:#0f172a}

.content{background:var(--c);border-radius:var(--br);padding:14px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.meta{display:flex;justify-content:space-between;align-items:center;color:var(--m);font-size:13px;margin-bottom:12px}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid{grid-template-columns:repeat(1,1fr)}}

.card{border:1px solid rgba(15,23,42,.08);border-radius:16px;overflow:hidden;background:#fff}
.thumb{display:block;aspect-ratio:4/3;background:#eef2ff}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%}
.body{padding:12px}
.name{font-weight:800;font-size:14px}
.brandline{color:var(--m);font-size:12px;margin-top:4px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.badge{font-size:11px;padding:5px 8px;border-radius:999px;background:rgba(15,23,42,.06);color:var(--b)}

.pager{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.footer{margin-top:16px;color:var(--m);font-size:12px;text-align:center}

.detail{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.box{background:#fff;border-radius:var(--br);padding:14px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.box-title{font-weight:800;margin-bottom:10px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
@media(max-width:980px){.hero{grid-template-columns:1fr}}
.hero-img{background:#fff;border-radius:var(--br);overflow:hidden;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.hero-img img{width:100%;height:auto;display:block}
.hero-info{display:flex;flex-direction:column;gap:14px}
.specs{display:flex;flex-direction:column;gap:8px}
.spec{display:flex;justify-content:space-between;gap:12px;padding:10px;border:1px solid rgba(15,23,42,.08);border-radius:12px}
.spec span{color:var(--m)}
.links{margin:0;padding-left:16px}
.links li{margin:6px 0}
.gal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media(max-width:980px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal img{width:100%;height:110px;object-fit:cover;border-radius:12px;border:1px solid rgba(15,23,42,.08)}
.desc{color:#0f172a;line-height:1.55}
/* Filter search input */
.filter-search{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  margin:8px 0 10px;
  outline:none;
}

/* Header overlay fix: body padding JS ile verilecek */
.wbrd-page{ padding-top: var(--wbrd-header-offset, 0px); }
.wbrd-wrap{ margin-top: 18px; }

/* AJAX loading indicator */
#wbrd-results.wbrd-loading{ opacity:.55; pointer-events:none; }