/* ebru.design — responsive rebuild of the Figma Sites design.
   Desktop values match the 1440px Figma frame; everything scales down from there. */

:root {
  /* ===== Renk paleti (ebru.design) ===== */
  --primary: #376B6B;   /* primary */
  --gray-bg: #EFEEE9;   /* gri zemin */
  --dark: #0F1414;      /* koyu zemin + metin */
  --line: #DCDAD3;      /* çizgi */
  --light-bg: #FBFAF7;  /* açık zemin */

  /* Yardımcı tonlar (koyu zemin üzerindeki metin/vurgu) */
  --light: #F7F7F0;
  --mint: #A7E0E0;
  --meta: #687576;

  --gutter: 20px;
  --section-y: 60px;
  --section-space: 110px; /* bölümlerin üst/alt iç boşluğu */
  --font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--dark);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; font-weight: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }

/* Lenis yumuşak kaydırma */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav { transition: none !important; }
}

/* ================= HERO ================= */

.hero {
  position: relative;
  isolation: isolate;
  z-index: 10; /* sabit header sonraki bölümlerin üstünde kalsın */
  /* İlk açılışta ekran: hero + "Selected Works" başlığı + kartların üst 2px'i.
     116px = works üst boşluğu (60) + başlık + kartlara kadar boşluk + 2px */
  height: clamp(560px, calc(100svh - 116px), 856px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--dark);
  color: var(--light);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Same gradient overlay as the Figma layer (teal glow top-right → near black) */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.95;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 700' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><linearGradient id='grad' gradientUnits='userSpaceOnUse' x1='-10' x2='10' y1='0' y2='0' gradientTransform='matrix(-52.657 30.401 -62.54 -108.32 1070.1 214.01)'><stop stop-color='rgba(92,122,122,1)' offset='0'/><stop stop-color='rgba(73,97,97,1)' offset='0.25'/><stop stop-color='rgba(54,71,71,1)' offset='0.5'/><stop stop-color='rgba(34,46,46,1)' offset='0.75'/><stop stop-color='rgba(25,33,33,1)' offset='0.875'/><stop stop-color='rgba(15,20,20,1)' offset='1'/></linearGradient></defs></svg>") center / 100% 100% no-repeat;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--gutter);
  color: var(--light);
  border-bottom: 1px solid transparent;
  transition:
    translate .45s var(--ease-out, ease),
    padding .35s ease,
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease,
    -webkit-backdrop-filter .35s ease,
    backdrop-filter .35s ease;
}

/* JS yoksa header sabitlenmez, hero ile birlikte kayar */
html:not(.js) .nav { position: absolute; }

/* Sayfa kaydırılınca: arkası bulanık koyu bar */
.nav.is-stuck {
  padding-block: 12px;
  background: rgba(15, 20, 20, .3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
/* Açık renkli bölümün üstündeyken: koyu yazı, krem tonlu %30 zemin */
.nav.on-light { color: var(--dark); }
.nav.on-light.is-stuck { background: rgba(251, 250, 247, .3); }
.nav__logo img { transition: filter .35s ease; }
.nav.on-light .nav__logo img { filter: invert(1); }


/* Aşağı kaydırırken gizlenir, yukarı kaydırınca geri gelir */
.nav.is-hidden { translate: 0 -100%; }

.nav__logo img { width: 120px; height: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__link {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  transition: opacity .2s ease;
}
.nav__link:hover { opacity: .7; }

.nav__cta {
  margin-left: -20px; /* 20px gap to the button in the Figma frame */
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--dark);
  white-space: nowrap;
  transition: background-color .35s ease, color .35s ease;
}
/* Açık zeminli bölümlerde (Figma detay sayfası): teal zemin, beyaz yazı */
.nav.on-light .nav__cta {
  background: var(--primary);
  color: #fff;
}

/* Hover: zemin biraz koyulaşır, ok yazının sağından açılarak belirir */
.nav__cta .icon {
  width: 0;
  height: 20px;
  margin-left: 0;
  opacity: 0;
  translate: -4px 0;
  transition:
    width .45s var(--ease-out, ease),
    margin-left .45s var(--ease-out, ease),
    opacity .3s ease,
    translate .45s var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover,
  .nav__cta:focus-visible { background: #E6E6DF; }
  .nav.on-light .nav__cta:hover,
  .nav.on-light .nav__cta:focus-visible { background: #2B5656; }
  .nav__cta:hover .icon,
  .nav__cta:focus-visible .icon {
    width: 20px;
    margin-left: 8px;
    opacity: 1;
    translate: 0 0;
  }
}

.hero__content {
  padding: 0 var(--gutter) 60px;       /* Figma: 60px */
  max-width: calc(1226px + 2 * var(--gutter)); /* Figma: metin alanı 1226px */
}

.hero__eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(247, 247, 240, .8);
  margin-bottom: 5px;
}

/* Figma: 100px / 100px, harf aralığı -4px (1440px'te 100px, altında orantılı küçülür) */
.hero__title {
  font-size: clamp(44px, 6.95vw, 100px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
}

.hero__lead {
  margin-top: 5px;
  max-width: 820px;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
}

/* ================= SELECTED WORKS ================= */

.works {
  background: var(--light-bg);
  padding: 60px var(--gutter);        /* Figma: 60px üst/alt */
}

.works__head,
.grid {
  max-width: none; /* her ekranda kenar boşluğu yalnızca --gutter (20px) */
  margin-inline: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.eyebrow img { width: 7px; height: 8px; margin-left: 1px; }

.works__title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.04em;            /* -0.96px */
  line-height: normal;
}

.grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.card { min-width: 0; }

/* The media box keeps the Figma 690×507 ratio at every width.
   Mockups inside are positioned in container units (cqw), so the whole
   composition scales as one piece and images never stretch or shift. */
.card__media {
  position: relative;
  aspect-ratio: 690 / 507;
  border-radius: 8px;
  overflow: hidden;
  container-type: inline-size;
  background: var(--gray-bg);
}

.card__media .cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Website mockups (Typsy, Kepler) */
.frame {
  position: absolute;
  overflow: hidden;
  background: #fff;
}
.frame img {
  width: 100%;
  height: auto;
}
.frame--web {
  left: 4.928cqw;
  top: 8.696cqw;
  width: 65.362cqw;
  height: 86.522cqw;
}
.frame--mweb {
  left: 74.638cqw;
  top: 13.043cqw;
  width: 20.435cqw;
  height: 76.377cqw;
}
.frame--mweb-kepler { top: 11.594cqw; }

/* Phone mockups (Wipe, VNum, Passphoto) */
.phone {
  position: absolute;
  width: 24.638cqw;
  height: 53.188cqw;
  border-radius: 2.387cqw;
  overflow: hidden;
  background: #fff;
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.phone--1 { left: 6.232cqw;  top: 3.188cqw; }
.phone--2 { left: 37.681cqw; top: 10.145cqw; }
.phone--3 { left: 69.130cqw; top: 16.957cqw; }

.phone--shadow { box-shadow: 1.739cqw 1.739cqw 4.638cqw rgba(0, 0, 0, .16); }
.phone--soft {
  box-shadow:
    4.198cqw 5.037cqw 5.246cqw rgba(0, 0, 0, .07),
    2.721cqw 3.265cqw 3.072cqw rgba(0, 0, 0, .05),
    1.617cqw 1.940cqw 1.671cqw rgba(0, 0, 0, .04),
    0.840cqw 1.007cqw 0.852cqw rgba(0, 0, 0, .04),
    0.342cqw 0.410cqw 0.427cqw rgba(0, 0, 0, .03);
}

/* Figma: 82px alan, 10px/16px iç boşluk, başlık → 4px → meta, dikey ortalı */
.card__info {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px;
}
.card__title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.04em;            /* -0.72px */
  line-height: normal;
}
.card__meta {
  font-size: 16px;
  line-height: 1.1;
  color: var(--meta);                 /* #687576 */
}

/* ================= SHARED ================= */

/* Buton / CTA yazı stili (Figma "Ag": 16px medium) */
.nav__cta,
.btn-dark,
.arrow-link,
.back-link,
.text-link {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
}

/* Ok ikonu (tek stil): 24×24 çerçeve, 2px çizgi (her boyutta sabit), yazının rengini alır. */
.icon {
  flex: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: none;
  color: inherit;
}
.icon--ne { rotate: -45deg; }
.icon--left { rotate: 180deg; }
.icon--up { rotate: -90deg; }

/* Masaüstü (fare/trackpad): tüm oklar sadece üzerine gelince, kendi yönünde kayarak belirir.
   Dokunmatik ekranlarda bu kural uygulanmaz; oklar hep görünür. */
@media (hover: hover) and (pointer: fine) {
  a .icon,
  button .icon {
    opacity: 0;
    translate: -6px 0;
    transition: opacity .35s ease, translate .6s var(--ease-out, ease);
  }
  a .icon--left,
  button .icon--left { translate: 6px 0; }
  a .icon--up,
  button .icon--up { translate: 0 6px; }
  a:hover .icon,
  a:focus-visible .icon,
  button:hover .icon,
  button:focus-visible .icon {
    opacity: 1;
    translate: 0 0;
  }
}

.eyebrow--dark { color: rgba(167, 224, 224, .75); }

.section-lead {
  margin-top: 16px;
  max-width: 480px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--meta);
}

/* Altı çizili, üzerine gelince çizgisi kayan metin linki */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding-bottom: 4px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat;
  transition: background-size .4s var(--ease-out, ease), color .2s ease;
}
.text-link .icon { width: 20px; height: 20px; transition: opacity .35s ease, translate .6s var(--ease-out, ease); }
.text-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.text-link:hover .icon { translate: 4px 0; }
.text-link--light { color: var(--light); }

/* ================= SERVICES ================= */

/* Home v2: About ile aynı zemin, 60px üst, 40px yan; kutu 312px, 10px köşe */
.services {
  background: #E6E6E6;
  padding: 60px 40px 0;
}
.svc {
  position: relative;
  height: 312px;
  border-radius: 10px;
  background: var(--dark);
  overflow: hidden;
  touch-action: pan-y;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Fizik başlamadan (ya da hareket azaltma açıkken) etiketler ortada dizili durur */
.svc__pills {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 89px 40px 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 66px 87px;
}
.svc__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--light-bg);
  color: var(--dark);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.04em;
  white-space: nowrap;
  user-select: none;
}
.svc__pill:nth-child(3n+1) { background: var(--primary); color: var(--light); }
.svc__pill:nth-child(3n+2) { background: var(--mint); color: var(--dark); }
/* Fizik çalışırken her etiket kendi konumunu JS'ten alır */
.svc.is-physics .svc__pills { display: block; padding: 0; }
.svc.is-physics .svc__pill { position: absolute; left: 0; top: 0; will-change: transform; }
@media (pointer: fine) {
  .svc.is-physics .svc__pill { cursor: grab; }
  .svc.is-physics .svc__pill:active { cursor: grabbing; }
}
.svc__word {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  translate: -50% 26%;
  font-size: 80px;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .2);
  pointer-events: none;
}

/* ================= ABOUT ================= */

.about {
  /* Home v2: #E6E6E6 zemin, 60px üst/alt, 40px yan boşluk */
  background: #E6E6E6;
  color: var(--dark);
  padding: 60px 40px;
  overflow: hidden;
}
.about__grid {
  display: grid;
  /* 1440'ta 676 + 108 + 576; daha geniş ekranlarda metin ve portre bu ölçüde kalır, arası açılır */
  grid-template-columns: minmax(0, 676fr) minmax(0, 576fr);
  column-gap: 7.5vw;
  align-items: start;
}
.about__body { max-width: 676px; }
.about__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: rgba(15, 20, 20, .8);
}
/* Figma: 32px, Medium, harf aralığı -1.28px; okunmamış kelimeler %50 */
.about__para {
  font-size: clamp(24px, 2.2222vw, 32px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--dark);
}
.motion .about__para .w { opacity: .5; }
.motion .about__para .w.lit { opacity: 1; }

.about__links {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
/* Dolu buton: 52px yükseklik, primary zemin; ok üzerine gelince yazının sağından açılır */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 27px;
  border-radius: 999px;
  background: var(--primary);
  color: #FAF9F6;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  transition: background-color .35s ease;
}
.btn-primary .icon {
  width: 0;
  height: 20px;
  margin-left: 0;
  opacity: 0;
  translate: -4px 0;
  transition: width .45s var(--ease-out, ease), margin-left .45s var(--ease-out, ease), opacity .3s ease, translate .45s var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-primary:focus-visible { background: #2B5656; }
  .btn-primary:hover .icon, .btn-primary:focus-visible .icon { width: 20px; margin-left: 8px; opacity: 1; translate: 0 0; }
}
.btn-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Yazı buton (LinkedIn): 52px yükseklik, primary renk */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  font-weight: 600;
  color: var(--primary);
}
.arrow-link .icon {
  width: 20px;
  height: 20px;
  opacity: 0;
  translate: -6px 0;
  transition: opacity .35s ease, translate .6s var(--ease-out, ease);
}
.arrow-link:hover .icon,
.arrow-link:focus-visible .icon { opacity: 1; translate: 0 0; }
@media (hover: none) {
  .arrow-link .icon { opacity: 1; translate: 0 0; }
}

/* Portre: 576×720, 8px köşe, siyah beyaz */
.about__portrait {
  width: 100%;
  max-width: 576px;
  aspect-ratio: 576 / 720;
  margin: 0 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
}
.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* ================= FOOTER ================= */

/* Zemin: Figma'daki gibi %40'a kadar koyu, sonra alta doğru teal'e geçer */
.footer {
  background: linear-gradient(180deg, var(--dark) 40%, #5B7A7A 100%);
  color: var(--light);
  padding: var(--section-space) var(--gutter) 28px;
  overflow: hidden;
}
.footer__inner { position: relative; margin-inline: auto; }

/* Back to top: footer sağ üst, 32×32 çerçevede yalnızca yukarı ok; footer ekrana girince belirir */
.footer__top {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--light);
  opacity: 0;
  transition: opacity .8s ease .2s, color .2s ease, translate .6s var(--ease-out, ease);
}
.footer.is-in-view .footer__top { opacity: 1; }
.footer__top .icon { width: 24px; height: 24px; opacity: 1 !important; translate: none !important; } /* her zaman görünür */
.footer__top:hover { color: var(--mint); translate: 0 -3px; }
.footer__top:focus-visible { opacity: 1; outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 4px; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) repeat(2, minmax(0, 2fr));
  gap: 40px;
}
.footer__tagline {
  max-width: 400px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.footer__label {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(247, 247, 240, .45);
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}
.footer__col a { transition: color .2s ease; }
.footer__col a:hover { color: var(--mint); }

/* Sayfa genişliğinde logo: Figma'daki gibi üstte %41 opaklık, alta doğru kaybolur (SVG gradient) */
.footer__logo {
  display: block;
  margin-top: 112px;
}
.footer__logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.footer__bottom {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(247, 247, 240, .5);
}

/* ================= CONTACT SHEET ================= */

.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.sheet::backdrop {
  background: rgba(15, 20, 20, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .45s ease;
}
.sheet.is-open::backdrop { opacity: 1; }
html.sheet-open { overflow: hidden; }

.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--light-bg);
  color: var(--dark);
  border-radius: 20px 20px 0 0;
  padding: 18px var(--gutter) 48px;
  box-shadow: 0 -24px 60px rgba(15, 20, 20, .25);
  translate: 0 100%;
  transition: translate .7s var(--ease-out, ease);
}
.sheet.is-open .sheet__panel { translate: 0 0; }

.sheet__handle {
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(15, 20, 20, .15);
}
.sheet__close {
  position: absolute;
  top: 18px;
  right: var(--gutter);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 20, 20, .12);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color .25s ease, rotate .5s var(--ease-out, ease);
}
.sheet__close::before,
.sheet__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--dark);
  translate: -50% -50%;
  rotate: 45deg;
}
.sheet__close::after { rotate: -45deg; }
.sheet__close:hover { background: var(--gray-bg); rotate: 90deg; }
.sheet__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.sheet__inner {
  max-width: none; /* her ekranda kenar boşluğu yalnızca --gutter (20px) */
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 120px);
}
.sheet__title {
  margin-top: 12px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.sheet__title em { font-style: italic; font-weight: 300; }
.sheet__lead {
  margin-top: 20px;
  max-width: 380px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--meta);
}
.sheet__email {
  display: inline-block;
  margin-top: 24px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: color .2s ease;
}
.sheet__email:hover { color: var(--primary); }

/* Form */
.cf { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.cf__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cf__group { border: 0; margin: 0; padding: 0; }
.cf__group .cf__label { padding: 0; margin-bottom: 12px; }
.cf__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--meta);
}
.cf__input {
  width: 100%;
  padding: 8px 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(15, 20, 20, .16);
  border-radius: 0;
  background: transparent;
  font: 400 18px/1.4 var(--font);
  letter-spacing: -0.01em;
  color: var(--dark);
  transition: border-color .25s ease;
}
.cf__input::placeholder { color: rgba(104, 117, 118, .6); }
.cf__input:focus { outline: none; border-color: var(--primary); }
.cf__input.is-invalid { border-color: #B4533F; }
.cf__textarea { min-height: 120px; resize: vertical; }

.cf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf__chip { position: relative; cursor: pointer; }
.cf__chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cf__chip span {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(15, 20, 20, .14);
  border-radius: 999px;
  font-size: 14px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.cf__chip:hover span { border-color: rgba(15, 20, 20, .32); }
.cf__chip input:checked + span {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--light);
}
.cf__chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.cf__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.cf__status { font-size: 14px; color: var(--meta); min-height: 1.4em; }
.cf__status[data-state="error"] { color: #B4533F; }
.cf__status[data-state="ok"] { color: var(--primary); }

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--dark);
  color: var(--light);
  cursor: pointer;
  box-shadow: inset 4px 4px 8px rgba(255, 255, 255, .08);
  transition: background-color .3s ease;
}
.btn-dark .icon { width: 20px; height: 20px; transition: opacity .35s ease, translate .6s var(--ease-out, ease); }
.btn-dark:hover .icon { translate: 4px 0; }
.btn-dark:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Gönderim sonrası teşekkür ekranı (formun yerine geçer) */
.sheet__done {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 120px);
  opacity: 0;
  translate: 0 16px;
  transition: opacity .6s ease, translate .8s var(--ease-out, ease);
}
.sheet__done.is-in { opacity: 1; translate: 0 0; }
.sheet__inner[hidden] { display: none; }
.sheet__done .sheet__title:focus { outline: none; }
.sheet__home { margin-top: 32px; }
.sheet__done .next__info { padding: 16px 4px 0; }

@media (max-width: 767px) {
  .sheet__panel { max-height: 94svh; padding-bottom: 32px; }
  .sheet__inner, .sheet__done { grid-template-columns: minmax(0, 1fr); margin-top: 28px; gap: 36px; }
  .sheet__home { width: 100%; }
  .cf__row { grid-template-columns: minmax(0, 1fr); }
  .cf__footer { flex-direction: column-reverse; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet__panel, .sheet::backdrop { transition: none; }
}

/* ================= WORK CARD LINK ================= */

/* Kart başlığının yanında sağa bakan ok: üzerine gelince soldan kayarak belirir */
.card__title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card__title .icon {
  width: 22px;
  height: 22px;
  opacity: 0;
  translate: -6px 0;
  transition: opacity .35s ease, translate .6s var(--ease-out, ease);
}
.card:hover .card__title .icon,
.card:focus-within .card__title .icon {
  opacity: 1;
  translate: 0 0;
}
@media (hover: none) {
  .card__title .icon { opacity: 1; translate: 0 0; }
}


.card { position: relative; }
.card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 8px;
}
.card__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

/* ================= CASE STUDY ================= */

/* ===== Detay sayfası şablonu (Figma: works/davut). Tüm projelerde aynı;
   sadece .showcase içindeki görseller değişir. ===== */

.case-hero {
  position: relative;
  z-index: 10; /* sabit header sonraki bölümlerin üstünde kalsın */
  background: var(--gray-bg);
  color: var(--dark);
  /* Figma: header 88px + 20px → geri linki; alt boşluk 80px */
  padding: 108px var(--gutter) 80px;
}
.case-hero__inner {
  display: flex;
  flex-direction: column;
  max-width: none; /* her ekranda kenar boşluğu yalnızca --gutter (20px) */
  margin-inline: auto;
}

.back-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dark);
}
/* Geri oku her zaman görünür; üzerine gelince sola kayar */
.case-hero .back-link .icon {
  width: 24px;
  height: 24px;
  opacity: 1;
  translate: 0 0;
  transition: translate .6s var(--ease-out, ease);
}
.case-hero .back-link:hover .icon { translate: -4px 0; }

/* Figma: geri linki → 200px → başlık (sol) + detaylar (sağ, 700px) */
.case-hero__intro {
  margin-top: 200px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.case-hero__title {
  font-size: clamp(56px, 6.95vw, 100px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;            /* -2px @100px */
  color: var(--dark);
}
.case-hero__details {
  flex: 0 1 700px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.case-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--primary);
}
.case-hero__overview .case-label { margin-bottom: 10px; line-height: normal; }
.case-hero__lead {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.24;
  color: var(--dark);
}
.case-hero__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.case-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}
.case-meta dd {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.1;
  color: var(--dark);
  white-space: pre-wrap;
}

/* Vitrin: Figma 80px üst/alt, kartlar arası 20px, --light-bg zemin.
   Kartlar 1400×800 (7:4); içerik kart genişliğine oranla (cqw) yerleşir. */
.showcase {
  background: var(--light-bg);
  padding: 80px var(--gutter);
}
.shot {
  position: relative;
  max-width: none; /* her ekranda kenar boşluğu yalnızca --gutter (20px) */
  margin: 0 auto;
  aspect-ratio: 7 / 4;
  border-radius: 16px;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  background: var(--dark);
}
.shot + .shot { margin-top: 20px; }
.shot--grey { background: #E6E6E6; }
.shot--light { background: #E3E3E3; }
.shot--r20 { border-radius: 20px; }
/* Figma'dan 2x işlenmiş tek görsel kompozisyon: oran görselin kendisinden gelir */
.shot--img { aspect-ratio: auto; background: transparent; }
.shot--img > img { display: block; width: 100%; height: auto; }
/* Kartı baştan sona dolduran video (Figma: video dolgusu, FILL) */
.shot__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Kart içinde telefon ekranı oranında video (Figma: 390×842, köşe 40 @1400) */
.shot__video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27.857cqw;
  height: 60.143cqw;
  translate: -50% -50%;
  border-radius: 2.857cqw;
  object-fit: cover;
  background: #0b1118;
}

/* Arka plan fotoğrafı + Figma'daki kırpma (--w/--h/--x/--y kart boyutuna göre %) */
.shot__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
.shot__crop {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, 100%);
  height: var(--h, 100%);
  max-width: none;
  object-fit: cover;
}
.shot__bg--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 20, .6);
}
.shot__bg--blur::after {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Kartın ortasındaki marka logosu (Figma: 374×66 @1400) */
.shot__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26.71cqw;
  height: auto;
  translate: -50% -50%;
}

/* Website ekranları (Figma gölgeleri, cqw'ye çevrildi) */
.shot__web {
  position: absolute;
  height: auto;
}
.shot__web--back {
  left: 54.27cqw; top: -0.43cqw; width: 41.59cqw;
  box-shadow: 0 .43cqw 4.51cqw 1.61cqw rgba(37, 37, 37, .15);
}
.shot__web--front {
  left: 4.07cqw; top: 8.14cqw; width: 47.06cqw;
  box-shadow: 0 .22cqw 2.8cqw 1.12cqw rgba(37, 37, 37, .2);
}

/* Telefon ekranları: kutu Figma ölçüsünde, görsel kutuyu doldurur */
.shot__phone {
  position: absolute;
  overflow: hidden;
  border-radius: 1.143cqw;            /* 16px */
}
.shot__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.shot__phone--a    { left: 25.93cqw; top: 4.14cqw;  width: 22.57cqw; height: 48.86cqw; }
.shot__phone--long { left: 52.79cqw; top: -1.5cqw;  width: 21.29cqw; height: 67.43cqw; }
.shot__phone--long img { height: auto; }
.shot--r20 .shot__phone { border-radius: 1.429cqw; } /* 20px */
.shot__phone--l { left: 12.71cqw; top: 4.21cqw; width: 22.71cqw; height: 48.71cqw; }
.shot__phone--m { left: 37.57cqw; top: 1.93cqw; width: 24.86cqw; height: 53.29cqw; }
.shot__phone--r { left: 64.57cqw; top: 4.21cqw; width: 22.71cqw; height: 48.71cqw; }

/* Next work (Figma: üst 80px, alt 60px; başlık → 20px → kart → 20px → bilgi) */
.next {
  background: var(--gray-bg);
  color: var(--dark);
  padding: 80px var(--gutter) 60px;
}
.next > * { margin-inline: auto; }
.next__heading {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.next__card {
  display: block;
  margin-top: 20px;
  color: inherit;
}
.next__media {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--dark);
  isolation: isolate;
}
.next__media .shot__crop { z-index: -2; transition: scale 1.2s var(--ease-out, ease); }
.next__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 20, 20, .6);
}
.next__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19.55%;                      /* 273.7 / 1400 */
  height: auto;
  translate: -50% -50%;
}
.next__card:hover .next__media .shot__crop { scale: 1.03; }
/* Görselin kendisi kompozisyon olduğunda: karartma ve logo yok */
.next__media--img::after { content: none; }
.next__media--img > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out, ease); }
.next__card:hover .next__media--img > img { scale: 1.03; }
.next__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px 0;
}
.next__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}
.next__title .icon { width: 24px; height: 24px; }
.next__meta {
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: pre-wrap;
}
@media (hover: hover) and (pointer: fine) {
  .next__card .next__title .icon { opacity: 0; translate: -6px 0; transition: opacity .35s ease, translate .6s var(--ease-out, ease); }
  .next__card:hover .next__title .icon { opacity: 1; translate: 0 0; }
}

/* Sayfalar arası yumuşak geçiş (View Transitions; desteklemeyen tarayıcıda normal açılır) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-new(root) { animation: vt-in .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vt-out { to { opacity: 0; translate: 0 -12px; } }
@keyframes vt-in { from { opacity: 0; translate: 0 20px; } }

/* ================= MOTION ================= */
/* Sadece JS çalışıyorsa ve ziyaretçi hareket azaltmayı seçmediyse aktif olur */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* expo-out: yumuşak, modern yavaşlama */
  --ease-curtain: cubic-bezier(.76, 0, .24, 1);
}

/* ---------- Yükleme ekranı ---------- */
.loader { display: none; }

.has-loader .loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: var(--dark);
  transition: translate .9s var(--ease-curtain);
}
.has-loader:not(.loader-out) body { overflow: hidden; }
.loader-out .loader { translate: 0 -100%; }

.loader__logo {
  width: clamp(168px, 22vw, 240px);
  height: auto;
  overflow: visible;
  transition: opacity .4s ease, translate .6s var(--ease-out);
}
.loader-out .loader__logo { opacity: 0; translate: 0 -12px; }

/* Harfler çizgiyle yazılır, ardından içi dolar (Apple "hello" gibi) */
.loader__logo path {
  fill: var(--light);
  fill-opacity: 0;
  stroke: var(--light);
  stroke-width: .35;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    draw 1s var(--ease-out) forwards,
    fill-in .5s ease forwards;
  animation-delay:
    calc(var(--i) * 55ms),
    calc(.75s + var(--i) * 35ms);
}
/* ".design" kısmı biraz daha kalın — logodaki ağırlık farkı korunur */
.loader__logo path:nth-child(n+5) { stroke-width: .5; }

@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes fill-in { to { fill-opacity: 1; stroke-opacity: 0; } }

.loader__line {
  width: clamp(168px, 22vw, 240px);
  height: 1px;
  background: linear-gradient(90deg, var(--primary), var(--mint));
  transform-origin: left;
  scale: 0 1;
  animation: line 1.6s var(--ease-out) forwards;
  opacity: .8;
}
.loader-out .loader__line { opacity: 0; transition: opacity .3s ease; }
@keyframes line { to { scale: 1 1; } }

/* ---------- Hero açılışı ---------- */
.motion .nav,
.motion .hero__eyebrow { opacity: 0; }

.motion.is-loaded .nav          { animation: fade .8s ease both; }
.motion.is-loaded .hero__eyebrow { animation: rise .8s var(--ease-out) both; }

@keyframes rise {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ---------- Apple tarzı kelime kelime belirme ---------- */
.motion .split .w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  translate: 0 .35em;
  transition:
    opacity .8s ease,
    filter .8s ease,
    translate .9s var(--ease-out);
  transition-delay: calc(var(--i) * var(--step, 65ms) + var(--d, 0ms));
}
.motion .split.is-in .w {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
}
.motion .hero__title { --d: 100ms; }
/* Alt metin: daha hızlı ve daha hafif bulanıklık — okuması yormasın */
.motion .hero__lead { --d: 600ms; --step: 14ms; }
.motion .hero__lead .w { filter: blur(4px); translate: 0 .25em; }
.motion .hero__lead.is-in .w { filter: blur(0); translate: 0 0; }

/* "end to end." üzerinden bir kez geçen ışık parıltısı */
.motion .hero__title em .w {
  padding-right: .08em;
  margin-right: -.08em; /* italik harf kuyrukları kırpılmasın */
  background-image: linear-gradient(100deg, var(--light) 38%, var(--mint) 50%, var(--light) 62%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.motion.is-loaded .hero__title em .w {
  animation: sheen 1.6s cubic-bezier(.4, 0, .2, 1) calc(1.1s + var(--i) * 110ms) both;
}
@keyframes sheen {
  to { background-position: 0 0; }
}

/* ---------- Apple tarzı okuma efekti (About metni) ---------- */
.motion .scrub .w {
  opacity: .2;
  transition: opacity .35s ease;
}
.motion .scrub .w.lit { opacity: 1; }
/* Kelimelere bölünmeden önce başlık bir an görünmesin */
.motion .split:not(:has(.w)) { opacity: 0; }

/* ---------- Kaydırınca fade-in ---------- */
.motion .reveal {
  opacity: 0;
  translate: 0 32px;
  filter: blur(6px);
  transition:
    opacity .8s var(--ease-out),
    translate .9s var(--ease-out),
    filter .8s var(--ease-out);
}
.motion .reveal.is-in {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}
/* Yan yana kartlarda sağdaki biraz gecikmeli gelir */
@media (min-width: 768px) {
  .motion .card.reveal:nth-child(even) { transition-delay: .08s; }
  .motion .card.reveal:nth-child(-n+2) { transition-delay: .25s; }
  .motion .card.reveal:nth-child(2)    { transition-delay: .33s; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Kart üzerine gelince görsel çok hafif yakınlaşır */
.card__media > * {
  transition: transform 1.1s var(--ease-out);
}
@media (hover: hover) {
  .motion .card:hover .card__media > * { transform: scale(1.02); }
}

/* ================= RESPONSIVE ================= */


/* Tablet */
@media (max-width: 1023px) {
  .hero { height: 620px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__about { grid-column: 1 / -1; }
}

/* Tablet portrait & phones: single column */
@media (max-width: 767px) {
  :root {
    --section-y: 48px;
    --section-space: 72px;
  }

  .hero {
    height: max(520px, calc(100svh - 113px));
  }
  .hero__content { padding-bottom: 48px; padding-top: 80px; }
  .hero__title br { display: none; }
  .hero__lead { font-size: 15px; }

  .works__title { font-size: 22px; }

  .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .card__info { min-height: 0; padding: 12px 4px; }
  .card__title { font-size: 17px; }
  .card__meta { font-size: 14px; line-height: 1.35; }

  /* Telefonda portre üstte, yazı alt kısmına biner */
  .about { padding: 48px 20px; }
  .services { padding: 48px 20px 0; }
  .svc__pills { padding: 40px 16px 0; gap: 16px 12px; }
  .svc__word { font-size: 56px; }
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Footer: telefon */
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .footer__about { grid-column: 1 / -1; }
  .footer__logo { margin-top: 64px; }
  .footer__bottom { flex-direction: column; gap: 6px; }
}

/* Case study: tablet ve telefon */
@media (max-width: 1023px) {
  .case-hero__intro { flex-direction: column; gap: 40px; margin-top: 120px; }
  .case-hero__details { flex-basis: auto; width: 100%; max-width: 700px; }
}
@media (max-width: 767px) {
  .case-hero { padding: 104px var(--gutter) 56px; }
  .case-hero__intro { margin-top: 72px; gap: 32px; }
  .case-hero__lead { font-size: 20px; }
  .showcase { padding: 48px var(--gutter); }
  .shot { border-radius: 10px; }
  .shot + .shot { margin-top: 12px; }
  .next { padding: 56px var(--gutter) 48px; }
  .next__media { aspect-ratio: 4 / 3; border-radius: 10px; }
  .next__logo { width: 38%; }
  .next__info { padding-inline: 4px; }
}

/* Small phones: keep the nav on one line */
@media (max-width: 479px) {
  .nav__link { display: none; }
  .nav__cta { margin-left: 0; height: 40px; padding: 0 14px; font-size: 15px; }
  .nav__logo img { width: 104px; }
}

/* İletişim formu: robotlar için gizli alan (insanlar görmez, ekran okuyucular atlar) */
.cf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf .btn-dark:disabled { opacity: .6; cursor: progress; }