@import url("../fonts/fonts.css");

/* ===========================================================================
   CES Mimarlık İnşaat — design system
   Light, navy-led, card-based. One stylesheet, no framework.
   Order: tokens → reset → primitives → components → pages → motion
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* brand */
  --navy-900: #071b38;
  --navy-800: #0a2447;
  --navy: #0d2c5c;          /* primary — buttons, brand, eyebrows */
  --navy-600: #17417d;
  --navy-050: #eef3fa;

  /* brass accent, sampled from the firm's emblem. Decorative only — rules,
     borders, tints. Gold TEXT on white is 3.1:1 and would fail AA, so text
     stays navy. */
  --gold: #b08d4f;
  --gold-soft: #dcc79a;
  --gold-050: #faf5ea;

  /* neutrals — every pair below was measured for WCAG AA.
     The firm's reading of the first build was that the text was "çok soft…
     çok zor okunuyor", so body and meta both moved several steps darker and
     the base weight went to 500. AA was never the problem; perceived weight
     on a bright white ground was. */
  --ink: #0b111c;           /* headings            19.8:1 on white */
  --text: #333d4c;          /* body                11.4:1 on white, 10.3 on tint */
  --muted: #4a5563;         /* meta / small print   8.0:1 on white, 7.3 on tint */
  --line: #e5e9ef;
  --line-2: #eff2f6;
  --bg: #ffffff;
  --tint: #f5f7fa;
  --tint-2: #eaeff5;

  /* type */
  --ff: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-d: "Archivo", var(--ff);

  /* metrics */
  --wrap-w: 1320px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --hdr: 112px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* outside margin + gutter — lets an image bleed to the viewport edge */
  --edge: calc(max(0px, (100vw - var(--wrap-w) - 2 * var(--gut)) / 2) + var(--gut));

  --sh-1: 0 1px 2px rgba(13, 26, 48, .05), 0 2px 8px -4px rgba(13, 26, 48, .06);
  --sh-2: 0 2px 4px rgba(13, 26, 48, .05), 0 18px 38px -20px rgba(13, 26, 48, .22);
  --sh-3: 0 4px 10px rgba(13, 26, 48, .06), 0 32px 60px -28px rgba(13, 26, 48, .30);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .32s;
}

@media (max-width: 1080px) { :root { --hdr: 100px; } }
@media (max-width: 900px) { :root { --hdr: 88px; } }
@media (max-width: 420px) { :root { --hdr: 76px; } }

/* Anchored sections (the twelve service ids) must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--hdr) + 1.25rem); }

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--ff);
  font-size: 1rem;
  /* Manrope is variable 400–800, so 500 costs nothing to load and is the
     single biggest fix for "yazılar çok soft" across every page at once. */
  font-weight: 500;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* short pages (404) ended their footer mid-screen and left a white strip
     under it — the footer now grows to the bottom of the viewport */
  display: flex; flex-direction: column; min-height: 100dvh;
}
main { flex: 1 0 auto; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--tint-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--ff-d); color: var(--ink); line-height: 1.15; font-weight: 700; }
svg { stroke-width: 1.6; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r);
  transition: top .2s;
}
.skip:focus { top: 1rem; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------------------- primitives */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap-w) + 2 * var(--gut));
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec { padding-block: clamp(3.25rem, 5vw, 5rem); }
.sec--tint { background: var(--tint); }
.sec--tight { padding-block: clamp(2.5rem, 3.75vw, 3.75rem); }
.sec--flush-t { padding-top: 0; }
.sec--cta { padding-block: clamp(2.75rem, 4vw, 4rem); }

/* type scale */
.display {
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.1rem + 3.6vw, 3.85rem);
  line-height: 1.03;
  letter-spacing: -.022em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.h1 {
  font-size: clamp(1.9rem, 1.25rem + 2.5vw, 3rem);
  line-height: 1.08; letter-spacing: -.02em; font-weight: 800;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.4rem);
  line-height: 1.14; letter-spacing: -.018em; font-weight: 700;
  text-wrap: balance;
}
.h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); letter-spacing: -.012em; }

.lede { font-size: clamp(1.02rem, .97rem + .2vw, 1.13rem); font-weight: 500; color: var(--text); max-width: 62ch; }
.small { font-size: .8875rem; font-weight: 500; color: var(--muted); }
.tiny { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

.eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase;
  color: var(--navy); display: block; margin-bottom: .85rem;
}
.eyebrow--mut { color: var(--muted); }
.eyebrow--dark { color: #9fc0ef; }

.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* section heads */
.shead { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 3vw, 3rem); }
.shead .lede { margin-top: 1rem; margin-inline: auto; }

.shead-split {
  display: grid; gap: 1.5rem 3rem; align-items: end;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(1.75rem, 2.6vw, 2.6rem);
}
@media (min-width: 900px) {
  .shead-split { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
  .shead-split .lede { padding-bottom: .35rem; }
}

.rule-head { display: flex; align-items: center; gap: 1.5rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.rule-head h2 { white-space: nowrap; }
.rule-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--navy); --btn-fg: #fff; --btn-bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .82rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 700; letter-spacing: .005em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
/* a leading icon stays put; only the trailing arrow travels */
.btn__ic { width: 17px; height: 17px; opacity: .9; }
.btn:hover .btn__ic { transform: none; }
/* TWO hover states across the whole site, and every control uses one of them:
     filled (navy ground)  → navy-800
     light  (white ground) → navy-050 fill + navy border + navy-800 text
   Anything with its own third behaviour read as a different design language —
   the phone chip in the header used to invert to solid navy while the button
   beside it went pale blue. */
.btn:hover { background: var(--navy-800); border-color: var(--navy-800); transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--out { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--out:hover {
  background: var(--navy-050); color: var(--navy-800); border-color: var(--navy);
  box-shadow: 0 10px 24px -16px rgba(13, 44, 92, .7);
}

/* brass-outlined secondary, used beside the hero's primary. Same hover shape as
   every other light control — pale fill of its own accent plus that accent as
   the border — so it reads as the same language, not a third one. */
.btn--gold { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: var(--gold-soft); }
.btn--gold .btn__ic { color: var(--gold); opacity: 1; }
.btn--gold:hover {
  background: var(--gold-050); color: var(--ink); border-color: var(--gold);
  box-shadow: 0 10px 24px -16px rgba(120, 92, 40, .7);
}

/* on the navy bands: white button, same pale-blue hover, border included so it
   matches .btn--out exactly */
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }
.btn--light:hover {
  background: var(--navy-050); border-color: var(--navy); color: var(--navy-800);
  box-shadow: 0 10px 24px -16px rgba(7, 27, 56, .7);
}

.btn--sm { padding: .62rem 1.2rem; font-size: .8125rem; }
.btn--lg { padding: .95rem 1.85rem; font-size: .9375rem; }

.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 700; color: var(--navy);
  padding-block: .4rem;                       /* keeps the tap target ≥ 30px */
}
.tlink svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.tlink__t { position: relative; }
.tlink__t::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.tlink:hover .tlink__t::after, .tlink:focus-visible .tlink__t::after { transform: scaleX(1); }
.tlink:hover svg { transform: translateX(4px); }

.ibtn {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur);
}
.ibtn svg { width: 17px; height: 17px; }
/* light control → the light hover; filled control → the filled hover */
.ibtn:hover:not(:disabled) { background: var(--navy-050); border-color: var(--navy); color: var(--navy-800); }
.ibtn:disabled { opacity: .3; cursor: default; }
.ibtn--fill { background: var(--navy); border-color: var(--navy); color: #fff; }
.ibtn--fill:hover:not(:disabled) { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.go {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--navy); color: #fff;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.go svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.hdr.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(13, 26, 48, .5); }

.hdr__in { height: var(--hdr); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }

/* The mark and the name were both too small to register. Grown twice at the
   firm's request: 46 → 62 → 78px mark, 1.05 → 1.5 → 1.85rem name, with the
   header height following each time. The desktop drawer breakpoint moved with
   it (1000 → 1080px) because the wider lockup crowds the nav before that. */
.brand { display: inline-flex; align-items: center; gap: .85rem; }
.brand img { width: auto; height: 78px; background: none; }
.brand__txt { display: grid; line-height: 1; }
.brand__a { font-family: var(--ff-d); font-weight: 900; font-size: 1.85rem; letter-spacing: .005em; color: var(--navy); }
.brand__b {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; color: var(--navy-600);
  text-transform: uppercase; margin-top: .38rem; white-space: nowrap;
}
/* height, not width: the mark is square, so constraining width against the
   height squashed it. */
@media (max-width: 1080px) { .brand img { height: 68px; } .brand__a { font-size: 1.62rem; } .brand__b { font-size: .72rem; } }
@media (max-width: 900px) { .brand img { height: 60px; } .brand__a { font-size: 1.45rem; } .brand__b { font-size: .66rem; } }
@media (max-width: 420px) { .brand img { height: 50px; } .brand__a { font-size: 1.22rem; } .brand__b { font-size: .58rem; letter-spacing: .08em; } }

.nav { justify-self: center; display: flex; align-items: center; gap: clamp(.85rem, 1.85vw, 2.05rem); }
.nav__cta { display: none; }   /* header CTA lives in .hdr__end until the drawer takes over */
.nav > a {
  position: relative; font-size: .875rem; font-weight: 600; color: var(--text);
  padding: .45rem 0; transition: color var(--dur) var(--ease);
}
/* One underline rule for both header text affordances: the nav links and the
   phone number, so hovering the call button feels the same as hovering
   "Hizmetlerimiz" instead of only tinting the icon circle. */
.nav > a::after, .telchip__n::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px;
  background: var(--navy); border-radius: 2px;
  transform: scaleX(0); transition: transform var(--dur) var(--ease);
}
.nav > a:hover { color: var(--ink); }
.nav > a:hover::after, .telchip:hover .telchip__n::after { transform: scaleX(.45); }
.nav > a[aria-current="page"] { color: var(--navy); font-weight: 700; }
.nav > a[aria-current="page"]::after { transform: scaleX(1); }

.hdr__end { justify-self: end; display: flex; align-items: center; gap: 1.15rem; }
/* Shaped like an outline button and hovering like one. It used to invert to a
   solid navy circle, which was a third hover state sitting right next to the
   two real ones in the same header. */
.telchip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .28rem .95rem .28rem .3rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 700; color: var(--ink);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.telchip__i {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-050); color: var(--navy); flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.telchip__i svg { width: 16px; height: 16px; }
.telchip__n { position: relative; }
.telchip:hover { background: var(--navy-050); border-color: var(--navy); color: var(--navy-800); }
.telchip:hover .telchip__i { background: #fff; color: var(--navy); }

.burger { display: none; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); }
.burger span, .burger::before, .burger::after {
  content: ""; display: block; width: 18px; height: 2px; margin: 0 auto;
  background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s;
}
.burger::before { margin-bottom: 5px; }
.burger::after { margin-top: 5px; }
.burger[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1220px) { .telchip__n { display: none; } }
@media (max-width: 1080px) {
  .burger { display: block; justify-self: end; }
  .hdr__in { grid-template-columns: auto 1fr; }
  .hdr__end { display: none; }
  .nav {
    /* The drawer is a fixed grid child, and `justify-self: center` from the
       desktop rule makes an abspos grid item shrink to fit inside its grid
       column — the sheet was rendering 185px wide in the middle of the screen
       instead of spanning the viewport. Measured: x=103 w=185 → x=0 w=390. */
    justify-self: stretch;
    position: fixed; inset: var(--hdr) 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gut) 1.6rem;
    max-height: calc(100dvh - var(--hdr)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
    box-shadow: var(--sh-2);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav > a { padding: .95rem .25rem; border-bottom: 1px solid var(--line-2); font-size: 1rem; }
  .nav > a::after { display: none; }
  .nav__cta { display: grid; gap: .75rem; margin-top: 1.35rem; }
  .nav__cta .btn { padding: .95rem 1.5rem; }
  .nav__cta .telchip { justify-content: center; }
  .nav__cta .telchip__n { display: inline; }
}

/* ------------------------------------------------------------------- hero */
.hero { position: relative; overflow-x: clip; padding-block: clamp(2rem, 3.5vw, 3.25rem) clamp(3.25rem, 5.5vw, 5.5rem); }
.hero__in { display: grid; gap: clamp(2.5rem, 4vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .hero { min-height: calc(100svh - var(--hdr) - 4.5rem); display: grid; align-items: center; }
  .hero__in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}

/* Sentence-case h1 in navy, a brass rule under it, then the positioning line
   in bold and the description in body colour. */
.hero__eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.hero__eyebrow::before {
  content: ""; width: 52px; height: 2px; flex: none; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}
.hero__title {
  font-family: var(--ff-d); font-weight: 800; color: var(--navy);
  /* capped at 3.15rem: the firm's headline is four long Turkish words and at
     3.6rem "Hayalinizdeki mekânları" alone overflowed a 521px column, putting
     the h1 on four lines with one word each */
  font-size: clamp(2.05rem, 1.15rem + 2.7vw, 3.15rem);
  line-height: 1.08; letter-spacing: -.024em; text-wrap: balance;
  margin-bottom: 1.25rem;
}
.hero__rule {
  display: block; width: 150px; height: 3px; border-radius: 3px;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--gold) 0 45%, var(--gold-soft) 45% 100%);
}
.hero__sub {
  font-family: var(--ff-d); font-weight: 700; color: var(--ink);
  font-size: clamp(1.1rem, .95rem + .62vw, 1.42rem); line-height: 1.3;
  letter-spacing: -.014em; margin-bottom: .95rem;
}
.hero__lede { margin-bottom: 1.75rem; max-width: 46ch; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__stats {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  border-top: 1px solid var(--line);
  display: grid; gap: 1.25rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) { .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem .75rem; } }

.stat { display: flex; gap: .5rem; align-items: flex-start; position: relative; }
/* hairline between the four figures. Tight metrics on purpose: four stats with
   an icon each have ~125px apiece here, and "Kuruluştan bu yana" has to stay on
   one line. */
@media (min-width: 560px) {
  .hero__stats { gap: 1rem 0; }
  .stat { padding-inline: .55rem; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { padding-right: 0; }
  .stat + .stat::before {
    content: ""; position: absolute; left: 0; top: .1rem; bottom: .1rem;
    width: 1px; background: var(--line);
  }
}
.stat__i { color: var(--navy); flex: none; margin-top: .1rem; }
.stat__i svg { width: 20px; height: 20px; stroke-width: 1.4; }
.stat__n { font-family: var(--ff-d); font-weight: 800; font-size: 1.28rem; color: var(--ink); line-height: 1.1; letter-spacing: -.012em; }
.stat__l { font-size: .71875rem; color: var(--muted); line-height: 1.35; margin-top: .2rem; }

.hero__media { position: relative; }
.hero__shot { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--tint-2); aspect-ratio: 4 / 3; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) {
  /* square left edge, bleeding off the right — a plain rectangle of photograph */
  .hero__shot { width: calc(100% + var(--edge)); aspect-ratio: 15 / 13; border-radius: 0; }
  .hero__shot::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 48%;
    background: linear-gradient(to top, rgba(7, 20, 42, .38), transparent);
  }
}
.hero__credit {
  position: absolute; right: clamp(1rem, 2vw, 1.6rem); top: clamp(1rem, 2vw, 1.6rem); z-index: 2;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  font-size: .6875rem; font-weight: 700; padding: .42rem .75rem; border-radius: 6px;
}

/* three floating service cards over the hero image */
.hcards { display: grid; gap: .85rem; margin-top: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .hcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* on phones the three cards stacked made the hero enormous — swipe row instead,
   bled to the screen edges so it reads as scrollable */
@media (max-width: 619px) {
  .hcards {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    scrollbar-width: none; touch-action: pan-x pan-y;
    padding-block: 10px; margin-block: calc(1rem - 10px) -10px;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
  }
  .hcards::-webkit-scrollbar { display: none; }
  .hcards > * { scroll-snap-align: start; }
}
@media (min-width: 1000px) {
  .hcards {
    position: absolute; z-index: 2; margin: 0;
    /* spill left over the image edge, but never far enough to clip the stats row */
    left: calc(-1 * clamp(.75rem, 2.2vw, 2.25rem)); right: clamp(1rem, 2vw, 2rem);
    bottom: clamp(.4rem, 1vw, .9rem);   /* sit down on the image's bottom edge */
  }
}
/* Photo cards floating on the hero image; the picture zooms on hover. */
.hcard {
  display: grid; grid-template-rows: auto 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--navy-050); }

/* the middle card steps forward — larger, lifted and more shadow, so the row
   reads as three planes rather than one flat strip */
@media (min-width: 1000px) {
  .hcard--lead {
    position: relative; z-index: 3;
    transform: translateY(-16px) scale(1.06);
    box-shadow: 0 6px 14px rgba(13, 26, 48, .10), 0 40px 64px -26px rgba(13, 26, 48, .48);
  }
  .hcard--lead:hover { transform: translateY(-22px) scale(1.06); }
  .hcard--lead .hcard__img { aspect-ratio: 16 / 10; }
}
.hcard__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint-2); }
.hcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.hcard:hover .hcard__img img { transform: scale(1.05); }
.hcard__b { padding: .85rem .95rem 1rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .8rem; }
.hcard__t { font-family: var(--ff-d); font-weight: 700; font-size: .9375rem; color: var(--ink); letter-spacing: -.008em; line-height: 1.22; }
.hcard__s { font-size: .78125rem; color: var(--muted); line-height: 1.45; grid-column: 1; }
.hcard .go { grid-row: 1 / span 2; grid-column: 2; width: 34px; height: 34px; }
.hcard .go svg { width: 13px; height: 13px; }
.hcard:hover .go { transform: translateX(2px); background: var(--navy-800); }

/* --------------------------------------------------------------- grids */
.grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-3 { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-2 { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.icard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .7rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.3rem, 2vw, 1.7rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* a navy rule sweeps left→right across the top edge on hover */
.icard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--navy); border-radius: var(--r) var(--r) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.icard:hover::before, .icard:focus-visible::before { transform: scaleX(1); }
.icard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--navy-050); }
.icard:hover .tlink__t::after { transform: scaleX(1); }
.icard__i { color: var(--navy); transition: transform var(--dur) var(--ease); }
.icard:hover .icard__i { transform: translateY(-2px); }
.icard__i svg { width: 34px; height: 34px; stroke-width: 1.3; }
.icard h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.icard p { font-size: .875rem; color: var(--muted); line-height: 1.6; }
.icard__foot { margin-top: auto; padding-top: .7rem; }
.icard .arrow-only { width: 18px; height: 18px; color: var(--navy); transition: transform var(--dur) var(--ease); }
.icard:hover .arrow-only { transform: translateX(4px); }

/* ------------------------------------------------------------ service tiles
   Every service on one screen. Descriptive cards ran to three rows and a
   scroll; a visitor should be able to take in the whole range at a glance.
   Flex rather than grid so an incomplete last row centres itself. */
/* ------------------------------------------------------------ trust strip
   The firm's seven güven unsurları, directly under the hero — the point in the
   page where a visitor decides whether to keep reading. Wraps to as many rows
   as it needs; the ticks stay left of their text at every width. */
.tbar { border-block: 1px solid var(--line); background: var(--navy-050); }
.tbar__l {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .55rem clamp(1rem, 2.4vw, 2.1rem);
  padding-block: clamp(.9rem, 1.6vw, 1.15rem);
}
.tbar__l li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 700; color: var(--navy-800); white-space: nowrap;
}
.tbar__i {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--navy); color: #fff;
}
.tbar__i svg { width: 12px; height: 12px; stroke-width: 3; }
@media (max-width: 560px) {
  .tbar__l { justify-content: flex-start; gap: .5rem 1.1rem; }
  .tbar__l li { font-size: .8125rem; }
}

/* --------------------------------------------- headline service cards (home)
   The six a visitor most likely came for, photo-led, above the full list of
   names. Same hover language as the hero cards: the picture zooms, the card
   lifts, the arrow travels. */
.scards {
  display: grid; gap: clamp(.85rem, 1.5vw, 1.15rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
@media (min-width: 760px) { .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .scards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scard {
  display: grid; grid-template-rows: auto 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--navy-050); }
.scard__img { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--tint-2); }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.scard:hover .scard__img img { transform: scale(1.05); }
.scard__b {
  display: grid; gap: .5rem; padding: 1.15rem 1.25rem 1.35rem;
  grid-template-columns: 1fr auto; align-content: start;
}
.scard__ic {
  grid-column: 1 / -1; width: 42px; height: 42px; border-radius: var(--r); flex: none;
  display: grid; place-items: center; background: var(--navy-050); color: var(--navy);
  margin-top: -2.9rem; border: 1px solid #fff; background-clip: padding-box;
  position: relative; z-index: 1; box-shadow: var(--sh-1);
}
.scard__ic svg { width: 22px; height: 22px; stroke-width: 1.5; }
.scard__t {
  grid-column: 1 / -1;
  font-family: var(--ff-d); font-weight: 800; font-size: 1.16rem; line-height: 1.2;
  letter-spacing: -.014em; color: var(--ink);
}
.scard__s { font-size: .9rem; color: var(--text); align-self: center; }
.scard__go {
  width: 36px; height: 36px; border-radius: 50%; flex: none; align-self: end;
  display: grid; place-items: center; background: var(--navy); color: #fff;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.scard__go svg { width: 15px; height: 15px; }
.scard:hover .scard__go { background: var(--navy-800); }
.scard:hover .scard__go svg { transform: translateX(2px); }
/* On a phone the six stacked full-height cards ran 2258px — the visitor has to
   scroll past the offer to see the offer, which is the opposite of the point.
   Two across, shorter photo, name only. */
@media (max-width: 759px) {
  .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .scard__img { aspect-ratio: 16 / 10; }
  .scard__b { padding: .9rem .8rem 1rem; gap: .35rem; grid-template-columns: 1fr; }
  .scard__ic { width: 34px; height: 34px; margin-top: -2.3rem; }
  .scard__ic svg { width: 18px; height: 18px; }
  .scard__t { font-size: .9375rem; }
  .scard__s, .scard__go { display: none; }
}

/* the strapline the firm wants under the services heading, in display type */
.shead--wide { max-width: 74ch; }
.shead__strong { margin-top: .55rem; }
.shead--wide .lede { margin-top: .9rem; }
.rule-head--mid { margin-top: clamp(2rem, 3.2vw, 3rem); }
.rule-head--mid::before { content: ""; flex: 1; height: 1px; background: var(--line); }
.rule-head--mid h3 { white-space: nowrap; color: var(--muted); font-family: var(--ff); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

/* ------------------------------------------------- service group heading
   hizmetler.html is now one section per service, in five families. */
.ghead { max-width: 60ch; margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem); }
.ghead__n {
  display: inline-block; margin-bottom: .7rem; padding: .3rem .7rem;
  border-radius: var(--r-pill); background: var(--navy); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.ghead .lede { margin-top: .8rem; }

.stiles {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .7rem; margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.stile {
  flex: 1 1 168px; max-width: 210px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem;
  padding: 1.05rem .75rem 1.15rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--navy); background: var(--navy-050); }
.stile__i { color: var(--navy); display: grid; place-items: center; }
.stile__i svg { width: 30px; height: 30px; stroke-width: 1.3; }
.stile__t {
  font-family: var(--ff-d); font-weight: 700; font-size: .875rem; line-height: 1.25;
  letter-spacing: -.008em; color: var(--ink); text-wrap: balance;
}
@media (max-width: 520px) {
  .stiles { gap: .5rem; }
  .stile { flex-basis: 140px; padding: .85rem .6rem .95rem; gap: .4rem; }
  .stile__i svg { width: 26px; height: 26px; }
  .stile__t { font-size: .8125rem; }
}

/* --------------------------------------------------- service detail cards
   One card per service on hizmetler.html: photo, icon, the firm's own item
   list. Two per row on desktop, one on a phone. */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a {
  display: inline-block; padding: .5rem .95rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff;
  font-size: .8125rem; font-weight: 600; color: var(--text);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chips a:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-050); }

.svcgrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.svc {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc:hover { box-shadow: var(--sh-2); border-color: var(--navy-050); }
.svc__img { aspect-ratio: 16 / 8; background: var(--tint-2); overflow: hidden; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc:hover .svc__img img { transform: scale(1.04); }
.svc__b { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.25rem, 2vw, 1.7rem); flex: 1; }
.svc__h { display: flex; align-items: center; gap: .85rem; }
.svc__ic {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--navy-050); color: var(--navy);
}
.svc__ic svg { width: 25px; height: 25px; stroke-width: 1.45; }
.svc__n { font-family: var(--ff-d); font-weight: 800; font-size: .6875rem; letter-spacing: .16em; color: var(--muted); display: block; }
.svc__t { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); letter-spacing: -.012em; }
.svc__s { font-weight: 700; color: var(--ink); font-size: .9375rem; line-height: 1.5; }
.svc__l { font-size: .875rem; color: var(--text); line-height: 1.65; }
.svc .ticks { margin-top: .35rem; }
.svc__foot { margin-top: auto; padding-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
/* Twenty-two full cards is a long phone page by design — the firm wanted each
   trade to have its own section, and the chip index at the top of the page is
   how you skip. The photo is the one part that costs height without carrying
   information, so it gets shallower. The bullets stay one column: two columns
   in a 358px card put "Islak hacim için su geçirmez plaka" on three lines. */
@media (max-width: 760px) {
  .svc__img { aspect-ratio: 16 / 7; }
  .svc__b { gap: .55rem; }
}

/* long item lists (seramik has nine) run in two columns from tablet up */
@media (min-width: 560px) {
  .ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
}

/* ------------------------------------------------------- why: seven reasons */
.whylist { display: grid; gap: .6rem; margin-top: 1.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .whylist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.whylist li {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: .8rem .95rem; font-size: .90625rem; font-weight: 600; color: var(--ink);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.whylist li:hover { border-color: var(--navy-050); transform: translateY(-2px); }
.whyl__i { color: var(--navy); flex: none; display: grid; place-items: center; }
.whyl__i svg { width: 21px; height: 21px; stroke-width: 1.5; }

/* --------------------------------------------- "tek çatı altında" closing band */
.oneroof { background: var(--navy); color: rgba(255, 255, 255, .82); padding-block: clamp(2.75rem, 4.5vw, 4.25rem); }
.oneroof__in { display: grid; gap: 1.75rem clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 940px) { .oneroof__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.oneroof h2 {
  color: #fff; font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.45rem); line-height: 1.12;
  letter-spacing: -.018em; text-wrap: balance;
}
.oneroof p { font-size: .9375rem; line-height: 1.7; }
.oneroof p + p { margin-top: .85rem; }
.oneroof__ic { display: block; margin-top: 1.5rem; color: #9fc0ef; }
.oneroof__ic svg { width: 42px; height: 42px; stroke-width: 1.2; }
.oneroof__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .42);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* --------------------------------------------------------------- carousel */
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.rail-nav { display: flex; gap: .5rem; }

/* Featured-project rail: the promise belongs with the title; controls sit in
   the rail's top edge, so they are visible exactly where the browsing begins. */
.project-rail-head { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 1.15rem; }
.project-rail-head__copy { max-width: 49rem; }
.project-rail-head__copy .lede { margin-top: .85rem; max-width: 43rem; }
.project-rail-head__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
@media (max-width: 700px) {
  .project-rail-head { align-items: start; flex-direction: column; }
  .project-rail-head__actions { width: 100%; justify-content: space-between; }
}

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(255px, 1fr);
  gap: 1rem;
  /* overflow-y MUST be explicit. Setting only overflow-x makes the other axis
     compute to `auto`, and the few px of card shadow then give the rail real
     vertical scroll — a wheel over the carousel scrolled those px and swallowed
     the page scroll instead of moving the page. The padding/negative-margin
     pair keeps room for hover shadows without shifting the layout. */
  overflow-x: auto; overflow-y: hidden;
  padding-block: 16px; margin-block: -16px;
  /* `proximity`, not `mandatory`: mandatory fights a diagonal trackpad gesture
     and makes the rail twitch while the page scrolls vertically */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail.is-dragging * { pointer-events: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 720px) { .rail { grid-auto-columns: minmax(298px, 1fr); } }

/* one-slide-at-a-time rail. Flex, not grid: inside a horizontal scroll
   container a grid track of `100%` resolves against an indefinite size and
   collapses to content width, but flex-basis:100% resolves correctly. */
.rail--single { display: flex; }
.rail--single > * { flex: 0 0 100%; min-width: 0; }

.tile {
  position: relative; display: block; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--navy-900);   /* caption stays legible even if the photo fails */
  transition: box-shadow var(--dur) var(--ease);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 20, 42, .88) 2%, rgba(7, 20, 42, .36) 34%, rgba(7, 20, 42, 0) 64%);
}
/* deliberately no translateY here — inside a scroll rail, a lift-on-hover makes
   every tile jump as the pointer sweeps over it while the page scrolls */
.tile:hover { box-shadow: var(--sh-3); }
.tile:hover img { transform: scale(1.055); }
.tile:hover::after { background: linear-gradient(to top, rgba(7, 20, 42, .92) 2%, rgba(7, 20, 42, .42) 38%, rgba(7, 20, 42, .06) 70%); }
.tile__b { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 1.1rem 1.15rem 1.2rem; color: #fff; }
.tile__t { display: block; font-family: var(--ff-d); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.tile__m { display: block; font-size: .78125rem; color: rgba(255, 255, 255, .84); margin-top: .28rem; }
.tag {
  position: absolute; top: .85rem; left: .85rem; z-index: 1;
  background: rgba(255, 255, 255, .95); color: var(--navy);
  font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .38rem .6rem; border-radius: 5px;
  display: inline-flex; align-items: center; gap: .4rem;
}
.tag svg { width: 12px; height: 12px; }

/* ------------------------------------------------------------ split media */
.split { display: grid; gap: clamp(2rem, 4vw, 3.75rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-r { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .split--wide-l { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .split--proc { grid-template-columns: minmax(0, 1.34fr) minmax(0, .66fr); }
  .split--top { align-items: start; }
  .split--flip > :first-child { order: 2; }   /* alternate image/text sides */
}
.frame { border-radius: var(--r-lg); overflow: hidden; background: var(--tint-2); position: relative; }
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.frame-wrap:hover .frame img { transform: scale(1.025); }
.frame--43 { aspect-ratio: 4 / 3; }
.frame--11 { aspect-ratio: 1 / 1; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--169 { aspect-ratio: 16 / 9; }
.frame--54 { aspect-ratio: 5 / 4; }
/* Project cover. 16/9 across a 1320px wrap is 742px tall — a whole viewport of
   photograph, which pushed the Kapsam copy and the project facts below the
   fold. A wider crop shortens it without narrowing it (capping the height of an
   aspect-ratio box shrinks its width too, which is not what we want here). */
.frame--cover { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .frame--cover { aspect-ratio: 2.2 / 1; } }

.overcard {
  background: var(--navy); color: #fff; border-radius: var(--r); padding: 1.35rem 1.45rem;
  box-shadow: var(--sh-3); display: flex; gap: 1rem; align-items: flex-start;
}
.overcard svg { width: 26px; height: 26px; flex: none; color: #9fc0ef; stroke-width: 1.4; }
.overcard h3 { color: #fff; font-size: 1rem; margin-bottom: .35rem; }
.overcard p { font-size: .8125rem; color: rgba(255, 255, 255, .8); line-height: 1.55; }
.frame-wrap { position: relative; }
/* The photo takes its height from the copy beside it instead of from its own
   ratio. Without this a portrait frame in a wide column runs hundreds of pixels
   past the text, and the overcard that hangs off its bottom edge lands at the
   bottom of the screen, half cut off. */
@media (min-width: 940px) {
  .split > .frame-wrap--fit { align-self: stretch; display: grid; }
  .frame-wrap--fit .frame { aspect-ratio: auto; height: 100%; min-height: 420px; }
  .frame-wrap--fit .frame img { position: absolute; inset: 0; }
}
/* stacked on a tablet the same 4:5 is 943px of photograph across the column */
@media (min-width: 620px) and (max-width: 939px) {
  .frame-wrap--fit .frame { aspect-ratio: 3 / 2; }
}
@media (min-width: 940px) { .frame-wrap .overcard { position: absolute; right: -1.15rem; bottom: -1.15rem; max-width: 21rem; } }
@media (max-width: 939px) { .frame-wrap .overcard { margin-top: .85rem; } }

/* Homepage: give the architectural image the visual weight it has in the copy,
   while tightening the supporting cards and the proof bar underneath. */
@media (min-width: 940px) {
  .sec--why { padding-block: clamp(2.15rem, 3.25vw, 3.25rem); }
  .why-ces { gap: clamp(1.75rem, 3vw, 2.75rem); }
  /* The photo column stretches to the copy column's full height so the frame's
     bottom edge lands level with the last value card ("Zamanında Teslim").
     The fixed 4/3 ratio left ~60px of dead white under the photo.
     Two halves to this: the wrap stretches (the base .split centres instead), and
     the photo is taken OUT OF FLOW so it cannot dictate the frame's height —
     with `aspect-ratio:auto`, `height:100%` on an auto-height frame falls back to
     the file's own ratio and then the photo, not the copy, sets the row height
     (and it only does so once the lazy image has decoded, so it looks fine until
     it suddenly doesn't). Absolute positioning makes the copy the only thing
     that measures. */
  .why-ces { align-items: stretch; }
  .why-ces .frame-wrap { display: grid; }
  .why-ces .frame--43 { aspect-ratio: auto; min-height: 0; }
  .why-ces .frame img { position: absolute; inset: 0; }
  .why-ces .frame-wrap .overcard { bottom: 1.15rem; }
  .why-ces .whylist { margin-top: 1.1rem; gap: .5rem; }
  .why-ces .whylist li { padding: .62rem .78rem; font-size: .84rem; }
  .why-ces .overcard { padding: 1rem 1.05rem; }
  .why-ces .overcard h3 { font-size: .9rem; }
  .why-ces .overcard p { font-size: .75rem; }
  .why-ces__bar { margin-top: .8rem; }
  .why-ces + .sec { padding-top: clamp(2.5rem, 3.5vw, 3.5rem); }
}

/* A quiet visual bridge behind the homepage services, using the separate
   architectural study rather than a second copy of the partners background. */
/* White base, not #f8fbfe: the services block now sits directly above the
   tinted about section, and pale-blue against pale-grey read as one band
   with no seam (measured f8fbfe vs f5f7fa). */
.sec--services {
  position: relative; overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.66)),
    url("../img/services-architecture-bg.jpg") center / cover no-repeat,
    #fff;
}
.sec--services .wrap { position: relative; }

/* ------------------------------------------------------------ stats band */
.statband { display: grid; gap: 2.25rem clamp(2rem, 4vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .statband { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }

.bigstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0; }
@media (min-width: 700px) { .bigstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bigstat { padding-inline: clamp(.75rem, 2vw, 1.5rem); border-left: 1px solid var(--line); }
.bigstat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 699px) { .bigstat:nth-child(odd) { border-left: 0; padding-left: 0; } }
.bigstat__i { color: var(--navy); margin-bottom: .85rem; }
.bigstat__i svg { width: 30px; height: 30px; stroke-width: 1.3; }
.bigstat__n { font-family: var(--ff-d); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.35vw, 2.15rem); color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.bigstat__l { font-size: .8125rem; color: var(--muted); margin-top: .5rem; }

/* --------------------------------------------------------------- process */
.steps { display: grid; gap: 2rem 1.25rem; grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 780px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1rem; }
  .steps::before { content: ""; position: absolute; top: 25px; left: 9%; right: 9%; height: 1px; background: var(--line); }
}
/* the compact variant lives inside a column, so it wraps on container width
   rather than being forced to 5 across by a viewport media query */
@media (min-width: 780px) {
  .steps--compact { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 2rem 1rem; }
  .steps--compact::before { display: none; }
}
.step { position: relative; }
.step__n {
  width: 50px; height: 50px; border-radius: 50%; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--ff-d); font-weight: 800; font-size: .9375rem; color: var(--navy);
  position: relative; z-index: 1; margin-bottom: 1.05rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.step:hover .step__n { background: var(--navy); color: #fff; border-color: var(--navy); }
.step__i { color: var(--navy); margin-bottom: .65rem; }
.step__i svg { width: 22px; height: 22px; stroke-width: 1.4; }
.step h3 { font-size: .9375rem; margin-bottom: .45rem; }
.step p { font-size: .78125rem; color: var(--muted); line-height: 1.6; max-width: 30ch; }

/* ------------------------------------------------------------- CTA strips */
.ctastrip {
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: 1.5rem; align-items: center; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .ctastrip { grid-template-columns: minmax(0, 1fr) auto; } }
.ctastrip__l { display: flex; gap: 1.05rem; align-items: flex-start; }
.ctastrip__i { color: var(--navy); flex: none; }
.ctastrip__i svg { width: 30px; height: 30px; stroke-width: 1.3; }
.ctastrip h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); margin-bottom: .35rem; }
.ctastrip p { font-size: .875rem; color: var(--muted); }
.ctastrip__btns { display: flex; flex-wrap: wrap; gap: .7rem; }

.ctasplit {
  display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--r-lg);
  overflow: hidden; background: var(--navy);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ctasplit:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
@media (min-width: 880px) { .ctasplit { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } }
.ctasplit__img { position: relative; min-height: 190px; background: var(--navy-800); }
.ctasplit__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.ctasplit:hover .ctasplit__img img { transform: scale(1.035); }
.ctasplit__b {
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  display: grid; gap: 1.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); color: #fff;
}
@media (min-width: 1100px) { .ctasplit__b { grid-template-columns: minmax(0, 1fr) auto; } }
.ctasplit__b h2 { color: #fff; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem); margin-bottom: .7rem; }
.ctasplit__b p { color: rgba(255, 255, 255, .8); font-size: .9375rem; max-width: 46ch; }
.ctasplit__act { display: grid; gap: .7rem; justify-items: start; }
@media (min-width: 1100px) { .ctasplit__act { justify-items: end; } }
.ctasplit__act .tiny { color: rgba(255, 255, 255, .62); }

/* ----------------------------------------------------------- page header */
.phead { padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2rem, 3.5vw, 3rem); border-bottom: 1px solid var(--line-2); }
.phead__in { display: grid; gap: 1.35rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .phead__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; } }

/* project page head — single column, blurb under the title */
.phead--project {
  padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 0;
}
.phead--project .lede { max-width: 60ch; }

/* scope on the left, a square photo beside it, facts across underneath */
.phead--project + .sec { padding-top: 0; }   /* head and scope read as one block */
.pdetail { align-items: start; }
@media (min-width: 900px) { .pdetail { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); } }
.pdetail__img { align-self: start; }
.pdetail .feature__specs { max-width: none; }
/* On desktop the photo matches the height of the copy beside it instead of
   setting its own: a square 593px column pushed the project facts off-screen,
   and the point of this layout is that the whole project fits one view. */
@media (min-width: 900px) {
  .pdetail__img { aspect-ratio: auto; align-self: stretch; min-height: 400px; }
  .pdetail__img img { position: absolute; inset: 0; }
}
/* stacked, the photo belongs straight under the title — reading four
   paragraphs of scope before seeing the project is the wrong order */
@media (max-width: 899px) { .pdetail__img { order: -1; } }

/* the four project facts as one horizontal band rather than a right-hand column */
.cinfo--row { margin-top: clamp(1.4rem, 2.2vw, 1.85rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .cinfo--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cinfo--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the quote CTA belongs with the scope it refers to, not beside the breadcrumb */
.pcta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
/* the phone link beside it is a tap target, so it needs the 29px floor */
.pcta .tiny { display: inline-block; padding-block: .4rem; }
.pcta .tiny:hover { color: var(--navy); }
.crumbs { font-size: .78125rem; color: var(--muted); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.crumbs a:hover { color: var(--navy); }
.crumbs i { font-style: normal; opacity: .45; }

/* --------------------------------------------------------------- filters */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button {
  padding: .55rem 1.05rem; border-radius: var(--r-pill); border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 600; color: var(--text); background: #fff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filters button:hover { background: var(--navy-050); border-color: var(--navy); color: var(--navy-800); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.filters button[aria-pressed="true"]:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* narrow intro column + wide carousel — the featured card needs the room */
.showcase { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1040px) { .showcase { grid-template-columns: minmax(0, .40fr) minmax(0, 1.60fr); } }

/* ------------------------------------------------- featured project card */
.feature { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
@media (min-width: 900px) { .feature { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); } }
.feature__img { position: relative; min-height: 250px; background: var(--tint-2); }
.feature__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__b { padding: clamp(1.4rem, 2.5vw, 2.15rem); display: flex; flex-direction: column; }
.feature__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: .7rem 0 1rem; }
.feature__meta li { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--muted); }
.feature__meta svg { width: 15px; height: 15px; color: var(--navy); flex: none; }
.feature__specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem;
  margin: 1.35rem 0; padding: 1.2rem 0; border-block: 1px solid var(--line-2);
}
.spec { display: flex; gap: .6rem; align-items: flex-start; }
.spec svg { width: 22px; height: 22px; color: var(--navy); flex: none; stroke-width: 1.4; }
.spec b { display: block; font-family: var(--ff-d); font-weight: 700; font-size: .9375rem; color: var(--ink); line-height: 1.2; }
.spec span { display: block; font-size: .75rem; color: var(--muted); margin-top: .15rem; }
.feature__foot { margin-top: auto; }

/* --------------------------------------------------------- project cards */
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* one link per card, stretched over the whole card — a 18px-tall title link is
   not a usable tap target on a phone */
.pcard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard h3 a { color: inherit; }
.pcard:focus-within { border-color: var(--navy); box-shadow: var(--sh-2); }
.pcard h3 a:focus-visible { outline: none; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--navy-050); }
.pcard__img { position: relative; aspect-ratio: 16 / 11; background: var(--tint-2); overflow: hidden; }
.pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.055); }
.pcard__b { padding: 1.05rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.pcard h3 { font-size: 1rem; margin-bottom: .3rem; }
.pcard__m { font-size: .78125rem; color: var(--muted); }
/* The design credit is a footnote, not the headline: the firm is an execution
   contractor and the card should say that first. */
.pcard__arch { font-size: .71875rem; color: var(--muted); margin-top: .35rem; }
.pcard__foot { margin-top: auto; padding-top: .95rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.pcard__k b { display: block; font-family: var(--ff-d); font-weight: 700; font-size: .9375rem; color: var(--ink); }
.pcard__k span { display: block; font-size: .6875rem; color: var(--muted); margin-top: .1rem; }
.pcard.is-hidden { display: none; }
.pcard .go { width: 34px; height: 34px; }
.pcard .go svg { width: 13px; height: 13px; }
.pcard:hover .go { background: var(--navy-600); transform: translateX(2px); }

/* ----------------------------------------------------- collaborations */
.sec--partners {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle, rgba(29, 82, 154, .16) 1.25px, transparent 1.5px) left 2.2rem top 6rem / 12px 12px no-repeat,
    radial-gradient(circle, rgba(29, 82, 154, .16) 1.25px, transparent 1.5px) right 2.2rem top 10rem / 12px 12px no-repeat,
    linear-gradient(rgba(248,251,255,.6), rgba(240,246,252,.72)),
    url("../img/partners-architecture-bg.jpg") center / cover no-repeat,
    linear-gradient(135deg, #f9fbfe, #f0f5fb);
}
.partners { max-width: 1120px; text-align: center; }
.partners__head { max-width: 48rem; margin-inline: auto; }
.partners h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.75rem); margin-top: .65rem; }
.partners .lede { margin: 1.2rem auto 0; max-width: 42rem; }
.partners__rule { display: block; width: 104px; height: 2px; margin: 1.4rem auto 0; background: #2e75d5; position: relative; }
.partners__rule::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #2e75d5; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pnames {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  background: rgba(255,255,255,.94); border: 1px solid rgba(28, 63, 113, .1); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-2);
}
.pname {
  min-height: 76px; padding: .85rem .65rem; display: grid; place-items: center; position: relative;
  font-family: var(--ff-d); font-size: .9rem; font-weight: 700; color: var(--navy); line-height: 1.2;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pname:nth-child(-n+2) { border-top: 0; }
.pname:nth-child(odd) { border-left: 0; }
.pname::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); position: absolute; top: .85rem; left: 50%; transform: translateX(-50%); }
.pname::after { content: ""; width: 34px; height: 1px; background: rgba(13, 44, 92, .28); position: absolute; bottom: .85rem; left: 50%; transform: translateX(-50%); }
.pname:hover { color: #fff; background: var(--navy); }
.pname:hover::before { background: #9fc0ef; }
.pname:hover::after { background: rgba(255,255,255,.55); }
.partners__seal { display: flex; align-items: center; gap: 1.2rem; max-width: 40rem; margin: 1.55rem auto 0; color: #3e83dd; }
.partners__seal span { height: 1px; background: rgba(62, 131, 221, .27); flex: 1; }
.partners__seal svg { width: 27px; height: 27px; padding: 5px; border-radius: 50%; background: rgba(255,255,255,.86); box-shadow: 0 5px 14px rgba(17,55,104,.1); stroke-width: 1.55; }
.partners__foot { max-width: 45rem; margin: .85rem auto 0; font-size: .8125rem; color: var(--muted); }
@media (min-width: 720px) {
  .pnames { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pname { min-height: 92px; font-size: 1rem; }
  .pname:nth-child(-n+4) { border-top: 0; }
  .pname:nth-child(odd) { border-left: 1px solid var(--line-2); }
  .pname:nth-child(4n+1) { border-left: 0; }
}

/* ------------------------------------------------------------------ FAQ */
.faqs { display: grid; gap: .6rem; }
.faq { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.25rem; position: relative;
  font-family: var(--ff-d); font-weight: 700; font-size: .9375rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { background: var(--tint); }
.faq p { padding: 0 1.25rem 1.2rem; font-size: .875rem; color: var(--text); max-width: 68ch; }

.ticks { display: grid; gap: .55rem; margin-top: 1.25rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; color: var(--text); }
.ticks svg { width: 18px; height: 18px; color: var(--navy); flex: none; margin-top: .2rem; stroke-width: 2.2; }

/* -------------------------------------------------------------- contact */
.cgrid { display: grid; gap: 1.15rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .cgrid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.12fr) minmax(0, 1.18fr); } }

.cinfo { display: grid; gap: .7rem; margin-top: 1.6rem; }
.cinfo__row {
  display: flex; gap: .9rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.05rem; background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cinfo__row:hover { border-color: var(--navy-050); box-shadow: var(--sh-1); }
.cinfo__i { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-050); color: var(--navy); display: grid; place-items: center; flex: none; }
.cinfo__i svg { width: 18px; height: 18px; }
.cinfo dt { font-size: .6875rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.cinfo dd { font-size: .9375rem; font-weight: 700; color: var(--ink); margin: 0; }
.cinfo dd a:hover { color: var(--navy); }
.cinfo dd small { display: block; font-size: .78125rem; font-weight: 500; color: var(--muted); margin-top: .25rem; }

.formcard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 2.5vw, 1.85rem); background: #fff; }
.form { display: grid; gap: .75rem; }
.form > .btn { justify-self: start; margin-top: .35rem; }
.frow { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .frow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: .3rem; }
.field label { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .95rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--tint); font-size: .875rem; color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 122px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #98a3b0; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 44, 92, .1);
}
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-color: #b3271b; background: #fdf5f4; }
.field .err { font-size: .75rem; color: #b3271b; font-weight: 600; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .78125rem; color: var(--muted); line-height: 1.5; }
.check input { width: 17px; height: 17px; flex: none; margin-top: .12rem; accent-color: var(--navy); }
.check a { color: var(--navy); font-weight: 700; }
.form__note { font-size: .8125rem; color: var(--muted); }
.form__note.is-ok { color: var(--navy); font-weight: 700; }

.mapcard { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.mapcard__frame { position: relative; aspect-ratio: 4 / 3; background: var(--tint-2); }
.mapcard__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapcard__b { padding: 1.2rem; background: var(--navy); color: #fff; display: flex; gap: 1rem; align-items: flex-start; }
.mapcard__thumb { width: 80px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; flex: none; }
.mapcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mapcard__b h3 { color: #fff; font-size: .9375rem; margin-bottom: .4rem; }
.mapcard__b p { font-size: .8125rem; color: rgba(255, 255, 255, .8); line-height: 1.55; }
.mapcard__b .tlink { color: #9fc0ef; margin-top: .65rem; }

/* --------------------------------------------------------------- gallery */
.gal { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 186px), 1fr)); }
/* On a phone the 186px floor resolved to ONE column, so the projects archive's
   30 thumbnails ran 10,600px on their own. Three across, still a 110px target. */
@media (max-width: 560px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; } }
.gal button { display: block; padding: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--tint-2); position: relative; width: 100%; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .3s; }
.gal button:hover img { transform: scale(1.06); opacity: .9; }

/* ------------------------------------------------- before / after wipe slider
   Only pairs shot from the same position are used here; a wipe across two
   different viewpoints would misrepresent the work. */
.ba { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; cursor: default; }
.ba__stage {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; cursor: ew-resize;
  background: var(--tint-2);
  /* `pan-y`, NOT `none`: the wipe only ever needs the horizontal axis, so the
     browser must keep the vertical one or a finger landing on the photo cannot
     scroll the page at all.
     There is deliberately NO `overscroll-behavior: contain` here. It used to be,
     and it was the "the page freezes when the cursor is over the comparison"
     bug: Chromium honours overscroll-behavior on the element under the pointer
     even though this element is not a scroll container, so a vertical wheel
     over the photo was swallowed instead of chaining to the document
     (measured: 0px of 600px). The wheel handler that used to paper over it in
     site.js made it worse — see the note there. */
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.ba__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p, 50%)) 0 0); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--p, 50%);
  width: 44px; margin-left: -22px; cursor: ew-resize; z-index: 2;
  display: grid; place-items: center; background: none; border: 0; padding: 0;
}
.ba__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(7, 20, 42, .18);
}
.ba__knob {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--navy); display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(7, 20, 42, .35);
  transition: transform var(--dur) var(--ease);
}
.ba__knob svg { width: 18px; height: 18px; }
.ba__handle:hover .ba__knob, .ba__handle:focus-visible .ba__knob { transform: scale(1.1); }
.ba__tag {
  position: absolute; top: .65rem; z-index: 1;
  font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .32rem .55rem; border-radius: 5px; pointer-events: none;
}
.ba__tag--b { left: .65rem; background: rgba(255, 255, 255, .94); color: var(--ink); }
.ba__tag--a { right: .65rem; background: var(--navy); color: #fff; }
.ba__cap { padding: .8rem 1rem; font-size: .8125rem; color: var(--muted); }
.ba__hint { display: block; font-size: .6875rem; color: var(--navy); font-weight: 700; margin-top: .25rem; }

/* Homepage comparison showcase: keep the explanatory copy directly below its
   heading and make the compact card rail easier to scan at first landing. */
.ba-intro { max-width: 52rem; margin-bottom: 1.35rem; }
.ba-intro .lede { margin-top: .85rem; max-width: 47rem; }
.ba-showcase .rail { grid-auto-columns: minmax(min(100%, 370px), 1fr) !important; }
.ba-showcase .ba__stage { aspect-ratio: 4 / 4.55; }
.ba-showcase .ba__cap { padding: .7rem .85rem; }
@media (min-width: 940px) {
  .ba-showcase { padding-block: clamp(2.5rem, 3.5vw, 3.75rem); }
  .ba-showcase .rail { grid-auto-columns: 370px !important; }
}

/* ------------------------------------------------------------- feature bar
   Divider-separated promises. Sits under the "Neden CES" split. */
.fbar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  overflow: hidden;
}
@media (min-width: 860px) { .fbar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fbar__i {
  padding: clamp(1.2rem, 2.2vw, 1.75rem);
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2);
  transition: background var(--dur) var(--ease);
}
.fbar__i:hover { background: var(--navy-050); }
.fbar__i:nth-child(-n+2) { border-top: 0; }
.fbar__i:nth-child(odd) { border-left: 0; }
@media (min-width: 860px) {
  .fbar__i { border-top: 0; border-left: 1px solid var(--line-2); }
  .fbar__i:first-child { border-left: 0; }
  .fbar__i:nth-child(odd) { border-left: 1px solid var(--line-2); }
  .fbar__i:first-child { border-left: 0; }
}
.fbar__ic { color: var(--navy); margin-bottom: .8rem; }
.fbar__ic svg { width: 28px; height: 28px; stroke-width: 1.35; }
.fbar h3 { font-size: .9375rem; margin-bottom: .35rem; }
.fbar p { font-size: .78125rem; color: var(--muted); line-height: 1.55; }

/* ===========================================================================
   Hakkımızda page
   Built to the approved layout: story split + quote card, milestone rail,
   values 2x2, mission/vision band, six-step process, staggered team, number
   band, navy delivery band + şantiye strip. Shared primitives (.split,
   .frame, .steps, .ctasplit) are reused — only what the layout adds is here.
   =========================================================================== */

/* --------------------------------------------------------------- story */
.sec--story { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.story { align-items: center; }
.story .crumbs { margin-bottom: 1.15rem; }

/* The white pull-quote that overlaps the photo's lower-right corner. Same
   anchoring trick as .overcard, but light-on-white so it needs the deeper
   shadow to separate from the image behind it. */
.qcard {
  background: #fff; border-radius: var(--r); padding: 1.3rem 1.45rem 1.2rem;
  box-shadow: var(--sh-3); position: relative; margin: 0;
}
/* Decoration, so it lives in CSS: as a text node the contrast audit reads it as
   unreadable body copy, which it is — it just is not copy. */
.qcard::before {
  content: "\201C";
  font-family: var(--ff-d); font-weight: 800; font-size: 2.6rem; line-height: .55;
  color: #c9d9ee; display: block; margin-bottom: .35rem;
}
.qcard p { font-size: .9375rem; line-height: 1.5; color: var(--ink); font-weight: 600; }
.qcard footer { font-size: .78125rem; color: var(--muted); margin-top: .6rem; text-align: right; }
@media (min-width: 940px) {
  .story .frame-wrap .qcard { position: absolute; right: -1.15rem; bottom: -1.35rem; max-width: 22rem; }
}
@media (max-width: 939px) { .story .frame-wrap .qcard { margin-top: .85rem; } }

/* ------------------------------------------------------- milestone rail */
.tline {
  --tg: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: clamp(1.35rem, 2.5vw, 2rem) clamp(1.2rem, 2.5vw, 2.25rem) clamp(1.35rem, 2.5vw, 1.85rem);
  display: grid; gap: 1.5rem var(--tg);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) { .tline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .tline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tline__i { display: flex; gap: .9rem; align-items: flex-start; position: relative; padding-top: 1.15rem; }
/* The rail is drawn per item rather than as one ::before on .tline, so it
   survives the 2-up and 1-up reflows — a single full-width line would hang over
   the gap between rows. Each segment then reaches half a gutter to either side
   so the four of them read as one continuous line; the row ends get trimmed. */
.tline__d {
  position: absolute; top: 0; height: 1px; background: var(--line);
  left: calc(var(--tg) / -2); right: calc(var(--tg) / -2);
}
.tline__i:first-child .tline__d { left: 0; }
.tline__i:last-child .tline__d { right: 0; }
@media (min-width: 620px) and (max-width: 1019px) {
  .tline__i:nth-child(2) .tline__d { right: 0; }
  .tline__i:nth-child(3) .tline__d { left: 0; }
}
/* Stacked, the rail stops being a rail and becomes a row divider — so the first
   item drops its segment and node, which would otherwise read as a stray rule
   floating inside the card's top padding. */
@media (max-width: 619px) {
  .tline__d { left: 0; right: 0; }
  .tline__i:first-child { padding-top: 0; }
  .tline__i:first-child .tline__d, .tline__i:first-child::before { display: none; }
}
/* Node sits on .tline__i, not on the segment, so the extension above does not
   drag it off the icon it belongs to. */
.tline__i::before {
  content: ""; position: absolute; top: 0; left: 13px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--navy); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px #fff; z-index: 1;
}
.tline__ic { color: var(--navy); flex: none; }
.tline__ic svg { width: 26px; height: 26px; stroke-width: 1.35; }
.tline__i h3 { font-size: 1.0625rem; letter-spacing: -.012em; }
.tline__l { font-size: .8125rem; font-weight: 700; color: var(--navy); margin-top: .1rem; }
.tline__i p { font-size: .78125rem; color: var(--muted); line-height: 1.55; margin-top: .3rem; }

/* --------------------------------------------------------------- values */
.hrule { display: block; width: 58px; height: 2px; background: var(--navy); margin: 1.15rem 0 0; }
.vgrid {
  display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
@media (min-width: 560px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hairline cross between the four cells, no card chrome — the layout separates
   them with rules, not boxes. */
.vitem {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.15rem 1.15rem 1.15rem 0;
  border-top: 1px solid var(--line);
}
.vitem:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 560px) {
  .vitem { padding-left: clamp(1rem, 2vw, 1.65rem); border-left: 1px solid var(--line); }
  .vitem:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .vitem:nth-child(odd) { border-left: 0; padding-left: 0; }
}
.vitem__i { color: var(--navy); flex: none; }
.vitem__i svg { width: 27px; height: 27px; stroke-width: 1.35; }
.vitem h3 { font-size: .9375rem; margin-bottom: .35rem; }
.vitem p { font-size: .78125rem; color: var(--muted); line-height: 1.55; }

/* ------------------------------------------------- mission and vision */
.sec--mv {
  position: relative; overflow: hidden;
  background:
    linear-gradient(rgba(248,251,255,.72), rgba(240,246,252,.82)),
    url("../img/partners-architecture-bg.jpg") center / cover no-repeat,
    linear-gradient(135deg, #f9fbfe, #f0f5fb);
}
.mvgrid {
  position: relative; display: grid; gap: 2rem clamp(2rem, 6vw, 5.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) { .mvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mvgrid__t {
  font-family: var(--ff-d); font-weight: 600;
  font-size: clamp(1.02rem, .95rem + .5vw, 1.28rem); line-height: 1.5;
  letter-spacing: -.012em; color: var(--text); max-width: 34ch;
}

/* -------------------------------------------------------------- process */
/* The six-step variant of .steps. The base rail is pinned to 5 columns, so the
   node line has to be re-inset for 6 or it overshoots the first/last circle. */
@media (min-width: 780px) {
  .steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--6::before { left: 0; right: 0; }
}
@media (min-width: 1080px) {
  .steps--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Full width rather than the base 9% inset: the numbered circles are
     left-aligned in their columns, so any symmetric inset lands the line short
     of the first node at one end and out in empty space at the other. The
     circles are opaque, so the rail simply passes behind them. */
  .steps--6::before { left: 0; right: 0; }
  .steps--6 .step p { max-width: 22ch; }
}

/* ----------------------------------------------------------------- team */
.sec--team {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle, rgba(29, 82, 154, .14) 1.25px, transparent 1.5px) right 2.5rem top 7rem / 12px 12px no-repeat,
    #fff;
}
/* Both members on one line. `align-items: start` so an uneven bio (or the quote
   card hanging off one photo) does not drag the other member's copy down with
   it — the two columns are independent. */
.team {
  display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); margin-top: 1.5rem;
  grid-template-columns: minmax(0, 1fr); align-items: start;
}
@media (min-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tmember {
  display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .tmember { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.tmember__ph { position: relative; }
.tphoto {
  border-radius: var(--r); overflow: hidden; background: var(--tint-2);
  /* Square: these frames are headshots, and a 4:3 landscape crop of a face
     wastes width on either side of it. */
  aspect-ratio: 1 / 1; box-shadow: var(--sh-1);
}
.tphoto img { width: 100%; height: 100%; object-fit: cover; }
/* Portrait not shot yet: a branded panel reads as intent, a grey box reads as
   a broken image. Swap in assets/img/team-<slug>.jpg and the build uses it. */
.tphoto__ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(150deg, var(--navy-050), #dce6f4);
}
.tphoto__ph img { width: 46px; height: 46px; object-fit: contain; opacity: .55; background: none; }
.tmember__b h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
.tmember__r { font-size: .8125rem; font-weight: 700; color: var(--navy); margin-top: .3rem; }
.tmember__x { font-size: .875rem; color: var(--muted); line-height: 1.65; margin-top: .8rem; max-width: 44ch; }
.qcard--sm { padding: 1rem 1.1rem; margin-top: -1.5rem; margin-inline: .75rem 0; }
.qcard--sm::before { font-size: 2rem; margin-bottom: .25rem; }
.qcard--sm p { font-size: .8125rem; font-weight: 500; color: var(--text); }

/* --------------------------------------------------------- number band */
.sec--nums {
  position: relative; overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.8), rgba(248,251,255,.88)),
    url("../img/services-architecture-bg.jpg") center / cover no-repeat,
    #fbfdff;
}
.numband {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 0; margin-top: 1.25rem;
}
@media (min-width: 780px) { .numband { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numstat { padding-inline: clamp(.75rem, 2.5vw, 2rem); border-left: 1px solid var(--line); }
.numstat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 779px) { .numstat:nth-child(odd) { border-left: 0; padding-left: 0; } }
.numstat__n {
  font-family: var(--ff-d); font-weight: 800; line-height: 1; letter-spacing: -.03em;
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem); color: var(--navy);
}
.numstat__n span { font-weight: 500; font-size: .48em; letter-spacing: -.01em; margin-left: .12em; }
.numstat__l { font-size: .8125rem; color: var(--muted); margin-top: .7rem; }

/* ----------------------------------------------- navy delivery band */
.pband { background: var(--navy); color: #fff; }
.pband__in {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  display: grid; gap: 1.75rem clamp(2rem, 4vw, 3.5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) { .pband__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.pband h2 { color: #fff; font-size: clamp(1.35rem, 1.05rem + 1.15vw, 1.9rem); }
.pband__in > div > p { color: rgba(255, 255, 255, .78); font-size: .9375rem; margin-top: .8rem; max-width: 40ch; }
.pband__g { display: grid; gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .pband__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pband__ic { color: #9fc0ef; display: block; margin-bottom: .8rem; }
.pband__ic svg { width: 28px; height: 28px; stroke-width: 1.35; }
.pband__i h3 { color: #fff; font-size: .9375rem; margin-bottom: .4rem; }
.pband__i p { font-size: .78125rem; color: rgba(255, 255, 255, .72); line-height: 1.55; }

/* Edge-to-edge şantiye strip closing the band. Six frames on wide screens,
   three on a phone — a 6-up strip at 390px gives 65px slivers. */
/* The şantiye gallery under the navy band.
   It was six photographs butted edge to edge on a navy ground, with no line
   between them and no line around them, so it read as one undifferentiated
   smear of picture rather than six frames — the firm's note was that it
   "blends too much". Three things fix that, and the first two are what were
   asked for: black separators between frames (the gap, with the strip's own
   near-black ground showing through), a black rule above and below the whole
   band, and a dark gradient rising from the bottom of each frame. */
.pstrip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; background: #05080f;
  border-block: 2px solid #05080f;
}
@media (min-width: 700px) {
  .pstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; border-block-width: 3px; }
}
.pstrip__f {
  position: relative; display: block; padding: 0; overflow: hidden;
  background: var(--navy-900); cursor: zoom-in;
}
.pstrip img {
  width: 100%; height: clamp(96px, 12vw, 172px); object-fit: cover; background: var(--navy-800);
  /* Portrait phone shots in a wide sliver lose most of their height, and the
     work is always in the lower half of these frames, not the ceiling. */
  object-position: center 62%;
  filter: saturate(.82) brightness(.94);
  transition: filter var(--dur) var(--ease), transform .8s var(--ease);
}
/* The gradient sits on the frame, not the image, so the hover zoom moves
   underneath it instead of dragging it along. */
.pstrip__f::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(3, 8, 18, .88) 0%, rgba(3, 8, 18, .28) 46%, transparent 74%);
  /* .62 at rest is the "little bit of gradient"; full strength on hover,
     because that is when the caption appears and needs something to sit on.
     The first pass had this backwards and faded the scrim out under the text. */
  opacity: .62;
  transition: opacity var(--dur) var(--ease);
}
.pstrip__f:hover img, .pstrip__f:focus-visible img { filter: none; transform: scale(1.05); }
.pstrip__f:hover::after, .pstrip__f:focus-visible::after { opacity: 1; }
.pstrip__f:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* The caption is what tells you the frame is a thing you can open. Hidden from
   the eye below 700px — there is no room for it in a 3-across sliver on a
   phone — but the button keeps its aria-label, so it is never hidden from a
   screen reader. */
.pstrip__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: .5rem .65rem .55rem; text-align: left;
  font-size: .65rem; font-weight: 700; line-height: 1.28; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pstrip__f:hover .pstrip__cap, .pstrip__f:focus-visible .pstrip__cap { opacity: 1; transform: none; }
@media (max-width: 699px) { .pstrip__cap { display: none; } }

/* --------------------------------------------------- CTA contact column */
.clist { display: grid; gap: .3rem; }
.clist__i {
  display: flex; gap: .7rem; align-items: center;
  font-size: .875rem; color: rgba(255, 255, 255, .86);
  padding: .45rem .6rem .45rem 0; border-radius: var(--r);
  transition: color var(--dur) var(--ease);
}
.clist__i:hover { color: #fff; }
.clist__ic { color: #9fc0ef; flex: none; display: block; }
.clist__ic svg { width: 18px; height: 18px; stroke-width: 1.5; }

/* -------------------------------------------------------------- lightbox */
.lb { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(7, 20, 42, .96); padding: clamp(1rem, 4vw, 3rem); place-items: center; }
.lb.is-open { display: grid; }
.lb__fig { margin: 0; display: grid; justify-items: center; }
.lb__img { max-width: min(1200px, 100%); max-height: 80vh; width: auto; object-fit: contain; border-radius: 6px; background: none; }
.lb__cap { color: rgba(255, 255, 255, .82); font-size: .8125rem; text-align: center; margin-top: 1rem; }
.lb__x, .lb__p, .lb__n {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center;
  transition: background var(--dur) var(--ease);
}
.lb__x:hover, .lb__p:hover, .lb__n:hover { background: rgba(255, 255, 255, .26); }
.lb__x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__p { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__n { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- footer */
.ftr {
  background: var(--navy-900); color: rgba(255, 255, 255, .74);
  padding-top: clamp(2.75rem, 4vw, 4rem); margin-top: 0;
}
.ftr__top { display: grid; gap: 2.25rem clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(2.25rem, 4vw, 3.25rem); }
@media (min-width: 700px) { .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the services column carries all fourteen links, so it gets extra width and
   runs in two columns instead of towering over its neighbours */
@media (min-width: 1080px) { .ftr__top { grid-template-columns: 1.4fr .85fr 1.85fr .95fr 1.05fr auto; } }
@media (min-width: 700px) {
  .ftr__svc ul { columns: 2; column-gap: 1.15rem; }
  .ftr__svc li { break-inside: avoid; }
  .ftr__svc li + li { margin-top: .6rem; }
}
.ftr .brand__a { color: #fff; }
.ftr .brand__b { color: rgba(255, 255, 255, .52); }
.ftr__about { font-size: .8125rem; line-height: 1.65; margin-top: 1.05rem; max-width: 33ch; }
.ftr h4 { color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem; }
.ftr li + li { margin-top: .6rem; }
.ftr li, .ftr li a { font-size: .8125rem; }
.ftr li a { transition: color var(--dur) var(--ease); }
.ftr li a:hover { color: #fff; }
.social { display: flex; gap: .5rem; }
.social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .09); color: #fff; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.social a:hover { background: var(--navy-600); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }
.ftr__bot {
  border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.3rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between;
  font-size: .75rem; color: rgba(255, 255, 255, .56);
}

.wa {
  position: fixed; right: clamp(.9rem, 2.5vw, 1.6rem); bottom: clamp(.9rem, 2.5vw, 1.6rem); z-index: 90;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #1eb655; color: #fff; box-shadow: 0 10px 28px -8px rgba(30, 182, 85, .6);
  transition: transform var(--dur) var(--ease);
}
.wa:hover { transform: scale(1.07); }
.wa svg { width: 27px; height: 27px; }

/* ------------------------------------------------------- touch targets
   On phones every inline link gets padded out to a comfortable target. Done
   here rather than inline so the desktop rhythm is untouched. */
@media (max-width: 760px) {
  /* block, not inline-block: the service names are now single short words
     ("Çatı", "Mermer"), and an inline-block shrank the hit area to 25px wide.
     Filling the column costs nothing and clears the target floor. */
  .ftr li a { display: block; padding-block: .42rem; }
  .ftr li + li { margin-top: .15rem; }
  .ftr__svc ul { columns: 2; column-gap: 1rem; }
  .ftr__svc li { break-inside: avoid; }
  .crumbs a { display: inline-block; padding-block: .3rem; }
  .tlink { min-height: 36px; }
  .cinfo dd a, .cinfo dd small a { display: inline-block; padding-block: .3rem; }
  .ctasplit__act .tiny { display: inline-block; padding-block: .45rem; }
  /* the box itself stays small, but the whole <label> is the hit area */
  .check { padding-block: .35rem; }
  .check input { width: 24px; height: 24px; }
  .social a { width: 44px; height: 44px; }
  .gal button { min-height: 44px; }
}

/* --------------------------------------------------------------- motion */
/* Above the fold we use a CSS animation, not the IntersectionObserver: the
   observer needs JS to have run, which left the hero blank for ~0.9s on load. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
[data-rise] { animation: rise .5s var(--ease) both; animation-delay: var(--d, 0s); }

/* below the fold — scoped to .js so the page is fully visible with JS disabled */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rise] { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .tile:hover img, .pcard:hover .pcard__img img, .hcard:hover .hcard__img img,
  .frame-wrap:hover .frame img, .ctasplit:hover .ctasplit__img img { transform: none; }
  .whylist li:hover, .pname:hover, .ctasplit:hover { transform: none; }
}

@media print {
  .hdr, .wa, .lb, .rail-nav, .filters, .burger, .mapcard__frame { display: none !important; }
  body { color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
}