/* ds-bolge: Hizmet bölgeleri (ds.css'ten sonra yüklenir).
   bo-*  → merkez sayfa (/kartal-reklam-ajansi), şehir × hizmet (/ankara-seo) ve dizin (/hizmet-bolgeleri)
   Site geneli küçük bloklar: ds-alt__bolgeler (alt bilgi), ds-bolge-serit (ana sayfa), hz-bolgeler (hizmet sayfası).
   Her şehir kendi tonunu alır (--ton, --ton-isik, --ton-zemin; bkz. src/components/bolge/veri.ts › tonStili). */

.bo { --ton: #5B3DF5; --ton-isik: #B9A6FF; --ton-zemin: #F3EFFF; }
.bo .ds-ust::before { background: var(--ton); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ton) 16%, transparent); }
.bo .ds-ust { height: auto; min-height: 34px; padding-top: 7px; padding-bottom: 7px; line-height: 1.35; }

/* Koyu zeminde ortak öğeler */
.bo-lejant .ds-ust, .bo-koyu .ds-ust, .bo-bilet .ds-ust { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #FFFFFF; box-shadow: none; }
.bo-lejant .ds-ust::before, .bo-koyu .ds-ust::before, .bo-bilet .ds-ust::before { background: var(--ton-isik); box-shadow: 0 0 0 4px rgba(255,255,255,.1); }
.bo-lejant .ds-vurgu, .bo-bilet .ds-vurgu { background: linear-gradient(100deg, var(--ton-isik) 0%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration-color: rgba(255,255,255,.22); }
.bo-acik { color: var(--ton-isik); }

/* Bölüm başlığı (solda başlık, sağda düğme ya da kısa metin) */
.bo-bas { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px; margin-bottom: 36px; }
.bo-bas .ds-h2 { margin-top: 16px; }
.bo-bas > p { max-width: 460px; }
.bo-bas > div { min-width: 0; max-width: 100%; }
.bo .ds-ust { max-width: 100%; }
.bo .ds-h2 { overflow-wrap: break-word; }

/* ───────── Plaka rozeti ───────── */
.bo-plaka { display: inline-flex; align-items: stretch; flex: 0 0 auto; height: 34px; border-radius: 7px; background: #FFFFFF; border: 2px solid var(--ds-ink); overflow: hidden; font-family: var(--ds-display); box-shadow: 0 4px 10px rgba(29, 24, 48, 0.08); vertical-align: middle; }
.bo-plaka .bo-plaka__tr { display: flex; align-items: flex-end; justify-content: center; width: 18px; padding-bottom: 4px; background: #1F4FC4; color: #FFFFFF; font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .02em; }
.bo-plaka .bo-plaka__no { display: flex; align-items: center; padding: 0 11px; font-size: 18px; font-weight: 800; letter-spacing: .06em; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.bo-plaka.kucuk { height: 26px; border-radius: 6px; }
.bo-plaka.kucuk .bo-plaka__tr { width: 14px; font-size: 6.5px; padding-bottom: 3px; }
.bo-plaka.kucuk .bo-plaka__no { padding: 0 8px; font-size: 14px; }
.bo-plaka.buyuk { height: 46px; border-width: 3px; border-radius: 9px; }
.bo-plaka.buyuk .bo-plaka__tr { width: 24px; font-size: 10px; }
.bo-plaka.buyuk .bo-plaka__no { padding: 0 14px; font-size: 26px; }

/* ───────── Kahraman ───────── */
.bo-hero { position: relative; padding: 140px 0 84px; overflow: hidden;
  background:
    radial-gradient(40% 55% at 4% 0%, color-mix(in srgb, var(--ton-isik) 55%, transparent) 0%, transparent 100%),
    radial-gradient(36% 50% at 100% 16%, rgba(155, 230, 243, 0.30) 0%, transparent 100%),
    radial-gradient(30% 40% at 60% 100%, rgba(255, 191, 166, 0.22) 0%, transparent 100%),
    linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 100%); }
/* Topografik halkalar (haritanın arkasında) */
.bo-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 76% 44%, transparent 0 42px, color-mix(in srgb, var(--ton) 11%, transparent) 42px 43px);
  -webkit-mask-image: radial-gradient(46% 64% at 76% 44%, #000 0%, transparent 78%); mask-image: radial-gradient(46% 64% at 76% 44%, #000 0%, transparent 78%); }
.bo-hero--hizmet::before { background-image: radial-gradient(color-mix(in srgb, var(--ton) 20%, transparent) 1.4px, transparent 1.7px); background-size: 22px 22px; }
.bo-hero__izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 56px; align-items: center; }
.bo-hero--hizmet .bo-hero__izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); perspective: 1400px; }
.bo-hero__metin { min-width: 0; container-type: inline-size; }

.bo-kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin-bottom: 20px; font-size: 13px; font-weight: 600; color: var(--ds-muted); }
.bo-kirinti a { color: var(--ds-muted) !important; text-decoration: none !important; transition: color .2s ease; }
.bo-kirinti a:hover { color: var(--ton) !important; }
.bo-kirinti i { font-size: 10px; opacity: .55; }
.bo-kirinti span[aria-current] { color: var(--ds-ink); min-width: 0; overflow-wrap: anywhere; }

/* Dev şehir adı: sütun genişliğine sığacak biçimde harf sayısına göre ölçeklenir */
.bo-h1 { margin: 16px 0 0; font-family: var(--ds-display); font-weight: 800; color: var(--ds-ink); }
.bo-h1__sehir { display: block; font-family: var(--ds-display); font-weight: 800; font-size: min(156px, calc(100cqi / (var(--n, 8) * 0.56))); line-height: .9; letter-spacing: -0.06em; padding: 0 .04em .08em 0; margin-bottom: -.08em;
  background: linear-gradient(100deg, var(--ds-ink) 0%, var(--ds-ink) 38%, var(--ton) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bo-h1__sehir.dekor { margin-top: 16px; }
.bo-h1__alt { display: block; margin-top: 14px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.bo-h1h { margin: 18px 0 0; font-family: var(--ds-display); font-weight: 800; color: var(--ds-ink); font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.bo-ozet { margin-top: 20px !important; max-width: 590px; font-size: 18px !important; line-height: 1.6 !important; }
.bo-hero__cipler { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.bo-hero__cipler li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.88); border: 1px solid var(--ds-line); font-size: 13px; font-weight: 600; color: var(--ds-ink); }
.bo-hero__cipler i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ton-zemin); color: var(--ton); font-size: 11px; }

/* Dizin: yüz yüze çalışma şekilleri */
.bo-hero__cipler--dizin { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
.bo-hero__cipler--dizin li { padding-right: 16px; font-weight: 500; line-height: 1.35; }
.bo-hero__cipler--dizin b { font-weight: 800; }

/* Şehir × hizmet: ana hizmet ve merkez sayfa bağlantıları */
.bo-hero__baglar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.bo-hero__baglar a { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 16px 8px 8px; border-radius: 18px; background: rgba(255,255,255,.88); border: 1px solid var(--ds-line); color: var(--ds-ink) !important; font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.bo-hero__baglar a:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(70, 50, 140, 0.10); }
.bo-hero__baglar img { width: 40px; height: 40px; flex: 0 0 auto; padding: 4px; border-radius: 12px; background: var(--ton-zemin); object-fit: contain; }
.bo-hero__baglar .bo-plaka { margin: 0 2px 0 4px; }
.bo-hero__baglar span:not(.bo-plaka) { min-width: 0; }
.bo-hero__baglar small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ton); }
.bo-hero__baglar a > i { font-size: 11px; color: var(--ds-muted-2); }

/* ───────── Harita sahnesi + künye ───────── */
.bo-sahne { position: relative; padding-bottom: 118px; }
.bo-sahne--dizin { padding-bottom: 0; }
.bo-harita { position: relative; margin: 0; padding: 22px 22px 14px; border-radius: 32px; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 40px 80px rgba(29, 24, 48, 0.12), 0 0 0 1px var(--ds-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bo-harita__alan { position: relative; aspect-ratio: var(--oran); }
.bo-harita__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.bo-harita__nokta { fill: none; stroke: color-mix(in srgb, var(--ton-isik) 62%, #E4E0F5); stroke-linecap: round; }
.bo-harita__not { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 18px; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--ds-muted-2); }
.bo-harita__not > span:last-child { margin-left: auto; }
.bo-harita__lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ds-ink); font-weight: 700; }
.bo-harita__lejant > span { display: inline-flex; align-items: center; gap: 7px; }
.bo-harita__lejant i { width: 10px; height: 10px; border-radius: 50%; background: var(--ton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 18%, transparent); }
.bo-harita__lejant i.soluk { width: 10px; height: 10px; background: #FFFFFF; border: 2.5px solid color-mix(in srgb, var(--ton) 60%, #FFFFFF); box-shadow: none; }
/* Türkiye geneli: soluk il noktaları (etiketsiz) */
.bo-harita__iller circle { fill: #FFFFFF; stroke: color-mix(in srgb, var(--ton) 60%, #FFFFFF); stroke-width: 3.5; }
.bo-harita__pusula { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; font-weight: 800; color: var(--ds-muted-2); }
.bo-harita__pusula svg { width: 14px; height: 14px; fill: currentColor; }

/* Rota: önce çizilir, sonra üzerinde akış ve hareket eden nokta */
.bo-rota__iz { fill: none; stroke: color-mix(in srgb, var(--ton) 16%, transparent); stroke-width: 12; stroke-linecap: round; }
.bo-rota__cizgi { fill: none; stroke: var(--ton); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: boCiz 1.6s cubic-bezier(.6,0,.2,1) var(--gecikme, .25s) forwards; }
.bo-rota__akis { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: .012 .022; opacity: 0; animation: boAkis 1.6s linear infinite, boBelir .5s ease calc(var(--gecikme, .25s) + 1.5s) forwards; }
.bo-rota__arac { fill: #FFFFFF; stroke: var(--ton); stroke-width: 4; opacity: 0; animation: boBelir .5s ease calc(var(--gecikme, .25s) + 1.4s) forwards; }
@keyframes boCiz { to { stroke-dashoffset: 0; } }
@keyframes boAkis { to { stroke-dashoffset: -0.068; } }
@keyframes boBelir { to { opacity: 1; } }

/* Pinler: HTML katmanı, konumlar yüzde ile (SVG oranıyla aynı) */
.bo-pin { position: absolute; width: 0; height: 0; z-index: 2; }
.bo-pin__nokta { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; display: grid; place-items: center; background: var(--ton); color: #FFFFFF; font-size: 11px;
  box-shadow: 0 0 0 4px #FFFFFF, 0 8px 16px color-mix(in srgb, var(--ton) 40%, transparent); z-index: 1; }
.bo-pin.ofis .bo-pin__nokta { width: 32px; height: 32px; margin: -16px 0 0 -16px; background: var(--ds-ink); font-size: 12.5px; box-shadow: 0 0 0 4px #FFFFFF, 0 10px 22px rgba(29, 24, 48, 0.30); }
.bo-pin.komsu .bo-pin__nokta { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: #FFFFFF; border: 3px solid color-mix(in srgb, var(--ton) 50%, #FFFFFF); box-shadow: none; }
.bo-pin__dalga { position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 2px solid var(--ton); animation: boDalga 2.6s ease-out infinite; }
@keyframes boDalga { from { transform: scale(1); opacity: .75; } to { transform: scale(3.4); opacity: 0; } }
.bo-pin__etiket { position: absolute; display: flex; flex-direction: column; padding: 7px 12px; border-radius: 13px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 10px 24px rgba(29, 24, 48, 0.12); white-space: nowrap; text-decoration: none !important; z-index: 2; }
.bo-pin__etiket b { font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--ds-ink); }
.bo-pin__etiket small { font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--ton); }
a.bo-pin__etiket:hover { border-color: color-mix(in srgb, var(--ton) 45%, transparent); }
a.bo-pin__etiket:hover b { color: var(--ton); }
.bo-pin.sag .bo-pin__etiket { left: 18px; top: 0; transform: translateY(-50%); }
.bo-pin.sol .bo-pin__etiket { right: 18px; top: 0; transform: translateY(-50%); }
.bo-pin.ust .bo-pin__etiket { left: 0; bottom: 16px; transform: translateX(-50%); }
.bo-pin.alt .bo-pin__etiket { left: 0; top: 16px; transform: translateX(-50%); }
.bo-pin.ofis.sag .bo-pin__etiket { left: 26px; }
.bo-pin.ofis.sol .bo-pin__etiket { right: 26px; }
.bo-pin.ofis.ust .bo-pin__etiket { bottom: 24px; }
.bo-pin.komsu .bo-pin__etiket { padding: 4px 9px; background: rgba(255,255,255,.8); box-shadow: none; }
.bo-pin.komsu .bo-pin__etiket b { font-size: 12px; color: var(--ds-muted); }

/* Koyu varyant (şehir × hizmet çalışma şeridi) */
.bo-harita.koyu { padding: 18px 18px 12px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bo-harita.koyu .bo-harita__nokta { stroke: rgba(255,255,255,.15); }
.bo-harita.koyu .bo-rota__iz { stroke: rgba(255,255,255,.07); }
.bo-harita.koyu .bo-rota__cizgi { stroke: var(--ton-isik); }
.bo-harita.koyu .bo-rota__arac { stroke: var(--ton-isik); }
.bo-harita.koyu .bo-pin__nokta { background: var(--ton-isik); color: var(--ds-ink); box-shadow: 0 0 0 4px var(--ds-ink); }
.bo-harita.koyu .bo-pin.ofis .bo-pin__nokta { background: #FFFFFF; }
.bo-harita.koyu .bo-pin__dalga { border-color: var(--ton-isik); }
.bo-harita.koyu .bo-pin.komsu .bo-pin__nokta { background: var(--ds-ink); border-color: rgba(255,255,255,.4); }
.bo-harita.koyu .bo-pin__etiket { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bo-harita.koyu .bo-pin__etiket b { color: #FFFFFF; }
.bo-harita.koyu .bo-pin__etiket small { color: var(--ton-isik); }
.bo-harita.koyu .bo-pin.komsu .bo-pin__etiket { background: transparent; border-color: transparent; }
.bo-harita.koyu .bo-pin.komsu .bo-pin__etiket b { color: rgba(255,255,255,.55); }
.bo-harita.koyu .bo-harita__not, .bo-harita.koyu .bo-harita__pusula { color: rgba(255,255,255,.42); }

/* Şehir künyesi (haritanın sol altına biner) */
.bo-kunye { position: absolute; left: -28px; bottom: 0; z-index: 3; width: min(470px, 84%); padding: 16px 16px 18px; border-radius: 24px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 24px 50px rgba(29, 24, 48, 0.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.bo-kunye__ust { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 12px; border-bottom: 1px dashed rgba(29, 24, 48, 0.14); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ton); }
.bo-kunye__ust i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--ton-zemin); font-size: 12px; }
.bo-kunye dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 14px 0 0; padding: 0 4px; }
.bo-kunye dl > div { min-width: 0; }
.bo-kunye dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-muted-2); }
.bo-kunye dd { margin: 5px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ds-ink); }
.bo-kunye dd small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ds-muted); }
.bo-kunye__koordinat { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13.5px !important; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* ───────── Merkez: öne çıkanlar (tek panelde sütunlar) ───────── */
.bo-one { position: relative; z-index: 2; margin-top: -28px; }
.bo-one__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 28px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 24px 50px rgba(70, 50, 140, 0.08); overflow: hidden; }
.bo-one__izgara.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bo-one__izgara.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-one__izgara.n1 { grid-template-columns: minmax(0, 1fr); }
.bo-one__kart { position: relative; padding: 28px 28px 30px; }
.bo-one__kart + .bo-one__kart { border-left: 1px solid var(--ds-line); }
.bo-one__no { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ds-display); font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--ton); }
.bo-one__no::after { content: ""; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ton), transparent); }
.bo-one__kart .ds-h3 { margin-top: 14px; font-size: 20px; }
.bo-one__kart p { margin-top: 8px !important; font-size: 14.5px !important; line-height: 1.6 !important; }

/* ───────── Merkez: çalışma kartları (kesikli rota ile bağlı) ───────── */
.bo-yol { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ton) !important; text-decoration: none !important; }
.bo-yol i { font-size: 10px; }
.bo-calisma { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bo-calisma.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-calisma.n1 { grid-template-columns: minmax(0, 1fr); }
.bo-calisma::before { content: ""; position: absolute; left: 50px; right: 50px; top: 53px; border-top: 2px dashed color-mix(in srgb, var(--ton) 40%, transparent); }
.bo-calisma.n1::before { display: none; }
.bo-calisma__kart { position: relative; padding: 26px; border-radius: 26px; background: linear-gradient(170deg, var(--ton-zemin), #FFFFFF 58%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.bo-calisma__ust { display: flex; align-items: center; justify-content: space-between; }
.bo-calisma__ikon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; color: #FFFFFF; font-size: 20px;
  background: linear-gradient(135deg, var(--ton), color-mix(in srgb, var(--ton) 55%, #FFFFFF)); box-shadow: 0 12px 24px color-mix(in srgb, var(--ton) 28%, transparent); }
.bo-calisma__durak { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--ton); background: #FFFFFF; }
.bo-calisma__kart .ds-h3 { margin-top: 22px; font-size: 21px; }
.bo-calisma__kart p { margin-top: 8px !important; font-size: 15px !important; }

/* ───────── Yerel bağlam: harita lejantı (koyu panel) ───────── */
.bo-lejant { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px; padding: 46px; border-radius: 34px; overflow: hidden; color: #FFFFFF;
  background: radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--ton) 48%, transparent), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(155, 230, 243, 0.14), transparent 70%), var(--ds-ink); }
.bo-lejant::after { content: ""; position: absolute; right: -40px; top: -40px; width: 320px; height: 320px; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 1.8px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.bo-lejant > * { position: relative; z-index: 1; }
.bo-lejant .ds-h2 { margin-top: 18px; color: #FFFFFF; font-size: clamp(32px, 3.4vw, 50px); }
.bo-lejant__sol p { margin-top: 16px !important; color: rgba(255,255,255,.7) !important; }
.bo-lejant__kunye { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 15px; font-weight: 700; }
.bo-lejant__kunye small { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); }
.bo-lejant__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.bo-lejant__liste li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.bo-lejant__harf { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ton-isik); color: var(--ds-ink); font-family: var(--ds-display); font-size: 15px; font-weight: 800; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.bo-lejant__harf::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ton-isik); border-bottom: 0; }
.bo-lejant__liste h3 { margin: 4px 0 0; font-family: var(--ds-display); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #FFFFFF; }
.bo-lejant__liste h3 i { margin-right: 4px; font-size: 13px; color: var(--ton-isik); }
.bo-lejant__liste p { margin-top: 6px !important; font-size: 14px !important; line-height: 1.6 !important; color: rgba(255,255,255,.68) !important; }

/* ───────── Merkez: şehrin hizmet sayfaları ───────── */
.bo-sayfalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bo-sayfalar.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bo-sayfalar.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-sayfalar.n1 { grid-template-columns: minmax(0, 1fr); }
.bo-sayfalar.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bo-sayfalar.n5 > :nth-child(-n+3) { grid-column: span 2; }
.bo-sayfalar.n5 > :nth-child(n+4) { grid-column: span 3; }
.bo-sayfa { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 26px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease, opacity .7s cubic-bezier(.2,.8,.2,1); }
.bo-sayfa::before { content: ""; position: absolute; right: -30px; top: -30px; width: 170px; height: 170px; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ton) 26%, transparent) 1.5px, transparent 1.7px); background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.bo-sayfa:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(70, 50, 140, 0.12); }
.bo-sayfa > * { position: relative; }
.bo-sayfa__ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bo-sayfa__ikon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--ton-zemin); }
.bo-sayfa__ikon img { width: 48px; height: 48px; object-fit: contain; }
.bo-sayfa__pin { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 12px; font-weight: 700; color: var(--ds-ink); white-space: nowrap; }
.bo-sayfa__pin i { color: var(--ton); }
.bo-sayfa__kat { margin-top: 18px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ton); }
.bo-sayfa__baslik { margin-top: 6px; font-family: var(--ds-display); font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ds-ink); }
.bo-sayfa__ozet { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ds-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bo-sayfa__ok { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--ds-ink); }
.bo-sayfa__ok i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--ds-ink); color: #FFFFFF; font-size: 12px; transition: transform .2s ease, background-color .2s ease; }
.bo-sayfa:hover .bo-sayfa__ok i { background: var(--ton); transform: translateX(3px); }

/* ───────── Gövde + içindekiler ───────── */
.bo-govde__izgara { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: start; }
.bo-govde__yan { align-self: stretch; }
.bo-govde__yapiskan { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; }
.bo-govde__yapiskan > .ds-ust { align-self: flex-start; }
.bo-govde .bl-ici ol { max-height: calc(100vh - 470px); min-height: 150px; }
.bo-govde__metin { min-width: 0; max-width: 780px; }
.bo-yan-kart { padding: 18px; border-radius: 22px; color: #FFFFFF; background: radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--ton) 55%, transparent), transparent 70%), var(--ds-ink); }
.bo-yan-kart b { display: block; margin-top: 12px; font-family: var(--ds-display); font-size: 18px; line-height: 1.2; color: #FFFFFF; }
.bo-yan-kart p { margin-top: 5px !important; font-size: 13px !important; line-height: 1.5 !important; color: rgba(255,255,255,.66) !important; }
.bo-yan-kart .ds-btn { margin-top: 14px; height: 46px; font-size: 14px; }
.bo-yan-kart .ds-btn i { width: 30px; height: 30px; }

/* ───────── Süreç: duraklar ───────── */
.bo-duraklar { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.bo-duraklar.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bo-duraklar.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bo-duraklar.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-duraklar.n1 { grid-template-columns: minmax(0, 1fr); }
.bo-duraklar::before { content: ""; position: absolute; left: 28px; right: 28px; top: 26px; height: 4px; border-radius: 4px; opacity: .55;
  background: repeating-linear-gradient(90deg, var(--ton) 0 14px, transparent 14px 24px); }
.bo-duraklar li { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bo-duraklar__no { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; border: 3px solid var(--ton);
  font-family: var(--ds-display); font-size: 17px; font-weight: 800; color: var(--ds-ink); box-shadow: 0 0 0 8px #FFFFFF, 0 12px 24px color-mix(in srgb, var(--ton) 24%, transparent); }
.bo-duraklar li:last-child .bo-duraklar__no { background: var(--ton); color: #FFFFFF; }
.bo-duraklar li > div { flex: 1; padding: 20px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.bo-duraklar .ds-h3 { font-size: 19px; }
.bo-duraklar p { margin-top: 8px !important; font-size: 14.5px !important; }

/* ───────── Şehir × hizmet: öne çıkanlar ───────── */
.bo-oc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bo-oc.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bo-oc.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-oc.n1 { grid-template-columns: minmax(0, 1fr); }
.bo-oc__kart { position: relative; padding: 26px 24px 26px 28px; border-radius: 26px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.bo-oc__kart::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--ton), var(--ton-isik)); }
.bo-oc__no { display: block; font-family: var(--ds-display); font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ton) 50%, transparent); }
.bo-oc__kart .ds-h3 { margin-top: 16px; font-size: 20px; }
.bo-oc__kart p { margin-top: 8px !important; font-size: 14.5px !important; }

/* ───────── Şehir × hizmet: hizmet görseli + dönen şehir damgası ───────── */
.bo-damga-sahne { position: relative; padding: 36px 34px 54px 20px; }
.bo-damga-sahne__cerceve { position: relative; padding: 12px; border-radius: 30px; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 40px 80px rgba(29, 24, 48, 0.14), 0 0 0 1px var(--ds-line); }
.bo-damga-sahne__gorsel { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; background: var(--ton-zemin); }
.bo-damga-sahne__rozet { position: absolute; left: 26px; top: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ds-ink); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.bo-damga-sahne__rozet i { color: var(--ton-isik); }
.bo-damga-sahne__ikon { position: absolute; right: 4px; top: 0; z-index: 2; width: 116px; height: auto; pointer-events: none; filter: drop-shadow(0 18px 28px rgba(70, 50, 140, 0.25)); }
.bo-damga { position: absolute; right: 0; bottom: 0; z-index: 3; width: 170px; height: 170px; filter: drop-shadow(0 18px 30px rgba(29, 24, 48, 0.18)); }
.bo-damga svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bo-damga__dis { fill: #FFFFFF; stroke: var(--ton); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.bo-damga__ic { fill: var(--ton-zemin); stroke: color-mix(in srgb, var(--ton) 60%, transparent); stroke-width: 1.5; }
.bo-damga text { font-family: var(--ds-display); font-size: 13.5px; font-weight: 800; letter-spacing: .06em; fill: var(--ds-ink); }
.bo-damga__don { transform-box: view-box; transform-origin: 50% 50%; animation: boDon 30s linear infinite; }
@keyframes boDon { to { transform: rotate(360deg); } }
.bo-damga__merkez { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.bo-damga__merkez small { font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ton); }
.bo-damga__merkez b { font-family: var(--ds-display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--ds-ink); }
.bo-damga-sahne__cip { left: 0; bottom: 18px; z-index: 4; }

/* ───────── Şehir × hizmet: çalışma şeridi (koyu) ───────── */
.bo-koyu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; padding: 46px; border-radius: 34px; color: #FFFFFF;
  background: radial-gradient(70% 80% at 0% 0%, color-mix(in srgb, var(--ton) 50%, transparent), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(155, 230, 243, 0.14), transparent 70%), var(--ds-ink); }
.bo-koyu .ds-h2 { margin-top: 18px; color: #FFFFFF; font-size: clamp(30px, 3.2vw, 46px); }
.bo-koyu__liste { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bo-koyu__liste li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.bo-koyu__ikon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--ds-ink); font-size: 17px; background: var(--ton-isik); }
.bo-koyu__liste h3 { margin: 2px 0 0; font-family: var(--ds-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: #FFFFFF; }
.bo-koyu__liste p { margin-top: 4px !important; font-size: 14px !important; line-height: 1.55 !important; color: rgba(255,255,255,.68) !important; }

/* ───────── Şehir × hizmet: ana hizmet kartı + şehrin diğer sayfaları ───────── */
.bo-baglanti { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 18px; align-items: stretch; }
.bo-ayrinti { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 32px; border-radius: 30px; overflow: hidden; text-decoration: none !important;
  background: linear-gradient(150deg, var(--ton-zemin), #FFFFFF 62%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); transition: transform .3s ease, box-shadow .3s ease, opacity .7s cubic-bezier(.2,.8,.2,1); }
.bo-ayrinti:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(70, 50, 140, 0.12); }
.bo-ayrinti > *:not(.bo-ayrinti__gorsel) { position: relative; z-index: 1; max-width: 56%; }
.bo-ayrinti__gorsel { position: absolute; right: -54px; bottom: -36px; width: 52%; max-width: 440px; height: auto; border-radius: 24px; transform: rotate(-5deg); box-shadow: 0 30px 60px rgba(29, 24, 48, 0.16); pointer-events: none; transition: transform .4s ease; }
.bo-ayrinti:hover .bo-ayrinti__gorsel { transform: rotate(-3deg) translateY(-6px); }
.bo-ayrinti__ust { display: flex; align-items: center; gap: 12px; }
.bo-ayrinti__ikon { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: #FFFFFF; border: 1px solid var(--ds-line); }
.bo-ayrinti__ikon img { width: 44px; height: 44px; object-fit: contain; }
.bo-ayrinti__etiket { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ton); }
.bo-ayrinti__baslik { margin-top: 22px; font-family: var(--ds-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--ds-ink); }
.bo-ayrinti__ad { margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--ton); }
.bo-ayrinti__ozet { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ds-muted); }
.bo-ayrinti__etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.bo-ayrinti__etiketler span { padding: 5px 10px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 12px; font-weight: 600; color: var(--ds-ink); }
.bo-ayrinti__ok { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--ds-ink); }
.bo-ayrinti__ok i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--ds-violet); color: #FFFFFF; font-size: 13px; transition: transform .2s ease; }
.bo-ayrinti:hover .bo-ayrinti__ok i { transform: translateX(4px); }
.bo-sehir-sayfalar { display: flex; flex-direction: column; padding: 24px; border-radius: 30px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.bo-sehir-sayfalar__ust { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed rgba(29, 24, 48, 0.14); }
.bo-sehir-sayfalar__ust b { font-family: var(--ds-display); font-size: 18px; line-height: 1.25; color: var(--ds-ink); }
.bo-sehir-sayfalar ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bo-sehir-sayfalar li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 11px 12px; border-radius: 16px; text-decoration: none !important; transition: background-color .2s ease; }
.bo-sehir-sayfalar li a:hover { background: var(--ton-zemin); }
.bo-etiket { grid-column: 1; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ton); }
.bo-etiket i { margin-right: 2px; }
.bo-sehir-sayfalar li b { grid-column: 1; margin-top: 3px; font-size: 15px; line-height: 1.3; color: var(--ds-ink); }
.bo-sehir-sayfalar li a > i { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--ds-bg); color: var(--ds-ink); font-size: 11px; transition: transform .2s ease; }
.bo-sehir-sayfalar li a:hover > i { transform: translateX(3px); }
.bo-sehir-sayfalar__tum { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ds-violet) !important; text-decoration: none !important; }

/* ───────── SSS ───────── */
.bo-sss { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.bo-sss__sol { position: sticky; top: 104px; }
.bo-sss__sol .ds-h2 { margin-top: 18px; }
.bo-sss__kart { margin-top: 26px; padding: 24px; border-radius: 24px; background: linear-gradient(150deg, var(--ton-zemin), #FFFFFF 70%); border: 1px solid var(--ds-line); }
.bo-sss__kart b { display: block; margin-top: 14px; font-family: var(--ds-display); font-size: 20px; letter-spacing: -0.01em; color: var(--ds-ink); }
.bo-sss__kart p { margin-top: 6px !important; font-size: 14.5px !important; }
.bo-sss__kart .ds-btn { margin-top: 16px; }
.bo-sss__liste { display: flex; flex-direction: column; gap: 10px; }
.bo-sss__liste details { border-radius: 20px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 8px 22px rgba(70, 50, 140, 0.04); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.bo-sss__liste details[open] { border-color: color-mix(in srgb, var(--ton) 35%, transparent); box-shadow: 0 16px 34px rgba(70, 50, 140, 0.08); }
.bo-sss__liste summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; }
.bo-sss__liste summary::-webkit-details-marker { display: none; }
.bo-sss__no { font-family: var(--ds-display); font-size: 13px; font-weight: 800; color: var(--ton); font-variant-numeric: tabular-nums; }
.bo-sss__soru { font-size: 16.5px; font-weight: 700; line-height: 1.4; color: var(--ds-ink); }
.bo-sss__liste summary i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-bg); color: var(--ds-ink); font-size: 13px; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.bo-sss__liste details[open] summary i { transform: rotate(45deg); background: var(--ton); color: #FFFFFF; }
.bo-sss__liste details p { padding: 0 22px 22px 47px; font-size: 15.5px; }

/* ───────── İlgili yazılar ve sektörler ───────── */
.bo-yazilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bo-yazilar .hz-yazi__meta em { color: var(--ton); }
.bo-sektor-alan { padding-top: 56px; }
.bo-sektorler { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: center; padding: 18px 20px; border-radius: 26px; background: var(--ds-bg); }
.bo-sektorler__bas { display: flex; align-items: center; gap: 12px; }
.bo-sektorler__ikon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #FFFFFF; color: var(--ton); font-size: 16px; }
.bo-sektorler__bas b { display: block; font-size: 15px; color: var(--ds-ink); }
.bo-sektorler__bas small { display: block; font-size: 12.5px; color: var(--ds-muted); }
.bo-sektorler ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.bo-sektorler a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 5px 14px 5px 5px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 13.5px; font-weight: 600; color: var(--ds-ink) !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease; }
.bo-sektorler a img { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: var(--ds-bg); }
.bo-sektorler a i { font-size: 10px; color: var(--ton); }
.bo-sektorler a:hover { background: var(--ds-ink); color: #FFFFFF !important; }
.bo-sektorler a:hover i { color: var(--ds-lime); }

/* ───────── Yakındaki bölgeler ───────── */
.bo-komsular { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.bo-komsu { display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 20px; border-radius: 22px; background: linear-gradient(150deg, var(--ton-zemin), #FFFFFF 70%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease, opacity .7s cubic-bezier(.2,.8,.2,1); }
.bo-komsu:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(70, 50, 140, 0.12); }
.bo-komsu__metin { flex: 1; min-width: 0; }
.bo-komsu__metin b { display: block; font-family: var(--ds-display); font-size: 17px; line-height: 1.2; color: var(--ds-ink); }
.bo-komsu__metin small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ds-muted); }
.bo-komsu > i { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--ds-ink); color: #FFFFFF; font-size: 12px; transition: background-color .2s ease; }
.bo-komsu:hover > i { background: var(--ton); }

/* ───────── Son çağrı: bilet ───────── */
.bo-cta-alan { padding-top: 110px; }
.bo-bilet { --kocan: 330px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--kocan); border-radius: 34px; overflow: hidden; color: #FFFFFF;
  background: radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--ton) 55%, transparent), transparent 62%), radial-gradient(40% 80% at 66% 100%, rgba(155, 230, 243, 0.14), transparent 70%), var(--ds-ink);
  -webkit-mask: radial-gradient(circle 17px at calc(100% - var(--kocan)) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 17px at calc(100% - var(--kocan)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 17px at calc(100% - var(--kocan)) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 17px at calc(100% - var(--kocan)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat; }
.bo-bilet__ana { padding: 54px 50px; }
.bo-bilet .ds-h2 { margin-top: 18px; color: #FFFFFF; font-size: clamp(32px, 3.6vw, 52px); }
.bo-bilet__ana p { margin-top: 14px !important; max-width: 580px; color: rgba(255,255,255,.72) !important; }
.bo-bilet__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.bo-bilet__ikincil { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,.85) !important; text-decoration: none !important; }
.bo-bilet__ikincil:hover { color: #FFFFFF !important; }
.bo-bilet__ikincil i { font-size: 12px; transition: transform .2s ease; }
.bo-bilet__ikincil:hover i { transform: translateX(3px); }
.bo-bilet__kocan { display: flex; flex-direction: column; padding: 36px 30px 30px; border-left: 2px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.bo-bilet__kocan-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.bo-bilet__kocan-ust > i { font-size: 18px; color: var(--ton-isik); }
.bo-bilet__kocan dl { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; }
.bo-bilet__kocan dt { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.bo-bilet__kocan dd { margin: 3px 0 0; font-family: var(--ds-display); font-size: 18px; font-weight: 700; line-height: 1.25; color: #FFFFFF; }
.bo-bilet__ucretsiz { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 14px; border-radius: 999px; background: var(--ds-lime); color: var(--ds-ink); font-size: 13px; font-weight: 800; }
.bo-bilet__eposta { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.7) !important; text-decoration: none !important; overflow-wrap: anywhere; }

/* ───────── Dizin: Türkiye geneli (listede olmayan şehirler) ───────── */
.bo-online { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding: 44px; border-radius: 34px;
  background: radial-gradient(50% 80% at 0% 0%, color-mix(in srgb, var(--ton-isik) 40%, transparent), transparent 70%), radial-gradient(40% 70% at 100% 100%, rgba(155, 230, 243, 0.32), transparent 70%), #FBFAFF;
  border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.bo-online .ds-h2 { margin-top: 18px; }
.bo-online__metin p { margin: 16px 0 26px !important; max-width: 560px; }
.bo-online__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bo-online__liste li { display: flex; flex-direction: column; padding: 20px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 8px 22px rgba(70, 50, 140, 0.05); }
.bo-online__ikon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--ton-zemin); color: var(--ton); font-size: 16px; }
.bo-online__liste li:last-child .bo-online__ikon { background: var(--ds-lime); color: var(--ds-ink); }
.bo-online__liste b { margin-top: 14px; font-family: var(--ds-display); font-size: 17px; line-height: 1.25; color: var(--ds-ink); }
.bo-online__liste small { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ds-muted); }

/* Merkez: Türkiye geneli kartı (yakındaki bölgeler ızgarasında) */
.bo-komsu.genel { background: #FFFFFF; border-style: dashed; border-color: color-mix(in srgb, var(--ton) 35%, transparent); box-shadow: none; }
.bo-komsu__ikon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ton-zemin); color: var(--ton); font-size: 16px; }

/* ───────── Dizin: şehir kartları ───────── */
.bo-sehirler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bo-sehir { position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: 28px; overflow: hidden; background: linear-gradient(165deg, var(--ton-zemin), #FFFFFF 56%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.bo-sehir__ust { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.bo-sehir__calisma { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 12px; font-weight: 700; color: var(--ds-ink); }
.bo-sehir__calisma i { color: var(--ton); }
.bo-sehir__ad { margin: 24px 0 0; font-family: var(--ds-display); font-size: clamp(30px, 3vw, 42px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: var(--ds-ink); overflow-wrap: anywhere; }
.bo-sehir__ad a { color: inherit !important; text-decoration: none !important; }
.bo-sehir__ad a:hover { color: var(--ton) !important; }
.bo-sehir__il { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ton); }
.bo-sehir p { margin-top: 12px !important; font-size: 14.5px !important; line-height: 1.6 !important; }
.bo-sehir__sayfalar { list-style: none; margin: auto 0 0; padding: 12px 0 0; display: flex; flex-direction: column; }
.bo-sehir p + .bo-sehir__sayfalar { margin-top: 18px; }
.bo-sehir__sayfalar li { border-top: 1px solid var(--ds-line); }
.bo-sehir__sayfalar a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--ds-ink) !important; text-decoration: none !important; }
.bo-sehir__sayfalar a b { font-weight: 800; }
.bo-sehir__sayfalar a span i { width: 18px; margin-right: 4px; color: var(--ton); }
.bo-sehir__sayfalar a > i { flex: 0 0 auto; font-size: 11px; color: var(--ton); transition: transform .2s ease; }
.bo-sehir__sayfalar a:hover > i { transform: translateX(3px); }
.bo-sehir.ofis { background: radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--ton) 52%, transparent), transparent 70%), var(--ds-ink); border-color: transparent; }
.bo-sehir.ofis .bo-sehir__ad, .bo-sehir.ofis .bo-sehir__sayfalar a { color: #FFFFFF !important; }
.bo-sehir.ofis p { color: rgba(255,255,255,.7) !important; }
.bo-sehir.ofis .bo-sehir__il, .bo-sehir.ofis .bo-sehir__sayfalar a > i, .bo-sehir.ofis .bo-sehir__sayfalar a span i { color: var(--ton-isik); }
.bo-sehir.ofis .bo-sehir__sayfalar li { border-color: rgba(255,255,255,.12); }
.bo-sehir.ofis .bo-sehir__calisma { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); color: #FFFFFF; }
.bo-sehir.ofis .bo-sehir__calisma i { color: var(--ton-isik); }
.bo-istanbul { background: var(--ds-bg); border: 1px dashed rgba(91, 61, 245, 0.28); box-shadow: none; }
.bo-istanbul__ikon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #FFFFFF; color: var(--ds-violet); font-size: 18px; }
.bo-istanbul .bo-sehir__ad { margin-top: 20px; font-size: clamp(26px, 2.4vw, 32px); }
.bo-istanbul__adres { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ds-muted) !important; text-decoration: none !important; }
.bo-istanbul__adres i { margin-top: 2px; color: var(--ds-violet); }

/* ───────── Site geneli: alt bilgi, ana sayfa ve hizmet sayfası blokları ───────── */
.ds-alt__bolgeler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 36px; padding: 18px 22px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ds-alt__bolgeler h5 { margin: 0 !important; }
.ds-alt__bolgeler h5 a { display: inline-flex; align-items: center; gap: 9px; }
.ds-alt__bolgeler h5 i { color: var(--ds-lavender); }
.ds-alt .ds-alt__bolgeler ul { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.ds-alt__bolgeler ul a i { margin-left: 3px; font-size: 11px; }
.ds-alt__bolgeler ul a.ds-alt__turkiye { color: #FFFFFF !important; font-weight: 600; }
.ds-alt__bolgeler ul a.ds-alt__turkiye i:first-child { margin: 0 4px 0 0; color: var(--ds-lavender); }

.ds-bolge-serit-alan { padding-top: 80px; }
.ds-bolge-serit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; padding: 18px 18px 18px 20px; border-radius: 26px;
  background: linear-gradient(110deg, #F3EFFF 0%, #FFFFFF 55%, #E9F9FC 100%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.ds-bolge-serit__metin { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ds-bolge-serit__ikon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ds-violet), #8B6CFF); color: #FFFFFF; font-size: 18px; }
.ds-bolge-serit__metin b { display: block; font-family: var(--ds-display); font-size: 18px; letter-spacing: -0.01em; color: var(--ds-ink); }
.ds-bolge-serit__metin small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ds-muted); }
.ds-bolge-serit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-bolge-serit a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 5px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--ds-line); font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ds-ink) !important; text-decoration: none !important; transition: border-color .2s ease, transform .2s ease; }
.ds-bolge-serit a:hover { border-color: rgba(91, 61, 245, 0.35); transform: translateY(-1px); }
.ds-bolge-serit__plaka { flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--ds-bg); font-family: var(--ds-display); font-size: 12.5px; font-weight: 800; color: var(--ds-violet); }
.ds-bolge-serit a.tum { padding: 4px 16px; background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF !important; }
.ds-bolge-serit a.tum i { font-size: 11px; }

.hz-bolgeler { background: linear-gradient(110deg, #F3EFFF, #FFFFFF 70%); border: 1px solid var(--ds-line); }
.hz-bolgeler > b i { margin-right: 4px; color: var(--ds-violet); }

/* ───────── Hareket azaltma ───────── */
@media (prefers-reduced-motion: reduce) {
  .bo-rota__cizgi { animation: none; stroke-dashoffset: 0; }
  .bo-rota__akis, .bo-rota__arac { display: none; }
  .bo-pin__dalga, .bo-damga__don { animation: none; }
}

/* ───────── Duyarlı ───────── */
@media (max-width: 1199.98px) {
  .bo-one__izgara.n4, .bo-oc.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-one__izgara.n4 .bo-one__kart:nth-child(3) { border-left: 0; }
  .bo-one__izgara.n4 .bo-one__kart:nth-child(n+3) { border-top: 1px solid var(--ds-line); }
  .bo-sayfalar.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-govde__izgara { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
  .bo-kunye { left: -12px; }
  /* Duraklar dikey */
  .bo-duraklar, .bo-duraklar.n4, .bo-duraklar.n3, .bo-duraklar.n2 { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 860px; }
  .bo-duraklar::before { left: 26px; right: auto; top: 28px; bottom: 28px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--ton) 0 14px, transparent 14px 24px); }
  .bo-duraklar li { flex-direction: row; align-items: flex-start; gap: 18px; }
  .bo-duraklar__no { flex: 0 0 auto; }
}
@media (max-width: 991.98px) {
  .bo-hero { padding: 120px 0 64px; }
  .bo-hero__izgara, .bo-hero--hizmet .bo-hero__izgara { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bo-sahne { padding-bottom: 0; }
  .bo-kunye { position: relative; left: auto; bottom: auto; width: auto; margin: -34px 14px 0; }
  .bo-sahne:not(.bo-sahne--dizin) .bo-harita { padding-bottom: 44px; }
  .bo-one { margin-top: -18px; }
  .bo-one__izgara, .bo-one__izgara.n4, .bo-one__izgara.n2 { grid-template-columns: minmax(0, 1fr); }
  .bo-one__kart + .bo-one__kart, .bo-one__izgara.n4 .bo-one__kart:nth-child(n+3) { border-left: 0; border-top: 1px solid var(--ds-line); }
  .bo-calisma, .bo-calisma.n2 { grid-template-columns: minmax(0, 1fr); }
  .bo-calisma::before { left: 52px; right: auto; top: 50px; bottom: 50px; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--ton) 40%, transparent); }
  .bo-lejant, .bo-koyu { grid-template-columns: minmax(0, 1fr); padding: 36px 30px; gap: 30px; }
  .bo-sayfalar, .bo-sayfalar.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-sayfalar.n5 > * { grid-column: auto !important; }
  .bo-sayfalar.n5 > :last-child:nth-child(odd), .bo-sayfalar.n3 > :last-child { grid-column: 1 / -1 !important; }
  .bo-govde__izgara { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bo-govde__yapiskan { position: static; }
  .bo-yan-kart { display: none; }
  .bo-govde .bl-ici ol { max-height: none; }
  .bo-sss { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bo-sss__sol { position: static; }
  .bo-baglanti { grid-template-columns: minmax(0, 1fr); }
  .bo-yazilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-sektorler { grid-template-columns: minmax(0, 1fr); }
  .bo-sektorler ul { justify-content: flex-start; }
  .bo-sehirler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-online { grid-template-columns: minmax(0, 1fr); padding: 34px 28px; gap: 28px; }
  .bo-bilet { --kocan: 0px; grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .bo-bilet__kocan { border-left: 0; border-top: 2px dashed rgba(255,255,255,.18); }
  .bo-cta-alan { padding-top: 84px; }
}
@media (max-width: 419.98px) {
  .bo .ds-h2 { font-size: 31px; }
}
@media (max-width: 767.98px) {
  .bo-ozet { font-size: 16.5px !important; }
  .bo-h1h { font-size: clamp(32px, 9vw, 44px); }
  .bo-h1__alt { font-size: clamp(24px, 7vw, 30px); }
  .bo-harita { padding: 14px 14px 10px; border-radius: 24px; }
  .bo-pin__etiket { padding: 5px 9px; border-radius: 10px; }
  .bo-pin__etiket b { font-size: 12px; }
  .bo-pin__etiket small { font-size: 10px; }
  .bo-pin.ofis .bo-pin__nokta { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 10.5px; }
  .bo-pin__dalga { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .bo-pin.sag .bo-pin__etiket { left: 13px; } .bo-pin.sol .bo-pin__etiket { right: 13px; }
  .bo-pin.ofis.sag .bo-pin__etiket { left: 20px; } .bo-pin.ofis.sol .bo-pin__etiket { right: 20px; }
  .bo-pin.ofis.ust .bo-pin__etiket { bottom: 19px; }
  .bo-harita__pusula { display: none; }
  .bo-kunye { margin: -24px 8px 0; padding: 14px; }
  .bo-sahne:not(.bo-sahne--dizin) .bo-harita { padding-bottom: 34px; }
  .bo-kunye dl > div.genis { grid-column: 1 / -1; }
  .bo-kunye dd { font-size: 14px; }
  .bo-online { padding: 28px 20px; border-radius: 28px; }
  .bo-online__liste { grid-template-columns: minmax(0, 1fr); }
  .bo-online .ds-btn { width: 100%; justify-content: space-between; }
  .bo-oc, .bo-oc.n4, .bo-oc.n2, .bo-sayfalar, .bo-sayfalar.n2, .bo-sayfalar.n4, .bo-sayfalar.n5, .bo-yazilar, .bo-sehirler, .bo-lejant__liste { grid-template-columns: minmax(0, 1fr); }
  .bo-sayfalar > * { grid-column: auto !important; }
  .bo-lejant, .bo-koyu { padding: 28px 20px; border-radius: 28px; }
  .bo-calisma__kart, .bo-sehir { padding: 22px; }
  .bo-duraklar::before { left: 21px; }
  .bo-duraklar li { gap: 12px; }
  .bo-duraklar__no { width: 46px; height: 46px; font-size: 15px; box-shadow: 0 0 0 6px #FFFFFF; }
  .bo-duraklar li > div { padding: 18px; }
  .bo-damga-sahne { padding: 26px 8px 46px 4px; }
  .bo-damga-sahne__ikon { width: 76px; right: 0; top: 4px; }
  .bo-damga { width: 118px; height: 118px; right: -2px; }
  .bo-damga__merkez b { font-size: 28px; }
  .bo-damga__merkez small { font-size: 8px; }
  .bo-damga-sahne__rozet { left: 20px; top: 20px; font-size: 12px; padding: 6px 11px; }
  .bo-damga-sahne__cip { transform: scale(.86); transform-origin: left bottom; bottom: 6px; }
  .bo-ayrinti { min-height: 0; padding: 24px 22px; }
  .bo-ayrinti > *:not(.bo-ayrinti__gorsel) { max-width: none; }
  .bo-ayrinti__gorsel { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; margin-top: 20px; transform: none; order: 99; }
  .bo-ayrinti:hover .bo-ayrinti__gorsel { transform: none; }
  .bo-sss__liste summary { padding: 16px; gap: 12px; }
  .bo-sss__soru { font-size: 15.5px; }
  .bo-sss__liste details p { padding: 0 18px 20px 18px; }
  .bo-bilet { border-radius: 28px; }
  .bo-bilet__ana { padding: 34px 22px; }
  .bo-bilet__kocan { padding: 26px 22px; }
  .bo-bilet__dugmeler .ds-btn { width: 100%; justify-content: space-between; }
  .bo-sektorler { padding: 16px; }
  .ds-bolge-serit { padding: 18px; }
  .ds-bolge-serit ul { width: 100%; }
  .ds-alt__bolgeler { padding: 16px 18px; }
}

/* ═════════ Mobil ve tablet vitrini (≤ 991 px) ═════════
   Masaüstündeki görsel şov küçültülmüş hâliyle: uzun dikey yığınlar yerine kaydırmalı şeritler (yandaki kart kenardan
   görünür), kompakt ızgaralar; rota, durak ve lejant çizgileri masaüstündeki gibi yatay akar. Masaüstü (≥ 992 px) etkilenmez.
   --kenar: şeridin taştığı kenar boşluğu (ds-kap ya da panelin iç boşluğu). */
@media (max-width: 991.98px) {
  .bo { --kenar: 24px; --serit-bosluk: 12px; }
  .bo-lejant, .bo-koyu { --kenar: 30px; overflow: hidden; }

  /* Ortak kaydırmalı şerit (kartlar) ve tek satırlık çip sırası */
  .bo-one__izgara, .bo-calisma, .bo-lejant__liste, .bo-koyu__liste, .bo-duraklar, .bo-sehirler, .bo-yazilar,
  .bo-hero__cipler:not(.bo-hero__cipler--dizin) {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--serit-bosluk); max-width: none;
    margin-inline: calc(-1 * var(--kenar)); padding-inline: var(--kenar); scroll-padding-inline: var(--kenar);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .bo-one__izgara::-webkit-scrollbar, .bo-calisma::-webkit-scrollbar, .bo-lejant__liste::-webkit-scrollbar, .bo-koyu__liste::-webkit-scrollbar,
  .bo-duraklar::-webkit-scrollbar, .bo-sehirler::-webkit-scrollbar, .bo-yazilar::-webkit-scrollbar, .bo-hero__cipler::-webkit-scrollbar { display: none; }
  .bo-one__izgara > *, .bo-calisma > *, .bo-lejant__liste > *, .bo-koyu__liste > *, .bo-duraklar > *, .bo-sehirler > *, .bo-yazilar > * {
    flex: 0 0 min(82%, 360px); min-width: 0; scroll-snap-align: start;
  }
  .bo-one__izgara > :only-child, .bo-calisma > :only-child, .bo-lejant__liste > :only-child, .bo-koyu__liste > :only-child, .bo-duraklar > :only-child { flex-basis: 100%; }
  /* Şeritte belirme yalnızca saydamlıkla (yana kaydırırken dikey kayma olmasın) */
  .bo-one__izgara > .ds-belir, .bo-calisma > .ds-belir, .bo-duraklar > .ds-belir, .bo-sehirler > .ds-belir, .bo-yazilar > .ds-belir { transform: none; }

  /* Kahraman: çalışma çipleri tek satır */
  .bo-hero__cipler:not(.bo-hero__cipler--dizin) { margin-top: 22px; padding-block: 2px; scroll-snap-type: x proximity; }
  .bo-hero__cipler:not(.bo-hero__cipler--dizin) li { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }

  /* Kahraman: şehir künyesi karolar hâlinde (plaka bileti) */
  .bo-kunye { padding: 14px 14px 16px; border-radius: 22px; }
  .bo-kunye__ust { padding: 0 2px 10px; }
  .bo-kunye dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 0; }
  .bo-kunye dl > div, .bo-kunye dl > div.genis { grid-column: auto; padding: 10px 12px; border-radius: 14px;
    background: color-mix(in srgb, var(--ton-zemin) 72%, #FFFFFF); border: 1px solid color-mix(in srgb, var(--ton) 12%, transparent); }
  .bo-kunye dt { font-size: 9.5px; letter-spacing: .1em; }
  .bo-kunye dd { margin-top: 6px; font-size: 14px; }
  .bo-kunye dd small { font-size: 11.5px; }
  .bo-kunye__koordinat { font-size: 12px !important; }

  /* Merkez › öne çıkanlar: tek panel yerine kart şeridi */
  .bo-one { margin-top: -22px; }
  .bo-one__izgara, .bo-one__izgara.n4, .bo-one__izgara.n2 { background: none; border: 0; border-radius: 0; box-shadow: none; padding-block: 4px 24px; }
  .bo-one__kart, .bo-one__kart + .bo-one__kart, .bo-one__izgara.n4 .bo-one__kart:nth-child(n+3) {
    padding: 22px 20px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: 0 16px 34px rgba(70, 50, 140, 0.09); }
  .bo-one__kart .ds-h3 { margin-top: 12px; font-size: 18px; }

  /* Merkez › çalışma şekli: kartlar şeritte, duraklardan bir sonraki karta kesikli rota akar */
  .bo-calisma { padding-block: 4px 24px; }
  .bo-calisma::before { display: none; }
  .bo-calisma__kart { padding: 22px; }
  .bo-calisma__kart:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 48px; left: calc(100% - 22px); width: calc(22px + var(--serit-bosluk) + 22px); height: 2px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ton) 60%, transparent) 0 7px, transparent 7px 13px); animation: boYolAk 1.1s linear infinite; pointer-events: none; }
  .bo-calisma__kart .ds-h3 { margin-top: 18px; font-size: 19px; }
  @keyframes boYolAk { to { background-position: 13px 0; } }

  /* Yerel bağlam (harita lejantı): maddeler şeritte, harf pinleri kesikli yolla bağlı */
  .bo-lejant { gap: 24px; }
  .bo-lejant__liste { padding-block: 2px 6px; }
  .bo-lejant__liste li { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; }
  .bo-lejant__harf { z-index: 2; }
  .bo-lejant__liste li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 34px; left: 60px; width: calc(100% - 60px + var(--serit-bosluk) + 18px); height: 2px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ton-isik) 75%, transparent) 0 6px, transparent 6px 12px); animation: boYolAk2 1.2s linear infinite; pointer-events: none; }
  .bo-lejant__liste h3 { margin-top: 0; }
  @keyframes boYolAk2 { to { background-position: 12px 0; } }

  /* Süreç: duraklar yatay şeritte, kesikli yol numaralardan geçer (masaüstündeki gibi) */
  .bo-duraklar { padding-block: 4px 24px; }
  .bo-duraklar::before { display: none; }
  .bo-duraklar > li { flex-basis: min(76%, 320px); flex-direction: column; gap: 16px; }
  .bo-duraklar > li:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 28px; width: calc(100% + var(--serit-bosluk)); height: 4px; border-radius: 4px; opacity: .55;
    background: repeating-linear-gradient(90deg, var(--ton) 0 14px, transparent 14px 24px); animation: boDurakAk 1.6s linear infinite; pointer-events: none; }
  @keyframes boDurakAk { to { background-position: 24px 0; } }

  /* Şehir × hizmet › koyu şerit: çalışma maddeleri şeritte, mini rota altta */
  .bo-koyu { gap: 26px; }
  .bo-koyu__liste { margin-top: 22px; padding-block: 2px 4px; }
  .bo-koyu__liste > li { flex-basis: min(80%, 320px); }

  /* İlgili yazılar şeritte */
  .bo-yazilar { padding-block: 2px 22px; }
  .bo-yazilar > * { flex-basis: min(80%, 330px); }

  /* Dizin: şehir kartları şeritte (her kart kendi tonunda) */
  .bo-sehirler { padding-block: 4px 24px; }
  .bo-sehirler > * { flex-basis: min(84%, 340px); }
  .bo-sehir__sayfalar a { min-height: 44px; }
  .bo-istanbul__adres { min-height: 44px; }

  /* Son çağrı: bilet çentikleri ve biniş kartı düzeni */
  .bo-bilet__kocan { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .bo-bilet__kocan-ust, .bo-bilet__kocan dl { grid-column: 1 / -1; }
  .bo-bilet__kocan dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; }
  .bo-bilet__ucretsiz { margin-top: 20px; }
  .bo-bilet__eposta { margin-top: 20px; padding-top: 0; justify-self: end; min-height: 44px; }
  .bo-bilet__kocan::before, .bo-bilet__kocan::after { content: ""; position: absolute; top: -18px; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; pointer-events: none; }
  .bo-bilet__kocan::before { left: -17px; }
  .bo-bilet__kocan::after { right: -17px; }

  /* Küçük bağlantılar: dokunma alanı ≥ 44 px */
  .bo-kirinti a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .bo-yol, .bo-bilet__ikincil, .bo-sehir-sayfalar__tum { min-height: 44px; }
  .bo-yol { margin-top: 0; }
}

@media (max-width: 767.98px) {
  .bo { --kenar: 16px; }
  .bo-lejant, .bo-koyu { --kenar: 20px; }

  /* Künye 2 × 2 */
  .bo-kunye { margin-inline: 6px; }
  .bo-kunye dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .bo-kunye dl > div, .bo-kunye dl > div.genis { padding: 9px 10px; }
  .bo-kunye__koordinat { font-size: clamp(9.5px, 2.75vw, 12px) !important; letter-spacing: -0.02em; white-space: nowrap; }

  /* Duraklar küçük numaralarla */
  .bo-duraklar > li:not(:last-child)::after { top: 21px; left: 23px; }

  /* Şehir × hizmet › öne çıkanlar: 2 × 2 kompakt */
  .bo-oc, .bo-oc.n2, .bo-oc.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bo-oc.n1 { grid-template-columns: minmax(0, 1fr); }
  .bo-oc > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bo-oc__kart { padding: 18px 14px 18px 18px; border-radius: 22px; }
  .bo-oc__kart::before { top: 18px; bottom: 18px; }
  .bo-oc__no { font-size: 34px; }
  .bo-oc__kart .ds-h3 { margin-top: 12px; font-size: 16px; line-height: 1.25; }
  .bo-oc__kart p { margin-top: 6px !important; font-size: 13px !important; line-height: 1.5 !important; }

  /* Merkez › şehrin hizmet sayfaları: 2 sütunlu kompakt kartlar */
  .bo-sayfalar, .bo-sayfalar.n2, .bo-sayfalar.n4, .bo-sayfalar.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bo-sayfalar.n1 { grid-template-columns: minmax(0, 1fr); }
  .bo-sayfalar > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  .bo-sayfa { padding: 14px; border-radius: 22px; }
  .bo-sayfa::before { width: 120px; height: 120px; }
  .bo-sayfa__ust { flex-wrap: wrap; gap: 8px; }
  .bo-sayfa__ikon { width: 46px; height: 46px; border-radius: 15px; }
  .bo-sayfa__ikon img { width: 34px; height: 34px; }
  .bo-sayfa__pin { padding: 4px 8px; gap: 4px; font-size: 11px; }
  .bo-sayfa__kat { margin-top: 12px; font-size: 9.5px; letter-spacing: .1em; }
  .bo-sayfa__baslik { margin-top: 5px; font-size: 15.5px; line-height: 1.2; }
  .bo-sayfa__ozet { margin-top: 6px; font-size: 12.5px; line-height: 1.5; }
  .bo-sayfa__ok { padding-top: 12px; font-size: 12.5px; }
  .bo-sayfa__ok i { width: 32px; height: 32px; border-radius: 10px; }

  /* Şehir × hizmet › ana hizmet kartı: görsel sağ alttan eğik taşar (masaüstündeki gibi) */
  .bo-ayrinti { padding: 24px 22px 0; }
  .bo-ayrinti__ok { padding-top: 20px; }
  .bo-ayrinti__gorsel, .bo-ayrinti:hover .bo-ayrinti__gorsel { width: 88%; align-self: flex-end; margin: 18px -40px -28px 0; border-radius: 18px; transform: rotate(-5deg); }

  /* İlgili sektörler: tek satır */
  .bo-sektorler { overflow: hidden; }
  .bo-sektorler ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .bo-sektorler ul::-webkit-scrollbar { display: none; }
  .bo-sektorler li { flex: 0 0 auto; scroll-snap-align: start; }
  .bo-sektorler a { min-height: 44px; white-space: nowrap; }

  /* Dizin › Türkiye geneli: 2 × 2 */
  .bo-online__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bo-online__liste li { padding: 14px; border-radius: 18px; }
  .bo-online__ikon { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; }
  .bo-online__liste b { margin-top: 10px; font-size: 15px; }
  .bo-online__liste small { font-size: 12.5px; line-height: 1.45; }

  /* Bilet koçanı */
  .bo-bilet__kocan dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-bilet__kocan dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 359.98px) {
  .bo-kunye__koordinat { white-space: normal; }
  .bo-bilet__eposta { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .bo-calisma__kart::after, .bo-lejant__liste li::after, .bo-duraklar > li::after { animation: none !important; }
}