/* ===== Design tokens (from Lina Industry.dc.html) ===== */
:root {
  --bg: #F4F5F6;
  --text: #2F343A;
  --text-muted: #6B7178;
  --text-muted-2: #4A5056;
  --text-muted-3: #A0A6AC;
  --text-muted-4: #8A9098;
  --border: #E3E5E8;
  --border-2: #EEF0F2;
  --border-3: #C9D3E3;
  --primary: #12459B;
  --primary-dark: #0D3576;
  --primary-tint: #9FC0F0;
  --primary-tint-2: #A9C6F2;
  --primary-tint-3: #C3D6F3;
  --dark: #2F343A;
  --darker: #23272C;
  --darker-border: #34393F;
  --darker-muted: #9AA1A8;
  --darker-muted-2: #6E767E;
  --darker-text: #C3C8CE;
  --ongoing: #B4652A;
  --orange: #F28C28;
  --font-heading: 'Archivo', sans-serif;
  --font-body: 'Barlow', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; }
.container-lina { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 28px); }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Home page: header floats transparently over the hero image until scrolled. */
body[data-page="home"] .site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body[data-page="home"] .site-header.is-scrolled {
  position: fixed;
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--border);
  backdrop-filter: blur(8px);
}
body[data-page="home"] .site-nav a { color: #fff; }
body[data-page="home"] .site-nav a:hover,
body[data-page="home"] .site-nav a.active { color: var(--primary-tint); }
body[data-page="home"] .site-header.is-scrolled .site-nav a { color: #3E444B; }
body[data-page="home"] .site-header.is-scrolled .site-nav a:hover,
body[data-page="home"] .site-header.is-scrolled .site-nav a.active { color: var(--primary); }
.site-header .header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(18px, 3vw, 28px);
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
}
.site-header .brand { display: flex; align-items: center; flex-shrink: 0; }
.site-header .brand img { height: 44px; width: auto; display: block; transition: filter 0.25s ease; }
body[data-page="home"] .site-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.site-nav a {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--font-heading);
  color: #3E444B;
}
.site-nav a:hover, .site-nav a.active { color: var(--primary); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
.lang-switch a {
  padding: 6px 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.55;
}
.lang-switch a:hover { opacity: 0.85; }
.lang-switch a.active { opacity: 1; font-weight: 700; }
body[data-page="home"] .lang-switch { border-left-color: rgba(255, 255, 255, 0.25); }
.btn-quote {
  background: var(--primary);
  color: #fff;
  padding: 15px 26px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  border: none;
  display: inline-block;
}
.btn-quote:hover { background: var(--primary-dark); color: #fff; }

/* ===== Buttons ===== */
.btn-lina-primary {
  background: var(--primary);
  color: #fff;
  padding: 16px clamp(18px, 3vw, 28px);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-block;
  border: none;
}
.btn-lina-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-lina-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 16px clamp(18px, 3vw, 28px);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-block;
}
.btn-lina-outline-light:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn-lina-white {
  background: #fff;
  color: var(--primary);
  padding: 17px 30px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-block;
}
.btn-lina-white:hover { background: #E9EFF9; color: var(--primary); }

/* ===== Home fold: header + hero + stats bar fill exactly one screen (desktop/tablet) ===== */
.home-fold { display: flex; flex-direction: column; }

/* ===== Hero ===== */
.hero {
  position: relative;
  background: var(--dark);
}
.hero img {
  width: 100%;
  height: clamp(480px, 62vh, 640px);
  object-fit: cover;
  display: block;
  opacity: 0.55;
}

@media (min-width: 960px) {
  .home-fold { min-height: 100vh; min-height: 100dvh; }
  .hero { flex: 1 1 auto; min-height: 420px; }
  .hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 27, 31, 0.92) 0%, rgba(23, 27, 31, 0.45) 65%, rgba(23, 27, 31, 0.15) 100%);
}
.hero-content { position: absolute; inset: 0; display: flex; align-items: center; }
.hero-content .container-lina { width: 100%; }
@media (max-width: 959px) {
  /* .hero-content used to stay position:absolute, centered within .hero's fixed clamp()
     height — fine for short text, but at narrow widths (long eyebrow label, wrapped
     CTA buttons) the centered block can need more vertical room than that fixed height
     allows, and the overflow bled out both above (into the header) and below (into the
     stats bar). Fix: let the image cover absolutely instead (like the ≥960px layout
     already does) and put .hero-content back in normal flow with a min-height matching
     the old clamp() — so short content still looks identical, but taller content simply
     grows the section instead of overflowing it. padding-top keeps text clear of the
     transparent header that overlays the top of this section regardless of its height.
     (Must come after the base .hero-content rule above to actually win the cascade.) */
  .hero { min-height: clamp(480px, 62vh, 640px); }
  .hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-content {
    position: relative;
    inset: auto;
    min-height: clamp(480px, 62vh, 640px);
    padding-top: 90px;
    padding-bottom: 48px;
  }
}
.hero-inner { max-width: 680px; }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero-eyebrow .rule { width: 34px; height: 3px; background: #2E6FD4; }
.hero-eyebrow span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-tint);
}
.hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--orange);
  margin: 0 0 24px;
}
.hero p {
  font-size: 19px;
  line-height: 1.6;
  color: #D8DCE1;
  margin: 0 0 36px;
  max-width: 560px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Scroll-down cue: only relevant on the forced full-screen fold (desktop/tablet). */
.scroll-cue { display: none; }
@media (min-width: 960px) {
  .scroll-cue {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 4vh, 32px);
    color: #fff;
    opacity: 0.75;
    z-index: 5;
    animation: scroll-cue-bounce 2s ease-in-out infinite;
  }
  .scroll-cue:hover { opacity: 1; color: #fff; }
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ===== Page header band (non-home pages) ===== */
.page-header-band {
  position: relative;
  background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 55%, var(--primary-dark) 100%);
  padding: clamp(64px, 9vw, 104px) 0 clamp(48px, 6vw, 68px);
  overflow: hidden;
}
.page-header-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 42px);
  pointer-events: none;
}
.page-header-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-tint) 45%, transparent 100%);
}
.page-header-inner { position: relative; }
.page-header-band .eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-header-band .eyebrow-row .rule { width: 34px; height: 3px; background: #2E6FD4; }
.page-header-band .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-tint);
}
.page-header-band h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  max-width: 760px;
}
.page-header-band h1 .accent { color: var(--primary-tint); }
.page-header-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.page-header-meta .meta-val { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: #fff; line-height: 1; display: block; }
.page-header-meta .meta-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--darker-muted); margin-top: 8px; display: block; }

/* ===== Stats bar (home, blue) ===== */
.stats-bar { background: var(--primary); flex: 0 0 auto; }
.stats-bar .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.stats-bar .stat {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.stats-bar .stat:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.16); }
.stats-bar .stat:nth-last-child(-n+2) { border-bottom: none; }
.stats-bar .stat-value { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: #fff; line-height: 1; }
.stats-bar .stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-tint-2);
  margin-top: 8px;
}
@media (min-width: 960px) {
  .stats-bar .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-bar .stat { border-bottom: none; border-right: 1px solid rgba(255, 255, 255, 0.16); }
  .stats-bar .stat:last-child { border-right: none; }
}

/* ===== Section eyebrow + heading ===== */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}
.section-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 20px 0 0;
}
.section-header-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.section-link {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 4px;
}

/* ===== Section padding helpers ===== */
.section-py { padding: clamp(56px, 8vw, 96px) 0; }
.section-py-sm { padding: clamp(52px, 7vw, 88px) 0; }
.section-py-md { padding: clamp(48px, 6vw, 80px) 0; }
.bg-white-bordered { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ===== 1px divider grid (pillars / capabilities) ===== */
.divider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.divider-grid > div { background: #fff; padding: 32px clamp(18px, 3vw, 28px); }
.divider-grid > div:hover { background: #F8F9FA; }
.divider-grid.pillars { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.divider-grid.pillars > div { padding: 24px 20px; }
.divider-grid.pillars > div:hover { background: #fff; }

.pillar-title { font-family: var(--font-heading); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.pillar-text { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

.cap-no { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted-3); margin-bottom: 18px; }
.cap-title { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.cap-text { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* ===== Capability cards (full, capabilities page) ===== */
.cap-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 34px 30px 38px;
}
.cap-card:hover { border-color: var(--primary); }
.cap-card .cap-top { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.cap-card .cap-rule { width: 22px; height: 2px; background: var(--primary); }
.cap-card .cap-top span.no { font-family: var(--font-mono); font-size: 12px; color: var(--primary); }
.cap-card h3 { font-family: var(--font-heading); font-size: 21px; font-weight: 700; margin: 0 0 12px; line-height: 1.25; }
.cap-card p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0 0 20px; }
.cap-card .cap-meta {
  border-top: 1px solid var(--border-2);
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted-3);
}

/* ===== Project cards ===== */
.project-card { display: block; background: #fff; border: 1px solid var(--border); color: inherit; }
.project-card:hover { border-color: var(--primary); color: inherit; }
.project-card .thumb { position: relative; }
.project-card .thumb img { width: 100%; height: 220px; object-fit: cover; display: block; }
.project-card.project-card-lg .thumb img { height: 240px; }
.status-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  color: #fff;
}
.status-badge.done { background: var(--primary); }
.status-badge.ongoing { background: var(--ongoing); }
.photo-count-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  color: #fff;
  background: rgba(23, 27, 31, 0.72);
}
.project-card .body { padding: 24px 22px 26px; }
.project-card.project-card-lg .body { padding: 26px 24px clamp(18px, 3vw, 28px); }
.project-type-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}
.project-card h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin: 0 0 8px; line-height: 1.25; }
.project-card.project-card-lg h3 { font-size: 22px; }
.project-meta-line { font-size: 15px; color: var(--text-muted); margin-bottom: 18px; }
.project-card.project-card-lg .project-meta-line { margin-bottom: 20px; }
.project-stats-row {
  display: flex;
  gap: 24px;
  border-top: 1px solid var(--border-2);
  padding-top: 16px;
}
.project-stats-row.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 18px; }
.project-stats-row .val { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--primary); }
.project-stats-row.cols-3 .val { font-size: 19px; color: var(--text); }
.project-stats-row .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-3);
  margin-top: 4px;
}
.project-stats-row.cols-3 .unit { font-size: 10px; }

.projects-grid { display: grid; gap: 24px; }

/* ===== Filters (projects page) ===== */
.project-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.project-filters a {
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.project-filters a:hover { color: var(--primary); }
.project-filters a.active { color: var(--primary); border-bottom-color: var(--primary); }
@media (max-width: 420px) {
  /* Shrink just enough that all three tabs ("Tümü/Tamamlanan/Devam eden") stay on one
     line instead of wrapping on narrow phones. */
  .project-filters { gap: 0; }
  .project-filters a { padding: 12px 8px; font-size: 11.5px; letter-spacing: 0.02em; }
}
.project-filters a .count { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--text-muted-3); }

/* ===== Project detail ===== */
.back-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-block;
  margin-bottom: 28px;
}
.back-link:hover { color: var(--primary); }
.detail-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.detail-header h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 780px;
}
.detail-badges { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.detail-location { font-size: 16px; color: var(--text-muted); white-space: nowrap; font-family: var(--font-mono); }
.detail-main-img {
  width: 100%;
  height: clamp(300px, 48vh, 520px);
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
  background: #fff;
  cursor: zoom-in;
}
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.detail-gallery a { display: block; border: 2px solid var(--border); cursor: zoom-in; }
.detail-gallery a.active { border-color: var(--primary); }
.detail-gallery img { width: 100%; height: 88px; object-fit: cover; display: block; }

/* ===== Project photo lightbox ===== */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(23, 27, 31, 0.97);
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-img { max-width: 84vw; max-height: 80vh; object-fit: contain; display: block; }
.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--primary); border-color: var(--primary); }
.lightbox-close { top: 20px; right: 24px; width: 44px; height: 44px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 700px) {
  .lightbox-img { max-width: 92vw; max-height: 72vh; }
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .lightbox-counter { bottom: 14px; }
}
.detail-block { margin-top: 32px; }
.detail-block h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 700; margin: 0 0 14px; }
.detail-block p { font-size: 18px; line-height: 1.7; color: var(--text-muted-2); margin: 0; }
.scope-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.scope-tag {
  border: 1px solid var(--border-3);
  background: #fff;
  padding: 11px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary);
}
.detail-sidebar { background: #fff; border: 1px solid var(--border); }
.detail-sidebar .sidebar-head {
  padding: 24px 26px;
  border-bottom: 1px solid var(--border);
  background: var(--dark);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-tint);
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--border-2);
}
.spec-row .k {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-4);
  flex-shrink: 0;
}
.spec-row .v { font-size: 16px; font-weight: 500; text-align: right; }
.detail-sidebar .sidebar-cta { padding: 26px; }
.detail-sidebar .sidebar-cta a { display: block; text-align: center; }

/* ===== About page ===== */
.about-photo { width: 100%; height: clamp(240px, 32vh, 340px); object-fit: cover; display: block; border: 1px solid var(--border); }
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: none;
}
.about-stats-grid > div { background: #fff; padding: 24px; }
.about-stats-grid .val { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--primary); line-height: 1; }
.about-stats-grid .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 10px; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.process-grid > div { background: #fff; padding: 30px 22px 34px; }
.process-no { font-family: var(--font-heading); font-size: 34px; font-weight: 800; color: var(--border); line-height: 1; margin-bottom: 16px; }
.process-title { font-family: var(--font-heading); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.process-text { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

.cert-badge {
  border: 1px solid var(--border-3);
  background: #fff;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--primary);
  display: inline-block;
}

/* ===== Client reference logo wall (Referanslar page) ===== */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.client-card {
  background: #fff;
  min-height: 140px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.client-card:hover { background: #F8F9FA; }
.client-card img { max-width: 160px; max-height: 64px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.15s ease, opacity 0.15s ease; }
.client-card:hover img { filter: grayscale(0); opacity: 1; }
.client-name { font-family: var(--font-heading); font-size: 21px; font-weight: 700; color: var(--text-muted-3); letter-spacing: 0.02em; transition: color 0.15s ease; }
.client-card:hover .client-name { color: var(--primary); }

/* ===== Capabilities CTA band ===== */
.cta-band { background: var(--primary); }
.cta-band .cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(44px, 6vw, 72px);
}
.cta-band h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px, 3vw, 34px); color: #fff; margin: 0 0 10px; }
.cta-band p { font-size: 18px; color: var(--primary-tint-3); margin: 0; }

/* ===== Contact page ===== */
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.office-card { background: #fff; padding: 36px 32px 40px; }
.office-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 16px; }
.office-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.office-address { font-size: 17px; line-height: 1.6; color: var(--text-muted-2); margin-bottom: 22px; }
.office-lines { display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.office-lines .lbl { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted-4); }
.map-placeholder { width: 100%; height: clamp(240px, 34vh, 380px); object-fit: cover; display: block; border: 1px solid var(--border); }
.map-note { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted-4); margin-top: 10px; }

/* ===== Footer ===== */
.site-footer { background: var(--darker); color: var(--darker-text); }
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--darker-border);
}
.footer-top .brand-logo { height: 30px; width: auto; display: block; margin-bottom: 20px; filter: brightness(0) invert(1); }
.footer-top p { font-size: 16px; line-height: 1.6; margin: 0; max-width: 320px; color: var(--darker-muted); }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--darker-muted-2);
  margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 16px; white-space: nowrap; color: var(--darker-text); }
.footer-links a:hover { color: #fff; }
.footer-standards { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--darker-muted); }
.footer-standards a { color: var(--darker-muted); }
.footer-standards a:hover { color: #fff; text-decoration: underline; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: var(--darker-text); }
.footer-contact a { color: var(--darker-text); }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--darker-muted-2);
}
.site-footer .container-lina { padding-top: 60px; padding-bottom: 28px; }

/* ===== Placeholder image tiles ===== */
.ph-tile {
  background-color: #E7E9EC;
  background-image: repeating-linear-gradient(45deg, #DCDFE3 0, #DCDFE3 5px, transparent 5px, transparent 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7A8290;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  padding: 8px;
}

/* ===== Mobile nav toggle ===== */
.nav-toggle { display: none; }
@media (max-width: 959px) {
  /* The dropdown is taken out of flow so opening/closing it never reflows the
     header row (which was pushing the logo up/down). */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 12px 20px rgba(23, 27, 31, 0.1);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 16px; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--border);
    background: #fff;
  }
  /* The header-inner row only reliably fits brand + hamburger at this width; keeping
     the quote button here too made it wrap onto a second row that then overlapped
     the hero text below (home header is position:absolute, so a taller header isn't
     reserved space). İletişim nav link + page CTAs already cover "get a quote". */
  .btn-quote { display: none; }

  .lang-switch {
    margin: 4px 16px 10px;
    padding: 12px 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .lang-switch a { padding: 6px 10px; }
  body[data-page="home"] .lang-switch { border-top-color: rgba(255, 255, 255, 0.15); }

  body[data-page="home"] .nav-toggle { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
  body[data-page="home"] .site-nav { background: rgba(23, 27, 31, 0.96); border-top-color: rgba(255, 255, 255, 0.12); }
  body[data-page="home"] .site-header.is-scrolled .nav-toggle { background: #fff; border-color: var(--border); color: inherit; }
  body[data-page="home"] .site-header.is-scrolled .site-nav { background: #fff; border-top-color: var(--border); }
}