/* MFE Mimarlık — Süreç. HTML + CSS; fonts and artwork are local. */
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/Barlow-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/Barlow-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/Barlow-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/Barlow-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* One reference pixel at 724px; the desktop composition scales uniformly. */
  --u: .13812154696vw;
  --orange: #ff5a0b;
  --paper: #faf9f7;
  --ink: #10151f;
  --muted: #85858d;
  --bronze: #b38b5a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 calc(13 * var(--u))/1.3 "Barlow", "Manrope", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex-shrink: 0; }
button, input { font: inherit; }
a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
::selection { color: #fff; background: var(--orange); }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: calc(23 * var(--u)); height: calc(23 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: calc(657 * var(--u)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 30; left: 16px; top: 12px; padding: 12px 18px; background: var(--paper); color: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { display: flex; align-items: center; gap: calc(7 * var(--u)); color: var(--muted); font-size: calc(7.4 * var(--u)); font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: calc(23 * var(--u)); height: calc(1.5 * var(--u)); background: var(--orange); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: calc(14 * var(--u)); min-height: calc(34 * var(--u)); border: 1px solid #ff671a; border-radius: calc(4 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)); color: #080b0d; background: linear-gradient(115deg, #ff6814, #ff5004); font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; transition: filter .18s, box-shadow .18s; }
.button .icon { width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke-width: 2; }
.button:hover { filter: brightness(1.08); box-shadow: 0 0 calc(20 * var(--u)) #ff5a0b33; }

/* Raster source is an atlas: these windows expose photograph areas only. */
.photo { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: var(--photo-ratio); }
.photo img { display: block; position: absolute; top: 0; left: 0; width: var(--atlas-width); max-width: none; height: auto; transform: translate(var(--atlas-x), var(--atlas-y)); pointer-events: none; }

.hero { position: relative; height: calc(344 * var(--u)); color: var(--paper); background: #211c15; overflow: clip; }
.hero-background { position: absolute; inset: 0; background: linear-gradient(90deg, #0a0c09aa, #1617104d), var(--mfe-bg-62b88e70b796, url("/api/image?src=%2Fassets%2Fimages%2Fapproach.png&w=1920&p=background&d=desktop")) left center / auto 135% no-repeat; }
.hero-background .photo { position: absolute; }
.hero-photo-underlay { left: calc(30 * var(--u)); top: calc(43 * var(--u)); width: calc(216 * var(--u)); height: calc(52 * var(--u)); transform: scaleY(4.596153846); transform-origin: top; }
.hero-photo-header { left: 0; top: 0; width: calc(73 * var(--u)); height: calc(43 * var(--u)); transform: scaleX(9.91780822); transform-origin: left; }
.hero-photo-right { left: calc(246 * var(--u)); top: calc(41 * var(--u)); width: calc(478 * var(--u)); height: calc(276 * var(--u)); }
.hero-photo-bottom { left: 0; top: calc(282 * var(--u)); width: calc(600 * var(--u)); height: calc(62 * var(--u)); }
.hero-photo-bottom-right { right: 0; bottom: 0; width: calc(124 * var(--u)); height: calc(11 * var(--u)); }
.hero-photo-left { left: 0; top: 0; width: calc(30 * var(--u)); height: calc(282 * var(--u)); }
.hero-photo-upper { left: calc(30 * var(--u)); top: calc(43 * var(--u)); width: calc(216 * var(--u)); height: calc(52 * var(--u)); }
.hero-photo-top { left: calc(129 * var(--u)); top: 0; width: calc(73 * var(--u)); height: calc(43 * var(--u)); }
.header { position: relative; z-index: 5; margin-inline: calc(41 * var(--u)) calc(21 * var(--u)); padding-top: calc(7 * var(--u)); display: grid; grid-template-columns: calc(131 * var(--u)) calc(373 * var(--u)) calc(118 * var(--u)); align-items: start; gap: calc(30 * var(--u)); }
.brand { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); width: calc(87 * var(--u)); height: calc(36 * var(--u)); color: #fff; }
.brand-mark { width: calc(27 * var(--u)); height: calc(37 * var(--u)); }
.brand-type { position: relative; font-family: "Manrope", Arial, sans-serif; font-size: calc(31 * var(--u)); line-height: .9; font-weight: 400; letter-spacing: -.065em; }
.brand-type small { display: block; padding-top: calc(2 * var(--u)); text-align: right; font-size: calc(7.4 * var(--u)); line-height: 1; letter-spacing: -.065em; }
.main-nav { display: flex; justify-content: space-around; align-items: center; min-height: calc(33 * var(--u)); padding-inline: calc(10 * var(--u)); border: 1px solid #8c704b99; border-radius: calc(4 * var(--u)); background: #101314f5; font-size: calc(11 * var(--u)); letter-spacing: -.025em; }
.main-nav a { position: relative; display: grid; place-items: center; min-height: calc(31 * var(--u)); padding-inline: calc(7 * var(--u)); }
.main-nav a::after { content: ""; position: absolute; bottom: calc(-1.5 * var(--u)); left: 15%; right: 15%; height: calc(2.5 * var(--u)); border-radius: 2px; background: var(--orange); opacity: 0; }
.main-nav a:hover::after, .main-nav .active::after { opacity: 1; }
.header > .button { min-height: calc(32 * var(--u)); font-size: calc(11 * var(--u)); gap: calc(8 * var(--u)); padding-inline: calc(8 * var(--u)); transform: translateX(calc(-20 * var(--u))); }
.mobile-menu { display: none; }
.hero-content { position: relative; z-index: 1; width: calc(270 * var(--u)); margin-left: calc(30 * var(--u)); margin-top: calc(55 * var(--u)); }
.breadcrumb { display: flex; align-items: center; gap: calc(3 * var(--u)); font-size: calc(9 * var(--u)); font-weight: 500; letter-spacing: -.05em; }
.breadcrumb::before { content: ""; width: calc(20 * var(--u)); height: calc(1.4 * var(--u)); margin-right: calc(2 * var(--u)); background: var(--orange); }
.hero h1 { margin-top: calc(9 * var(--u)); font-size: calc(38 * var(--u)); line-height: .99; letter-spacing: -.025em; }
.hero h1 span { color: var(--orange); }
.hero-content > p { margin-top: calc(5 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.2; letter-spacing: -.03em; }
.hero-content > .button { margin-top: calc(12 * var(--u)); width: calc(163 * var(--u)); }
.concept-caption { position: absolute; right: calc(21 * var(--u)); bottom: calc(14 * var(--u)); font-size: calc(8.5 * var(--u)); padding: calc(3 * var(--u)) calc(4 * var(--u)); border: 1px solid #b68a5559; background: #171712c9; letter-spacing: -.04em; }

.process-summary { height: calc(206 * var(--u)); padding-top: calc(19 * var(--u)); background: radial-gradient(ellipse at 45% 50%, #fff, var(--paper)); }
.process-summary h2 { margin-top: calc(7 * var(--u)); font-size: calc(33.5 * var(--u)); line-height: 1.05; }
.summary-description { margin-top: calc(5 * var(--u)); color: var(--muted); font-size: calc(14.5 * var(--u)); letter-spacing: -.025em; }
.timeline { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: calc(12 * var(--u)) calc(17 * var(--u)) 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: calc(25 * var(--u)); right: calc(25 * var(--u)); top: calc(25 * var(--u)); height: 1px; background: #ffb894; }
.timeline li { position: relative; text-align: center; width: calc(52 * var(--u)); }
.timeline a { display: flex; align-items: center; flex-direction: column; }
.timeline span { display: grid; place-items: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border: 1px solid #d8d8d8; border-radius: 50%; color: #313643; background: #faf9f7; font-size: calc(15 * var(--u)); font-weight: 650; }
.timeline strong { margin-top: calc(9 * var(--u)); font-size: calc(17 * var(--u)); letter-spacing: -.04em; font-weight: 600; }
.timeline .current span { color: #fff; background: linear-gradient(110deg, #ff6a14, #ff4c04); border: calc(3 * var(--u)) solid var(--paper); outline: 1px solid #ff8a48; }
.timeline a:hover span { border-color: var(--orange); }

.dark { color: var(--paper); background: linear-gradient(#080d0b66, #080d0b55), var(--mfe-bg-447f5708b1e4, url("/api/image?src=%2Fassets%2Fimages%2Fmarble.png&w=1920&p=background&d=desktop")) right center / 200% auto; }
.workflow-step { display: grid; position: relative; overflow: hidden; scroll-margin-top: 20px; }
.step-kesif { height: calc(170 * var(--u)); grid-template-columns: calc(294 * var(--u)) 1fr; }
.step-tasarim { height: calc(164 * var(--u)); grid-template-columns: calc(407 * var(--u)) 1fr; }
.step-uretim { height: calc(165 * var(--u)); grid-template-columns: calc(291 * var(--u)) 1fr; }
.step-kurulum { height: calc(186 * var(--u)); grid-template-columns: calc(431 * var(--u)) 1fr; }
.step-teslim { height: calc(170 * var(--u)); grid-template-columns: calc(303 * var(--u)) 1fr; }
.light { background: radial-gradient(ellipse at 30% 50%, #fff, var(--paper)); }
.step-copy { display: grid; grid-template-columns: calc(57 * var(--u)) minmax(0, 1fr); padding: calc(30 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(32 * var(--u)); align-content: start; }
.step-edge { position: absolute; left: 0; top: 0; width: calc(89 * var(--u)); height: calc(170 * var(--u)); clip-path: polygon(0 29%, 0 100%, 100% 100%); }
.step-copy, .step-figure { z-index: 1; }
.step-number { font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif; color: var(--orange); font-size: calc(58 * var(--u)); line-height: .86; font-weight: 400; letter-spacing: -.025em; }
.step-description { position: relative; border-left: 1px solid #b98a548f; padding-left: calc(19 * var(--u)); }
.step-description::before { content: ""; display: block; width: calc(25 * var(--u)); height: calc(2 * var(--u)); background: var(--orange); margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); }
.step-description h2 { font-size: calc(24 * var(--u)); line-height: 1; }
.step-description > p:not(.step-output) { font-size: calc(14 * var(--u)); line-height: 1.18; letter-spacing: -.035em; margin-top: calc(9 * var(--u)); color: #d0d0cb; }
.step-description .step-output { display: flex; align-items: center; gap: calc(7 * var(--u)); min-height: calc(32 * var(--u)); margin-top: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border: 1px solid #c5985bb3; border-radius: calc(4 * var(--u)); font-size: calc(12.4 * var(--u)); letter-spacing: -.035em; white-space: nowrap; }
.step-output strong { color: #d1b78c; font-weight: 600; }
.step-output span { color: #eee; }
.step-figure { position: relative; height: 100%; min-width: 0; overflow: hidden; }
.step-figure .photo { width: 100%; height: 100%; }
.light .step-figure { padding: calc(9 * var(--u)) 0 calc(9 * var(--u)) calc(34 * var(--u)); }
.light .step-copy { padding: calc(25 * var(--u)) calc(31 * var(--u)) calc(9 * var(--u)) calc(25 * var(--u)); grid-template-columns: calc(63 * var(--u)) minmax(0,1fr); }
.light .step-description { padding-left: calc(20 * var(--u)); border-left-color: #ffb697; }
.light .step-description > p:not(.step-output) { color: var(--muted); }
.light .step-description .step-output { border-color: #ffa97b; margin-top: calc(11 * var(--u)); }
.light .step-output strong, .light .step-output span { color: var(--ink); }
.step-kurulum .step-copy { padding-top: calc(34 * var(--u)); }
.step-kurulum .step-description { padding-left: calc(19 * var(--u)); }
.step-kurulum .step-description > p:not(.step-output) { width: calc(159 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.27; }
.step-kurulum .step-description .step-output { margin-top: calc(19 * var(--u)); }
.step-kurulum .step-figure { padding-top: calc(11 * var(--u)); padding-bottom: calc(9 * var(--u)); }
.step-kurulum .step-figure .photo { height: 100%; }
.step-figure figcaption { position: absolute; left: calc(39 * var(--u)); bottom: calc(10 * var(--u)); width: calc(188 * var(--u)); padding: calc(3 * var(--u)) calc(4 * var(--u)); font-size: calc(9 * var(--u)); color: #fff; background: #151a1df5; text-shadow: 0 1px 4px #000; letter-spacing: -.025em; }
.step-teslim .step-copy { padding-top: calc(25 * var(--u)); padding-right: calc(25 * var(--u)); }
.step-teslim .step-description > p:not(.step-output) { width: calc(187 * var(--u)); }
.step-teslim .step-description .step-output { margin-top: calc(9 * var(--u)); }

.first-meeting { height: calc(197 * var(--u)); padding-top: calc(21 * var(--u)); border-top: 1px solid #b2865266; }
.first-meeting h2 { font-size: calc(27 * var(--u)); line-height: 1.1; }
.meeting-intro { margin-top: calc(7 * var(--u)); font-size: calc(13 * var(--u)); color: #d6d6d0; letter-spacing: -.03em; }
.meeting-grid { display: grid; grid-template-columns: 213fr 223fr 221fr; margin-top: calc(22 * var(--u)); }
.meeting-grid article { display: flex; gap: calc(13 * var(--u)); min-width: 0; min-height: calc(64 * var(--u)); padding-right: calc(13 * var(--u)); }
.meeting-grid article + article { border-left: 1px solid #b3915d99; padding-left: calc(20 * var(--u)); }
.meeting-grid .icon { color: var(--orange); width: calc(33 * var(--u)); height: calc(33 * var(--u)); stroke-width: 1.7; }
.meeting-grid h3 { font-size: calc(14 * var(--u)); line-height: 1.2; letter-spacing: -.03em; font-weight: 600; padding-top: calc(3 * var(--u)); white-space: nowrap; }
.meeting-grid p { margin-top: calc(6 * var(--u)); font-size: calc(12.7 * var(--u)); letter-spacing: -.03em; color: #d8d8d2; line-height: 1.25; }
.meeting-note { margin-top: calc(11 * var(--u)); text-align: center; color: #d8d8d2; font-size: calc(12 * var(--u)); letter-spacing: -.045em; }

.faq { min-height: calc(162 * var(--u)); padding-block: calc(20 * var(--u)); background: radial-gradient(ellipse at 70% 50%, #fff, var(--paper)); }
.faq-grid { display: grid; grid-template-columns: calc(253 * var(--u)) 1fr; gap: calc(23 * var(--u)); align-items: start; }
.faq-intro h2 { font-size: calc(26 * var(--u)); line-height: 1.04; margin-top: calc(9 * var(--u)); }
.faq-intro > p:last-child { font-size: calc(13 * var(--u)); margin-top: calc(8 * var(--u)); color: var(--muted); line-height: 1.3; letter-spacing: -.05em; }
.faq-list { padding-top: calc(4 * var(--u)); }
.faq details { border: 1px solid #ffc3a2; border-radius: calc(3 * var(--u)); background: #faf9f799; }
.faq details + details { margin-top: calc(6 * var(--u)); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); cursor: pointer; list-style: none; min-height: calc(33 * var(--u)); padding: calc(6 * var(--u)) calc(15 * var(--u)); font-size: calc(12.5 * var(--u)); letter-spacing: -.025em; font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: calc(23 * var(--u)); line-height: .8; font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid #ffd8c2; }
.faq details > p { padding: calc(12 * var(--u)) calc(15 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.55; color: #636873; }

.contact-banner { position: relative; height: calc(179 * var(--u)); color: #faf9f7; background: #221d16; overflow: clip; }
.contact-background { position: absolute; inset: 0; background: linear-gradient(90deg, #10110de8, #10110d55), var(--mfe-bg-5bb679db0f65, url("/api/image?src=%2Fassets%2Fimages%2Fcontact.png&w=1920&p=background&d=desktop")) center / cover no-repeat; }
.contact-background .photo { position: absolute; }
.contact-photo-center { top: 0; left: calc(226 * var(--u)); width: calc(201 * var(--u)); height: calc(179 * var(--u)); }
.contact-photo-right { top: 0; right: 0; width: calc(90 * var(--u)); height: calc(179 * var(--u)); }
.contact-photo-top { top: 0; left: calc(427 * var(--u)); width: calc(207 * var(--u)); height: calc(40 * var(--u)); }
.contact-photo-bottom { bottom: 0; left: calc(427 * var(--u)); width: calc(207 * var(--u)); height: calc(22 * var(--u)); }
.contact-photo-left { top: 0; left: 0; width: calc(31 * var(--u)); height: calc(179 * var(--u)); }
.contact-content { position: relative; z-index: 1; padding-top: calc(22 * var(--u)); margin-left: calc(33 * var(--u)); }
.contact-content .eyebrow { color: #c2bfb5; letter-spacing: .1em; font-size: calc(7 * var(--u)); }
.contact-content h2 { font-size: calc(28 * var(--u)); line-height: .99; margin-top: calc(9 * var(--u)); }
.contact-content > p:last-child { font-size: calc(12.5 * var(--u)); line-height: 1.3; margin-top: calc(9 * var(--u)); letter-spacing: -.045em; }
.contact-card { position: absolute; z-index: 2; left: calc(427 * var(--u)); top: calc(39 * var(--u)); width: calc(207 * var(--u)); min-height: calc(118 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)) calc(9 * var(--u)); border: 1px solid #c49b6b; border-radius: calc(5 * var(--u)); background: #101213f2; box-shadow: 0 calc(5 * var(--u)) calc(15 * var(--u)) #0004; }
.contact-card .button { width: 100%; min-height: calc(35 * var(--u)); }
.contact-phone { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(11 * var(--u)); padding-bottom: calc(9 * var(--u)); border-bottom: 1px solid #5c513e; font-size: calc(10.7 * var(--u)); letter-spacing: -.03em; white-space: nowrap; }
.contact-phone .icon { width: calc(17 * var(--u)); height: calc(17 * var(--u)); color: #d4b271; }
.contact-stages { display: flex; align-items: center; justify-content: space-between; margin-top: calc(8 * var(--u)); margin-inline: calc(-3 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: -.03em; }
.contact-stages span { color: #d7a96e; }

.footer { min-height: calc(229 * var(--u)); color: #eee; padding-top: calc(15 * var(--u)); padding-bottom: calc(23 * var(--u)); background: radial-gradient(ellipse at 50% 20%, #141716, #0c0e0e); }
.footer-main { display: grid; grid-template-columns: calc(164 * var(--u)) calc(112 * var(--u)) calc(123 * var(--u)) calc(161 * var(--u)) 1fr; min-height: calc(147 * var(--u)); align-items: start; }
.footer-brand .brand { width: calc(96 * var(--u)); height: calc(39 * var(--u)); }
.footer-brand .brand-mark { width: calc(29 * var(--u)); height: calc(39 * var(--u)); }
.footer-brand .brand-type { font-size: calc(33 * var(--u)); }
.footer-brand .brand-type small { font-size: calc(7.5 * var(--u)); }
.footer-brand > p { font-size: calc(10.9 * var(--u)); line-height: 1.45; margin-top: calc(8 * var(--u)); letter-spacing: -.05em; color: #d0d0cb; }
.social-links { display: flex; align-items: center; gap: calc(15 * var(--u)); margin-top: calc(13 * var(--u)); }
.social-links .icon { width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke-width: 2; }
.linkedin { font: 800 calc(22 * var(--u))/.8 Arial, sans-serif; letter-spacing: -.06em; }
.footer-links, .footer-contact { display: flex; flex-direction: column; align-items: start; gap: calc(3.5 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: -.025em; padding-top: calc(7 * var(--u)); }
.footer h3 { font-size: calc(12 * var(--u)); letter-spacing: -.025em; margin-bottom: calc(7 * var(--u)); color: #fff; font-weight: 600; }
.footer-links a, .footer-contact a, .footer-contact p { color: #d1d1cc; }
.footer a:hover { color: #ff8b51; }
.footer-links .active::after { display: none; }
.footer-contact p, .footer-contact a { display: flex; gap: calc(8 * var(--u)); align-items: center; min-height: calc(15 * var(--u)); }
.footer-contact .icon { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.footer-motto { min-height: calc(121 * var(--u)); margin-top: calc(7 * var(--u)); border-left: 1px solid #796443; padding-left: calc(27 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.1; letter-spacing: -.06em; }
.footer-motto::before { content: ""; display: block; width: calc(25 * var(--u)); height: calc(2 * var(--u)); background: var(--orange); margin: calc(13 * var(--u)) 0 calc(18 * var(--u)); }
.footer-bottom { border-top: 1px solid #896b4599; padding-top: calc(27 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u)); color: #969a98; font-size: calc(9.5 * var(--u)); letter-spacing: -.035em; }
.footer-bottom nav { display: flex; align-items: center; }
.footer-bottom nav a + a { border-left: 1px solid #9c7950; padding-left: calc(14 * var(--u)); margin-left: calc(14 * var(--u)); }

/* Native :target panels and <details> keep interactions free of JavaScript. */
.modal { display: none; position: fixed; inset: 0; z-index: 20; padding: 24px; background: #080c0bd9; overflow: auto; }
.modal:target { display: grid; place-items: center; }
.modal-content { position: relative; width: min(540px, 100%); padding: 36px; background: var(--paper); color: var(--ink); border: 1px solid #c5985b; border-radius: 10px; font-size: 16px; line-height: 1.6; box-shadow: 0 20px 90px #0006; }
.modal-content h2 { font-size: 28px; padding-right: 18px; margin-bottom: 16px; }
.modal-content a:not(.modal-close) { text-decoration: underline; text-underline-offset: 3px; }
.modal-content nav { display: flex; flex-direction: column; gap: 10px; }
.modal-close { position: absolute; top: 8px; right: 12px; font-size: 32px; line-height: 1; padding: 5px; }

/* The reference is a desktop composition; small screens use a readable flow. */
@media (max-width: 600px) {
  :root { --u: 1px; }
  body { font-size: 15px; }
  .wrap { width: calc(100% - 40px); }
  .header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 20px; padding-top: 16px; }
  .brand { width: 102px; height: 43px; }
  .brand-mark { width: 31px; height: 43px; }
  .brand-type { font-size: 35px; }
  .brand-type small { font-size: 8px; }
  .main-nav, .header > .button { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #aa8356; border-radius: 5px; background: #111b; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu .icon { width: 23px; height: 23px; }
  .mobile-menu nav { position: absolute; top: 69px; right: 0; display: flex; flex-direction: column; width: min(290px, calc(100vw - 40px)); padding: 16px 20px; gap: 0; background: #101312fa; border: 1px solid #a98352; border-radius: 7px; box-shadow: 0 12px 40px #0008; }
  .mobile-menu nav > a:not(.button) { padding-block: 11px; font-size: 15px; }
  .mobile-menu .active { color: #ff7b33; }
  .mobile-menu nav .button { margin-top: 10px; min-height: 44px; }
  .hero { height: 540px; }
  .hero-background { background-position: 40% center; background-size: auto 100%; }
  .hero-background .photo { display: none; }
  .hero-photo-right { display: block !important; width: 700px; height: 405px; left: calc(50% - 180px); top: 92px; opacity: .68; }
  .hero-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #10120bec, #10120b40), linear-gradient(0deg, #10120bbf, transparent 40%); }
  .hero-content { margin: 72px 20px 0; width: calc(100% - 40px); }
  .breadcrumb { font-size: 11px; }
  .hero h1 { font-size: clamp(36px, 9.8vw, 50px); margin-top: 20px; line-height: 1.05; }
  .hero-content > p { margin-top: 17px; font-size: 15px; line-height: 1.45; max-width: 320px; }
  .hero-content > p br { display: none; }
  .hero-content > .button { min-height: 44px; width: 176px; margin-top: 24px; font-size: 14px; }
  .concept-caption { right: 20px; bottom: 18px; font-size: 9px; }
  .eyebrow { font-size: 8px; gap: 8px; }
  .eyebrow::before { width: 23px; height: 2px; }
  .process-summary { height: auto; padding: 32px 0 29px; }
  .process-summary h2 { font-size: 29px; line-height: 1.1; margin-top: 12px; max-width: 350px; }
  .summary-description { font-size: 14px; line-height: 1.5; margin-top: 10px; }
  .timeline { margin: 25px 0 0; }
  .timeline li { width: 44px; }
  .timeline span { width: 40px; height: 40px; font-size: 13px; }
  .timeline::before { top: 20px; left: 20px; right: 20px; }
  .timeline strong { font-size: 12px; margin-top: 9px; }
  .workflow-step { display: flex; flex-direction: column; height: auto; }
  .step-edge { display: none; }
  .step-copy, .light .step-copy { order: 0; grid-template-columns: 64px minmax(0, 1fr); padding: 27px 20px; min-height: 188px; }
  .step-number { font-size: 64px; }
  .step-description, .light .step-description, .step-kurulum .step-description { padding-left: 19px; }
  .step-description::before { margin-top: 4px; margin-bottom: 13px; width: 25px; height: 2px; }
  .step-description h2 { font-size: 27px; }
  .step-description > p:not(.step-output) { margin-top: 11px; font-size: 14px; line-height: 1.45; }
  .step-kurulum .step-description > p:not(.step-output), .step-teslim .step-description > p:not(.step-output) { width: auto; font-size: 14px; line-height: 1.45; }
  .step-description > p br { display: none; }
  .step-description .step-output, .light .step-description .step-output, .step-kurulum .step-description .step-output { display: inline-flex; min-height: 34px; margin-top: 13px; font-size: 12px; white-space: normal; padding: 7px 10px; }
  .step-figure, .light .step-figure, .step-kurulum .step-figure { order: 1; padding: 0; width: 100%; height: auto; }
  .step-figure .photo { height: auto; }
  .step-kurulum .step-figure .photo { height: auto; transform: none; }
  .step-figure figcaption { left: 8px; bottom: 1px; font-size: 9px; width: 188px; padding: 3px 4px; }
  .step-kesif .photo { aspect-ratio: 430/170; }
  .step-tasarim .photo { aspect-ratio: 373/146; }
  .step-uretim .photo { aspect-ratio: 433/165; }
  .step-kurulum .photo { aspect-ratio: 397/152; }
  .step-teslim .photo { aspect-ratio: 421/170; }
  .first-meeting { height: auto; padding: 31px 0 26px; }
  .first-meeting h2 { font-size: 28px; line-height: 1.15; }
  .meeting-intro { margin-top: 12px; font-size: 14px; line-height: 1.5; }
  .meeting-grid { display: flex; flex-direction: column; margin-top: 25px; gap: 20px; }
  .meeting-grid article { min-height: 68px; gap: 17px; padding-right: 0; }
  .meeting-grid article + article { border-left: none; padding-left: 0; border-top: 1px solid #b3915d66; padding-top: 19px; }
  .meeting-grid .icon { width: 34px; height: 34px; }
  .meeting-grid h3 { font-size: 15px; white-space: normal; padding-top: 2px; }
  .meeting-grid p { font-size: 14px; line-height: 1.5; }
  .meeting-grid br { display: none; }
  .meeting-note { font-size: 12px; line-height: 1.5; margin-top: 22px; }
  .faq { padding: 32px 0; }
  .faq-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .faq-intro h2 { font-size: 29px; line-height: 1.1; margin-top: 12px; }
  .faq-intro > p:last-child { font-size: 14px; line-height: 1.45; margin-top: 12px; }
  .faq-intro > p br { display: none; }
  .faq-list { padding-top: 0; }
  .faq details + details { margin-top: 9px; }
  .faq summary { min-height: 52px; font-size: 13px; padding: 12px; line-height: 1.4; }
  .faq summary::after { font-size: 25px; }
  .faq details > p { font-size: 13px; padding: 13px; }
  .contact-banner { height: auto; min-height: 415px; padding-bottom: 30px; }
  .contact-background { background-position: 45% center; }
  .contact-background .photo { display: none; }
  .contact-photo-center { display: block !important; top: 0; left: calc(50% - 50px); width: 470px; height: 420px; opacity: .65; }
  .contact-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0c100dda, #0c100d55); }
  .contact-content { padding-top: 33px; margin-left: 20px; margin-right: 20px; }
  .contact-content .eyebrow { font-size: 8px; }
  .contact-content h2 { font-size: 34px; line-height: 1.05; margin-top: 13px; }
  .contact-content > p:last-child { font-size: 14px; line-height: 1.5; margin-top: 13px; max-width: 300px; }
  .contact-content > p br { display: none; }
  .contact-card { position: relative; left: auto; top: auto; margin: 25px 20px 0; width: min(290px, calc(100% - 40px)); padding: 16px; min-height: 139px; }
  .contact-card .button { min-height: 44px; font-size: 14px; }
  .contact-phone { margin-top: 12px; font-size: 12px; padding-bottom: 11px; gap: 10px; }
  .contact-phone .icon { width: 19px; height: 19px; }
  .contact-stages { font-size: 11px; margin-top: 10px; margin-inline: 0; }
  .footer { padding: 32px 0 25px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px 20px; }
  .footer-brand { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .footer-brand .brand { width: 107px; height: 43px; }
  .footer-brand .brand-mark { width: 32px; height: 43px; }
  .footer-brand .brand-type { font-size: 36px; }
  .footer-brand .brand-type small { font-size: 8px; }
  .footer-brand > p { font-size: 12px; margin-top: 3px; align-self: center; line-height: 1.5; }
  .social-links { margin-top: 4px; gap: 18px; }
  .social-links .icon { width: 20px; height: 20px; }
  .linkedin { font-size: 24px; }
  .footer-links, .footer-contact { font-size: 13px; padding-top: 0; gap: 7px; }
  .footer h3 { font-size: 14px; margin-bottom: 7px; }
  .footer-contact { grid-column: 1/-1; }
  .footer-contact p, .footer-contact a { gap: 10px; min-height: 24px; }
  .footer-contact .icon { width: 17px; height: 17px; }
  .footer-motto { display: none; }
  .footer-bottom { display: block; margin-top: 30px; padding-top: 22px; font-size: 10px; }
  .footer-bottom nav a + a { margin-left: 12px; padding-left: 12px; }
  .footer-bottom > p { margin-top: 18px; }
  .modal-content { padding: 32px 22px; font-size: 14px; }
  .modal-content h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  html { scroll-behavior: auto; }
  .hero, .dark, .contact-banner, .footer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .workflow-step { break-inside: avoid; }
  .mobile-menu, .modal, .skip-link { display: none !important; }
}

/* Independent high-resolution photos replace enlarged screenshot atlas windows. */
.hero-background { background: linear-gradient(90deg,#080c0bc9 0%,#080c0b77 38%,#080c0b00 70%),var(--mfe-bg-5c1b0b0c212c, url("/api/image?src=%2Fassets%2Fimages%2Fprocess-hq%2Fhero.png&w=1920&p=background&d=desktop")) center / cover no-repeat; }
.step-figure .process-photo img { position:absolute;inset:0;width:100%;max-width:100%;height:100%;transform:none;object-fit:cover;object-position:center; }