/* includes/explore/search.web.css
 * Desktop (≥900px) full search-results page (views_search_web.php).
 * The card grid + header/footer come from home.web.css + listing.web.css;
 * these are just the query title / count / empty states.  The drop-down
 * search PANEL lives in home.web.css (.web-srch*). */

.web-search__q { color: #FF501C; }

.web-search__count {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b6b6b;
}

.web-search__hint {
  padding: 48px 0;
  color: #6b6b6b;
  font-size: 15px;
}

.web-search__none {
  padding: 64px 0;
  text-align: center;
}
.web-search__none-title {
  font-size: 20px;
  font-weight: 700;
  color: #16171B;
}
.web-search__none-sub {
  margin-top: 8px;
  font-size: 14px;
  color: #6b6b6b;
}

/* Empty-state browse (no query): Trend etiketler + Popüler section titles.
 * Light page (unlike the dark drop-down panel).
 * Centered on the same 1312px container as .web-listing__cathead/__grid so the
 * titles line up with the page title and card grid (not flush to the edge). */
/* Only the DIRECT children of .web-listing get the container treatment (the
 * standalone "Popüler" title + the chips wrapper). The "Trend etiketler" title
 * lives inside .web-search__chips-sec, so it inherits that wrapper's alignment
 * and must NOT get its own padding (would double-indent at ≤1280px). */
.web-listing > .web-search__section-title,
.web-search__chips-sec {
  max-width: 1312px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;    /* mirror .web-listing__grid so titles/chips sit right above the cards */
  padding-right: 24px;
}
.web-search__section-title {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #16171B;
}
.web-search__chips-sec { margin-bottom: 28px; }
.web-search__chips { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1280px) {
  .web-listing > .web-search__section-title,
  .web-search__chips-sec { max-width: 100%; }
}
.web-search__chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 99px;
  border: 1px solid #d9d6d0;
  background: #fff;
  color: #16171B;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.web-search__chip:hover { background: #f4f2ee; border-color: #b9b6b0; }