/* Shared base of search.css: the rules every theme has in common. ThemeAssetTagHelper links this file right before the
   theme's own search.css, so a theme rule wins on equal specificity. A fix for all themes goes here; a theme-only change
   goes into the theme's file (Themes/README.md, "Ortak CSS tabanı"). */

/* Header search type-ahead (search.js). Fixed-position panel under the search box: never shifts the layout. */
.search-suggest[hidden] { display: none; }
.search-suggest ul { list-style: none; margin: 0; padding: 0; }
.search-suggest .sg-head { padding: 10px 10px 4px; font-size: 12px; font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.search-suggest .sg-item a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none;
}
.search-suggest .sg-item a:hover,
.search-suggest .sg-item[aria-selected="true"] a { background: var(--surface); }
.search-suggest .sg-item[aria-selected="true"] a { box-shadow: inset 3px 0 0 var(--action, var(--brand)); }
.search-suggest .sg-body { display: flex; flex-direction: column; min-width: 0; }
.search-suggest .sg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold, 600); }
.search-suggest .sg-category .sg-name { font-weight: 400; }
.search-suggest .sg-meta { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.search-suggest .sg-price { color: var(--action, var(--brand)); font-weight: var(--fw-bold, 700); }
.search-suggest .sg-old { color: var(--muted); }
.search-suggest .sg-out { color: var(--muted); }
.search-suggest .sg-empty { padding: 12px 10px; color: var(--muted); }
.search-suggest .sg-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.search-suggest .sg-all a { justify-content: center; color: var(--action, var(--brand)); font-weight: var(--fw-bold, 700); }

/* "Bunu mu demek istediniz?" on the search results page. */
.did-you-mean { margin: -4px 0 16px; color: var(--ink-2); }
.did-you-mean a { color: var(--action, var(--brand)); font-weight: var(--fw-bold, 700); text-decoration: underline; text-underline-offset: 2px; }

/* Search without results (Catalog/_Empty): heading, the query in a search box, "Şunları denediniz mi?" / category chips and a
   product row. Left-aligned on top of the themes' centered .empty (Zarif centers it again in its search.css). */
.empty.empty-search-state { text-align: left; align-items: stretch; gap: 24px; padding: 32px 0 48px; }
.empty-search-state .ess-head { display: flex; flex-direction: column; gap: 6px; }
.empty-search-state .ess-head h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; overflow-wrap: anywhere; }
.empty-search-state .ess-head p { margin: 0; }
.empty-search-state .search.empty-search { width: 100%; max-width: 560px; }
.empty-search-state .search.empty-search input { flex: 1; width: auto; min-width: 0; min-height: 44px; }
.empty-search-state .search.empty-search .btn { min-height: 44px; flex-shrink: 0; }
.empty-search-state .ess-group { display: flex; flex-direction: column; gap: 10px; }
.empty-search-state .ess-label { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: var(--fw-bold, 700); color: var(--ink); }
.empty-search-state .ess-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.empty-search-state .ess-chips .chip { text-decoration: none; }
.empty-search-state .ess-products { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.empty-search-state .ess-title { margin: 0; font-size: 20px; line-height: 1.25; }
/* One row of four; two columns on phones (the themes' grid already drops to two under 1024px). */
.empty-search-state .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .empty-search-state .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .empty.empty-search-state { padding: 20px 0 32px; gap: 20px; }
  .empty-search-state .ess-chips .chip { min-height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  .search-suggest:not([hidden]) { animation: sg-in .12s ease-out; }
  @keyframes sg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}