/* =====================================================================
   listing.web.css — Desktop (≥900px) listing page (Sesli Kitaplar /
   E-Kitaplar / Seçkiler / Kategoriler …).

   Loads on top of home.web.css and reuses .web-card / .web-btn from
   there. Only listing-specific elements are defined below.
   ===================================================================== */

.web-listing {
  background: #FFFBFA;
  /* Keep the listing area tall enough that short result sets don't
     leave the footer crammed right under the cards. */
  min-height: 80vh;
  padding-bottom: 96px;
}

/* ---- Hero banner (colored panel + diagonal image) ------------------
   The colored background goes edge-to-edge across the viewport, but the
   text + image SIT inside a 1376-wide centered container so the title
   lines up with the logo (left) and the image's right edge lines up
   with the filter button (right). */
.web-listing__hero {
  background: var(--listing-hero-bg, #EBEAE6);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.web-listing__hero-inner {
  max-width: 1312px;
  margin: 0 auto;
  min-height: 280px;
  display: flex;
  align-items: stretch;
  position: relative;
}
.web-listing__hero-text {
  flex: 0 0 auto;
  width: 50%;
  padding: 56px 24px 56px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  color: #101010;
  position: relative;
  z-index: 2;
}
.web-listing__hero-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.web-listing__hero-subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
  color: #2A2A2A;
}
.web-listing__hero-image {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  /* Steep diagonal slice on the left edge — top starts further right
     and slopes down to the bottom-left corner of the image area. */
  clip-path: polygon(180px 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.web-listing__hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Breadcrumb + filter bar -------------------------------------- */
.web-listing__bar {
  max-width: 1312px;
  margin: 0 auto;
  padding: 24px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.web-listing__crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #5C5C5C;
}
.web-listing__crumb a {
  color: #5C5C5C;
  text-decoration: none;
}
.web-listing__crumb a:hover { text-decoration: underline; }
.web-listing__crumb-sep {
  color: #B8B6B2;
  font-size: 16px;
}

.web-listing__filter {
  background: #fff;
  border: 1px solid #D3D2D0;
  border-radius: 999px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #101010;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.web-listing__filter:hover {
  border-color: #101010;
  background: #FFFBFA;
}

/* ---- Card grid: 6 cols × 192px = 1152 + 5×24 gap = 1272 → using
        auto-fill so it wraps gracefully at smaller widths --------------- */
.web-listing__grid {
  max-width: 1312px;
  margin: 8px auto 32px;
  display: grid;
  grid-template-columns: repeat(6, 192px);
  row-gap: 48px;
  column-gap: 24px;
  justify-content: start;
  align-content: start;
  padding-left: 24px;
}

/* Cards inherit .web-card styling from home.web.css. */

/* ---- Show more button (only renders when hasMore == true) -------- */
.web-listing__more {
  max-width: 1200px;
  margin: 32px auto 0;
  display: flex;
  justify-content: center;
}

/* No-op kept for backward compat with the markup. Padding-bottom on
   .web-listing handles the breathing room. */
.web-listing__bottom-spacer { display: none; }

/* ---- Responsive fallback ------------------------------------------ */
@media (max-width: 1280px) {
  .web-listing__hero-inner,
  .web-listing__bar,
  .web-listing__grid,
  .web-listing__more { padding-left: 24px; padding-right: 24px; max-width: 100%; }
  .web-listing__grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    justify-items: center;
  }
}
@media (max-width: 1024px) {
  .web-listing__hero-title { font-size: 44px; }
  .web-listing__hero-image { width: 50%; }
}