/* ==========================================================================
   MRD Group — Components
   --------------------------------------------------------------------------
   Performance rules enforced throughout this file:
     · no backdrop-filter  — it repaints on every scroll frame
     · no mix-blend-mode   — forces an extra compositing pass
     · no filter transitions on large images
   Animation is limited to transform, opacity and clip-path, which the
   compositor can handle without touching layout or paint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Loader — quiet, paper-coloured, shows real progress.
   -------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-5);
  background: var(--c-paper);
  will-change: transform;
  transition: transform var(--d-slow) var(--e-in-out),
    visibility var(--d-slow);
}
/* The loader lifts away like a curtain rather than fading — it reveals the
   page beneath and shares its motion language with the page-exit wipe below,
   so entering and leaving a page feel like one continuous system. */
.loader.is-done {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   1b. Page-exit wipe — a paper curtain that rises to cover the screen before
   an internal navigation, so the multi-page site reads as one seamless app.
   The incoming page's loader (same paper, same logo) then lifts to reveal it.
   -------------------------------------------------------------------------- */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-loader) + 10);
  display: grid;
  place-content: center;
  background: var(--c-paper);
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
}
.page-wipe__logo {
  height: 3rem;
  width: auto;
  opacity: 0;
  transform: translateY(8px);
}
body.is-leaving .page-wipe {
  transform: translateY(0);
  pointer-events: auto;
  transition: transform 0.62s var(--e-in-out);
}
body.is-leaving .page-wipe__logo {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--e-out) 0.14s,
    transform 0.5s var(--e-out) 0.14s;
}
@media (prefers-reduced-motion: reduce) {
  .page-wipe {
    display: none;
  }
}
.loader__bar {
  width: min(42vw, 13rem);
  height: 1px;
  background: var(--c-line);
  overflow: hidden;
}
.loader__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--c-ink);
  transition: width 0.35s linear;
}
.loader__pct {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   2. Cursor — a single ink dot, positioned straight from the pointer event.
      No trailing ring: anything that lags behind the hand reads as lag.
   -------------------------------------------------------------------------- */
/* The wrapper carries the pointer position, the dot carries the hover scale,
   so the two transforms never overwrite one another. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  display: none;
  will-change: transform;
}
.cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--c-ink);
  transition: transform var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out);
}
.cursor.is-hover .cursor__dot {
  transform: scale(2.4);
  background: var(--c-accent);
}
/* Hidden while the pointer is over the map, so the dot never freezes on the
   iframe (which captures pointer events and stops updating our cursor). */
.cursor.is-hidden {
  opacity: 0;
}
/* The footer is the same near-black as the dot, so the dot would vanish
   there. Over dark regions it flips to paper. */
.cursor.is-inverse .cursor__dot {
  background: var(--c-paper);
}
.cursor.is-inverse.is-hover .cursor__dot {
  background: var(--c-paper);
}
@media (hover: hover) and (pointer: fine) {
  body.has-cursor .cursor {
    display: block;
  }
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button {
    cursor: none;
  }
}

/* --------------------------------------------------------------------------
   3. Canvas stage — a single full-screen shader behind the page.
      It renders paper grain and a slow light wash. There is no geometry:
      one draw call, no per-frame JavaScript work, so it cannot compete
      with the scroll for main-thread time.
   -------------------------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
}
.stage canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* Painted when WebGL is unavailable or reduced-motion is on. */
.stage--fallback {
  background: radial-gradient(
      110% 70% at 78% 8%,
      rgba(138, 95, 43, 0.09),
      transparent 62%
    ),
    radial-gradient(90% 60% at 8% 92%, rgba(38, 69, 107, 0.07), transparent 60%);
}

.page {
  position: relative;
  z-index: var(--z-content);
}

/* --------------------------------------------------------------------------
   4. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: height var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out);
}
/* Solid paper rather than a blur: no per-frame repaint while scrolling. */
.site-header.is-stuck {
  height: 3.875rem;
  background: var(--c-paper);
  border-bottom-color: var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.brand__logo {
  display: block;
  height: 4rem;
  width: auto;
  transition: height var(--d-base) var(--e-out),
    opacity var(--d-fast) var(--e-out);
}
.brand:hover .brand__logo {
  opacity: 0.72;
}
.site-header.is-stuck .brand__logo {
  height: 3.2rem;
}
/* The logo is black on transparent; on the dark footer it flips to paper. */
.site-footer .brand__logo {
  height: 4rem;
  filter: brightness(0) invert(1);
}

/* Loader wordmark image. */
.loader__logo {
  height: 5.5rem;
  width: auto;
}

/* Division sub-brand lockup at the top of a sector hero — sized to read as
   the division's identity, not a footnote. */
.page-hero__logo {
  display: block;
  width: auto;
  height: 5.6rem;
  max-width: 100%;
  margin-bottom: var(--s-7);
}
.page-hero__logo--tall {
  height: 8rem;
}
@media (max-width: 560px) {
  .page-hero__logo {
    height: 4.4rem;
  }
  .page-hero__logo--tall {
    height: 6.4rem;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 2.2vw, var(--s-7));
}
.nav__link {
  position: relative;
  font-size: var(--t-small);
  color: var(--c-ink-dim);
  padding-block: var(--s-2);
  transition: color var(--d-fast) var(--e-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.35em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--e-out);
}
.nav__link:hover {
  color: var(--c-ink);
}
.nav__link[aria-current="page"] {
  color: var(--c-accent);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  place-content: center;
  gap: 6px;
  margin-right: calc(var(--s-3) * -1);
}
.menu-toggle span {
  display: block;
  width: 21px;
  height: 1px;
  background: var(--c-ink);
  transition: transform var(--d-base) var(--e-out),
    opacity var(--d-fast) var(--e-out);
}
body.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
body.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-9) var(--gutter);
  background: var(--c-paper);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-in-out), visibility var(--d-slow);
}
body.menu-open .menu {
  transform: translateY(0);
  visibility: visible;
}
.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.menu__link span {
  font-family: var(--f-body);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  color: var(--c-ink-faint);
}
.menu__foot {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }
  .menu-toggle {
    display: grid;
  }
}

/* --------------------------------------------------------------------------
   5. Hero — word-stacked serif, one line per line. Nothing else competes.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-8);
}
.hero__inner {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.hero__eyebrow::before {
  content: "";
  width: clamp(2rem, 6vw, 5rem);
  height: 1px;
  background: var(--c-accent);
}
.hero__title {
  font-size: var(--t-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
}
.hero__title .accent {
  color: var(--c-accent);
}
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.hero__lead {
  max-width: 30rem;
}

.scroll-cue {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-ink-faint);
}
.scroll-cue__rail {
  width: 1px;
  height: 2.75rem;
  background: var(--c-line);
  position: relative;
  overflow: hidden;
}
.scroll-cue__rail::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 45%;
  background: var(--c-accent);
  animation: cue 2.8s var(--e-in-out) infinite;
}
@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(230%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__rail::after {
    animation: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. Section furniture
   -------------------------------------------------------------------------- */
/* Follows a hero directly: the page's first block of real content should not
   sit a full section-gap below the title. */
.section--tight {
  padding-top: var(--s-7);
}
/* One full viewport, at every resolution. The block is centred in whatever
   height the display has, so the carved ground fills the screen on its own and
   the next section — the only element here painting a flat band — always
   starts below the fold. Content taller than the viewport (phones, short
   laptops) simply grows the wrapper instead of being clipped. */
.first-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--contact {
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}
.section--contact .detail-list > div {
  padding-block: 0.6rem;
}
.section--contact .contact-actions {
  margin-top: var(--s-5);
}
/* A wider crop keeps the map readable while costing less height, so the
   details column and the map end at roughly the same line. */
.section--contact .map-frame {
  aspect-ratio: 16 / 10;
}
/* One-line credit: OpenStreetMap requires the attribution, nothing more. */
.map-note {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-ink-faint);
}

.section--band {
  background: var(--c-paper-2);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}

/* Manifesto — a single serif statement, generous around it. */
.manifesto__grid {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 900px) {
  .manifesto__grid {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--s-10);
  }
}
.manifesto__text {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
  max-width: 24ch;
}
.manifesto__text .accent {
  color: var(--c-accent);
}
.manifesto__side {
  max-width: 25rem;
  padding-top: var(--s-2);
}

/* Facts — hairline rules only. No boxes, no invented numbers. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--s-6) var(--s-7);
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}
.fact__value {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
}
.fact__label {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-ink-faint);
}

/* --------------------------------------------------------------------------
   7. Sector rows — editorial spreads, not cards.
   -------------------------------------------------------------------------- */
.sector {
  position: relative;
  padding-block: var(--s-section);
  border-top: 1px solid var(--c-line);
}
.sector__inner {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 960px) {
  .sector__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
  }
  .sector--flip .sector__media {
    order: -1;
  }
}

.sector__index {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sector-accent, var(--c-accent));
}
.sector__index::after {
  content: "";
  flex: 1;
  max-width: 4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.sector__title {
  font-size: var(--t-h1);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  margin-block: var(--s-5) var(--s-5);
}
.sector__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-block: var(--s-6);
  font-size: var(--t-small);
  color: var(--c-ink-faint);
}
.sector__list li:not(:last-child)::after {
  content: "/";
  margin-left: var(--s-3);
  color: var(--c-line);
}

.sector__media-link {
  display: block;
}
/* Media well — clip-path reveal, no filters, no blend modes. */
.sector__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-paper-3);
}
.sector__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reveals-on .reveal-media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-reveal) var(--e-in-out);
}
.reveals-on .reveal-media img {
  transform: scale(1.08);
  transition: transform 2s var(--e-out);
}
.reveal-media.is-in {
  clip-path: inset(0 0 0 0);
}
.reveal-media.is-in img {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-media {
    clip-path: none;
  }
  .reveal-media img {
    transform: none;
  }
}

.sector--market {
  --sector-accent: var(--c-market);
}
.sector--insaat {
  --sector-accent: var(--c-insaat);
}
.sector--enerji {
  --sector-accent: var(--c-petrol);
}

/* --------------------------------------------------------------------------
   8. Links & buttons — understated, rule-based.
   -------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-small);
  color: var(--sector-accent, var(--c-accent));
  padding-bottom: var(--s-2);
  border-bottom: 1px solid currentColor;
}
.link-arrow svg {
  width: 15px;
  height: 15px;
  transition: transform var(--d-base) var(--e-out);
}
.link-arrow:hover svg {
  transform: translateX(6px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 1rem 1.75rem;
  font-size: var(--t-small);
  color: var(--c-paper);
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: var(--radius);
  transition: color var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out);
}
.btn:hover {
  color: var(--c-ink);
  background: transparent;
}
.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.btn--ghost {
  color: var(--c-ink);
  background: transparent;
  border-color: var(--c-line);
}
.btn--ghost:hover {
  color: var(--c-paper);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

/* Every button in a contact row carries the same weight. One filled button
   sitting beside outlined ones reads as an inconsistency, not as hierarchy —
   and it behaves differently on hover, which is worse. */
.contact-actions .btn {
  color: var(--c-ink);
  background: transparent;
  border-color: var(--c-line);
}
.contact-actions .btn:hover {
  color: var(--c-paper);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   9. Approach — a numbered editorial list, not a grid of cards.
   -------------------------------------------------------------------------- */
.approach {
  border-top: 1px solid var(--c-line);
}
.approach__item {
  display: grid;
  gap: var(--s-3) var(--s-7);
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 800px) {
  .approach__item {
    grid-template-columns: 4rem 16rem 1fr;
    align-items: baseline;
  }
}
.approach__no {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  color: var(--c-accent);
}
.approach__item h3 {
  font-size: var(--t-h3);
  font-weight: 400;
}
.approach__item p {
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   10. Contact
   -------------------------------------------------------------------------- */
.contact-band__title {
  font-size: var(--t-h1);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  max-width: 20ch;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.detail-list {
  border-top: 1px solid var(--c-line);
}
.detail-list > div {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 700px) {
  .detail-list > div {
    grid-template-columns: 11rem 1fr;
    align-items: baseline;
    gap: var(--s-5);
  }
}
.detail-list dt {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.detail-list dd {
  font-family: var(--f-display);
  font-size: var(--t-lead);
  color: var(--c-ink);
}
.detail-list dd a {
  border-bottom: 1px solid var(--c-line);
  transition: border-color var(--d-fast) var(--e-out);
}
.detail-list dd a:hover {
  border-bottom-color: var(--c-accent);
  color: var(--c-accent);
}

/* A live, full-colour map framed as a print: matted inside a hairline frame,
   edge-vignetted and labelled. Over the map the custom cursor is hidden and
   the real system cursor returns, so it never freezes on the iframe and the
   map stays fully interactive. */
.map-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-paper-3);
  border: 1px solid var(--c-line);
  box-shadow: 0 22px 48px -32px rgba(18, 18, 15, 0.55);
}
.map-frame iframe {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body.has-cursor .map-frame,
body.has-cursor .map-frame * {
  cursor: auto;
}
/* Paper mat + hairline inner frame + warm edge vignette, all in one overlay. */
.map-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 8px var(--c-paper), inset 0 0 0 9px var(--c-line);
  /* The first layer is a solid paper band across the bottom that hides the
     embed's own attribution/donate strip (it lives inside the cross-origin
     iframe and cannot be removed from the outside). Attribution is instead
     given as text in the caption below the map, which satisfies the licence. */
  background: linear-gradient(
      to top,
      var(--c-paper) 34px,
      rgba(233, 231, 226, 0) 34px
    ),
    radial-gradient(
      132% 112% at 50% 44%,
      transparent 56%,
      rgba(18, 18, 15, 0.13)
    ),
    linear-gradient(180deg, rgba(138, 95, 43, 0.05), rgba(38, 69, 107, 0.05));
}
/* Editorial corner label. */
.map-frame::after {
  content: "GAZİANTEP";
  position: absolute;
  z-index: 2;
  left: var(--s-5);
  bottom: calc(34px + var(--s-4));
  padding: 0.42rem 0.72rem;
  font-family: var(--f-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Cross navigation
   -------------------------------------------------------------------------- */
.cross {
  border-top: 1px solid var(--c-line);
}
.cross__item {
  display: grid;
  gap: var(--s-2) var(--s-7);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--c-line);
  transition: padding-left var(--d-base) var(--e-out);
}
@media (min-width: 800px) {
  .cross__item {
    grid-template-columns: 10rem 1fr auto;
    align-items: baseline;
  }
  .cross__item:hover {
    padding-left: var(--s-4);
  }
}
.cross__item span {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--cross-accent, var(--c-accent));
}
.cross__item h3 {
  font-size: var(--t-h3);
  font-weight: 400;
}
.cross__item p {
  font-size: var(--t-small);
  max-width: 30rem;
}
.cross__arrow {
  color: var(--cross-accent, var(--c-accent));
}

/* --------------------------------------------------------------------------
   12. Split layout helper
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--s-8);
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
  }
  .split--narrow {
    grid-template-columns: 1fr 1.4fr;
  }
}

/* --------------------------------------------------------------------------
   13. Sub-page hero & breadcrumb
   -------------------------------------------------------------------------- */
.page-hero {
  min-height: 72svh;
  padding-top: calc(var(--header-h) + var(--s-9));
  padding-bottom: var(--s-8);
}
.page-hero .hero__title {
  font-size: var(--t-h1);
}

/* Contact page: the details and the map ARE the content, so the title must
   not eat a whole screen before them. Title, spacing and rows are all sized
   down so the block reads in one view with the map beside it. */
.page-hero.hero--compact {
  min-height: 0;
  padding-top: calc(var(--header-h) + var(--s-4));
  padding-bottom: var(--s-4);
}
.page-hero.hero--compact .hero__title {
  font-size: clamp(2rem, 3vw, 2.5rem);
}
.hero--compact .breadcrumb,
.hero--compact .hero__eyebrow {
  margin-bottom: var(--s-4);
}
.breadcrumb {
  margin-bottom: var(--s-6);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--c-line);
}
.breadcrumb a:hover {
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   14. Footer — the single dark band on the site.
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: var(--z-content);
  background: var(--c-ink-inverse);
  color: var(--c-paper);
  padding-block: var(--s-9) var(--s-6);
}
.site-footer .brand {
  color: var(--c-paper);
}
.site-footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-bottom: var(--s-8);
}
.site-footer h2 {
  font-family: var(--f-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(233, 231, 226, 0.45);
  margin-bottom: var(--s-4);
}
.site-footer p,
.site-footer a {
  color: rgba(233, 231, 226, 0.72);
  font-size: var(--t-small);
  transition: color var(--d-fast) var(--e-out);
}
/* Footer links are the site's densest tap targets — a 17px line is hard to hit
   with a thumb, and one of them is the phone number. Padding lifts each link
   towards the 44px guideline without changing the visual rhythm. */
.site-footer li a {
  display: inline-block;
  padding-block: 0.55rem;
}
.site-footer a:hover {
  color: var(--c-paper);
}
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(233, 231, 226, 0.14);
}

/* Floating WhatsApp — reachable everywhere, quiet enough not to shout. */
.wa-float {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.75rem);
  bottom: clamp(0.9rem, 3vw, 1.75rem);
  z-index: calc(var(--z-header) - 1);
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-paper);
  box-shadow: 0 8px 24px rgba(18, 18, 15, 0.18);
  transform: translateY(140%);
  transition: transform var(--d-slow) var(--e-out),
    background-color var(--d-fast) var(--e-out);
}
.wa-float.is-in {
  transform: translateY(0);
}
.wa-float:hover {
  background: #1f7a4a;
}
.wa-float svg {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   14b. Stats band (Rakamlarla) — large serif figures that count up on scroll.
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  /* 11rem was too narrow for a five-digit figure with a unit ("16.500 m²"):
     the value ran into the next column. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-7) var(--s-8);
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}
.stat__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
/* The unit is set smaller than the figure so a long value keeps its column. */
.stat__suffix {
  color: var(--c-accent);
  margin-left: 0.12em;
  font-size: 0.5em;
  letter-spacing: 0;
}
.stat__label {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-ink-faint);
}

/* --------------------------------------------------------------------------
   14c. Flagship project media — the homepage showcase for the group's one
   real landmark build. Shares the clip-path reveal used by sector media.
   -------------------------------------------------------------------------- */
.flagship__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-paper-3);
}
.flagship__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   14d. Gallery + lightbox. Tiles are placeholders until real photos arrive;
   swapping in an <img src> is all that is needed later.
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-4);
}
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-paper-3);
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--c-ink-faint);
  transition: border-color var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}
.gallery__item:hover {
  border-color: var(--c-accent);
  transform: translateY(-3px);
}
.gallery__ph {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  z-index: 1;
}
.gallery__ph svg {
  width: 26px;
  height: 26px;
  opacity: 0.55;
}
.gallery__ph span {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--e-out);
}
.gallery__item:hover img {
  transform: scale(1.05);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-loader) - 10);
  display: grid;
  place-content: center;
  padding: clamp(1.25rem, 5vw, 4rem);
  background: rgba(18, 18, 15, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__panel {
  position: relative;
  width: min(90vw, 56rem);
  aspect-ratio: 16 / 10;
  max-height: 82vh;
  background: var(--c-paper-3);
  border: 1px solid rgba(233, 231, 226, 0.22);
  display: grid;
  place-content: center;
  color: var(--c-ink-dim);
  transform: scale(0.96);
  transition: transform var(--d-base) var(--e-out);
  overflow: hidden;
}
.lightbox.is-open .lightbox__panel {
  transform: scale(1);
}
.lightbox__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lightbox__caption {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 4vw, 2rem);
  right: clamp(1rem, 4vw, 2rem);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-content: center;
  color: var(--c-paper);
  border: 1px solid rgba(233, 231, 226, 0.3);
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--d-fast) var(--e-out);
}
.lightbox__close:hover {
  background: rgba(233, 231, 226, 0.12);
}
/* Full-screen viewer: side navigation, caption + counter bar. */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-content: center;
  color: var(--c-paper);
  border: 1px solid rgba(233, 231, 226, 0.3);
  border-radius: 50%;
  background: transparent;
  z-index: 2;
  transition: background-color var(--d-fast) var(--e-out);
}
.lightbox__nav:hover {
  background: rgba(233, 231, 226, 0.12);
}
.lightbox__nav--prev {
  left: clamp(0.75rem, 4vw, 2.5rem);
}
.lightbox__nav--next {
  right: clamp(0.75rem, 4vw, 2.5rem);
}
.lightbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding-inline: var(--s-6);
}
.lightbox__caption {
  color: rgba(233, 231, 226, 0.9);
}
.lightbox__count {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  color: rgba(233, 231, 226, 0.55);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14e. Coverflow carousel — centre slide sharp and full; neighbours peek in
   blurred and scaled back. Built by initCarousel(); 12 slides per sector.
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
  margin-top: var(--s-5);
}
.carousel__viewport {
  overflow: hidden;
  cursor: grab;
  /* Only a whisper of edge softening — the neighbours must stay clearly
     visible as half-slides, not fade away. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
}
.carousel__viewport:active {
  cursor: grabbing;
}
/* Endless coverflow: every slide is absolutely positioned and placed by
   initCarousel() from its wrapped distance to the centre, so the loop never
   dead-ends and both neighbours are always present. JS owns transform /
   opacity / z-index; CSS owns the blur and the active shadow. */
.carousel__track {
  position: relative;
  height: calc(clamp(16rem, 44vw, 34rem) * 0.625 + 3rem);
  touch-action: pan-y;
}
.carousel__slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(16rem, 44vw, 34rem);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-paper-3);
  display: grid;
  place-content: center;
  color: var(--c-ink-faint);
  filter: blur(5px);
  transform: translate(-50%, -50%);
  /* will-change is set per-slide by initCarousel(): only the three on-stage
     slides get a GPU layer, the rest release theirs. */
  transition: transform 0.7s var(--e-out), opacity 0.7s var(--e-out),
    filter 0.7s var(--e-out), box-shadow 0.7s var(--e-out);
}
.carousel__slide.is-active {
  filter: none;
  cursor: zoom-in;
  box-shadow: 0 30px 64px -34px rgba(18, 18, 15, 0.5);
}
.carousel__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  color: var(--c-ink);
  z-index: 3;
  transition: background-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out);
}
.carousel__nav:hover {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}
.carousel__nav:disabled {
  opacity: 0;
  pointer-events: none;
}
.carousel__nav--prev {
  left: clamp(0.25rem, 2vw, 1rem);
}
.carousel__nav--next {
  right: clamp(0.25rem, 2vw, 1rem);
}
@media (prefers-reduced-motion: reduce) {
  .carousel__slide {
    transition: none;
  }
  .carousel__track {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   15. Reveal system — JS flips a class, CSS owns the animation.
   -------------------------------------------------------------------------- */
.reveals-on [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-reveal) var(--e-out),
    transform var(--d-reveal) var(--e-out);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Line-by-line masked reveal for display headings. */
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.reveals-on .split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--d-reveal) var(--e-out);
  transition-delay: var(--reveal-delay, 0s);
}
.split-line.is-in > span {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .split-line > span {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   16. Premium layer — paper grain, chapter rail, gallery reveal.
   Added in the studio-grade pass. No new WebGL and no frame-cost properties:
   only transform / opacity are animated, and the grain is a single static
   composited layer. Everything here is progressive enhancement, injected by
   js/main.js, so a JS failure simply drops it.
   -------------------------------------------------------------------------- */

/* 16b. Chapter rail — a hairline index on the right marking where the reader
   is in the seven-chapter story, and a way to jump. Desktop only; the active
   node fills with that chapter's own colour so it echoes the ground. */
.chapter-rail {
  position: fixed;
  right: clamp(0.9rem, 2.4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.chapter-rail.is-ready {
  opacity: 1;
}
.chapter-rail__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  color: var(--c-ink-faint);
}
.chapter-rail__label {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--d-fast) var(--e-out),
    transform var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.chapter-rail__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: transparent;
  transition: transform var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out);
}
.chapter-rail__item:hover .chapter-rail__label,
.chapter-rail__item:focus-visible .chapter-rail__label,
.chapter-rail__item.is-active .chapter-rail__label {
  opacity: 1;
  transform: none;
}
.chapter-rail__item.is-active .chapter-rail__label {
  color: var(--c-ink);
}
.chapter-rail__item:hover .chapter-rail__dot,
.chapter-rail__item:focus-visible .chapter-rail__dot {
  border-color: var(--rail-c, var(--c-brand));
  transform: scale(1.25);
}
.chapter-rail__item.is-active .chapter-rail__dot {
  background: var(--rail-c, var(--c-brand));
  border-color: var(--rail-c, var(--c-brand));
  transform: scale(1.35);
}
body.menu-open .chapter-rail {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .chapter-rail {
    display: none;
  }
}

/* 16c. Gallery reveal — filled carousel images resolve from a soft over-scan
   instead of popping, so real photos feel placed, not loaded. transform +
   opacity only; fires once on image load. */
.carousel__slide img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--d-base) var(--e-out),
    transform var(--d-slow) var(--e-out);
}
.carousel__slide img.is-loaded {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  /* The rail stays — it is navigation. Only its motion is removed, and it is
     shown immediately rather than fading in. */
  .chapter-rail {
    opacity: 1;
    transition: none;
  }
  .chapter-rail__label,
  .chapter-rail__dot {
    transition: none;
  }
  .carousel__slide img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 16d. Stat rhythm — a short accent rule draws under each figure as it lands,
   turning the proof band from four numbers into a sequenced beat. JS staggers
   the count and flips .is-counted; CSS draws the rule. */
.stat__value {
  position: relative;
  /* Room for the accent rule to sit BELOW the number and ABOVE the label,
     instead of striking through the label text. */
  padding-bottom: 0.85rem;
}
.stat__value::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 1.75rem;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.stat.is-counted .stat__value::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .stat__value::after {
    transition: none;
  }
}

/* 16e. Amenities — the real Cizre Park services as a restrained icon grid.
   Hairline separators, a single accent per mark; no cards, no fills. */
.amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-6) var(--s-6);
  margin-top: var(--s-8);
}
.amenity {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--t-small);
  color: var(--c-ink-dim);
}
.amenity__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-content: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--sector-accent, var(--c-accent));
}
.amenity__icon svg {
  width: 20px;
  height: 20px;
}

/* 16f. "Haritada göster" link under a map. */
.map-link {
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   17. Building frame — the 3D maquette on the construction page. A sticky
   stage plays across a scroll runway while the storeys rise. The canvas is
   decorative; every word beside it is real HTML, and without WebGL the
   section simply loses the canvas and keeps the copy.
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  height: 320vh;
}
.frame__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-items: center;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  max-width: var(--w-max);
  margin-inline: auto;
  padding: calc(var(--header-h) + 3vh) var(--gutter) 6vh;
}
@media (min-width: 900px) {
  .frame__stage {
    /* The canvas gets the larger share: it has to hold a 33 m building plus
       its shadow, while the copy beside it is a short paragraph. */
    grid-template-columns: 1.35fr 0.65fr;
    gap: var(--s-7);
  }
}
/* The model needs room for its own shadow as well as itself: at the old
   34rem the building fit but the cast shadow ran off the bottom edge. */
.frame__canvas-wrap {
  position: relative;
  width: 100%;
  height: min(74vh, 46rem);
}
.frame__canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y; /* dragging turns the model; the page still scrolls */
}
.frame__canvas.is-grabbing {
  cursor: grabbing;
}
/* The site's custom dot replaces the system cursor, so keep it hidden here. */
body.has-cursor .frame__canvas,
body.has-cursor .frame__canvas.is-grabbing {
  cursor: none;
}
.frame__copy {
  align-self: center;
}
.frame__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-small);
}
.frame__counter {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.frame__hint {
  color: var(--c-ink-faint);
}

/* No WebGL, no JS, or reduced motion: collapse the runway and drop the stage. */
.frame.is-static {
  height: auto;
}
.frame.is-static .frame__stage {
  position: static;
  height: auto;
  padding-block: var(--s-section);
  grid-template-columns: 1fr;
}
.frame.is-static .frame__canvas-wrap,
.frame.is-static .frame__hint {
  display: none;
}
.frame.is-static .frame__counter {
  display: none;
}

/* --- Dil seçici -----------------------------------------------------------
   Menünün yanında, aynı küçük tipografiyle. Kağıt yönüne sadık: dolgu yok,
   yalnızca mürekkep tonu değişir; etkin dil marka aksanını alır. */
.lang {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.lang__btn {
  font-family: var(--f-body);
  font-size: var(--t-small);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--c-ink-faint);
  background: none;
  border: 0;
  padding: var(--s-2);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out);
}
.lang__btn + .lang__btn {
  border-inline-start: 1px solid var(--c-line-soft);
}
.lang__btn:hover {
  color: var(--c-ink);
}
.lang__btn.is-active {
  color: var(--c-accent);
}
.lang__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}