/* Hizmet bölgeleri: hero, çapa şeridi ve ilçe etiketleri.
   Mevcut stiller pill / yan görselli hero içermediği için küçük ek. */

.page-hero--bolge .page-hero__row {
  display: flex;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
.page-hero--bolge .page-hero__copy {
  flex: 1 1 28rem;
  min-width: 0;
}
.page-hero--bolge .page-hero__copy p,
.page-hero--bolge > .wrap > p { max-width: 68ch; }
.page-hero--bolge .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.15rem;
}
.page-hero--bolge .page-hero__media {
  flex: 0 0 220px;
  width: 220px;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #111;
}
.page-hero--bolge .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.bolge-jump { padding: 1.35rem 0 0; }

.prose.rehber-article ul.region-pills,
ul.region-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}
.prose.rehber-article ul.region-pills a,
ul.region-pills a {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  background: var(--white);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.prose.rehber-article ul.region-pills a:hover,
ul.region-pills a:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

.service-card .bolge-distance {
  font-weight: 700;
  color: var(--gold-deep);
  margin-bottom: 0.35rem;
}

.cta-band p a { color: var(--gold); }
.cta-band .btn-gold,
.cta-band .btn-gold:hover { color: #111; }

.bolge-regions { padding-top: 0; }

@media (max-width: 767px) {
  .page-hero--bolge .page-hero__row {
    flex-direction: column;
    align-items: stretch;
  }
  .page-hero--bolge .page-hero__copy {
    flex: 1 1 auto;
    width: 100%;
  }
  .page-hero--bolge .page-hero__media {
    flex: none;
    width: 100%;
    height: 260px;
    max-height: 260px;
    aspect-ratio: auto;
  }
  .page-hero--bolge .page-hero__media img {
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: cover;
  }
  .page-hero--bolge .hero-actions .btn { flex: 1 1 auto; }
}