/* Hizmet Bölgeleri (/hizmet-bolgelerimiz/…) — yalnız bu sayfalara özel parçalar.
   Temel: hizmet-ortak.css + hizmet-genis.css (hizmet sayfalarıyla aynı dil). Ölçü
   kuralı aynı: masaüstünde cqw + max() tabanı, 900px altında min()/clamp().
   İkincil metin tonları site kuralına göre (koyu zeminde --sv-dim, açık zeminde
   .zx-light'ın kendi --sv-dim'i). Sayfaları _source/build-hizmet-bolgeleri.mjs üretir. */

.hb-root select.zx-inp { cursor: pointer; padding-right: 2.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.2em center; background-size: 1.1em; }
.hb-root select.zx-inp:disabled { opacity: 0.5; cursor: not-allowed; }
.hb-root select.zx-inp option { color: #0c0c0c; background: #ffffff; }

/* ── açılış ──────────────────────────────────────────────────────────── */
.hb-hero-grid { align-items: center; }
.hb-destek { color: var(--sv-dim); }
.hb-cta { display: flex; flex-wrap: wrap; gap: max(0.9cqw, 12px); margin-top: max(2cqw, 22px); }
.hb-ofis { margin-top: max(1.6cqw, 18px); display: grid; gap: 0.4cqw; }
.hb-ofis li { font-size: max(0.85cqw, 12px); line-height: 1.5; color: var(--sv-dim); }
.hb-ofis .sv-mono { color: var(--sv-ac); margin-right: 0.4em; }

/* Seçici kartı: .zx-call'un camı, iki kolonlu ızgarası değil */
.hb-secici { display: block; padding: max(1.8cqw, 22px); cursor: auto; }
.hb-secici-form { display: flex; flex-direction: column; gap: max(1.1cqw, 14px); }
.hb-secici-bas { margin: 0; }
.hb-secici-hata { color: #ff9d9d; font-size: max(0.85cqw, 12px); }
.hb-secici-dugme { align-self: flex-start; margin-top: 0.3cqw; }

/* ── sayfa içi hızlı erişim ──────────────────────────────────────────── */
.hb-subnav .zx-chip { white-space: nowrap; }

/* ── hizmet grupları ─────────────────────────────────────────────────── */
.hb-grup-bas { max-width: 62cqw; }
.hb-grup-bas .zx-h2 { max-width: none; }
.hb-grup + .hb-grup { padding-top: 0; }
.hb-hizmetler { display: grid; gap: 1.2cqw; margin-top: 2.6cqw; grid-template-columns: repeat(2, 1fr); }
.hb-hizmetler.hb-n1 { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
.hb-hizmetler.hb-n5 { grid-template-columns: repeat(3, 1fr); }
.hb-hizmet { gap: max(1cqw, 12px); }
.hb-hizmet .zx-sm { font-size: max(1.02cqw, 14px); line-height: 1.62; color: var(--sv-dim); }
.hb-bag { display: inline-flex; align-items: center; gap: 0.5em; margin-top: auto; padding-top: 0.4cqw;
  font-size: max(0.95cqw, 13.5px); color: #ffffff; border-bottom: 1px solid var(--sv-ac); }
.sv-root .hb-bag:hover { color: var(--sv-ac); }
.hb-bag svg { width: 1.05em; height: 1.05em; flex: none; transition: transform .3s ease; }
.hb-bag:hover svg { transform: translateX(3px); }

/* ── projeler ────────────────────────────────────────────────────────── */
.hb-proje-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-top: 2.6cqw; }
.hb-proje-liste a { display: flex; flex-direction: column; gap: 0.5cqw; height: 100%; padding: 1.5cqw;
  border-radius: 0.62cqw; background: rgba(240,240,240,0.035); box-shadow: inset 0 0 0 1px var(--sv-line);
  transition: background .3s ease; }
.hb-proje-liste a:hover { background: rgba(240,240,240,0.07); }
.hb-proje-liste b { font-family: 'Afacad Flux', 'Jost', sans-serif; font-weight: 500; font-size: max(1.15cqw, 16px); line-height: 1.25; }
.hb-proje-liste .zx-sm { color: var(--sv-dim); }
.hb-projeler-dugme { margin-top: 2.2cqw; }

/* ── süreç ───────────────────────────────────────────────────────────── */
.hb-surec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; margin-top: 2.8cqw; }
.hb-adim { display: flex; flex-direction: column; gap: 0.8cqw; padding-top: 1.2cqw; border-top: 1px solid var(--sv-line); }
.hb-adim-no { color: var(--sv-dim); }
.hb-adim .zx-sm { color: var(--sv-dim); }

/* ── form ────────────────────────────────────────────────────────────── */
.hb-form-izgara { display: grid; grid-template-columns: 40fr 52fr; column-gap: 6cqw; align-items: start; }
.hb-form-giris .zx-p { margin-top: 1.2cqw; color: var(--sv-dim); }
.hb-kanal { margin-top: 2cqw; display: grid; gap: 0.6cqw; }
.hb-kanal a { font-size: max(1.1cqw, 15px); border-bottom: 1px solid var(--sv-line); }
.sv-root .hb-kanal a:hover { color: var(--sv-ac); }
.hb-form-alan { display: flex; flex-direction: column; align-items: flex-start; gap: max(1.4cqw, 16px); }
.hb-form-konum { color: var(--sv-dim); }
.hb-form-konum b { color: #ffffff; font-weight: 500; }

/* ── konum listeleri (il listesi, ilçe listesi) ──────────────────────── */
.hb-bolge { border-top: 1px solid var(--sv-line); }
.hb-bolge-bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1cqw 3cqw; }
.hb-bolge-bas .zx-head-eyebrow { margin: 0; }
.hb-bolge-don { display: flex; flex-wrap: wrap; gap: 0.6cqw 2cqw; }
.hb-bolge-don a { font-size: max(0.95cqw, 13.5px); border-bottom: 1px solid var(--sv-line); }
.sv-root .hb-bolge-don a:hover { color: var(--sv-ac); }
.hb-liste-kap { margin-top: 2cqw; }
.hb-suz { max-width: 26cqw; margin-bottom: 1.6cqw; }
.hb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(13cqw, 150px), 1fr)); gap: 0 2cqw; }
.hb-liste li { border-bottom: 1px solid var(--sv-line); }
.hb-liste li[hidden] { display: none; }
.hb-liste a { display: block; padding: max(0.7cqw, 10px) 0; font-size: max(1cqw, 14px); }
.sv-root .hb-liste a:hover { color: var(--sv-ac); }
.hb-liste a[aria-current="page"] { color: var(--sv-ac); }
.hb-suz-yok { margin-top: 1cqw; color: var(--sv-dim); }

/* ── ana sayfa: hizmet özeti ─────────────────────────────────────────── */
.hb-hizmet-ozet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-top: 2.6cqw; }
.hb-hizmet-ozet .zx-h4 a { border-bottom: 1px solid var(--sv-ac); }
.hb-hizmet-ozet .zx-sm { color: var(--sv-dim); }

@media (max-width: 900px) {
  .hb-cta { gap: min(3cqw, 14px); margin-top: min(7cqw, 33px); }
  .hb-cta .sv-btn { min-height: 44px; }
  .hb-ofis { margin-top: min(6cqw, 29px); gap: min(2cqw, 10px); }
  .hb-ofis li { font-size: clamp(12px, 3.3cqw, 15.5px); }
  .hb-secici { padding: min(6cqw, 29px); border-radius: min(3cqw, 14.5px); }
  .hb-secici-form { gap: min(4.5cqw, 21px); }
  .hb-root select.zx-inp { font-size: max(16px, 4cqw); min-height: 44px; }
  .hb-secici-hata { font-size: clamp(12px, 3.4cqw, 15px); }

  .hb-grup-bas { max-width: none; }
  .hb-hizmetler, .hb-hizmetler.hb-n1, .hb-hizmetler.hb-n5,
  .hb-proje-liste, .hb-surec, .hb-hizmet-ozet { grid-template-columns: 1fr; gap: min(3.4cqw, 16px); margin-top: min(7cqw, 33px); }
  .hb-hizmet { gap: min(3.4cqw, 16px); }
  .hb-hizmet .zx-sm { font-size: clamp(14px, 3.9cqw, 18px); }
  .hb-bag { font-size: clamp(14px, 3.8cqw, 17px); padding: 10px 0 6px; }
  .hb-proje-liste a { padding: min(5.5cqw, 26px); border-radius: min(2.4cqw, 11.5px); gap: min(2cqw, 10px); }
  .hb-proje-liste b { font-size: clamp(16px, 4.6cqw, 21px); }
  .hb-projeler-dugme { margin-top: min(7cqw, 33px); }
  .hb-adim { gap: min(2.6cqw, 12.5px); padding-top: min(4.5cqw, 21px); }

  .hb-form-izgara { grid-template-columns: 1fr; row-gap: min(9cqw, 43px); }
  .hb-form-giris .zx-p { margin-top: min(4cqw, 19px); }
  .hb-kanal { margin-top: min(6cqw, 29px); gap: min(2.6cqw, 12.5px); }
  .hb-kanal a { font-size: clamp(15px, 4.2cqw, 19px); display: inline-block; padding: 8px 0; }
  .hb-form-alan { gap: min(5cqw, 24px); }

  .hb-bolge-bas { gap: min(3cqw, 14px); }
  .hb-bolge-don { gap: min(2cqw, 10px) min(6cqw, 29px); }
  .hb-bolge-don a { font-size: clamp(14px, 3.8cqw, 17px); display: inline-block; padding: 10px 0; }
  .hb-liste-kap { margin-top: min(6cqw, 29px); }
  .hb-suz { max-width: none; margin-bottom: min(5cqw, 24px); }
  .hb-suz .zx-inp { font-size: max(16px, 4cqw); }
  .hb-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 min(5cqw, 24px); }
  .hb-liste a { font-size: clamp(14px, 3.9cqw, 18px); padding: 12px 0; overflow-wrap: anywhere; }
}