/* Responsive composition of the glass interface */
@media (max-width: 1150px) {
  .site-header { grid-template-columns: minmax(10rem, 1fr) auto; gap: .65rem 1rem; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .language-nav { grid-column: 2; grid-row: 1; }
  .city-card { top: 23%; }
  .quote-card { bottom: 16%; }
}
@media (max-width: 760px) {
  .site-header { top: .7rem; width: calc(100% - 1.2rem); padding: .6rem .7rem; border-radius: .95rem; }
  .brand__mark { font-size: 2rem; }
  .brand__name { font-size: .8rem; letter-spacing: .09em; }
  .brand__tagline { font-size: .57rem; }
  .primary-nav { justify-content: flex-start; gap: .2rem; overflow-x: auto; padding: .1rem .1rem .25rem; scrollbar-width: none; }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav a { padding: .42rem .5rem; font-size: .73rem; }
  .language-nav button { min-width: 2rem; min-height: 2rem; font-size: .7rem; }
  .side-nav { top: auto; right: .7rem; bottom: calc(env(safe-area-inset-bottom, 0px) + .7rem); left: .7rem; width: auto; flex-direction: row; justify-content: space-around; gap: .2rem; padding: .3rem; border-radius: 1rem; transform: none; }
  .side-nav__link { min-width: 0; min-height: 3.2rem; flex: 1 1 0; gap: .18rem; padding: .35rem .1rem; font-size: .61rem; }
  .side-nav__link svg { width: 1.15rem; height: 1.15rem; }
  .city-card { top: auto; right: .75rem; bottom: 6rem; width: min(11rem, 45vw); }
  .city-card__image { min-height: 3.8rem; }
  .city-card__content { padding: .6rem .7rem .75rem; }
  .city-card h2 { font-size: 1.1rem; }
  .city-card__subtitle, .city-card__description, .text-link { font-size: .64rem; }
  .quote-card { right: auto; bottom: 6.1rem; left: .75rem; width: min(10rem, 42vw); padding: .7rem .75rem; }
  .quote-card p { font-size: .72rem; }
  .quote-card cite { font-size: .46rem; }
  .hero-scroll-hint { bottom: 5.2rem; font-size: .55rem; }
}
@media (max-width: 430px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .brand { gap: .42rem; }
  .brand__mark { font-size: 1.65rem; }
  .brand__name { font-size: .69rem; letter-spacing: .06em; }
  .brand__tagline { font-size: .5rem; }
  .language-nav button { min-width: 2rem; min-height: 2rem; padding-inline: .25rem; }
  .side-nav { bottom: .55rem; }
  .side-nav__link { font-size: .58rem; }
  .side-nav__link--quiet { display: none; }
  .city-card { bottom: 5.2rem; width: 9.5rem; }
  .quote-card { bottom: 5.2rem; width: 8.9rem; }
  .hero-scroll-hint { bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Stage 14: keep below-the-fold sections cheaper to render without hiding content. */
@supports (content-visibility: auto) {
  #kesfet,
  #kultur,
  #yarisma,
  #afis,
  #hakkinda {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }
}

/* Avoid accidental horizontal overflow on long translated labels and form controls. */
img, canvas, video, svg { max-width: 100%; }
input, textarea, select, button { font: inherit; }
textarea { max-width: 100%; }


/* A fixed desktop quick rail reserves a calm content lane to its right. */
@media (min-width: 761px) {
  .content-section, .site-footer {
    width: min(calc(100% - 10rem), var(--content-width));
    margin-left: max(8rem, calc((100% - var(--content-width) + 8rem) / 2));
    margin-right: auto;
  }
  .feature-cards {
    width: min(calc(100% - 10rem), 76rem);
    margin-left: max(8rem, calc((100% - 76rem + 8rem) / 2));
    margin-right: auto;
  }
}
@media (max-width: 760px) {
  .content-section, .site-footer { width: min(100% - 3rem, var(--content-width)); margin-inline: auto; }
  .feature-cards { width: min(calc(100% - 1.5rem), 76rem); margin-inline: auto; }
}
@media (max-width: 760px) {
  body { padding-bottom: calc(4.7rem + env(safe-area-inset-bottom, 0px)); }
}