/* ==== 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;
}

/* ==== contact.css ==== */
/* İletişim (5 Eki yeniden düzen — Samet: "gri alan kötü duruyor, fotoğrafları ekle, kompozisyonu elden geçir"):
   1) Form: gri kart yok, beyaz zeminde yarı/yarı — solda ifade + doğrudan kanallar, sağda form.
   2) Stüdyo: üç siyah-beyaz fotoğraflık mozaik (büyük ekip portresi + üstten masa + toplantı odası),
      altında aynı yarı/yarı ızgarada başlık ve bilgiler. 3) Küre. */
.chero {
  background: var(--color-bg);
}

/* Kürenin altı: başlık + çalışma saati / adres / sosyal */
.cinfo {
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

/* Mozaik: sol büyük kare 3:2, sağda 4:3 + 3:2 üst üste — 2.19:1 sütun oranında üçü de kırpılmadan oturur */
.chero__gallery {
  display: grid;
  grid-template-columns: minmax(0, 2.19fr) minmax(0, 1fr);
  gap: var(--space-edge);
}

.chero__shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.chero__shot--lead {
  grid-row: 1 / span 2;
  min-height: 100%;
}

.chero__shot--top {
  aspect-ratio: 4 / 3;
}

.chero__shot--room {
  aspect-ratio: 3 / 2;
}

.chero__shot-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.chero__photo {
  object-fit: cover;
}

.chero__photo--mono {
  filter: grayscale(1);
}

/* Fotoğrafların altı: solda ifade, sağda bilgiler (form bölümüyle aynı orta eksen) */
.chero__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem var(--space-edge);
  align-items: start;
}

.chero__title {
  font-size: clamp(2rem, 3.55vw, 3.2rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-weight: 400;
  color: var(--color-ink);
  max-width: 42rem;
}

.chero__info {
  padding-top: 0.35rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1.25rem;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-ink);
}

.chero__item--social {
  grid-column: 1 / -1;
}

.chero__label {
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.chero__link {
  color: var(--color-ink);
}

.chero__social {
  display: flex;
  gap: 1rem;
}

/* Form: koyu zemin (5 Eki, Samet "C olsun"), sayfanın ilk ekranı; içerik alta yaslı, fotoğraflar alttan görünür.
   19 Eki: Samet "siyah olmasın, beyaza yakın gri olsun" → açık gri zemin, yazılar koyu (renkler aşağıdaki değişkenlerde) */
.cformwrap {
  --cform-zemin: #f3f3f3;
  --cform-yazi: var(--color-ink);
  --cform-soluk: #7a7a7a;
  --cform-cizgi: #d4d4d4;
  --bleed-bg: var(--cform-zemin);
  background: var(--cform-zemin);
  /* Küre bu bloğun altından çıkar: blok üstte kalır */
  position: relative;
  z-index: 2;
}

/* Siyah bloğun alt kenarından küreye düşen gölge: blok önde, küre arkada hissi (edge--bleed clip-path'i
   bloğun kendi gölgesini kestiği için ayrı, sıfır yükseklikli kardeş eleman) */
.cformwrap__shadow {
  position: relative;
  z-index: 2;
  height: 0;
  pointer-events: none;
}

.cformwrap__shadow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(3.5rem, 7vw, 6.5rem);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%, /* 19 Eki: açık zeminde 0.3 kirli şerit gibi duruyordu */
    rgba(0, 0, 0, 0.05) 22%,
    rgba(0, 0, 0, 0.015) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}

.cformwrap__card {
  padding: clamp(8rem, 11vw, 10.5rem) 0 clamp(4rem, 6vw, 6rem);
  /* Tam ekran: form doldurulurken alttan hareketli küre görünmesin (dikkat dağıtıyordu); küre kaydırınca çıkar */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Aşağı kaydır düğmesi: tam ekran siyah bloğun alt ortasında, sabit (hareketsiz) — "devamı var" ipucu */
.cformwrap__card {
  position: relative;
}

.cformwrap__down {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cform-cizgi);
  border-radius: 50%;
  background: transparent;
  color: var(--cform-yazi);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease;
}

.cformwrap__down svg {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.cformwrap__down:hover {
  border-color: var(--cform-yazi);
}

.cformwrap__down:hover svg {
  transform: translateY(0.2rem);
}

.cformwrap__down:focus-visible {
  outline: 1px solid var(--cform-yazi);
  outline-offset: 0.2rem;
}

.cformwrap .cformwrap__direct,
.cformwrap .chero__link {
  color: var(--cform-yazi);
}

.cformwrap .chero__label,
.cformwrap .copy-btn {
  color: var(--cform-soluk);
}

.cformwrap .cform__field input,
.cformwrap .cform__field textarea {
  color: var(--cform-yazi);
  border-bottom-color: var(--cform-cizgi);
}

.cformwrap .cform__field input::placeholder,
.cformwrap .cform__field textarea::placeholder {
  color: #9a9a9a;
}

.cformwrap .cform__field input:focus,
.cformwrap .cform__field textarea:focus {
  border-color: var(--cform-yazi);
}

.cformwrap .cform__submit {
  background: var(--cform-yazi);
  color: var(--cform-zemin);
}

.cformwrap .cform__status:not(.is-error) {
  color: var(--cform-soluk);
}

.cformwrap .cform__wa,
.cformwrap .cform__status.is-error .cform__wa {
  color: var(--cform-yazi);
}

.cformwrap__inner {
  max-width: 54rem;
  margin-inline: auto;
}

/* Yarı/yarı: sol ifade (üstte) + doğrudan kanallar (altta, Gönder hizasında), sağ form */
.cformwrap__inner--split {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem var(--space-edge);
  align-items: stretch;
}

.cformwrap__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

.cformwrap__title {
  font-size: clamp(2rem, 3.55vw, 3.2rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-weight: 400;
  color: var(--cform-yazi);
  margin: 0;
}

/* İlk alanın üst boşluğu başlığın tepe çizgisiyle hizalansın */
.cformwrap__inner--split > .cform .cform__field:first-of-type input {
  padding-top: 0.35rem;
}

.cformwrap__direct {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-ink);
}

.cformwrap__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
}

.copy-btn {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

.copy-btn:hover {
  color: var(--color-ink);
}

/* Konum — küçük dairesel noktalardan oluşan gerçek harita, tek mavi Denizli noktası.
   Bölüm sitenin siyah-beyaz editoryal akışını sürdürür; ayrı bir renkli zemin veya efekt yoktur. */
/* 5 Eki: küre karesinin kendi iç boşluğu yeterli — bölüm boşluğu yok */
.clocation {
  padding-top: 0;
  padding-bottom: 0;
}

.contact-globe {
  position: relative;
  width: min(100%, 68rem);
  margin: 0 auto;
  aspect-ratio: 1;
  overflow: visible;
  background: transparent;
  perspective: 900px;
  transform-style: preserve-3d;
  contain: layout style;
}

.contact-globe__canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  outline: none;
  transform: translateZ(1px);
}

.contact-globe__canvas:active {
  cursor: grabbing;
}

.contact-globe__sprite {
  display: block;
  width: 100%;
  aspect-ratio: 341 / 381;
  background-image: url('/contact/poultry-sprites.webp');
  background-repeat: no-repeat;
  background-size: 600% 300%;
  background-position-x: 0%;
  filter: drop-shadow(0 0.3rem 0.55rem rgb(0 0 0 / 12%));
}

.contact-globe__sprite--egg {
  aspect-ratio: 341 / 571;
  background-image: url('/contact/egg-loop-sprites.webp');
  background-size: 600% 200%;
  background-position: 0% 0%;
  filter: none;
  animation: contact-egg-loop 4.8s linear infinite;
  animation-delay: var(--pin-delay, 0s);
}

.contact-globe__sprite--chick {
  background-position-y: 50%;
  animation: contact-chick-peck 1.8s steps(5, end) infinite;
  animation-delay: var(--pin-delay, 0s);
}

.contact-globe__sprite--rooster {
  aspect-ratio: 1;
  background-image: url('/contact/rooster-crow-sprites.webp');
  background-size: 600% 200%;
  background-position: 0% 0%;
  will-change: background-position;
  animation: contact-rooster-crow 5s step-end infinite;
}

@keyframes contact-egg-loop {
  0%, 8.2% { background-position: 0% 0%; }
  8.3%, 16.5% { background-position: 20% 0%; }
  16.6%, 24.9% { background-position: 40% 0%; }
  25%, 33.2% { background-position: 60% 0%; }
  33.3%, 41.5% { background-position: 80% 0%; }
  41.6%, 49.9% { background-position: 100% 0%; }
  50%, 58.2% { background-position: 0% 100%; }
  58.3%, 66.5% { background-position: 20% 100%; }
  66.6%, 74.9% { background-position: 40% 100%; }
  75%, 83.2% { background-position: 60% 100%; }
  83.3%, 91.5% { background-position: 80% 100%; }
  91.6%, 99.9% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes contact-chick-peck {
  0%,
  24% {
    background-position-x: 0%;
  }

  74% {
    background-position-x: 100%;
  }

  100% {
    background-position-x: 0%;
  }
}

@keyframes contact-rooster-crow {
  0%, 8.2% { background-position: 0% 0%; }
  8.3%, 16.5% { background-position: 20% 0%; }
  16.6%, 24.9% { background-position: 40% 0%; }
  25%, 33.2% { background-position: 60% 0%; }
  33.3%, 41.5% { background-position: 80% 0%; }
  41.6%, 49.9% { background-position: 100% 0%; }
  50%, 58.2% { background-position: 0% 100%; }
  58.3%, 66.5% { background-position: 20% 100%; }
  66.6%, 74.9% { background-position: 40% 100%; }
  75%, 83.2% { background-position: 60% 100%; }
  83.3%, 91.5% { background-position: 80% 100%; }
  91.6%, 99.9% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.contact-globe__world-pin {
  position: absolute;
  z-index: 3;
  bottom: anchor(top);
  left: anchor(center);
  width: clamp(2.15rem, 3.9vw, 3.4rem);
  margin-bottom: 0.18rem;
  opacity: var(--pin-visible);
  transform: translateZ(24px);
  translate: -50% 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.contact-globe__world-pin--egg {
  width: clamp(1.9rem, 3.4vw, 3rem);
}

.contact-globe__origin {
  position: absolute;
  position-anchor: --cobe-denizli;
  z-index: 3;
  bottom: anchor(top);
  left: anchor(center);
  width: clamp(4.8rem, 8vw, 6.6rem);
  margin-bottom: 0.65rem;
  opacity: var(--cobe-visible-denizli, 0);
  transform: translateZ(24px);
  translate: -50% 0;
  transition: opacity 240ms ease;
}

.contact-globe__origin-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.contact-globe__origin-trigger:focus-visible {
  outline: 1px solid var(--color-brand-blue);
  outline-offset: 0.25rem;
}

.contact-globe__rooster {
  rotate: -5deg;
  transition: rotate 260ms ease, translate 260ms ease;
}

.contact-globe__origin-trigger:hover .contact-globe__rooster,
.contact-globe__origin-trigger:focus .contact-globe__rooster {
  rotate: 2deg;
  translate: 0 -0.18rem;
}

.contact-globe__origin-label {
  position: absolute;
  top: calc(100% + 0.34rem);
  left: calc(50% + 2rem);
  z-index: 4;
  display: block;
  width: max-content;
  max-width: 12rem;
  padding: 0.42rem 0.62rem 0.45rem;
  color: rgb(244 244 255 / 96%);
  background: var(--color-brand-blue);
  border: 0;
  box-shadow: none;
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 1;
  translate: 0 0;
  transition: opacity 160ms ease, translate 220ms ease;
}

.contact-globe__origin-label::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 1.42rem;
  height: 1px;
  background: var(--color-brand-blue);
  translate: 0 -50%;
}

.contact-globe__origin-trigger:hover .contact-globe__origin-label,
.contact-globe__origin-trigger:focus .contact-globe__origin-label {
  opacity: 0;
  translate: 0 -0.2rem;
}

.contact-globe__office-card {
  position: absolute;
  left: 56%;
  bottom: 76%;
  z-index: 4;
  display: grid;
  width: clamp(10.5rem, 20vw, 13.5rem);
  padding: 0.55rem 0.55rem 0.72rem;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid rgb(0 0 0 / 8%);
  box-shadow: 0 0.8rem 2.25rem rgb(0 0 0 / 16%);
  opacity: 0;
  rotate: 3deg;
  scale: 0.86;
  transform-origin: 20% 100%;
  pointer-events: none;
  transition: opacity 180ms ease, scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1), rotate 260ms ease;
}

.contact-globe__origin-trigger:hover .contact-globe__office-card,
.contact-globe__origin-trigger:focus .contact-globe__office-card {
  opacity: 1;
  rotate: -2deg;
  scale: 1;
}

.contact-globe__office-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f3f3;
}

.contact-globe__office-photo img {
  object-fit: cover;
}

.contact-globe__office-title,
.contact-globe__office-caption {
  display: block;
  text-align: left;
}

.contact-globe__office-title {
  margin-top: 0.62rem;
  font-size: 0.74rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.contact-globe__office-caption {
  margin-top: 0.2rem;
  color: var(--color-muted);
  font-size: 0.58rem;
  line-height: 1.2;
}

.contact-globe__orbit {
  position: absolute;
  inset: -2%;
  z-index: 2;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 43%, #000 51%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 43%, #000 51%, #000 100%);
}

.contact-globe__orbit-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotateX(62deg);
  animation: contact-orbit-spin 30s linear infinite;
}

.contact-globe__orbit-text {
  fill: var(--color-brand-blue);
  font-size: 5px;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.contact-globe[data-active='false'] .contact-globe__orbit-svg,
.contact-globe[data-active='false'] .contact-globe__sprite {
  animation-play-state: paused;
}

@keyframes contact-orbit-spin {
  from {
    transform: rotateX(62deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(62deg) rotateZ(-360deg);
  }
}

.contact-globe__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.contact-globe__directions {
  position: absolute;
  right: 7.5%;
  bottom: 10%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.05rem;
  color: var(--color-bg);
  background: var(--color-ink);
  border-radius: 999px;
  box-shadow: 0 0.55rem 1.6rem rgb(0 0 0 / 13%);
  font-size: 0.72rem;
  line-height: 1;
  text-decoration: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  transform: translateZ(24px);
  transition: translate var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}

.contact-globe__directions:hover,
.contact-globe__directions:focus-visible {
  translate: 0 -0.12rem;
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 17%);
}

.map-choice {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  margin: auto;
  padding: 0;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  overflow: visible;
}

.map-choice[open] {
  display: grid;
  place-items: center;
}

.map-choice::backdrop {
  background: rgb(0 0 0 / 28%);
  backdrop-filter: blur(0.35rem);
}

.map-choice__panel {
  position: relative;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.5rem;
  background: var(--color-bg);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 22%);
}

.map-choice__title {
  padding-right: 2.5rem;
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.map-choice__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.map-choice__options {
  margin-top: 1.75rem;
  border-top: 1px solid var(--color-line);
}

.map-choice__options a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  padding-inline: 0.15rem;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-fast) ease, padding var(--duration-fast) var(--ease-out-expo);
}

.map-choice__options a:hover,
.map-choice__options a:focus-visible {
  padding-inline: 0.55rem;
  color: var(--color-brand-blue);
}

.contact-globe__directions:focus-visible {
  outline: 1px solid var(--color-brand-blue);
  outline-offset: 0.2rem;
}

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

  .chero__shot--lead {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  .chero__shot--room {
    aspect-ratio: 4 / 3;
  }

  .chero__panel {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cformwrap__card {
    padding: 7rem 0 3.5rem;
    min-height: 0;
  }

  /* Mobilde blok tam ekran değil: düğme gereksiz */
  .cformwrap__down {
    display: none;
  }

  /* WhatsApp düğmesi: açık zeminde varsayılan siyah hap (whatsapp-one.css); koyu zemin dönemindeki beyaz hap kaldırıldı */


  .cformwrap__inner--split > .cform .cform__field:first-of-type input {
    padding-top: 1.5rem;
  }

  .cformwrap__inner--split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* 12 Eyl: Başlık → form (order 1) → WhatsApp (order 2) → doğrudan kanallar (order 3) */
  .cformwrap__side {
    display: contents;
  }

  .cformwrap__inner--split > .cform {
    order: 1;
  }

  .cformwrap__direct {
    order: 3;
    padding-top: 0.5rem;
  }

  .contact-globe {
    width: 112%;
    margin-left: -6%;
  }

  .contact-globe__origin {
    width: 4.35rem;
  }

  .contact-globe__world-pin {
    width: 2.3rem;
  }

  .contact-globe__world-pin--egg {
    width: 2rem;
  }

  .contact-globe__office-card {
    width: 9.5rem;
  }

  .contact-globe__origin-label {
    top: calc(100% + 0.28rem);
    left: calc(50% + 1.55rem);
    max-width: 11rem;
    padding: 0.36rem 0.5rem 0.39rem;
    font-size: 0.54rem;
  }

  .contact-globe__origin-label::before {
    width: 1.08rem;
  }

  .contact-globe__directions {
    right: 2%;
    bottom: 8%;
    min-height: 2.5rem;
    padding-inline: 0.85rem;
    font-size: 0.66rem;
  }
}

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

  .contact-globe__sprite {
    animation: none;
  }
}

/* ==== contact-form.css ==== */
/* Fol iletişim formu: 20px alt çizgili alanlar, 60px satır (hap seçimler 5 Eyl'de kaldırıldı) */
.cform {
  display: flex;
  flex-direction: column;
}

.cform__field {
  display: block;
}

.cform__field input,
.cform__field textarea {
  width: 100%;
  padding: 1.5rem 0 0.875rem;
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  background: transparent;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-ink);
  border-radius: 0;
  resize: none;
  transition: border-color var(--duration-fast) ease;
}

.cform__field input::placeholder,
.cform__field textarea::placeholder {
  color: #a6a6a7;
}

.cform__field input:focus,
.cform__field textarea:focus {
  outline: none;
  border-color: var(--color-ink);
}

.cform__field textarea {
  field-sizing: content;
  min-height: 3.75rem;
}

.cform__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.cform__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font-size: 1rem;
  transition: opacity var(--duration-fast) ease;
}

.cform__submit:disabled {
  opacity: 0.5;
}

.cform__submit-arrow {
  display: inline-block;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.cform__submit:hover .cform__submit-arrow {
  transform: translateX(0.3rem);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 6 Eyl: görünür doğrulama — boş gönderim denemesinde alan kırmızı, altında kısa metin */
.cform__field.is-error input,
.cform__field.is-error textarea {
  border-bottom-color: #d94a2a;
}

.cform__error {
  display: block;
  margin-top: 0.4rem;
  color: #d94a2a;
  font-size: 0.875rem;
  line-height: 1.3;
}

.cform__status.is-error {
  color: #d94a2a;
}

/* 6 Eyl gece: boş gönderim denemesinde WhatsApp yedeği — durum satırının altında, aynı dizgi */
.cform__wa {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-size: var(--text-sm);
}
.cform__status.is-error .cform__wa { color: var(--color-ink); }

/* ==== whatsapp-one.css ==== */
/* Mobil tek dokunuş WhatsApp düğmesi — yalnız 767px altında; masaüstünde form akışı değişmez */
.cwa {
  display: none;
}

@media (max-width: 767px) {
  .cwa {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: 999px;
    background: var(--color-ink);
    color: var(--color-bg);
    text-decoration: none;
    order: 2; /* 12 Eyl: başlık → form → WhatsApp → doğrudan kanallar (refleks tıklama düşsün, önce form) */
  }

  .cwa__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
  }

  .cwa__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .cwa__text strong {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
  }

  .cwa__text small {
    font-size: 0.75rem;
    opacity: 0.7;
  }

  .cwa__arrow {
    flex: 0 0 auto;
    font-size: 1.1rem;
  }

  .cwa:active {
    opacity: 0.85;
  }
}