/* ============================================================
   BebekSünneti DS v2 — City Page
   ============================================================ */

/* ── CITY LOCATOR (Hero) ────────────────────────────── */
.city-locator{
  padding:var(--section-y-sm) 0 var(--section-y);
  background:var(--surface-mist);
  border-bottom:1px solid var(--border-on-mist);
  position:relative;
}
.city-locator__inner{
  display:grid;
  grid-template-columns:8fr 4fr;
  gap:var(--s-8);
  align-items:end;
}
.city-locator__copy .aks-crumbs{margin-bottom:var(--s-4)}
.city-locator__eyebrow{margin-bottom:var(--s-3)}
.city-locator__city-name{
  font-family:var(--font-display);
  font-size:var(--t-display);
  line-height:var(--lh-display);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text-primary);
  display:block;
}
.city-locator h1{
  font-size:var(--t-h1);
  font-weight:600;
  margin-bottom:var(--s-4);
}
.city-locator .aks-lead{margin-bottom:var(--s-5)}

.city-locator__ledger{
  display:flex;gap:var(--s-6);
  padding-top:var(--s-5);
  border-top:1px solid var(--border-on-mist);
  margin-top:var(--s-5);
}
.city-locator__ledger-item{
  display:flex;flex-direction:column;
}
.city-locator__ledger-val{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,1.5vw + 0.8rem,2rem);
  font-weight:700;line-height:1.1;
  color:var(--text-primary);
}
.city-locator__ledger-label{
  font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:0.06em;font-weight:600;
  color:var(--text-muted);margin-top:var(--s-1);
}

.city-locator__badges{
  display:flex;flex-wrap:wrap;gap:var(--s-2);
  margin-bottom:var(--s-5);
}
.city-locator__cta{display:flex;gap:var(--s-3);flex-wrap:wrap}

@media(max-width:900px){
  .city-locator__inner{grid-template-columns:1fr}
  .city-locator__ledger{flex-wrap:wrap;gap:var(--s-5)}
}

/* ── CITY ANCHOR (content + panel) ──────────────────── */
.city-anchor{padding-block:var(--section-y)}
.city-anchor__grid{
  display:grid;
  grid-template-columns:8fr 4fr;
  gap:var(--s-7);
  align-items:start;
}
@media(max-width:900px){
  .city-anchor__grid{grid-template-columns:1fr}
}

/* ── CITY DISTRICTS ─────────────────────────────────── */
.city-districts{padding-block:var(--section-y)}
.city-districts__layout{
  display:grid;
  grid-template-columns:8fr 4fr;
  gap:var(--s-7);
  align-items:start;
}
.city-districts__filter{
  display:flex;flex-wrap:wrap;gap:var(--s-2);
  margin-bottom:var(--s-5);
}
.city-districts__filter-btn{
  padding:6px 14px;
  font-size:12px;font-weight:600;
  border-radius:var(--r-pill);
  border:1px solid var(--border-on-paper);
  color:var(--text-secondary);
  cursor:pointer;
  transition:all var(--dur-fast);
}
.city-districts__filter-btn:hover,
.city-districts__filter-btn.is-active{
  background:var(--anchor);color:#fff;border-color:var(--anchor);
}

.city-districts__search{margin-bottom:var(--s-5)}
.city-districts__search .aks-input{
  max-width:360px;height:44px;
  padding-left:40px;
  background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8492' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center;
}

.city-districts__columns{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-1);
}
.city-districts__columns a{
  display:block;
  padding:var(--s-3) var(--s-4);
  font-size:var(--t-small);
  color:var(--text-secondary);
  border-radius:var(--r-2);
  transition:background var(--dur-fast),color var(--dur-fast);
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.city-districts__columns a:hover{
  background:var(--surface-paper-2);color:var(--text-primary);
}

.city-districts__popular{
  position:sticky;top:100px;
}
.city-districts__popular h4{
  font-size:var(--t-small);font-weight:600;
  text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-muted);
  margin-bottom:var(--s-4);
}
.city-districts__popular-list{
  display:flex;flex-direction:column;gap:0;
}
.city-districts__popular-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--border-on-paper);
  font-size:var(--t-small);font-weight:500;
  color:var(--text-primary);
  text-decoration:none;
  transition:color var(--dur-fast);
}
.city-districts__popular-item:hover{color:var(--anchor)}
.city-districts__popular-item::after{
  content:'→';color:var(--text-muted);font-size:12px;
  transition:transform var(--dur-fast);
}
.city-districts__popular-item:hover::after{transform:translateX(3px)}

@media(max-width:900px){
  .city-districts__layout{grid-template-columns:1fr}
  .city-districts__columns{grid-template-columns:repeat(2,1fr)}
  .city-districts__popular{position:static;margin-top:var(--s-6)}
}
@media(max-width:600px){
  .city-districts__columns{grid-template-columns:1fr}
}

/* ── CITY PROCESS ───────────────────────────────────── */
.city-process{padding-block:var(--section-y)}
.city-process__steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-6);
}
.city-process__step{
  padding-top:var(--s-5);
  border-top:1px solid var(--border-on-mist);
}
.city-process__step-num{
  font-family:var(--font-display);
  font-size:clamp(2rem,3vw,3.5rem);
  font-weight:700;
  color:var(--mist-200);
  line-height:1;
  margin-bottom:var(--s-3);
}
.city-process__step h3{font-size:var(--t-h3);margin-bottom:var(--s-2)}
.city-process__step p{font-size:var(--t-small);color:var(--text-secondary)}

@media(max-width:600px){
  .city-process__steps{grid-template-columns:1fr}
}

/* ── CITY MEDICAL NOTES ─────────────────────────────── */
.city-medical{padding-block:var(--section-y)}

/* ── CITY LEAD ──────────────────────────────────────── */
.city-lead{padding-block:var(--section-y)}
.city-lead__grid{
  display:grid;
  grid-template-columns:6fr 6fr;
  gap:var(--s-7);
  align-items:start;
}
@media(max-width:900px){.city-lead__grid{grid-template-columns:1fr}}

/* ── CITY RELATED ───────────────────────────────────── */
.city-related{padding-block:var(--section-y-sm)}
.city-related__rail{
  display:flex;gap:var(--s-3);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--s-2);
}
.city-related__rail::-webkit-scrollbar{display:none}
.city-related__card{
  flex-shrink:0;
  width:200px;
  padding:var(--s-4);
  border:1px solid var(--border-on-paper);
  border-radius:var(--r-3);
  text-decoration:none;
  font-size:var(--t-small);font-weight:500;
  color:var(--text-primary);
  transition:border-color var(--dur-fast);
}
.city-related__card:hover{border-color:var(--anchor)}
.city-related__card small{display:block;color:var(--text-muted);margin-top:var(--s-1);font-weight:400}