/* Business list on category and city pages (site/category.js). Cards and
 * chips are the home directory's (directory.css); this adds the grid, the
 * heading and the tokens those rules read from `.discover`. */
.cat-list { --d-line: #E3EBED; --d-muted: #6B7A7E; --d-card: #FFFFFF; padding: 0 0 .5rem; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cat-head h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: #1A1A2E; }
.cat-head p { margin: 0; font-size: .9rem; color: var(--d-muted); font-weight: 600; }
.cat-chips { margin: 0 0 .9rem; padding: .2rem 0 .4rem; }
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.cat-grid > li { min-width: 0; }
.cat-foot { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 1.2rem 0 0; font-size: .9rem; font-weight: 700; }
.cat-foot a { color: #00747F; text-decoration: none; }
.cat-foot a:hover { text-decoration: underline; }
.cat-list .d-state { padding: 2rem 1rem; }
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .cat-head h2 { font-size: 1.25rem; }
}

/* Landing-page hero (category and city pages): breadcrumb, a category banner, a short title */
.hero.container { padding: 22px 0 10px; }
.crumb { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: #6B7A7E; margin-bottom: 14px; }
.crumb a { color: #4B5A60; text-decoration: none; font-weight: 600; }
.crumb a:hover { text-decoration: underline; }
.crumb span:last-child { color: #1A1A2E; font-weight: 700; }
.cat-hero { position: relative; height: 260px; border-radius: 22px; overflow: hidden; margin-bottom: 22px; background: var(--tint, #1A1A2E) center 45% / cover no-repeat; }
/* One photo per category (assets/categories, Unsplash licence); the tint only shades the
 * left edge so the icon badge reads, the photo carries the rest. */
.cat-hero.cover-berber { background-image: image-set(url('/assets/categories/berber.webp') type('image/webp'), url('/assets/categories/berber.jpg') type('image/jpeg')); }
.cat-hero.cover-kuafor { background-image: image-set(url('/assets/categories/kuafor.webp') type('image/webp'), url('/assets/categories/kuafor.jpg') type('image/jpeg')); }
.cat-hero.cover-guzellik { background-image: image-set(url('/assets/categories/guzellik.webp') type('image/webp'), url('/assets/categories/guzellik.jpg') type('image/jpeg')); }
.cat-hero.cover-spa { background-image: image-set(url('/assets/categories/spa.webp') type('image/webp'), url('/assets/categories/spa.jpg') type('image/jpeg')); }
.cat-hero.cover-spor { background-image: image-set(url('/assets/categories/spor.webp') type('image/webp'), url('/assets/categories/spor.jpg') type('image/jpeg')); }
.cat-hero.cover-saglik { background-image: image-set(url('/assets/categories/saglik.webp') type('image/webp'), url('/assets/categories/saglik.jpg') type('image/jpeg')); }
.cat-hero:not([class*="cover-"]) { background-image: image-set(url('/assets/optimized/background-v2-1920.webp') type('image/webp'), url('/assets/background-v2-1920.jpg') type('image/jpeg')); }
.cat-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--tint, #1A1A2E) 72%, transparent) 0%, color-mix(in srgb, var(--tint, #1A1A2E) 30%, transparent) 40%, rgba(26,26,46,.08) 75%, transparent 100%); }
.cat-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(26,26,46,.28) 100%); }
.cat-hero-icon { position: absolute; left: 28px; bottom: 26px; width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 2.2rem; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 .5rem; }
.hero .lead { font-size: 1.05rem; margin: 0 0 1.4rem; max-width: 720px; }
@media (max-width: 760px) {
  .hero.container { padding: 14px 0 6px; }
  .cat-hero { height: 170px; border-radius: 18px; margin-bottom: 16px; }
  .cat-hero-icon { left: 16px; bottom: 16px; width: 64px; height: 64px; border-radius: 18px; font-size: 1.7rem; }
  .hero .lead { font-size: .98rem; }
}

/* /kategoriler: one card per category group (photo, live count, sub-category chips) */
.kg { --d-line: #E3EBED; --d-muted: #6B7A7E; padding: 0 0 1.5rem; }
.kg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.kg-card { background: #fff; border: 1px solid #E3EBED; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 18px rgba(10,30,35,.06); transition: transform .15s, box-shadow .15s; }
.kg-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10,30,35,.12); }
.kg-cover { position: relative; display: block; aspect-ratio: 16 / 8; background: var(--tint, #1A1A2E) center 45% / cover no-repeat; }
.kg-cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--tint, #1A1A2E) 70%, transparent) 0%, color-mix(in srgb, var(--tint, #1A1A2E) 25%, transparent) 45%, transparent 80%); }
.kg-cover.cover-berber { background-image: image-set(url('/assets/categories/berber.webp') type('image/webp'), url('/assets/categories/berber.jpg') type('image/jpeg')); }
.kg-cover.cover-kuafor { background-image: image-set(url('/assets/categories/kuafor.webp') type('image/webp'), url('/assets/categories/kuafor.jpg') type('image/jpeg')); }
.kg-cover.cover-guzellik { background-image: image-set(url('/assets/categories/guzellik.webp') type('image/webp'), url('/assets/categories/guzellik.jpg') type('image/jpeg')); }
.kg-cover.cover-spa { background-image: image-set(url('/assets/categories/spa.webp') type('image/webp'), url('/assets/categories/spa.jpg') type('image/jpeg')); }
.kg-cover.cover-spor { background-image: image-set(url('/assets/categories/spor.webp') type('image/webp'), url('/assets/categories/spor.jpg') type('image/jpeg')); }
.kg-cover.cover-saglik { background-image: image-set(url('/assets/categories/saglik.webp') type('image/webp'), url('/assets/categories/saglik.jpg') type('image/jpeg')); }
.kg-icon { position: absolute; left: 16px; bottom: 14px; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 1.35rem; }
.kg-body { padding: 14px 16px 16px; }
.kg-body h2 { margin: 0 0 2px; font-size: 1.2rem; font-weight: 800; }
.kg-body h2 a { color: #1A1A2E; text-decoration: none; }
.kg-body h2 a:hover { text-decoration: underline; }
.kg-count { margin: 0 0 10px; font-size: .88rem; color: var(--d-muted); font-weight: 600; min-height: 1.2em; }
.kg-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kg-subs .d-chip { text-decoration: none; }
.kg-more { font-weight: 700; color: #00747F; text-decoration: none; font-size: .92rem; }
.kg-more:hover { text-decoration: underline; }
.kg-foot { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 1.4rem 0 0; font-size: .92rem; font-weight: 700; }
.kg-foot a { color: #00747F; text-decoration: none; }
.kg-foot a:hover { text-decoration: underline; }
@media (max-width: 600px) { .kg-grid { grid-template-columns: 1fr; gap: .8rem; } }