/* Storefront browsing pages (home, listing, product, CMS, errors). Complements site.css. */

/* Home */
.hero-tile .tile-title { font-size: 26px; font-weight: 700; }
.strip { position: relative; overflow: hidden; border-radius: 20px; background: var(--ink); color: #fff;
  padding: 40px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
@media (max-width: 720px) { .strip { padding: 28px 24px; } }

/* Product card */
.product-card .media { display: block; }
.product-card .media .ph img { transition: transform .3s ease; }
.product-card:hover .media .ph img { transform: scale(1.03); }
.product-card .card-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); }
.product-card .card-badges .badge { position: static; }
.product-card .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.product-card .btn-round { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .product-card .media .ph img { transition: none; } }

/* Listing */
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); font-weight: 600; }
.chip:hover { background: var(--ink); color: #fff; }

/* Product page */
.pdp-price .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }

/* Errors */
.error-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 12vw, 120px); line-height: 1; color: var(--action); }
/* Phones: the home button and the 404 search stack full width (side by side the search field was too narrow to type in). */
@media (max-width: 520px) {
  .error-page .row { flex-direction: column; align-items: stretch; align-self: stretch; }
  .error-page .row > .btn, .error-search { width: 100%; }
  .error-search { flex: none; }
  .error-search input { flex: 1; width: auto; }
}

/* Collections */
.listing-hero { border-radius: 20px; overflow: hidden; background: var(--surface); aspect-ratio: 16 / 5; margin-bottom: 24px; }
@media (max-width: 720px) { .listing-hero { aspect-ratio: 16 / 7; } }
.collection-initial { font-family: var(--font-display); font-weight: 700; font-size: 64px; color: var(--action); }
.collection-text .display { font-size: 22px; font-weight: 600; }

/* Product page: video, rating, tags, qty hint */
.stars > span { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); overflow: hidden; color: #B7862B; }
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tag:hover { background: var(--ink); color: #fff; }

/* Stock alert */
.stock-alert { border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }

/* Installments */
.pdp-installments { border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; }
.pdp-installments > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 8px; }

/* Reviews & questions */
.review-avg { font-size: 40px; font-weight: 700; line-height: 1; }
.review-form-wrap { border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.qa-form { border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.rate-stars label { font-size: 32px; line-height: 1; color: var(--field); cursor: pointer; padding: 4px; border-radius: 8px; }

/* Phones: the sort menu keeps its visible "Sırala" caption in the results toolbar (usta.css .list-toolbar: one row, wraps
   when narrow); the value alone ("Önerilen") did not say what it is. */

/* Contact form: /iletisim page and the page builder section */
.pb-contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; background: var(--surface); border-radius: 20px; padding: 40px; }
@media (max-width: 900px) {
  .contact-page, .pb-contact { grid-template-columns: 1fr; gap: 24px; }
  .pb-contact { padding: 28px 20px; }
}

/* Compare page (ProductLists/Compare + premium.js). Desktop: table with the attribute names in the first column; phones: product
   columns of 160px scroll sideways, each attribute name stays above its values, add-to-cart buttons in a bar at the bottom. */
.cmp-head h1 { font-size: 48px; font-weight: 700; }
.cmp-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.cmp-table td.diff { font-weight: 700; }
.cmp-product > * + * { margin-top: 10px; }
.cmp-norows { margin: 0; padding: 16px; border-top: 1px solid var(--line); }
.cmp-note { margin: 16px 0 0; font-size: 14px; }
.cmp-empty { text-align: center; padding: 64px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 20px; }
@media (max-width: 720px) {
  .cmp-head { margin: 4px 0 12px; align-items: center; gap: 8px 12px; }
  .cmp-head:has(+ .cmp-empty) { margin-bottom: 24px; }
  .cmp-head h1 { font-size: 24px; }
  .cmp-scroll { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .cmp-product > * + * { margin-top: 6px; }
  /* The heading takes the whole first line (values always start under the first column); its text stays in view while scrolling. */
  .cmp-cartbar .btn { min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
}

/* Filter groups (base browse.css "Collapsible filter groups"): the summary carries the former legend's title style; the
   ruled rows of usta.css keep their top line, the summary gives the height (details.filter-group beats usta.css). */
details.filter-group { padding: 0; }
.filter-group > summary { font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.filter-fields { gap: 2px; }