/* One shared content grid from the header to the footer on every public page.
   Backgrounds remain full width; text and cards follow the same outer edges. */
:root {
  --content-max: 1680px;
  --page-gutter: max(6vw, calc((100vw - var(--content-max)) / 2));
}

#header,
#mega-menu,
.corporate-dropdown,
.hero .hero-content,
.section-pad,
.expertise-showcase,
.home-contact.home-contact-blended,
footer.bend-footer,
.inner-hero,
.inner-callout,
.inner-section-title,
.inner-filters,
.inner-grid,
.blog-grid,
.project-gallery,
.reference-grid,
.office-grid,
.project-intro,
.editorial-landing-hero,
.editorial-content,
.article-hero,
.article-layout,
.contact-page-copy,
.contact-channels,
.contact-locations,
.portfolio-banner,
.portfolio-grid,
.document-grid,
.about-banner,
.about-wrap,
.service-banner,
.service-wrap,
.service-related-heading {
  padding-inline: var(--page-gutter);
}

/* Viewport gutters belong on full-width wrappers. Limit reading width on their
   text children, never on the padded wrapper (which collapses on wide screens). */
.home-contact-inner,
.about-wrap,
.service-wrap,
.inner-hero {
  max-width: none;
}

.hero .hero-bottom,
.project-cover-banner > .bend-breadcrumbs {
  left: var(--page-gutter);
  right: var(--page-gutter);
}

.portfolio-count {
  right: var(--page-gutter);
}

.project-info,
.article-cover,
.article-footer {
  margin-inline: var(--page-gutter);
}

/* Full-width film; overlaid copy stays aligned with the shared content grid. */
.site-film {
  margin: 0;
}
.site-film-title {
  left: var(--page-gutter);
  right: var(--page-gutter);
}
.site-film-copy {
  right: var(--page-gutter);
}

@media (max-width: 760px) {
  :root { --page-gutter: clamp(20px, 6vw, 40px); }
  .site-film-copy { left: var(--page-gutter); }
  /* Five slide tabs and all three controls must fit inside the page gutters. */
  .hero-slider-controls {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px 32px;
    gap: 5px;
    min-width: 0;
  }
  .hero-slider-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; min-width: 0; }
  .hero-slider-tabs button { min-width: 0; width: 100%; min-height: 44px; }
  .hero-slider-tabs i { width: 100%; max-width: 44px; }
  .hero-slider-controls > button { width: 32px; min-width: 0; min-height: 44px; padding: 4px; }
}

@media (max-width: 380px) {
  .experience-card h3 { flex-wrap: wrap; gap: 12px; }
  .experience-card h3 > span { max-width: 100%; font-size: 24px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .expertise-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; min-height: 0; gap: 16px; }
  .expertise-panel { height: 440px; }
  .expertise-showcase .expertise-panel-copy,
  .expertise-showcase .expertise-panel.active .expertise-panel-copy { left: 24px; right: 24px; bottom: 28px; width: auto; height: auto; }
  .expertise-showcase .expertise-panel h3,
  .expertise-showcase .expertise-panel.active h3 { display: block; width: auto; height: auto; font-size: 26px; }
  .expertise-showcase .expertise-panel-description,
  .expertise-showcase .expertise-panel.active .expertise-panel-description { position: static; width: auto; margin-top: 16px; opacity: 1; visibility: visible; transition: none; }
  .expertise-showcase .expertise-panel-description > p { width: auto; font-size: 14px; }
  .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.document-card { min-width: 0; }
.document-card h2 { overflow-wrap: break-word; }

/* Relative tracking keeps translated headings legible at every font size. */
:is(.footprint-heading, .expertise-showcase .section-heading, .approach, .site-film, .updates-heading, .home-contact, .contact-locations-heading) h2 {
  letter-spacing: -.025em;
  overflow-wrap: break-word;
}

/* Panel kullanıcısına yayında olmayan dilin önizlemesi olduğunu hatırlatır. */
.language-preview-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    padding: 10px 16px; background: #b45309; color: #fff;
    font: 600 13px/1.4 'DM Sans', 'DM Sans Fallback', sans-serif; text-align: center;
}
.language-preview-bar a { color: #fff; text-decoration: underline; margin-left: 8px; }