.city-page{margin:0;color:var(--color-foreground);background:var(--color-background);font-family:Poppins,sans-serif}
.city-page *,.city-page *::before,.city-page *::after{box-sizing:border-box}.city-page a{color:inherit;text-decoration:none}
.city-hero{padding-bottom:4rem}.cities-directory{padding:3.5rem 0 4.5rem;background:#fff}
.cities-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:1.5rem}
.cities-eyebrow{display:block;margin-bottom:.35rem;color:var(--color-primary);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.cities-heading h2{margin:0;color:var(--bio-ink-950);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.035em}
.cities-heading p{margin:0;padding:.55rem .85rem;border:1px solid #ffd9c2;border-radius:999px;color:var(--color-muted-foreground);background:#fff8f3;font-size:.78rem;white-space:nowrap}.cities-heading p strong{color:var(--color-primary)}
.cities-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.65rem}
.city-card{min-width:0}.city-card>a{position:relative;display:flex;min-height:6.3rem;padding:.9rem;align-items:flex-start;gap:.7rem;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--bio-radius-sm);background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.city-card>a::before{content:"";position:absolute;inset:auto -1.5rem -2.2rem auto;width:5rem;height:5rem;border-radius:50%;background:var(--color-muted);transition:transform .25s ease,background .25s ease}
.city-card>a:hover{transform:translateY(-3px);border-color:#ffc8a6;box-shadow:0 13px 28px rgba(21,29,42,.09)}.city-card>a:hover::before{transform:scale(1.25);background:#fff0e5}
.city-card>a:focus-visible{outline:3px solid rgba(255,118,24,.45);outline-offset:3px}
.city-card__icon{position:relative;z-index:1;display:grid;width:1.8rem;height:1.8rem;flex:0 0 1.8rem;place-items:center;border-radius:.55rem;color:var(--color-primary);background:#fff3eb;font-size:.82rem}
.city-card__content{position:relative;z-index:1;display:flex;min-width:0;flex-direction:column;gap:.25rem}.city-card__content strong{overflow:hidden;color:var(--bio-ink-950);font-size:.86rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.city-card__content small{color:var(--color-muted-foreground);font-size:.68rem}
.city-card__arrow{position:absolute;right:.75rem;bottom:.65rem;z-index:1;color:var(--color-primary);font-size:.7rem;opacity:0;transform:translateX(-5px);transition:opacity .2s ease,transform .2s ease}.city-card>a:hover .city-card__arrow{opacity:1;transform:translateX(0)}
@media(max-width:1180px){.cities-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:900px){.cities-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:680px){.cities-directory{padding:2.5rem 0 3.5rem}.cities-heading{align-items:flex-start;flex-direction:column;gap:.8rem}.cities-heading p{white-space:normal}.cities-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.city-card>a{min-height:5.8rem}}
@media(max-width:380px){.cities-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.city-page *,.city-page *::before,.city-page *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Kart altı: birkaç ilçe + "Tüm ilçeler" (v1.1) */
.city-card{display:flex;flex-direction:column;gap:.4rem}
.city-card__more{display:flex;flex-direction:column;gap:.3rem;padding:0 .35rem}
.city-card__districts{display:flex;flex-wrap:wrap;gap:.15rem .65rem;margin:0;padding:0;list-style:none}
.city-page .city-card__districts a{color:var(--color-muted-foreground);font-size:.72rem;line-height:1.5}
.city-page .city-card__districts a:hover{color:var(--color-primary)}
.city-page .city-card__all{display:inline-flex;align-items:center;gap:.3rem;color:var(--color-primary);font-size:.72rem;font-weight:600}
.city-page .city-card__all:hover{text-decoration:underline}
.city-page .city-card__all i{font-size:.6rem}
.city-page .cities-heading__link{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border:1px solid #ffd9c2;border-radius:999px;color:var(--color-primary);background:#fff8f3;font-size:.8rem;font-weight:600;white-space:nowrap}
.city-page .cities-heading__link:hover{background:#ffeede}
.city-card--all>a.city-card__main{border-color:#ffc8a6;background:#fff8f3}
@media(max-width:680px){.city-page .cities-heading__link{white-space:normal}}