/* ═══════════════════════════════════════════════════
   pages/hub.css — İl / İlçe / Hizmet landing sayfaları
   (/{il}/, /{il}/{hizmet}/, /{il}/{ilce}/, /{il}/{ilce}/{hizmet}/)
═══════════════════════════════════════════════════ */

/* ── Page Hero ── */
.page-hero {
  padding: 148px var(--space-xl) 90px;
  background: var(--black);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border-card);
}
.page-hero .grid-bg::before { z-index: 0; }

.page-hero h1 {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  line-height: 0.92; letter-spacing: 0.02em;
  color: var(--white); max-width: 800px; margin-bottom: 24px;
}
.page-hero h1 .accent { color: var(--yellow); }

.page-hero .hero-lead {
  position: relative; z-index: 1;
  font-size: 1.1rem; color: #bbb; font-weight: 300;
  max-width: 580px; margin-bottom: 36px; line-height: 1.8;
}
.hero-ctas {
  position: relative; z-index: 1;
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* ── Content Wrap ── */
.content-wrap {
  max-width: 860px; margin: 0 auto;
  padding: 80px var(--space-xl);
}
.content-section { margin-bottom: 72px; }

/* ── Map section ── */
.map-section {
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}
.map-header {
  padding: 48px var(--space-xl) 24px;
  background: var(--dark);
}
.map-header .section-tag { margin-bottom: 10px; }
.map-header h2 {
  font-family: var(--font-display); font-size: 2rem;
  color: var(--white); letter-spacing: 0.04em; margin-bottom: 6px;
}
.map-header p { font-size: 0.9rem; color: var(--gray); font-weight: 300; margin: 0 0 24px; }

/* ── Blog section ── */
.blog-section {
  background: var(--dark);
  padding: 60px var(--space-xl);
}
.blog-section .section-tag { margin-bottom: 14px; }
.blog-section h2 {
  font-family: var(--font-display); font-size: 2rem;
  color: var(--white); margin-bottom: 28px; letter-spacing: 0.04em;
}

/* ── Hub grid varyasyonları ── */

/* İl hub: ilçe grid (2-kolon) */
.ilce-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 3px; margin-top: 28px;
}
.ilce-hub-card {
  display: block; background: var(--dark2); padding: 22px 20px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-slow), background var(--t-slow);
}
.ilce-hub-card:hover { border-bottom-color: var(--yellow); background: #1e1e1e; }
.ilce-hub-name {
  font-family: var(--font-display); font-size: 1.2rem;
  letter-spacing: 0.04em; color: var(--white); margin-bottom: 4px;
}
.ilce-hub-desc { font-size: 0.78rem; color: var(--gray); }

/* Hizmet listesi (il veya ilçe altında) */
.hizmet-list-grid-wrap {
  max-height: 360px;
  overflow-y: auto;
  margin-top: 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) var(--dark2);
}
.hizmet-list-grid-wrap::-webkit-scrollbar { width: 4px; }
.hizmet-list-grid-wrap::-webkit-scrollbar-track { background: var(--dark2); }
.hizmet-list-grid-wrap::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 2px; }
.hizmet-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.hizmet-list-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--dark2); padding: 16px 18px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: border-color var(--t-slow), background var(--t-slow);
}
.hizmet-list-card:hover,
.hizmet-list-card.active { border-left-color: var(--yellow); background: #1e1e1e; }
.hlm-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.hlm-title {
  font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: 0.04em; color: var(--white); margin-bottom: 4px;
}
.hlm-desc { font-size: 0.78rem; color: var(--gray); line-height: 1.5; }
.hizmet-list-card.active .hlm-title { color: var(--yellow); }

/* ── Responsive hub ── */
@media (max-width: 900px) {
  .page-hero       { padding: 108px 20px 60px; }
  .content-wrap    { padding: 60px 20px; }
  .map-header      { padding: 40px 20px 20px; }
  .blog-section    { padding-left: 20px; padding-right: 20px; }
  .ilce-hub-grid   { grid-template-columns: repeat(2, 1fr); }
  .hizmet-list-grid { grid-template-columns: 1fr; }
  .hizmet-list-grid-wrap { max-height: 300px; }
}