/* ==========================================================================
   DGN Teknik Yapı — Kurumsal Web Sitesi
   Renk, tipografi ve düzen kararları kurumsal tanıtım dosyasından alınmıştır.
   ========================================================================== */

:root {
  /* Kurumsal palet — PDF'ten birebir */
  --ink:            #16191C;   /* koyu zemin / başlık */
  --ink-2:          #2A2E33;   /* ikincil koyu */
  --ink-3:          #4C545B;
  --cream:          #F3F0EA;   /* ana açık zemin */
  --cream-card:     #FBFAF8;   /* kart zemini */
  --line:           #DCD6C9;   /* çizgi / kenarlık */
  --gold:           #A9874F;   /* kurumsal altın */
  --gold-soft:      #C7A87A;
  --gold-pale:      #E4DCCB;
  --body:           #767A7F;   /* gövde metni */
  --body-dark-bg:   #D5D1C9;   /* koyu zeminde gövde */
  --muted-dark-bg:  #9BA2A9;

  --serif: "Lora", "Times New Roman", Georgia, serif;
  --sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 132px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 84px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold); color: #fff; }

/* ------------------------------------------------------------ tipografi -- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 5rem);  line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.18; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .9rem;
  display: block;
}

.lede {
  font-size: clamp(.95rem, 1.1vw, 1.02rem);
  color: var(--body);
  max-width: 62ch;
  margin-top: 1.1rem;
}

.rule {
  width: 52px; height: 1px;
  background: var(--gold);
  border: 0; margin: 1.4rem 0 0;
}

/* --------------------------------------------------------------- düzen -- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }
.section { padding-block: var(--section-y); }

.section--cream { background: var(--cream); }
.section--paper { background: var(--cream-card); }
.section--dark  { background: var(--ink); color: var(--body-dark-bg); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--cream); }
.section--dark .lede { color: var(--muted-dark-bg); }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head .rule { margin-top: 1.2rem; }

/* ------------------------------------------------------------- başlık ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background .45s var(--ease), height .45s var(--ease),
              box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand { display: block; flex: none; }
.brand img { height: 40px; width: auto; transition: height .45s var(--ease); }
.brand .brand__dark { display: none; }

.site-header.is-stuck {
  background: rgba(243, 240, 234, .94);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  height: 68px;
  border-bottom-color: var(--line);
}
.site-header.is-stuck .brand img { height: 32px; }
.site-header.is-stuck .brand__light { display: none; }
.site-header.is-stuck .brand__dark  { display: block; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.nav a {
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(243, 240, 234, .82);
  position: relative;
  padding-block: 6px;
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .35s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { width: 100%; }

.site-header.is-stuck .nav a { color: var(--ink-2); }
.site-header.is-stuck .nav a:hover { color: var(--gold); }

.nav__cta {
  border: 1px solid rgba(169, 135, 79, .75);
  padding: 10px 20px !important;
  color: var(--gold-soft) !important;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--gold); border-color: var(--gold); color: #fff !important; }
.site-header.is-stuck .nav__cta { color: var(--gold) !important; }
.site-header.is-stuck .nav__cta:hover { color: #fff !important; }

/* mobil menü tetikleyicisi */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  position: relative;
  flex: none;
  z-index: 110;
}
.nav-toggle span {
  position: absolute; left: 9px;
  width: 24px; height: 1px;
  background: var(--cream);
  transition: transform .35s var(--ease), opacity .25s var(--ease), background .35s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.site-header.is-stuck .nav-toggle span { background: var(--ink); }
.nav-open .nav-toggle span { background: var(--cream); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + 40px);
  overflow: hidden;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  transform: scale(1.06);
  animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(10,12,14,.94) 0%, rgba(10,12,14,.80) 34%,
                    rgba(10,12,14,.34) 62%, rgba(10,12,14,.30) 100%),
    linear-gradient(to top, rgba(10,12,14,.88) 0%, rgba(10,12,14,0) 46%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(36px, 5vw, 58px);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero .eyebrow { color: var(--gold-soft); letter-spacing: .3em; }
.hero h1 { color: var(--cream); max-width: 15ch; }
.hero__rule { width: 64px; height: 1px; background: var(--gold); border: 0; margin: 2rem 0 1.6rem; }
.hero__sub {
  color: var(--body-dark-bg);
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  max-width: 46ch;
  line-height: 1.85;
}

.hero__stats {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(243, 240, 234, .18);
}
.hero__stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(24px, 3vw, 38px);
}
.hero__stats .stat { padding-right: 18px; }
.hero__stats .stat + .stat {
  border-left: 1px solid rgba(243, 240, 234, .16);
  padding-left: clamp(18px, 3vw, 40px);
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--cream);
  line-height: 1.1;
  display: block;
}
.stat__label {
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-dark-bg);
  margin-top: .5rem;
  display: block;
}
.stat__note { font-size: .75rem; color: var(--muted-dark-bg); opacity: .85; margin-top: .25rem; display: block; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 128px;
  transform: translateX(-50%);
  z-index: 3;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(243,240,234,0), rgba(169,135,79,.9));
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .25; transform: translateX(-50%) scaleY(.5); transform-origin: top; }
  50%      { opacity: 1;   transform: translateX(-50%) scaleY(1);  transform-origin: top; }
}

/* ------------------------------------------------------------ manifesto -- */
.manifesto {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-y);
  overflow: hidden;
  background: var(--ink);
}
.manifesto__media { position: absolute; inset: 0; }
.manifesto__media img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,23,27,.72), rgba(20,23,27,.86));
}
.manifesto .wrap { position: relative; z-index: 2; }
.manifesto .eyebrow { color: var(--gold-soft); letter-spacing: .42em; }
.manifesto blockquote {
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.55rem, 3.3vw, 2.7rem);
  line-height: 1.34;
  color: var(--cream);
  max-width: 21ch;
}
.manifesto .rule { margin: 2rem auto 1.6rem; background: rgba(169,135,79,.85); }
.manifesto__note {
  color: var(--muted-dark-bg);
  font-size: .875rem;
  max-width: 54ch;
  margin-inline: auto;
  line-height: 1.85;
}
.manifesto__mark {
  display: block;
  margin: 2.6rem auto 0;
  width: clamp(46px, 4.4vw, 58px);
  height: auto;
  opacity: .9;
}

/* --------------------------------------------------------- split düzen -- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 640px;
}
.split--reverse .split__media { order: -1; }
.split__media { position: relative; overflow: hidden; background: var(--ink); }
.split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.split:hover .split__media img { transform: scale(1.04); }

.split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 104px) clamp(24px, 5vw, 92px);
}
.split__body > * { max-width: 560px; }

/* ------------------------------------------------------- özellik listesi -- */
.feature-list { list-style: none; margin: clamp(30px, 4vw, 46px) 0 0; padding: 0; }
.feature-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding-block: 18px;
  border-top: 1px solid var(--line);
}
.feature-list li:last-child { border-bottom: 1px solid var(--line); }
.feature-list .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 11px;
}
.feature-list .diamond {
  width: 9px; height: 9px;
  background: transparent;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  margin-top: 10px;
}
.feature-list h3 {
  font-family: var(--sans);
  font-size: .938rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .3rem;
}
.feature-list p { font-size: .875rem; color: var(--body); line-height: 1.7; margin: 0; }

/* ------------------------------------------------------- kurucu bölümü -- */
.founder {
  position: relative;
  padding-block: clamp(90px, 11vw, 160px);
  overflow: hidden;
  background: var(--ink);
}
.founder__media { position: absolute; inset: 0; }
.founder__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.founder__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(14,17,20,.95) 0%, rgba(14,17,20,.86) 42%, rgba(14,17,20,.52) 100%);
}
.founder .wrap { position: relative; z-index: 2; }
.founder blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.42;
  color: var(--cream);
  max-width: 24ch;
}
.founder .rule { margin: 2.2rem 0 2rem; width: 46px; }
.founder__text { max-width: 58ch; color: var(--body-dark-bg); font-size: .938rem; line-height: 1.9; }
.founder__sign {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(243,240,234,.2);
  max-width: 560px;
}
.founder__sign strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--cream);
}
.founder__sign span {
  font-size: .8rem;
  color: var(--muted-dark-bg);
  letter-spacing: .02em;
}

/* ------------------------------------------------------ rakamlar bölümü -- */
.figures { position: relative; overflow: hidden; background: var(--ink); }
.figures__media { position: absolute; inset: 0; }
.figures__media img { width: 100%; height: 100%; object-fit: cover; }
.figures__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,19,22,.93), rgba(16,19,22,.88));
}
.figures .wrap { position: relative; z-index: 2; }
.figures .eyebrow { color: var(--gold-soft); }
.figures h2 { color: var(--cream); }
.figures .lede { color: var(--muted-dark-bg); }

.figure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(40px, 5vw, 62px);
}
.figure-grid .fig {
  padding: clamp(26px, 3vw, 38px) 26px clamp(30px, 4vw, 46px) 0;
  border-top: 1px solid rgba(243,240,234,.18);
}
.figure-grid .fig + .fig { padding-left: clamp(24px, 3vw, 40px); }
.figure-grid .fig:nth-child(3n+1) { padding-left: 0; }
.figure-grid .fig:not(:nth-child(3n+1)) { border-left: 1px solid rgba(243,240,234,.12); }
.fig__num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: var(--cream);
  display: block;
}
.fig__num sup { font-size: .5em; vertical-align: super; }
.fig__label {
  display: block;
  margin-top: 1rem;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.fig__note { display: block; margin-top: .35rem; font-size: .813rem; color: var(--muted-dark-bg); }

/* ------------------------------------------------------- yaklaşım ızgara -- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(36px, 6vw, 96px);
}
.why-grid .why {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  padding-block: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}
.why-grid .why:nth-child(1), .why-grid .why:nth-child(2) { border-top: 0; padding-top: 0; }
.why__n {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold-soft);
  line-height: 1;
}
.why h3 {
  font-family: var(--sans);
  font-size: .938rem;
  font-weight: 500;
  margin-bottom: .55rem;
}
.why p { font-size: .875rem; color: var(--body); line-height: 1.75; margin: 0; }

/* ------------------------------------------------------------ hizmetler -- */
.services { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.services li {
  background: var(--cream-card);
  border: 1px solid transparent;
  border-left: 2px solid var(--gold-pale);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 6px;
  transition: border-left-color .4s var(--ease), transform .4s var(--ease),
              box-shadow .4s var(--ease), background .4s var(--ease);
}
.services li:hover {
  border-left-color: var(--gold);
  transform: translateX(6px);
  box-shadow: 0 16px 40px -28px rgba(22,25,28,.5);
}
.services .svc__n { font-family: var(--serif); font-size: 1.25rem; color: var(--gold-soft); line-height: 1.3; }
.services h3 { font-family: var(--sans); font-size: .938rem; font-weight: 500; margin-bottom: .4rem; }
.services p { font-size: .875rem; color: var(--body); line-height: 1.7; margin: 0; }

/* ----------------------------------------------------------- süreç kart -- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.step {
  background: var(--cream-card);
  border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 32px) clamp(34px, 4vw, 46px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.step:hover {
  transform: translateY(-6px);
  border-color: var(--gold-pale);
  box-shadow: 0 26px 60px -40px rgba(22,25,28,.55);
}
.step__n {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3vw, 2.6rem);
  color: var(--gold-pale);
  line-height: 1;
  display: block;
}
.step h3 {
  font-family: var(--sans);
  font-size: .938rem;
  font-weight: 500;
  margin: 1.5rem 0 .55rem;
  position: relative;
  padding-top: 1.1rem;
}
.step h3::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 22px; height: 1px;
  background: var(--gold);
}
.step p { font-size: .875rem; color: var(--body); line-height: 1.7; margin: 0; }

/* ------------------------------------------------------- projeler ayraç -- */
.divider-quote {
  position: relative;
  min-height: clamp(400px, 62vh, 620px);
  display: grid; place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--ink);
  padding-block: var(--section-y);
}
.divider-quote__media { position: absolute; inset: 0; }
.divider-quote__media img { width: 100%; height: 100%; object-fit: cover; }
.divider-quote__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,21,24,.74), rgba(18,21,24,.84));
}
.divider-quote .wrap { position: relative; z-index: 2; }
.divider-quote .eyebrow { color: var(--gold-soft); letter-spacing: .42em; }
.divider-quote blockquote {
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.34;
  color: var(--cream);
  max-width: 20ch;
}
.divider-quote .rule { margin: 1.8rem auto 1.4rem; }
.divider-quote p.note { color: var(--muted-dark-bg); font-size: .875rem; }

/* ---------------------------------------------------------- portföy tab -- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.portfolio {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: .875rem;
}
table.portfolio thead th {
  text-align: left;
  font-weight: 500;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0 18px 14px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.portfolio thead th:last-child,
table.portfolio td:last-child { text-align: right; padding-right: 0; }
table.portfolio tbody th.group {
  text-align: left;
  font-weight: 500;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--body);
  padding: 30px 0 12px;
}
table.portfolio td {
  padding: 15px 18px 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  vertical-align: top;
}
table.portfolio td.name { color: var(--ink); font-weight: 400; white-space: nowrap; }
table.portfolio td.area { color: var(--gold); white-space: nowrap; }
table.portfolio tbody tr.is-row { transition: background .3s var(--ease); }
table.portfolio tbody tr.is-row:hover { background: rgba(220,214,201,.28); }
table.portfolio tr.total td { border-bottom: 0; padding-top: 22px; }
table.portfolio tr.total td.name { font-family: var(--serif); font-size: 1rem; }
table.portfolio tr.total td.area { font-family: var(--serif); font-size: 1.25rem; color: var(--gold); }

/* --------------------------------------------------------- proje kartlar -- */
.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
}
.project {
  position: relative;
  display: block;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.project__media { position: relative; aspect-ratio: 4 / 3.1; overflow: hidden; }
.project__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter .7s var(--ease);
}
.project:hover .project__media img { transform: scale(1.07); }
.project__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,17,20,.92) 6%, rgba(14,17,20,.35) 52%, rgba(14,17,20,.06) 100%);
  transition: opacity .5s var(--ease);
}
.project__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(20px, 2.4vw, 30px);
}
.project__tag {
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  display: block;
  margin-bottom: .55rem;
}
.project h3 { font-size: 1.3rem; color: var(--cream); }
.project__loc {
  font-size: .813rem;
  color: var(--body-dark-bg);
  margin-top: .35rem;
  opacity: .9;
}
.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(243,240,234,.2);
  font-size: .75rem;
  color: var(--body-dark-bg);
}
.project__meta span { white-space: nowrap; display: inline-flex; align-items: center; }
.project__meta span:not(:last-child)::after {
  content: "•";
  color: var(--gold);
  margin-left: 16px;
}

.badge {
  position: absolute;
  z-index: 3; top: 18px; right: 18px;
  font-size: .563rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid rgba(199,168,122,.6);
  color: var(--gold-soft);
  background: rgba(14,17,20,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ------------------------------------------------------ devam eden proje -- */
.ongoing-banner { margin-bottom: clamp(30px, 4vw, 48px); }
/* height:auto sart: img'de width/height ozniteligi varken tarayici yuksekligi
   oznitelikten alir ve aspect-ratio'yu yok sayar. */
.ongoing-banner img { width: 100%; height: auto; aspect-ratio: 1947 / 274; object-fit: cover; }
.ongoing-banner figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: .813rem;
  color: var(--body);
  margin-top: .85rem;
}

.ongoing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.ongoing article {
  background: var(--cream-card);
  border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 38px);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.ongoing article:hover {
  border-color: var(--gold-pale);
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -42px rgba(22,25,28,.5);
}
.ongoing__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.ongoing__head h3 { font-size: 1.45rem; }
.pill {
  font-size: .563rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-pale);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.ongoing p { font-size: .875rem; color: var(--body); line-height: 1.75; margin: 1.2rem 0 0; }
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
}
.spec dt {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .3rem;
}
.spec dd { margin: 0; font-size: .875rem; color: var(--ink); }

/* -------------------------------------------------------------- referans -- */
.refs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.ref {
  background: var(--cream-card);
  border: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 32px);
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.ref:hover {
  transform: translateY(-5px);
  border-color: var(--gold-pale);
  box-shadow: 0 26px 56px -42px rgba(22,25,28,.5);
}
.ref__project {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.ref h3 { font-size: 1.3rem; }
.ref__role { font-size: .813rem; color: var(--body); margin-top: .4rem; line-height: 1.6; }
.ref__unit {
  margin-top: auto;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--body);
}
.refs + .footnote { margin-top: clamp(24px, 3vw, 34px); }
.footnote {
  font-family: var(--serif);
  font-style: italic;
  font-size: .813rem;
  color: var(--body);
  line-height: 1.7;
}

/* ------------------------------------------------------------- iç mekân -- */
.interior {
  position: relative;
  min-height: clamp(520px, 80vh, 780px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.interior__media { position: absolute; inset: 0; }
.interior__media img { width: 100%; height: 100%; object-fit: cover; }
.interior__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,17,20,.9) 0%, rgba(14,17,20,.45) 45%, rgba(14,17,20,.35) 100%);
}
.interior .wrap { position: relative; z-index: 2; }
.interior .eyebrow { color: var(--gold-soft); }
.interior h2 { color: var(--cream); }
.interior p { color: var(--body-dark-bg); max-width: 58ch; margin-top: 1.2rem; font-size: .938rem; line-height: 1.85; }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(34px, 4vw, 50px);
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; height: auto; aspect-ratio: 916 / 413;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .5s var(--ease);
  filter: saturate(.92);
}
.gallery figure:hover img { transform: scale(1.05); filter: saturate(1); }
.gallery figcaption {
  font-size: .75rem;
  color: var(--body);
  margin-top: .65rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------- markalar -- */
.brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
.brand-card {
  background: var(--cream-card);
  border: 1px solid var(--line);
  padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2vw, 24px) clamp(26px, 3vw, 34px);
  text-align: center;
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.brand-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-pale);
  box-shadow: 0 24px 54px -40px rgba(22,25,28,.5);
}
.brand-card__cat {
  font-size: .563rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.brand-card__logo { height: 42px; display: grid; place-items: center; margin-bottom: 1.4rem; }
.brand-card__logo img {
  max-height: 42px; width: auto; max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .45s var(--ease), opacity .45s var(--ease);
}
.brand-card:hover .brand-card__logo img { filter: grayscale(0); opacity: 1; }
.brand-card p { font-size: .813rem; color: var(--body); line-height: 1.7; margin: 0; }

/* ------------------------------------------------------------ teslim liste-- */
.handover { list-style: none; margin: clamp(30px, 4vw, 44px) 0 0; padding: 0; }
.handover li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px;
  padding-block: clamp(18px, 2.2vw, 24px);
  border-bottom: 1px solid var(--line);
}
.handover li:first-child { border-top: 1px solid var(--line); }
.handover .hv__n { font-family: var(--serif); font-size: 1.15rem; color: var(--gold-soft); line-height: 1.5; }
.handover h3 { font-family: var(--sans); font-size: .938rem; font-weight: 500; margin-bottom: .4rem; }
.handover p { font-size: .875rem; color: var(--body); line-height: 1.7; margin: 0; }

/* ------------------------------------------------------------- iletişim -- */
.contact {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding-block: clamp(90px, 11vw, 150px);
  text-align: center;
}
.contact__media { position: absolute; inset: 0; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
.contact__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,20,.9), rgba(14,17,20,.94));
}
.contact .wrap { position: relative; z-index: 2; }
.contact__logo { width: clamp(190px, 26vw, 260px); height: auto; margin: 0 auto; }
.contact__rule { width: 56px; height: 1px; background: var(--gold); border: 0; margin: 2rem auto 1.4rem; }
.contact__cities {
  font-size: .688rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--body-dark-bg);
}
.contact h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin-top: clamp(40px, 5vw, 64px);
}

.contact__details {
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: clamp(30px, 3.5vw, 42px);
  border-top: 1px solid rgba(243,240,234,.16);
  max-width: 620px;
  margin-inline: auto;
}
.contact__company { color: var(--cream); font-size: .938rem; font-weight: 400; }
.contact__addr {
  color: var(--body-dark-bg);
  font-style: normal;
  font-size: .875rem;
  line-height: 1.8;
  margin-top: .6rem;
}
.contact__links {
  display: flex; flex-direction: column; align-items: center;
  gap: .55rem;
  margin-top: 1.6rem;
}
.contact__links a {
  color: var(--gold-soft);
  font-size: .938rem;
  position: relative;
  transition: color .3s var(--ease);
}
.contact__links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px; background: var(--gold);
  transition: width .35s var(--ease);
}
.contact__links a:hover { color: #fff; }
.contact__links a:hover::after { width: 100%; }
.contact__links .social { letter-spacing: .16em; font-size: .75rem; color: var(--muted-dark-bg); }

.site-footer {
  background: var(--ink);
  border-top: 1px solid rgba(243,240,234,.12);
  padding-block: 28px;
  position: relative; z-index: 2;
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between;
}
.site-footer p {
  margin: 0;
  font-size: .688rem;
  letter-spacing: .06em;
  color: var(--muted-dark-bg);
}
.site-footer .legal { font-size: .688rem; max-width: 58ch; }

/* --------------------------------------------------------------- reveal -- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .projects, .refs, .steps { grid-template-columns: repeat(2, 1fr); }
  .brands { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }

  .nav-toggle { display: block; }

  /* backdrop-filter uygulanan bir öge, içindeki position:fixed ögeler için
     containing block olur. Header kaydırmada .is-stuck ile blur alınca menü
     ekrana değil 68px'lik header'a göre konumlanıyor ve içerik taşıyordu.
     Mobilde blur'a gerek yok; kaldırılınca menü tekrar ekranı kaplıyor. */
  .site-header.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cream);
  }

  .nav {
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: center;
    /* Kısa ekranlarda (yatay mod) taşarsa üst kenar kırpılmasın */
    justify-content: safe center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 6px;
    padding: 80px var(--gutter) 40px;
    transform: translateY(-100%);
    transition: transform .55s var(--ease);
    z-index: 105;
  }
  .nav-open .nav { transform: none; }

  /* Menü açıkken logo ve kapatma düğmesi koyu örtünün üzerinde kalır; bu
     yüzden ikisi de AÇIK renkte olmalı. .is-stuck kuralları (0,3,1) daha
     özgül olduğu için kaydırılmış durumda koyu renk kazanıyordu — logo ve X
     koyu zeminde görünmez oluyordu. Aşağıdaki seçiciler onları geçer. */
  .nav-open .brand { position: relative; z-index: 110; }

  .nav-open .brand__light,
  .nav-open .site-header.is-stuck .brand__light { display: block; }

  .nav-open .brand__dark,
  .nav-open .site-header.is-stuck .brand__dark { display: none; }

  .nav-open .nav-toggle span,
  .nav-open .site-header.is-stuck .nav-toggle span { background: var(--cream); }
  .nav a,
  .site-header.is-stuck .nav a {
    color: var(--cream);
    font-size: 1rem;
    letter-spacing: .1em;
    padding-block: 14px;
  }
  .nav__cta, .site-header.is-stuck .nav__cta {
    margin-top: 18px;
    color: var(--gold-soft) !important;
    padding: 14px 28px !important;
  }

  .split { grid-template-columns: 1fr; min-height: 0; }
  /* Mobilde her split bölümünde görsel metnin ÜSTÜNDE olsun. Aksi hâlde
     "Kalite & Güvence" (görsel altta) ile "Sürdürülebilirlik" (görsel üstte)
     arka arkaya gelince iki fotoğraf üst üste biniyordu. */
  .split__media { order: -1; }
  .split__media { aspect-ratio: 16 / 10; }
  .split__media img { position: static; height: 100%; }
  .split__body > * { max-width: none; }

  .why-grid { grid-template-columns: 1fr; }
  .why-grid .why:nth-child(2) { border-top: 1px solid var(--line); padding-top: 26px; }

  .figure-grid { grid-template-columns: repeat(2, 1fr); }
  .figure-grid .fig:nth-child(3n+1) { padding-left: 0; }
  .figure-grid .fig:not(:nth-child(3n+1)) { border-left: 0; }
  .figure-grid .fig:nth-child(odd) { padding-left: 0; }
  .figure-grid .fig:nth-child(even) {
    padding-left: clamp(20px, 4vw, 32px);
    border-left: 1px solid rgba(243,240,234,.12);
  }

  .ongoing { grid-template-columns: 1fr; }

  .hero__stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .hero__stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero__scroll { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .br-lg { display: none; }

  /* Portföy tablosu dar ekranda kart olarak yığılır */
  .table-wrap { overflow-x: visible; }
  table.portfolio { min-width: 0; display: block; }
  table.portfolio thead { display: none; }
  table.portfolio tbody { display: block; }
  table.portfolio tbody th.group {
    display: block;
    padding: 26px 0 10px;
    border-bottom: 1px solid var(--line);
  }
  table.portfolio tbody tr.is-row,
  table.portfolio tbody tr.total {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  table.portfolio tbody tr.is-row:hover { background: none; }
  table.portfolio td {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 14px;
    padding: 4px 0;
    border-bottom: 0;
    text-align: left !important;
  }
  table.portfolio td::before {
    content: attr(data-label);
    font-size: .625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    padding-top: .28em;
  }
  table.portfolio td.name { font-size: 1rem; padding-bottom: 8px; }
  table.portfolio td:empty { display: none; }
  table.portfolio tr.total td { padding-top: 4px; }
  table.portfolio tr.total td.area { font-size: 1.1rem; }
  .projects, .refs, .steps, .gallery { grid-template-columns: 1fr; }

  /* Markalar mobilde de iki sütun kalsın; tek sütunda sayfa gereksiz uzuyor */
  .brands { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .brand-card { padding: 20px 12px 24px; }
  .brand-card__cat { font-size: .5rem; letter-spacing: .12em; margin-bottom: 1rem; }
  .brand-card__logo { height: 34px; margin-bottom: 1rem; }
  .brand-card__logo img { max-height: 34px; max-width: 110px; }
  .brand-card p { font-size: .75rem; line-height: 1.6; }

  /* Panorama 7:1 oranında mobilde 50 px'lik şeride dönüşüyordu;
     gri çatılı binaya ortalanmış daha yüksek bir kırpım kullanılıyor. */
  .ongoing-banner img { aspect-ratio: 16 / 9; object-position: 51% 50%; }
  .spec-grid { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .hero h1 { max-width: none; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .project__media { aspect-ratio: 4 / 3.4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------- erişilebilirlik -- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ==========================================================================
   ALT SAYFALAR — proje listesi ve proje detayı
   ========================================================================== */

/* ------------------------------------------------------------ sayfa yolu -- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .688rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-dark-bg);
  margin-bottom: clamp(20px, 3vw, 30px);
}
.breadcrumb a { color: var(--gold-soft); transition: color .3s var(--ease); }
.breadcrumb a:hover { color: var(--cream); }
.breadcrumb__sep { color: rgba(243, 240, 234, .35); }
/* Marka adı Türkçe büyük harf kuralıyla "PRİME" olmasın diye dönüştürülmez */
.breadcrumb [aria-current] {
  color: var(--body-dark-bg);
  text-transform: none;
  font-size: .75rem;
  letter-spacing: .06em;
}

/* --------------------------------------------------- alt sayfa kahramanı -- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 56vh, 520px);
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(44px, 6vw, 76px);
  overflow: hidden;
  background: var(--ink);
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12,15,18,.93) 0%, rgba(12,15,18,.78) 46%, rgba(12,15,18,.42) 100%),
    linear-gradient(to top, rgba(12,15,18,.7) 0%, rgba(12,15,18,0) 55%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero h1 { color: var(--cream); font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.page-hero .rule { margin-top: 1.6rem; }
.page-hero__lead {
  color: var(--body-dark-bg);
  font-size: clamp(.95rem, 1.1vw, 1.02rem);
  line-height: 1.85;
  max-width: 58ch;
  margin-top: 1.5rem;
}

/* ------------------------------------------------ proje detayı kahramanı -- */
.project-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 92vh, 880px);
  padding-top: calc(var(--header-h) + 36px);
  padding-bottom: clamp(48px, 6vw, 80px);
  overflow: hidden;
  background: var(--ink);
}
.project-hero__media { position: absolute; inset: 0; }
.project-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.project-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,15,18,.72) 0%, rgba(12,15,18,.42) 46%, rgba(12,15,18,.22) 100%);
}
.project-hero .wrap { position: relative; z-index: 2; }

.project-panel {
  background: var(--cream-card);
  padding: clamp(30px, 3.6vw, 46px);
  max-width: 480px;
  box-shadow: 0 40px 90px -50px rgba(10, 12, 14, .8);
}
.project-panel__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.project-panel__top .eyebrow { margin-bottom: 0; }
.project-panel h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  margin-top: .9rem;
}
.project-panel .rule { margin: 1.4rem 0 1.5rem; }
.project-panel__lead {
  font-size: .875rem;
  color: var(--body);
  line-height: 1.8;
}

.spec-grid--panel {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: 0;
  border-top: 0;
}
.spec-grid--panel .spec {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 16px;
  padding-block: 11px;
  border-top: 1px solid var(--line);
}
.spec-grid--panel .spec dt { margin-bottom: 0; padding-top: .2em; }
.spec-grid--panel .spec dd { font-size: .875rem; }

.project-panel__ref {
  margin-top: clamp(22px, 2.6vw, 28px);
  padding-top: clamp(18px, 2.2vw, 22px);
  border-top: 1px solid var(--line);
}
.spec-label {
  display: block;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.project-panel__ref strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
}
.project-panel__ref span { font-size: .813rem; color: var(--body); }

.pill--live { background: rgba(169, 135, 79, .1); }
.badge--live { border-color: rgba(199, 168, 122, .85); }

/* ------------------------------------------------------- detay galerisi -- */
.gallery--detail { grid-template-columns: repeat(3, 1fr); align-items: start; }
.gallery--detail img { height: auto; aspect-ratio: 4 / 3; }

.project-detail .footnote { margin-top: clamp(22px, 3vw, 30px); }

/* --------------------------------------------- önceki / sonraki gezinme -- */
.project-nav-wrap { padding-block: clamp(46px, 5vw, 72px); }
.project-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}
.project-nav__item {
  display: block;
  padding: 18px 0;
  transition: color .35s var(--ease);
}
.project-nav__item--next { text-align: right; }
.project-nav__dir {
  display: block;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .45rem;
}
.project-nav__name {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ink);
  transition: color .35s var(--ease);
}
.project-nav__item:hover .project-nav__name { color: var(--gold); }

.project-nav__all {
  font-size: .688rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--body);
  border: 1px solid var(--line);
  padding: 13px 22px;
  white-space: nowrap;
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.project-nav__all:hover { border-color: var(--gold); color: var(--gold); background: rgba(169,135,79,.06); }

/* ------------------------------------------------------- kapanış çağrısı -- */
.cta-band {
  background: var(--ink);
  padding-block: clamp(64px, 8vw, 104px);
  text-align: center;
}
.cta-band .eyebrow { color: var(--gold-soft); letter-spacing: .3em; }
.cta-band h2 {
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.cta-band p {
  color: var(--muted-dark-bg);
  font-size: .938rem;
  max-width: 54ch;
  margin: 1.2rem auto 0;
  line-height: 1.85;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 3.4vw, 40px);
}
.btn {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid transparent;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn--gold:hover { background: transparent; color: var(--gold-soft); }
.btn--ghost { border-color: rgba(243, 240, 234, .3); color: var(--body-dark-bg); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); }

/* -------------------------------------------- liste sayfası düzeltmeleri -- */
.projects--two { grid-template-columns: repeat(2, 1fr); }
.projects .project h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--cream);
}
table.portfolio td.name a { color: var(--ink); transition: color .3s var(--ease); }
table.portfolio td.name a:hover { color: var(--gold); }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .gallery--detail { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .project-hero { min-height: 0; align-items: flex-end; }
  .project-panel { max-width: none; }
  .projects--two { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .gallery--detail { grid-template-columns: 1fr; }
  .project-nav { grid-template-columns: 1fr; gap: 0; }
  .project-nav__item { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .project-nav__item--next { text-align: left; }
  .project-nav__item.is-empty { display: none; }
  .project-nav__all { text-align: center; margin-top: 18px; }
  .spec-grid--panel .spec { grid-template-columns: 1fr; gap: 2px; }
  .cta-band__actions .btn { width: 100%; }
}

.section-more { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; }
.section-more .project-nav__all { display: inline-block; }

/* ==========================================================================
   İÇERİK SAYFALARI — kurumsal, hizmetler, kalite, markalar, iletişim
   ========================================================================== */

.wrap--narrow { max-width: 880px; }

.prose p {
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  color: var(--body);
  line-height: 1.95;
  margin-bottom: 1.4em;
}
.prose p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- hizmet kartları -- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.svc-card {
  display: block;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-pale);
  padding: clamp(28px, 3.2vw, 40px);
  transition: border-left-color .4s var(--ease), transform .4s var(--ease),
              box-shadow .4s var(--ease);
}
.svc-card:hover {
  border-left-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -42px rgba(22, 25, 28, .5);
}
.svc-card .svc__n {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold-soft);
  line-height: 1;
  display: block;
}
.svc-card h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  margin: 1.1rem 0 .7rem;
}
.svc-card p { font-size: .875rem; color: var(--body); line-height: 1.75; margin: 0; }
.svc-card__more {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease);
}
.svc-card:hover .svc-card__more { border-bottom-color: var(--gold); }

/* ------------------------------------------------------ iletişim kartları -- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.contact-card {
  background: var(--cream-card);
  border: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 32px);
}
.contact-card p { font-size: .938rem; color: var(--ink); margin-bottom: .5rem; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card address {
  font-style: normal;
  font-size: .938rem;
  color: var(--ink);
  line-height: 1.8;
}
.contact-card__name { font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; }
.contact-link {
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.contact-link:hover { border-bottom-color: var(--gold); }

/* --------------------------------------------- referans kartı bağlantısı -- */
a.ref__project { display: block; transition: color .3s var(--ease); }
a.ref__project:hover { color: var(--gold-soft); }
.ref h2 { font-size: 1.3rem; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .svc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Marka adları zaten büyük harfle yazıldı; Türkçe i -> İ dönüşümü uygulanmaz */
.ref__project--asis { text-transform: none; }

/* ==========================================================================
   MOBİLDE TAM EKRAN FOTOĞRAFLI BÖLÜMLER
   --------------------------------------------------------------------------
   Fotoğraf masaüstündeki gibi arka planda kalır, yazılar önünde durur.

   Sorun: yatay fotoğrafı (oran ~1,4) dar ve uzun bir alana "cover" ile
   sığdırmak fotoğrafı 1,9–3,6 kat yakınlaştırıp yalnızca %28–%53'ünü
   gösteriyordu. Çözüm: mobilde "contain" — fotoğraf genişliğe göre
   ölçeklenir, tamamı görünür, üstte kalan alan bölümün koyu zemini olur.
   Yazılar eskisi gibi fotoğrafın önünde durmaya devam eder.
   ========================================================================== */
@media (max-width: 900px) {

  .hero__media img,
  .manifesto__media img,
  .founder__media img,
  .figures__media img,
  .divider-quote__media img,
  .interior__media img,
  .contact__media img,
  .page-hero__media img,
  .project-hero__media img {
    object-fit: contain;
    object-position: center top;
  }

  /* Dikey veya panorama oranlı kaynaklarda contain boşluk bırakır; cover kalır. */
  /* Header payı metni aşağı itip dikey ortalamayı bozuyordu; kaldırılıyor.
     .hero__inner zaten içeriği ortalıyor ve kalan üst boşluk (~112px)
     sabit başlığın (72px) altında kalmaya yetiyor. */
  /* Fotoğraf mobilde 265 px yer kaplıyor; bölümler ise min-height yüzünden
     503–957 px'di. Aradaki fark fotoğrafın altında koyu boşluk olarak
     kalıyordu. Yükseklikler içeriğe göre daraltılıyor — metinler dikeyde
     ortalı kalmaya devam ediyor. */
  /* Hero'da biraz pay kalsın: metin hem sabit başlığın altında kalsın hem
     rakam şeridiyle arasında ortalanabilsin. */
  .hero { min-height: 640px; padding-top: 0; }

  .hero__inner { padding-bottom: 0; }

  .manifesto     { min-height: 0; padding-block: 52px; }
  .divider-quote { min-height: 0; padding-block: 48px; }
  .interior      { min-height: 0; padding-block: 48px; }
  .figures       { padding-block: 56px; }

  .page-hero__media.is-cover img,
  .project-hero__media.is-cover img {
    object-fit: cover;
    object-position: center;
  }

  /* Fotoğrafın bittiği yerden aşağısı bölümün koyu zeminine yumuşak geçsin;
     yazılar hem fotoğrafın hem zeminin üzerinde okunaklı kalsın. */
  .hero__media::after,
  .manifesto__media::after,
  .founder__media::after,
  .figures__media::after,
  .divider-quote__media::after,
  .interior__media::after,
  .contact__media::after,
  .page-hero__media::after,
  .project-hero__media::after {
    background: linear-gradient(to bottom,
                rgba(12, 15, 18, .30) 0%,
                rgba(12, 15, 18, .55) 34%,
                rgba(12, 15, 18, .88) 62%,
                rgba(12, 15, 18, .94) 100%);
  }

}

/* --------------------------------------------------------------------------
   HERO — mobilde fotoğraf bölümü doldurur (PDF'teki tam sayfa kurgu gibi).
   "cover" yüksekliğe göre ölçeklediği için fotoğrafın üstü ve altı hiç
   kaybolmaz; yalnızca yanlardan kırpılır. Diğer bölümler "contain" kalır.
   Bu blok ortak kuraldan sonra gelmeli, yoksa ezilir.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Hero'yu iki satırlı ızgaraya çevir: üst alan (fotoğraf + yazı) ve rakam
     şeridi. Fotoğraf yalnızca üst satırı kaplar, rakamların başladığı yatay
     çizgide biter. Alan kısaldığı için "cover" daha az büyütüyor ve
     fotoğrafın yanlarından daha fazlası görünüyor. Satır yüksekliği
     ızgaradan geldiği için sabit piksel değeri gerekmez. */
  .hero {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
  }
  .hero__media {
    grid-row: 1; grid-column: 1;
    position: relative;
    inset: auto;
    width: 100%; height: 100%;
    overflow: hidden;
  }
  .hero__inner { grid-row: 1; grid-column: 1; position: relative; z-index: 2; }
  .hero__stats { grid-row: 2; grid-column: 1; }

  .hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Yazılar artık fotoğrafın tamamının üzerinde; okunurluk için dengeli
     karartma, altta rakam şeridine doğru koyulaşma. */
  .hero__media::after {
    background: linear-gradient(to bottom,
                rgba(10, 12, 14, .58) 0%,
                rgba(10, 12, 14, .50) 38%,
                rgba(10, 12, 14, .62) 70%,
                rgba(10, 12, 14, .86) 100%);
  }
}