/* ==== tokens.css ==== */
:root {
  /* Renkler */
  --color-bg: #ffffff;
  --color-bg-soft: #f7f7f7;
  --color-ink: #000000;
  --color-muted: #a6a6a7;
  --color-line: #e6e6e6;
  --color-dark: #0a0a0a;
  --color-dark-ink: #f4f4f4;
  --color-dark-muted: #7a7a7a;
  --color-pill: rgba(0, 0, 0, 0.21);
  --color-accent: #2828e8; /* marka mavisi (pusula karosu) */
  --color-brand-blue: #2828e8;
  --color-brand-yellow: #f4db2a;
  --color-brand-purple: #6b27d6;
  --color-brand-orange: #e55a2f;
  --color-brand-lime: #d3f773;

  /* Tipografi */
  --font-sans: var(--font-helvetica-now), 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui: var(--font-helvetica-now), 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --text-xs: 0.875rem;
  --text-sm: 0.875rem;
  --text-base: 0.875rem;
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-statement: clamp(2rem, 4.45vw, 4rem);
  --text-huge: clamp(2rem, 4.45vw, 4rem);
  --text-hero: clamp(3.1rem, 9.72vw, 8.75rem);

  --tracking-hero: -0.045em; /* Helvetica Now Regular için; Open Sauce 600'de -0.08 idi */
  --tracking-display: -0.04em;
  --tracking-body: 0.02em;
  --leading-hero: 0.8;
  --leading-display: 1.02;

  /* Boşluk */
  --space-edge: 1.25rem;
  --space-section: clamp(5rem, 3.5rem + 7vw, 12.5rem);
  --space-block: clamp(2.5rem, 2rem + 2.5vw, 5rem);

  /* Hareket */
  /* Site temposu: mikro-etkileşimler de sayfa koreografisiyle aynı ağırlıkta süzülür */
  --duration-fast: 320ms;
  --duration-normal: 600ms;
  --duration-slow: 1100ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* Katmanlar */
  --z-nav: 100;
  --z-menu: 90;
}

/* ==== fonts.css ==== */
/* Helvetica Now Display — self-host (Monotype lisansı). next/font/local çıktısıyla birebir:
   aynı aile adı, ağırlıklar, fallback ölçüleri ve --font-helvetica-now değişkeni. */
@font-face{font-family:helveticaNow;src:url(/fonts/HelveticaNowDisplay-Light.woff2) format("woff2");font-display:swap;font-weight:300;font-style:normal}
@font-face{font-family:helveticaNow;src:url(/fonts/HelveticaNowDisplay-Regular.woff2) format("woff2");font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:helveticaNow Fallback;src:local("Arial");ascent-override:113.96%;descent-override:36.96%;line-gap-override:0.00%;size-adjust:97.40%}
.__variable_58c32f{--font-helvetica-now:"helveticaNow","helveticaNow Fallback"}

/* ==== global.css ==== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
  /* Scrollbar'ın görünürlük değişiminde tüm sayfa genişliğinin oynamasını engeller. */
  scrollbar-gutter: stable;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Sitede yalnız iki ağırlık var (300/400); tarayıcı başlıkları kalınlaştırmasın */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
th {
  font-weight: 400;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none; /* olmayan ağırlık/italik için sahte üretme */
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

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

/* Düzen */
.edge {
  padding-inline: var(--space-edge);
  max-width: 120rem; /* Orchard: bölüm içeriği 1920px'te durur, ortalanır */
  margin-inline: auto;
}

/* Kendi zemini olan .edge blokları: zemin tam genişlikte kalsın, içerik 1920'de dursun */
.edge--bleed {
  box-shadow: 0 0 0 100vmax var(--bleed-bg, transparent);
  clip-path: inset(0 -100vmax);
}

.section {
  padding-block: var(--space-section);
}

/* Tipografi yardımcıları */
.t-hero {
  font-size: var(--text-hero);
  font-weight: 400;
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-hero);
}

.t-huge {
  font-size: var(--text-huge);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.t-statement {
  font-size: var(--text-statement);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.t-caption {
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.4;
}

.t-label {
  font-size: var(--text-xs);
  font-weight: 300;
  color: var(--color-muted);
  letter-spacing: var(--tracking-body);
}

/* Küçük meta: etiket, tarih, numara, çip (baş harf büyük, küçük punto) */
.t-meta {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  line-height: 1.3;
}

/* Görsel üstü çip (Oblica): yarı saydam, cam */
/* Rozet: header pill'iyle aynı cam dili — tam radius, koyu cam, yoğun blur.
   Etkileşimsiz (span): hover/tıklama hissi yok. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.875rem;
  border-radius: 999px;
  background: var(--color-pill);
  backdrop-filter: blur(40px);
  color: #fff;
  white-space: nowrap;
}

/* Hap buton */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: 999px;
  background: #f5f5f5;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  line-height: 1.4;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.pill:hover {
  background: var(--color-ink);
  color: #fff;
}

.pill:active {
  transform: scale(0.97);
}

.pill--dark {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.pill--dark:hover {
  background: #fff;
  color: var(--color-ink);
}

/* Sayfa başlığı */
.page-head {
  padding-top: calc(var(--space-edge) + 7rem);
  padding-bottom: var(--space-block);
}

.page-head__title {
  font-size: var(--text-hero);
  font-weight: 400;
  /* --tracking-tight diye bir token yok(tu) — tanımsız var() yüzünden bu başlıklar
     normal aralıkla diziliyordu; diğer dev başlıklarla aynı sıkılığa çekildi */
  letter-spacing: var(--tracking-hero);
  line-height: 1;
}

/* Filtre satırı */
.filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  padding-block: var(--space-block);
}

.filter-group {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.filter-group__options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.filter-option {
  font-size: var(--text-sm);
  color: var(--color-ink);
  transition: color var(--duration-fast) ease;
}

.filter-option:hover {
  color: var(--color-muted);
}

.filter-option[data-active='true'] {
  color: var(--color-muted);
  pointer-events: none;
}

/* Erişilebilirlik */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-ink);
  color: #fff;
  padding: 0.6rem 1rem;
}

.skip-link:focus {
  left: var(--space-edge);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 767px) {
  .filter-row {
    grid-template-columns: 1fr;
  }
}

/* Metin rulo hover'ı */
.roll {
  position: relative;
  display: inline-block;
  overflow: clip;
  perspective: 18rem;
  vertical-align: top;
}

.roll__face {
  display: block;
  transform-origin: 50% 0;
  transition:
    transform 0.55s var(--ease-out-expo),
    opacity 0.35s ease;
}

.roll__face--b {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}

a:hover > .roll .roll__face--a,
button:hover > .roll .roll__face--a,
a:hover .roll > .roll__face--a,
button:hover .roll > .roll__face--a {
  transform: translateY(-110%) rotateX(-40deg);
  opacity: 0;
}

a:hover > .roll .roll__face--b,
button:hover > .roll .roll__face--b,
a:hover .roll > .roll__face--b,
button:hover .roll > .roll__face--b {
  transform: translateY(0);
}

/* Yasal sayfalar */
.legal {
  padding-bottom: var(--space-section);
}

.legal__text {
  max-width: 36rem;
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.5;
}

.legal__text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ── Sayfa giriş koreografisi ──────────────────────────────────────────────
   template her rota değişiminde yeniden mount olur, animasyonlar yeniden oynar.
   Keyframe'ler yalnız `from` tanımlar + backwards fill: animasyon bitince eleman
   kendi doğal translate/scale değerine döner — mevcut konumlandırmayı ezmez. */
@keyframes enter-rise {
  from {
    opacity: 0;
    translate: 0 2.5rem;
  }
}

@keyframes enter-fade-up {
  from {
    opacity: 0;
    translate: 0 1rem;
  }
}

@keyframes enter-card-rise {
  from {
    opacity: 0;
    translate: 0 3.5rem;
  }
}

@keyframes enter-media-in {
  from {
    opacity: 0;
    scale: 1.05;
  }
}

/* Ana sayfa hero'su: daha belirgin zoom-out */
@keyframes enter-media-big-in {
  from {
    opacity: 0;
    scale: 1.12;
  }
}

@keyframes enter-tile-in {
  from {
    opacity: 0;
    scale: 0.94;
  }
}

@keyframes reveal-up {
  from {
    translate: 0 150%;
  }
}

/* Blok girişi: bölümler, meta satırları */
.enter {
  animation: enter-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.enter--2 {
  animation-delay: 150ms;
}

.enter--3 {
  animation-delay: 280ms;
}

.enter--4 {
  animation-delay: 420ms;
}

/* Öğe kademesi: filtre seçenekleri, bilgi satırları — --i sıra numarası */
.enter-item {
  animation: enter-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--enter-base, 0.3s) + var(--i, 0) * 55ms);
}

/* Kart kademesi: iş/yazı kapakları soldan sağa yükselir (gecikme 720ms'de doyar) */
.enter-card {
  animation: enter-card-rise 1.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(0.3s + min(var(--i, 0) * 90ms, 720ms));
}

/* Medya girişi: opaklık + scale — translate ile ortalanan elemanları bozmaz */
.enter-media {
  animation: enter-media-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}

.enter-media--late {
  animation-delay: 0.5s;
}

.enter-media--big {
  animation-name: enter-media-big-in;
  animation-duration: 2.2s;
}

/* Arşiv karoları: hafif büyüyerek belirir */
.enter-tile {
  animation: enter-tile-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(0.1s + var(--i, 0) * 60ms);
}

/* Maskeli başlık (RevealText): harf/kelime alttan yükselerek görünür.
   Maske payları: line-height < 1 başlıklarda İ noktası / ş çengeli kırpılmasın. */
.reveal {
  display: inline-block;
}

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

.reveal__mask {
  display: inline-block;
  overflow: hidden;
  /* Pay: line-height < 1 başlıklarda üstte İ noktası, altta S/g/y/o gövdeleri ve
     descender'lar; YATAYDA negatif letter-spacing maske kutusunu daralttığı için
     mürekkep sağdan taşar (y ≈ 0.04em) — 0.12em kenar payı kırpılmayı önler,
     negatif margin dizilimi aynen korur */
  padding: 0.35em 0.12em 0.32em;
  margin: -0.35em -0.12em -0.32em;
}

.reveal__part {
  display: inline-block;
  animation: reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .enter,
  .enter-item,
  .enter-card,
  .enter-media,
  .enter-tile,
  .reveal__part {
    animation: none;
  }
}

/* Liste kapak videosu: fill görselin yerine aynı kadraj davranışıyla geçer */
.cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==== site.css ==== */
/* PHP sürümüne özgü küçük ekler: Next/motion'ın satır içi yaptığı ilk durumlar. */
.sayfa-gecis { display: contents; }

/* ==== filter-block.css ==== */
/* Ortak filtre bloğu (İşler, Blog) — Orchard ölçüleri */
/* Filtre bloğu (Orchard 1440): etiket 1. kolon, seçenekler etiketten 133px sonra, satır 20.5px;
   "Görünüm" grubu 4. kolondan başlar; seçili olan açık gri (#c2c2c2) */
.wfilter {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 1.25rem;
  padding-top: 7.9375rem; /* başlık altı 127px */
  padding-bottom: 7.3125rem; /* ızgaraya 117px */
}

.wfilter__group {
  grid-column: 1 / span 3;
  display: grid;
  grid-template-columns: 8.3125rem minmax(0, 1fr);
  align-items: start;
}

.wfilter__group--view {
  grid-column: 4 / span 3;
  grid-template-columns: 7.125rem minmax(0, 1fr); /* Orchard: View 725 → Masonry 839 */
}

.wfilter__label,
.wfilter__option {
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: var(--tracking-body);
}

.wfilter__options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.0625rem;
}

.wfilter__option {
  color: var(--color-ink);
  transition: color var(--duration-fast) ease;
}

.wfilter__option:hover {
  color: var(--color-muted);
}

.wfilter__option[data-active='true'] {
  color: #c2c2c2;
  pointer-events: none;
}

/* Görünüm ikonları: 12px, 1px çizgi, metnin solunda */
.wfilter__option--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wfilter__icon {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
}

.wfilter__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}


/* ==== nav.css ==== */
.nav {
  position: fixed;
  top: var(--space-edge);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: min(35rem, calc(100vw - 2 * var(--space-edge)));
}

.nav__shell {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  color: #fff;
}

.nav__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius: 999px;
}

/* Ölçü (Orchard): bar rgba(0,0,0,.21) + blur(40); panel rgba(0,0,0,.17) + blur(40) */
.nav__pill {
  background: var(--color-pill);
  backdrop-filter: blur(40px);
}

.nav__panel {
  background: rgba(0, 0, 0, 0.17);
  backdrop-filter: blur(40px);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  color: #fff;
}

.nav__logo {
  display: block;
  height: 1.25rem;
  /* Inline SVG'nin doğal oranı hesaplanırken header'ın yatayda oynamasını önle. */
  width: 6.89rem;
  flex: 0 0 6.89rem;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.nav__toggle {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 2.375rem;
  border-radius: 1.25rem;
  background: rgba(0, 0, 0, 0.1);
  transition:
    background var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.nav__toggle:hover {
  background: rgba(0, 0, 0, 0.18);
}

.nav__toggle:active {
  transform: scale(0.96);
}

.nav__toggle-icon {
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
}

/* Açılırken: artı saat yönünde dönerken dikey çizgi yatayın üstüne katlanır → − (ikisi de 180°'de yatay biter) */
.nav__toggle-icon span {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  background: #fff;
  transition: rotate 0.85s var(--ease-out-expo);
}

.nav__toggle-icon span:last-child {
  rotate: 90deg;
}

.nav__toggle-icon[data-open='true'] span:first-child {
  rotate: 180deg;
}

.nav__toggle-icon[data-open='true'] span:last-child {
  rotate: 180deg;
}

/* Açılır panel — ölçü: padding 12, radius 23, %17 siyah, blur 40 */
.nav__panel {
  position: relative;
  border-radius: 1.4375rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
}

.nav__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.nav__links li {
  flex: 1 1 auto;
  display: flex;
}

.nav__chip {
  flex: 1 1 auto;
  display: inline-block;
  text-align: center;
  padding: 0.625rem 1.25rem;
  border-radius: 2.5rem;
  background: rgba(0, 0, 0, 0.05);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  line-height: 1.4;
  color: #fff;
}

.nav__panel-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding: 0 1.25rem 0.25rem; /* chip yazılarıyla aynı hiza */
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.9);
}

.nav__social {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  line-height: 1.4;
}

/* Dil anahtarı: panelin sağ alt köşesi, son satırla aynı hizada, bir kademe küçük */
.nav__lang {
  position: absolute;
  right: 1.25rem;
  bottom: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.75rem;
  line-height: 1.35;
}

.nav__lang-btn {
  font: inherit;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

.nav__lang-btn:hover,
.nav__lang-btn[data-active='true'] {
  color: #fff;
}

.nav__lang-sep {
  color: rgba(255, 255, 255, 0.3);
}

.nav__copy {
  line-height: 1.35;
}

.nav__copy sup {
  font-size: 0.6em;
}

/* ==== footer.css ==== */
/* Ölçü (Orchard, 1440): padding 60/20/20, sütunlar +270, telif altta. Yükseklik içeriğe göre —
   tam ekran zorlaması yok (uzun ekranlarda sütunlarla video arasında dev boşluk kalıyordu). */
.footer {
  background: var(--color-bg);
  color: var(--color-ink);
  padding-top: 3.75rem;
  padding-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
}

/* Metin blokları sayfanın geri kalanıyla aynı sol çizgide (.edge) durur.
   Eski hâli videodaki "p"nin sol kenarına yüzdesel hizalıydı — geniş ekranda
   içerikten ~60px içeri kayık görünüyordu, kaldırıldı. */

/* Sol üst (Orchard'da logo alanı): etiket + hap buton */
.footer__head {
  min-height: 13.125rem;
}

/* Fol'daki "Subscribe our newsletter ———→" satırı: ilk sütun genişliğinde, siyah çizgi */
.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: calc(50% - 0.625rem);
  height: 3rem;
  margin-top: 0.25rem;
  border-bottom: 1px solid var(--color-ink);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.footer__cta-arrow {
  display: inline-block;
  font-size: 1.375rem;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.footer__cta:hover .footer__cta-arrow {
  transform: translateX(0.4rem);
}

.footer__columns {
  display: grid;
  grid-template-columns: calc(50% - 0.625rem) minmax(0, 1fr) 13.5625rem;
  gap: 1.25rem;
}

.footer__label {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer__col a {
  display: inline-block;
}

.footer__nav-groups {
  display: grid;
  grid-template-columns: 15.3125rem minmax(0, 1fr);
}

/* Adres: haritaya gider; sakin alt çizgi, hover'da koyulaşır */
.footer__map {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-fast) ease;
}

.footer__map:hover {
  text-decoration-color: currentColor;
}

/* Video 1280×308; sütunlardan 120px sonra (Orchard'da görsel şeridi +453'te başlar) */
.footer__video {
  margin-top: 7.5rem;
  width: calc(100% * 1196 / 1221);
  margin-left: 0.067%;
  aspect-ratio: 1280 / 308;
  overflow: hidden;
  background: var(--color-bg);
}

.footer__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video yoksa: görsel şeridi */
.footer__strip {
  margin-top: 7.5rem;
  margin-inline: calc(-1 * var(--space-edge));
  overflow: hidden;
}

.footer__track {
  display: flex;
  width: max-content;
  animation: footer-marquee 70s linear infinite;
}

.footer__strip-item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(11rem, 19.44vw, 24rem);
  aspect-ratio: 4 / 5;
}

.footer__strip-img {
  object-fit: cover;
}

@keyframes footer-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5625rem;
}

/* Alt sol: gizlilik (siyah, light) + telif (gri) */
.footer__legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: var(--text-sm);
}

.footer__privacy {
  font-weight: 300;
  color: var(--color-ink);
}

.footer__privacy-button {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.footer__privacy-button:hover,
.footer__privacy-button:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer__copy {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.footer__social {
  list-style: none;
  display: flex;
  gap: 1rem;
  font-size: var(--text-sm);
}

.footer__ext {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
  .footer__track {
    animation: none;
  }
}

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

  .footer__cta {
    width: 100%;
  }

  .footer__nav-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Masaüstündeki 120px'lik nefes dar ekranda kocaman bir boşluğa dönüşüyordu:
     imza videosu burada yalnızca ~80px yüksekliğinde, araya o kadar yer gerekmiyor */
  .footer__video,
  .footer__strip {
    margin-top: 3rem;
  }

  /* Alt şerit mobilde alt alta: telif metni dar sütunda kelime kelime kırılıyordu;
     alt boşluk sol alttaki logo fab'ının üstünde kalmak için */
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    margin-top: 2rem;
    padding-bottom: 4.5rem;
  }

  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ==== start-project.css ==== */
/* Sabit konum ve giriş/çıkış hareketi dış kapta (motion), cam hap içeride */
.sproj {
  position: fixed;
  right: var(--space-edge);
  bottom: var(--space-edge);
  z-index: var(--z-menu);
  transform-origin: 100% 100%;
}

.sproj__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.875rem;
  padding: 0 1.125rem 0 1.375rem;
  border-radius: 999px;
  background: var(--color-pill);
  backdrop-filter: blur(40px);
  color: #fff;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-body);
  transition:
    background var(--duration-normal) ease,
    transform var(--duration-fast) ease;
}

.sproj__btn:hover {
  background: rgba(0, 0, 0, 0.42);
}

.sproj__btn:active {
  transform: scale(0.97);
}

.sproj__arrow {
  display: inline-block;
  transition: translate var(--duration-normal) var(--ease-out-expo); /* transform'u motion kullanıyor */
}

.sproj__btn:hover .sproj__arrow {
  translate: 0.3rem 0;
}

@media (max-width: 767px) {
  .sproj__btn {
    height: 2.5rem;
    padding: 0 0.9rem 0 1.1rem;
  }
}

/* ==== cookie-consent.css ==== */
.cconsent-shell {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  /* 6 Eyl: ortada modal, arka plan bulanık; seçim yapılmadan siteye devam edilemez (kaydırma kilitli) */
  place-items: center;
  padding: clamp(1rem, 2vw, 2rem);
  background: rgba(12, 12, 12, 0.42);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  animation: cconsent-shade-in 0.3s ease both;
}

.cconsent {
  position: relative;
  width: min(46rem, 100%);
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.5rem, 2.25vw, 2.5rem);
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.875rem;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  animation: cconsent-in 0.45s var(--ease-out-expo) both;
}

.cconsent--details {
  width: min(48rem, 100%);
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@keyframes cconsent-shade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cconsent-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cconsent-shell,
  .cconsent {
    animation: none;
  }
}

.cconsent__copy {
  display: grid;
  gap: 0.7rem;
  align-content: center;
}

.cconsent__title {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1.05rem, 1vw + 0.75rem, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.cconsent__text {
  max-width: 72ch;
  margin: 0;
  color: #333;
  font-size: 0.875rem;
  line-height: 1.5;
}

.cconsent__purposes {
  margin: 0;
  color: #777;
  font-size: 0.75rem;
  letter-spacing: 0.015em;
}

.cconsent__link {
  width: fit-content;
  color: var(--color-ink);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cconsent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* Kabul et en sağda */
  gap: 0.65rem;
}



.cconsent__btn {
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.62);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.cconsent__btn:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* Kabul et: siyah dolgu, en sağda (mobilde en üstte). .cconsent__btn'den sonra gelmeli (aynı özgüllük). */
.cconsent__btn.cconsent__btn--ghost {
  border-color: transparent;
  color: var(--color-muted, #6b6b6b);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  padding-inline: 0.75rem;
}

.cconsent__btn.cconsent__btn--ghost:hover {
  background: transparent;
  color: var(--color-ink);
}

.cconsent__btn.cconsent__btn--primary {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
  padding-inline: 2.25rem;
  min-width: 14rem;
}

.cconsent__btn.cconsent__btn--primary:hover {
  background: #2a2a2a;
}

.cconsent__btn:focus-visible,
.cconsent__link:focus-visible,
.cconsent__option:has(input:focus-visible) {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.cconsent__details {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.cconsent__option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
}

.cconsent__option span {
  display: grid;
  gap: 0.2rem;
}

.cconsent__option b {
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 400;
}

.cconsent__option small {
  color: #777;
  font-size: 0.6875rem;
  line-height: 1.35;
}

.cconsent__option input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-ink);
}

.cconsent__option--necessary {
  cursor: default;
}

.cconsent__actions--details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.9rem;
}

.cconsent-fab {
  position: fixed;
  left: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 59;
  width: 3.35rem;
  height: 3.35rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow: 0 0.45rem 1.4rem rgba(0, 0, 0, 0.2);
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.cconsent-fab__icon {
  width: 54%;
  height: 54%;
  object-fit: contain;
  filter: invert(1);
}

.cconsent-fab:hover {
  transform: translateY(-2px) rotate(-5deg);
  box-shadow: 0 0.65rem 1.7rem rgba(0, 0, 0, 0.24);
}

.cconsent-fab:focus-visible {
  outline: 2px solid var(--color-bg);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .cconsent-shell {
    padding: 0.75rem;
  }

  .cconsent {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
  }

  .cconsent__copy {
    gap: 0.55rem;
  }

  .cconsent__title {
    font-size: 1.125rem;
  }

  .cconsent__text {
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .cconsent__purposes {
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .cconsent__actions {
    gap: 0.45rem;
    flex-direction: column-reverse; /* mobilde Kabul et en üstte, tam genişlik */
  }

  .cconsent__actions .cconsent__btn {
    width: 100%;
  }

  .cconsent__btn {
    min-height: 2.6rem;
    font-size: 0.8125rem;
  }

  .cconsent__actions--details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cconsent__actions--details .cconsent__btn:last-child {
    grid-column: 1 / -1;
  }

  .cconsent-fab {
    width: 3rem;
    height: 3rem;
  }
}

/* ---------- Alt bant (13 Eki): form taşıyan sayfalarda (iletişim, teklif) pencere formu kilitlemez.
   site.js kabuğa .cconsent-shell--band ekler; kabuk tıklamayı geçirir, yalnız kart etkileşimlidir.
   Kaydırma kilidi ve bulanık zemin yok; ziyaretçi forma yazmaya geçince bant çekilir. ---------- */
.cconsent-shell--band {
  inset: auto 0 0 0;
  place-items: end center;
  padding: clamp(0.75rem, 1.5vw, 1.5rem);
  padding-bottom: max(clamp(0.75rem, 1.5vw, 1.5rem), env(safe-area-inset-bottom));
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  animation: none;
}

.cconsent-shell--band .cconsent {
  width: min(68rem, 100%);
  max-height: calc(100svh - 1.5rem);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: 1.1rem 1.25rem 1.1rem 1.6rem;
  box-shadow:
    0 18px 56px rgba(0, 0, 0, 0.3),
    0 2px 10px rgba(0, 0, 0, 0.14);
  pointer-events: auto;
  animation-name: cconsent-band-in;
}

.cconsent-shell--band .cconsent--details {
  width: min(40rem, 100%);
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 1.4rem 1.6rem;
}

@keyframes cconsent-band-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cconsent-shell--band .cconsent {
    animation: none;
  }
}

/* Metin tek blok akar: başlık üstte, açıklama ve "ayrıntılar" bağlantısı aynı paragrafta */
.cconsent-shell--band .cconsent__copy {
  display: block;
}

.cconsent-shell--band .cconsent__title {
  margin-bottom: 0.3rem;
  font-size: 1.0625rem;
}

.cconsent-shell--band .cconsent__text {
  display: inline;
  font-size: 0.8125rem;
}

.cconsent-shell--band .cconsent__purposes {
  display: none;
}

/* Gerçek boşluk: açıklama ile bağlantı arasında satır kırılabilsin (kenar boşluğu kırılma noktası vermez) */
.cconsent-shell--band .cconsent__text::after {
  content: " ";
}

.cconsent-shell--band .cconsent__link {
  display: inline;
  white-space: nowrap;
}

.cconsent-shell--band .cconsent__actions:not(.cconsent__actions--details) {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.cconsent-shell--band .cconsent__actions:not(.cconsent__actions--details) .cconsent__btn {
  width: auto;
  min-height: 2.75rem;
  white-space: nowrap;
}

.cconsent-shell--band .cconsent__btn.cconsent__btn--primary {
  min-width: 0;
  padding-inline: 1.75rem;
}

@media (max-width: 760px) {
  .cconsent-shell--band {
    padding: 0.625rem;
    padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
  }

  .cconsent-shell--band .cconsent {
    grid-template-columns: minmax(0, 1fr); /* düğme satırı kartı genişletemesin */
    gap: 0.8rem;
    padding: 0.95rem 1rem 1rem;
  }

  .cconsent-shell--band .cconsent--details {
    padding: 1.1rem 1rem 1rem;
  }

  .cconsent-shell--band .cconsent__title {
    font-size: 0.9375rem;
  }

  .cconsent-shell--band .cconsent__text,
  .cconsent-shell--band .cconsent__link {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  /* Tek satır: solda "Tercihleri yönet", sağda genişleyen "Tümünü kabul et" — yükseklik formdan çalmasın.
     Yazı boyutu büyütülmüş telefonlarda sığmazsa alt satıra iner (taşma yerine). */
  .cconsent-shell--band .cconsent__actions:not(.cconsent__actions--details) {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .cconsent-shell--band .cconsent__btn.cconsent__btn--ghost {
    flex: 0 1 auto;
    padding-inline: 0.5rem;
  }

  .cconsent-shell--band .cconsent__btn.cconsent__btn--primary {
    flex: 1 1 auto;
    padding-inline: 1rem;
  }
}

/* ==== parallax-media.css ==== */
.pmedia {
  position: relative;
  overflow: hidden;
}

.pmedia__inner {
  position: absolute;
  inset: -8% 0; /* bileşen bleed prop'u ile inline olarak ezer */
}

.pmedia__img {
  object-fit: cover;
}

/* ==== works.css ==== */
.works-head {
  padding-top: 15rem; /* Orchard: başlık y=240 */
}

.works-head__title {
  font-size: clamp(3.1rem, 9.72vw, 8.75rem);
  line-height: 0.8;
  letter-spacing: var(--tracking-hero);
  font-weight: 400;
}

/* ==== post-grid.css ==== */
/* Orchard /news (1440): ilk iki yazı 2 kolon 698×659, sonrası 3 kolon 463×438; kolon boşluğu 5px;
   künye görselin 20px altında; satır arası 120px. Yazı boyları okunabilirlik için Orchard'dan bir tık büyük. */
.wfilter__group--posts {
  grid-template-columns: 7.25rem minmax(0, 1fr); /* Orchard: Filter 20 → All 136 */
}

.pgrid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7.5rem 0.3125rem;
  padding-bottom: var(--space-section);
}

.pgrid__item {
  grid-column: span 2;
}

.pgrid__item[data-featured='true'] {
  grid-column: span 3;
}

.pgrid__card {
  display: block;
  color: var(--color-ink);
}

/* Görsel kutusu: 2 kolonda 698/659, 3 kolonda 463/438 (ikisi de ≈ 1.06) */
.pgrid__media {
  position: relative;
  aspect-ratio: 698 / 659;
  overflow: hidden;
  background: var(--color-bg-soft);
}

/* İki görsel üst üste; hover'da ikinci görsel kapağın yerine kayar (ana sayfadaki blog kartıyla aynı) */
.pgrid__stack {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.pgrid__frame {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}

.pgrid__img {
  object-fit: cover;
}

.pgrid__card:hover .pgrid__media[data-has-hover='true'] .pgrid__stack {
  transform: translateY(-100%);
}

.pgrid__title {
  margin-top: 1.25rem;
  font-size: 1.25rem; /* Orchard 18px → 20px, blog okunabilirliği */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 40rem;
}

.pgrid__excerpt {
  margin-top: 0.5rem;
  max-width: 36rem;
  font-size: 0.9375rem; /* Orchard 14px açık gri → 15px orta gri */
  line-height: 1.45;
  color: var(--color-muted);
}

.pgrid__date {
  margin-top: 1rem;
  font-size: var(--text-sm);
  line-height: 1.4;
}

@media (max-width: 1023px) {
  .pgrid {
    gap: 4rem 0.3125rem;
  }

  .pgrid__item,
  .pgrid__item[data-featured='true'] {
    grid-column: span 3;
  }
}

@media (max-width: 599px) {
  .pgrid__item,
  .pgrid__item[data-featured='true'] {
    grid-column: span 6;
  }
}