/* Bayi ağı: Türkiye haritası + bayi listesi. Renkler site.css tokenlarından (gündüz/gece uyumlu). */
.dl { --dl-land: color-mix(in srgb, var(--fg, #1d1915) 9%, var(--bg, #f1ece4)); --dl-has: color-mix(in srgb, var(--fg, #1d1915) 30%, var(--bg, #f1ece4)); --dl-hot: var(--fg, #1d1915); }
.dl-regions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.dl-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.dl-chip span { font-size: 12.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.dl-chip:hover { border-color: var(--fg); color: var(--fg); }
.dl-chip.is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.dl-chip.is-on span { color: inherit; opacity: .7; }
.dl-chip[disabled] { opacity: .4; cursor: default; }
/* Sol: bölge düğmeleri + harita; sağ: liste. İki sütun AYNI yükseklikte (stretch); liste kaydırmaz, sayfalanır. */
.dl-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: stretch; }
.dl-left { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.dl-left .dl-regions { margin-bottom: 0; }
.dl-body > * { min-width: 0; }
.dl-map { position: relative; margin: 0; }
.dl-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.dl-il path { fill: var(--dl-land); stroke: var(--bg, #f1ece4); stroke-width: .8; transition: fill .2s; }
.dl-il.has path { fill: var(--dl-has); cursor: pointer; }
.dl-il.has:hover path, .dl-il.has:focus path, .dl-il.is-sel path { fill: var(--dl-hot); }
.dl-il.is-dim path { opacity: .35; }
.dl-il:focus { outline: none; }
/* Bayi sayısı işaretleri (dealers.js ekler): koyu ilin üstünde açık daire, seçilince ters renk */
.dl-mk { cursor: pointer; }
.dl-mk circle { fill: var(--bg, #f1ece4); stroke: var(--fg, #1d1915); stroke-width: 1.5; transition: fill .2s; }
.dl-mk text { fill: var(--fg, #1d1915); font-size: 14px; font-weight: 700; font-family: var(--f-body, inherit); pointer-events: none; font-variant-numeric: tabular-nums; }
.dl-mk:hover circle, .dl-mk.is-sel circle { fill: var(--fg, #1d1915); stroke: var(--bg, #f1ece4); }
.dl-mk:hover text, .dl-mk.is-sel text { fill: var(--bg, #f1ece4); }
.dl-mk.is-dim { opacity: .3; }
.dl-il.has:focus-visible path { stroke: var(--fg); stroke-width: 2; }
.dl-tip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); background: var(--fg); color: var(--bg); font-size: 13px; padding: 6px 10px; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.dl-tip.show { opacity: 1; }
.dl-list { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dl-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.dl-list__head b { font-size: 18px; font-weight: 600; }
.dl-list__head span { font-size: 13px; color: var(--fg-3); }
.dl-select { width: 100%; height: 46px; padding-inline: 14px 40px; border: 1px solid var(--line-2); border-radius: 0; background-color: var(--bg-elev, transparent); color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; }
.dl-select:hover { border-color: var(--fg-4); }
.dl-select:focus { outline: none; border-color: var(--fg); }
/* Liste: kart kutuları yerine ince ayraçlı satırlar; kaydırma alanı üst/alt çizgiyle belli */
.dl-cards-wrap { position: relative; flex: 1 1 auto; min-height: 220px; }
/* Kartlar alanın yüksekliğini belirlemez (harita belirler); sığmayanlar sonraki sayfaya gider */
.dl-cards { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.dl-card { flex: none; padding: 16px 0; border-bottom: 1px solid var(--line); animation: dl-in .35s var(--ease, ease) both; }
@keyframes dl-in { from { opacity: 0; } to { opacity: 1; } }
.dl-card[data-off] { display: none; }
.dl-card:last-child { border-bottom: 0; }
.dl-card[hidden] { display: none; }
.dl-card h3 { font-size: 16px; font-weight: 600; letter-spacing: 0; margin: 0 0 2px; }
.dl-card header p { margin: 0; font-size: 13.5px; color: var(--fg-3); }
.dl-contact { margin: 6px 0 0; font-size: 13.5px; color: var(--fg-2); }
.dl-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.dl-tags { gap: 0; }
.dl-tags li { font-size: 13px; color: var(--fg-3); }
.dl-tags li + li::before { content: "·"; margin-inline: 7px; color: var(--fg-4); }
.dl-addr { margin: 10px 0 0; font-size: 13.5px; color: var(--fg-2); }
.dl-acts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.dl-act { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dl-act:hover { color: var(--fg-2); }
.dl-empty { font-size: 14px; color: var(--fg-3); }
.dl-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); min-height: 56px; }
.dl-pager { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.dl-pager[hidden] { display: none; }
.dl-pager span { min-width: 52px; text-align: center; }
.dl-pager button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); background: none; color: var(--fg); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.dl-pager button:hover:not([disabled]) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.dl-pager button[disabled] { opacity: .3; cursor: default; }
.dl-pager svg { width: 18px; height: 18px; }
.dl-more { margin-inline-start: auto; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (max-width: 960px) {
  .dl-body { grid-template-columns: 1fr; }
  /* Telefonda yükseklik haritadan gelmez: kartlar akışta, sayfa başına sabit adet (JS) */
  .dl-cards-wrap { min-height: 0; }
  .dl-cards { position: static; }
}
@media (max-width: 600px) {
  .dl-regions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter, 20px) * -1); padding-inline: var(--gutter, 20px); }
  .dl-regions::-webkit-scrollbar { display: none; }
  .dl-chip { flex: none; }
}
/* Bölge özeti (filtre yokken sağ sütun) */
.dl-overview { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.dl-overview[hidden] { display: none; }
.dl-overview li { flex: 1 1 0; min-height: 0; max-height: 58px; border-bottom: 1px solid var(--line); }
.dl-overview button { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto; align-items: center; column-gap: 16px; width: 100%; height: 100%; padding: 6px 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: start; cursor: pointer; }
.dl-ov__rg { font-size: 16px; font-weight: 600; }
.dl-ov__cities { font-size: 13.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-ov__n { display: grid; place-items: center; min-width: 34px; height: 34px; padding-inline: 8px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, border-color .2s; }
.dl-overview button:hover .dl-ov__rg { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dl-overview button:hover .dl-ov__n { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.dl-cards[hidden] { display: none; }
/* Kompakt kart: konum ve hizmetler tek satırda */
.dl-card { padding: 14px 0; }
.dl-card .dl-tags { margin-top: 6px; }
.dl-card .dl-addr { margin-top: 6px; font-size: 13px; }
.dl-card .dl-acts { margin-top: 8px; }
@media (max-width: 960px) {
  .dl-overview { position: static; }
  .dl-overview li { flex: none; max-height: none; }
  .dl-overview button { padding: 14px 0; }
}

/* İl sayfası (/bayiler/{il}) ve illere göre bağlantılar (2026-10-17) */
.dl-city { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 60px); align-items: start; }
.dl-city__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.dl-city__cards .dl-card { border: 1px solid var(--line); background: var(--bg-elev); padding: 20px 22px; }
.dl-city__side { display: grid; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--fg-2); position: sticky; top: calc(var(--header-h, 80px) + 24px); }
.dl-city__side p { margin: 0; }
.dl-cities__h { font-size: clamp(22px, 2vw, 28px); margin: 0 0 22px; }
.dl-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 32px; }
.dl-cities__rg h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--fg); }
.dl-cities__rg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dl-cities__rg a { color: var(--fg-2); text-decoration: none; font-size: 15px; }
.dl-cities__rg a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.dl-cities__rg a span { color: var(--fg-3); font-size: 13px; margin-inline-start: 4px; }
.dl-card header p a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
@media (max-width: 960px) { .dl-city { grid-template-columns: 1fr; } .dl-city__side { position: static; } }
.dl-cities--row { display: block; }
.dl-cities--row ul { display: flex; flex-wrap: wrap; gap: 10px 26px; }