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

/* ==== about.css ==== */
/* Orchard /about ölçüleri (1440): sayfa grid'i 6 × 216.7px, boşluk 20px; kenar 20px; içerik max 1920 */
.agrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: start;
}

/* Üst: başlık 171px (#f7f7f7, ortalı), görsel 540px yüksek, üst 158px; blok ~835px */
.ahero {
  position: relative;
  height: 53.4375rem; /* 855px: Orchard bölüm menüsü burada başlar */
}

.ahero__title {
  position: absolute;
  left: var(--space-edge);
  right: var(--space-edge);
  top: 20.3rem;
  text-align: center;
  font-size: clamp(3.5rem, 11.9vw, 10.7rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--color-bg-soft);
  white-space: nowrap;
}

.ahero__media {
  position: absolute;
  left: 50%;
  top: 9.875rem;
  translate: -50% 0;
  width: min(calc(100% - 2 * var(--space-edge)), calc(120rem - 2 * var(--space-edge)));
  height: 33.75rem;
  overflow: hidden;
}

.ahero__img {
  object-fit: contain; /* Orchard: kare kapak 540×540, yatay kapak 540 yüksek */
}

/* Yalnız scroll'la değişimde crossfade; imleçle değişim sert kesme (Orchard orijinali) */
[data-driver='scroll'] .ahero__img {
  transition: opacity 0.45s ease;
}

/* Kapak videosu hero döngüsünde görseller gibi contain kadrajda durur */
.ahero__media .cover-video {
  object-fit: contain;
}

/* Tanım: nav + 200px */
.aintro {
  padding-top: 12.5rem;
}

.aintro__main {
  grid-column: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.aintro__text {
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.aintro__aside {
  grid-column: 6;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.aintro__values {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Ekip: tanıtım metninden ilk çerçeveye 240px */
.ateam {
  padding-top: 15rem;
}

.ateam__row {
  row-gap: 0;
}

.ateam__row + .ateam__row {
  margin-top: 0.3125rem; /* Orchard: satırlar arasında 5px */
}

.ateam__row.agrid {
  column-gap: 0.3125rem; /* Orchard ekip grid'i: 229px kolon, 5px boşluk → çerçeve 463px */
}

.ateam__media {
  position: relative;
  aspect-ratio: 462 / 344;
  overflow: hidden;
}

.ateam__row[data-side='right'] .ateam__media {
  grid-column: 4 / span 2;
}

.ateam__row[data-side='right'] .ateam__caption {
  grid-column: 6;
}

.ateam__row[data-side='left'] .ateam__media {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.ateam__row[data-side='left'] .ateam__caption {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}

.ateam__placeholder {
  background: var(--color-bg-soft);
}

.ateam__caption {
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Hizmetler: sol paragraf (1–2. kolon), sağ akordiyon (3–6. kolon) */
.aserv {
  /* Orchard: bölüm üstü 240px; ekip grid'i son görselin 55px üstünde bittiği için görselden 185px */
  padding-top: 11.5625rem;
  padding-bottom: 0; /* sonraki blok Değerler; aralık onun padding-top'unda (Orchard 240px) */
}

/* Sol: etiket + 10px + içerik (Orchard: "Industries" 14px gri, altı 14px siyah liste) */
.aserv__intro {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: 20rem; /* paragraf sağa uzamasın, alt satırlara insin (Orchard'da sol sütun tek kolon) */
}

.aserv__text {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-ink);
}

.aserv__link {
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--color-line);
}

/* Orta (3–4. kolon): etiket + 10px + başlıklar; 5. kolon boş kalır ki çizgiler videoya dayanmasın */
.aserv__acc {
  grid-column: 3 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.aserv__acc .sacc {
  border-top: 0;
}

.aserv__acc .sacc__item:first-child .sacc__head {
  padding-top: 0;
}

/* Sağ (6. kolon): video 217×171 etiketlerle aynı hizada; altında bağlantı (Orchard 10px, Samet'e dar geldi → 20px) */
.aserv__aside {
  grid-column: 6;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Orta genişlikler (1024–1439): kolonlar daralınca bölüm yeniden dengelenir —
   sol metin belirgin daralır, akordeon boş 5. kolona yayılır (başlıklar sarmaz) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .aserv__intro {
    max-width: min(17rem, 82%);
  }

  .aserv__acc {
    grid-column: 3 / span 3;
    padding-right: 3rem; /* çizgiler tanıtım videosuna dayanmasın */
  }
}

/* Değerler: başlık 1. kolon, 2×2 ızgara 3–6. kolon (5 Eyl: Hizmetler ile Yaklaşım arasında) */
.avalues {
  padding-top: 15rem; /* Orchard: 240px */
  /* Sonraki blok sticky ilkeler; içeriği dikeyde ortaladığı için ~80 + (100svh − 585) / 2 */
  padding-bottom: 5rem;
}

.avalues.agrid {
  column-gap: 0.625rem; /* Orchard müşteri bloğu: 225px kolon, 10px boşluk */
}

.avalues__label {
  grid-column: 1;
}

.avalues__grid {
  grid-column: 3 / span 4;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.625rem;
  row-gap: 4.5rem;
}

.avalues__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 2.5rem;
}

.avalues__title {
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.avalues__text {
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.45;
  max-width: 26rem;
}

.aticker {
  margin-top: 5rem; /* önünde sticky ilkeler: içerik ortalı, kendi alt payı var (eski 14.5rem Değerler içindi) */
  margin-bottom: 2.5rem;
}

@media (max-width: 1023px) {
  .agrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aintro__main,
  .aintro__aside,
  .aserv__intro,
  .aserv__acc,
  .aserv__aside,
  .avalues__label,
  .avalues__grid {
    grid-column: 1 / -1;
  }

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

  .ateam__row[data-side='right'] .ateam__media,
  .ateam__row[data-side='left'] .ateam__media {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ateam__row[data-side='right'] .ateam__caption,
  .ateam__row[data-side='left'] .ateam__caption {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-top: 0.75rem;
    padding-bottom: 2.5rem;
    text-align: left;
  }

  .ahero {
    height: auto;
    padding-top: 8rem;
  }

  .ahero__title,
  .ahero__media {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    margin: 0 auto;
  }

  /* clamp'in 3.5rem tabanı dar ekranda "Pentograf stüdyo®"yu taşırıyordu (nowrap) */
  .ahero__title {
    font-size: 9.4vw;
  }

  .ahero__media {
    width: min(33.75rem, 80vw);
    margin-top: -4rem;
  }
}

@media (max-width: 767px) {
  /* Sabit navigasyon altında başlık ve görsel birbirine binmeden okunur. */
  .ahero {
    padding-top: 6.5rem;
  }

  .ahero__title {
    right: auto;
    width: 100%;
    padding-inline: var(--space-edge);
    font-size: clamp(2.25rem, 9.4vw, 3.5rem);
    white-space: normal;
  }

  .ahero__media {
    width: min(calc(100% - 2 * var(--space-edge)), 33.75rem);
    margin-top: 1.5rem;
  }

  /* Masaüstündeki 200–240px ritim mobilde bölüm kopukluğu yaratıyordu. */
  .aintro {
    padding-top: 5rem;
  }

  .aintro__main {
    gap: 1rem;
  }

  .aintro__text {
    font-size: clamp(1.75rem, 8.55vw, 2rem);
    line-height: 1.08;
  }

  /* Ana metnin son cümlesi ile yeni başlık ayrı düşünce bloklarıdır. */
  .aintro__aside {
    margin-top: 3.5rem;
  }

  .ateam {
    padding-top: 5rem;
  }

  .ateam__row[data-side='right'] .ateam__caption,
  .ateam__row[data-side='left'] .ateam__caption {
    padding-bottom: 1.5rem;
  }

  .aserv {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .avalues {
    padding-top: 5rem;
  }

  .avalues__grid {
    row-gap: 2.5rem;
  }

  .aticker {
    margin-top: 5rem;
    margin-bottom: 1.25rem;
  }
}

/* ==== ticker.css ==== */
.ticker {
  overflow: hidden;
  width: 100%;
}

.ticker__track {
  display: flex;
  gap: 0.3125rem;
  width: max-content;
  animation: ticker-scroll calc(var(--count) * 6s) linear infinite;
}

.ticker__item {
  position: relative;
  flex: 0 0 auto;
  width: 18.75rem;
  aspect-ratio: 1;
  overflow: hidden;
}

.ticker__img {
  object-fit: cover;
}

@keyframes ticker-scroll {
  to {
    transform: translateX(-50%);
  }
}

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

/* ==== intro-reel.css ==== */
/* Tanıtım filmi (hakkımızda kenar sütunu): dikey reel + hero'yla aynı dilde,
   sütuna sığacak ölçekte küçültülmüş katmanlı cam ses kapsülü */
.ireel {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ireel__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

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

/* Etiket: videonun açılış cümlesi + süre — küçük ve silik, başlık gibi durmasın */
.ireel__caption {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* Büyüt: sağ üstte küçük cam yuvarlak — tam ekran oynatıcıyı açar */
.ireel__expand {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--color-pill);
  backdrop-filter: blur(40px);
  color: #fff;
  transition:
    background var(--duration-fast) ease,
    scale 0.6s var(--ease-out-expo);
}

.ireel__expand:hover {
  background: rgba(0, 0, 0, 0.5);
  scale: 1.07;
}

.ireel__expand:active {
  scale: 0.9;
}

.ireel__expand svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* Ses kapsülü: tek cam pencere, içinde ikonun yuvarlağı + sürgünün iç hapı */
.ireel__soundwrap {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--color-pill);
  backdrop-filter: blur(40px);
  overflow: hidden;
  transition: background var(--duration-fast) ease;
}

.ireel__soundwrap:hover {
  background: rgba(0, 0, 0, 0.34);
}

.ireel__sound {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  transition:
    background var(--duration-fast) ease,
    scale 0.6s var(--ease-out-expo);
}

.ireel__sound:hover {
  background: rgba(0, 0, 0, 0.55);
  scale: 1.07;
}

.ireel__sound:active {
  scale: 0.9;
}

.ireel__sound svg {
  width: 1rem;
  height: 1rem;
}

.ireel__sound-icon {
  display: grid;
  place-items: center;
}

.ireel__volume {
  display: grid;
  place-items: center;
  height: 1.875rem;
  max-width: 0;
  margin-left: 0;
  padding-inline: 0;
  opacity: 0;
  translate: -0.75rem 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  /* KAPANIŞ: önce içerik söner, pencere expo ile yumuşak kapanır */
  transition:
    max-width 0.55s var(--ease-out-expo) 0.08s,
    margin 0.55s var(--ease-out-expo) 0.08s,
    padding 0.55s var(--ease-out-expo) 0.08s,
    translate 0.3s ease,
    opacity 0.15s ease;
}

.ireel__soundwrap[data-expanded='true'] .ireel__volume {
  max-width: 8rem;
  margin-left: 0.3rem;
  padding-inline: 0.75rem;
  opacity: 1;
  translate: 0 0;
  /* AÇILIŞ: pencere süzülür, içerik hafif gecikmeyle kayarak dolar */
  transition:
    max-width 0.75s var(--ease-out-expo),
    margin 0.75s var(--ease-out-expo),
    padding 0.75s var(--ease-out-expo),
    translate 0.65s var(--ease-out-expo) 0.12s,
    opacity 0.45s ease 0.16s;
}

.ireel__volume input[type='range'] {
  appearance: none;
  width: 4.5rem;
  height: 1.25rem;
  background: transparent;
  cursor: pointer;
}

.ireel__volume input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.ireel__volume input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -5px; /* ince izin ortasına oturt */
  border-radius: 50%;
  background: #fff;
  transition: scale var(--duration-fast) ease;
}

.ireel__volume input[type='range']::-webkit-slider-thumb:hover {
  scale: 1.25;
}

.ireel__volume input[type='range']::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.ireel__volume input[type='range']::-moz-range-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

/* Oynat butonu: video durunca ortada cam yuvarlak, pop ile gelir */
@keyframes ireel-play-pop {
  from {
    scale: 0.5;
    opacity: 0;
  }
}

.ireel__play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-pill);
  backdrop-filter: blur(40px);
  color: #fff;
  animation: ireel-play-pop 0.55s var(--ease-out-expo);
  transition:
    background var(--duration-fast) ease,
    scale 0.6s var(--ease-out-expo);
}

.ireel__play:hover {
  background: rgba(0, 0, 0, 0.42);
  scale: 1.08;
}

.ireel__play svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.15rem; /* üçgen optik merkez */
}

/* Dar ekranda kenar sütunu tam genişliğe düşer: reel devasa olmasın */
@media (max-width: 1023px) {
  .ireel {
    max-width: 20rem;
  }
}

/* ==== reel-player.css ==== */
/* Tam ekran reel oynatıcı: karartılmış cam zemin, ortada dikey video,
   altta tek cam kapsülde kontroller (site dili: --color-pill + blur + expo) */
.rplayer {
  position: fixed;
  inset: 0;
  z-index: 200; /* nav (100) ve menünün üstünde */
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(24px);
  animation: rplayer-in 0.4s ease both;
}

@keyframes rplayer-in {
  from {
    opacity: 0;
  }
}

.rplayer__stage {
  position: relative; /* kontrol şeridi videonun üzerine oturur */
  height: min(86svh, 160vw);
  aspect-ratio: 9 / 16;
  max-width: 92vw;
  animation: rplayer-pop 0.8s var(--ease-out-expo) both;
}

@keyframes rplayer-pop {
  from {
    scale: 0.94;
    opacity: 0;
  }
}

.rplayer__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

/* Kapat: sağ üstte cam yuvarlak */
.rplayer__close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-pill);
  backdrop-filter: blur(40px);
  color: #fff;
  transition:
    background var(--duration-fast) ease,
    scale 0.6s var(--ease-out-expo),
    opacity 0.35s ease,
    translate 0.45s var(--ease-out-expo);
}

.rplayer__close:hover {
  background: rgba(0, 0, 0, 0.5);
  scale: 1.07;
}

.rplayer__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Kontrol kapsülü: videonun ÜZERİNDE, alt ortada — YouTube düzeni tek şerit */
.rplayer__bar {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - 1.5rem);
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  background: var(--color-pill);
  backdrop-filter: blur(40px);
  transition:
    opacity 0.35s ease,
    translate 0.45s var(--ease-out-expo);
}

/* Oynatma sürerken kontroller çekilir, fare kımıldayınca döner */
.rplayer[data-controls='false'] {
  cursor: none;
}

.rplayer[data-controls='false'] .rplayer__bar {
  opacity: 0;
  translate: -50% 0.75rem;
  pointer-events: none;
}

.rplayer[data-controls='false'] .rplayer__close {
  opacity: 0;
  translate: 0 -0.5rem;
  pointer-events: none;
}

.rplayer__btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  transition:
    background var(--duration-fast) ease,
    scale 0.6s var(--ease-out-expo);
}

.rplayer__btn:hover {
  background: rgba(0, 0, 0, 0.55);
  scale: 1.07;
}

.rplayer__btn:active {
  scale: 0.9;
}

.rplayer__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.rplayer__time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}

/* Sarma çubuğu: görünen çizgi ince, tıklama alanı geniş (eleman 20px, iz pseudo'da 3px) */
.rplayer__seek {
  flex: 1;
  appearance: none;
  height: 1.25rem;
  background: transparent;
  cursor: pointer;
}

.rplayer__vol {
  appearance: none;
  width: 4rem;
  flex-shrink: 0;
  height: 1.25rem;
  background: transparent;
  cursor: pointer;
}

.rplayer__seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #fff var(--fill, 0%),
    rgba(255, 255, 255, 0.28) var(--fill, 0%)
  );
}

.rplayer__vol::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.rplayer__seek::-webkit-slider-thumb,
.rplayer__vol::-webkit-slider-thumb {
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #fff;
  transition: scale var(--duration-fast) ease;
}

/* Baş parmağı ince izin ortasına oturt: (12 - iz) / 2 */
.rplayer__seek::-webkit-slider-thumb {
  margin-top: -4.5px;
}

.rplayer__vol::-webkit-slider-thumb {
  margin-top: -5px;
}

.rplayer__seek::-webkit-slider-thumb:hover,
.rplayer__vol::-webkit-slider-thumb:hover {
  scale: 1.25;
}

.rplayer__seek::-moz-range-thumb,
.rplayer__vol::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.rplayer__seek::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #fff var(--fill, 0%),
    rgba(255, 255, 255, 0.28) var(--fill, 0%)
  );
}

.rplayer__vol::-moz-range-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

/* Dar ekran: ses sürgüsü gizlenir (mute düğmesi kalır), kapsül nefes alır */
@media (max-width: 520px) {
  .rplayer__vol {
    display: none;
  }

  .rplayer__time--total {
    display: none;
  }
}

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

/* ==== section-nav.css ==== */
.snav {
  position: sticky;
  top: 7.5rem;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-edge);
  max-width: 120rem;
  margin-inline: auto;
  height: 1.25rem;
  mix-blend-mode: difference;
  pointer-events: none;
}

.snav__link {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: #212121;
  pointer-events: auto;
  transition: color var(--duration-normal) var(--ease-out-expo);
}

.snav__link[data-active='true'],
.snav__link:hover {
  color: #f7f7f7;
}

@media (max-width: 767px) {
  .snav {
    display: none;
  }
}

/* ==== services-accordion.css ==== */
.sacc {
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.sacc__item {
  border-bottom: 1px solid var(--color-line);
}

.sacc__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  /* Boşluk yok: kapalıyken başlık, üstteki "Hizmetler" etiketiyle aynı hizada başlar;
     açılınca aralığı okun genişliği sağlar */
  column-gap: 0;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-ink);
}

/* Açık olanda ok belirir, başlık sağa kayar */
.sacc__arrow {
  display: inline-block;
  width: 0;
  overflow: hidden;
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0;
  transition:
    width var(--duration-normal) var(--ease-out-expo),
    opacity var(--duration-normal) ease;
}

.sacc__item[data-open='true'] .sacc__arrow {
  width: 2.4rem; /* ok + başlık arası nefes (eski 1.6rem + 0.875rem gap yerine) */
  opacity: 1;
}

.sacc__title {
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  transition: translate 0.7s var(--ease-out-expo);
}

/* Hover: başlık hafifçe sağa süzülür (kapalıyken davet, açıkken ok zaten itmiş olur) */
.sacc__item[data-open='false'] .sacc__head:hover .sacc__title {
  translate: 0.5rem 0;
}

/* + / × ikonu: iki ince çizgi. Açılırken çizgiler makas gibi ters yönde 45° dönüp × olur
   (header'daki ikon aynı yöne dönüp −'ye katlanır; ikisi farklı hareket etsin diye) */
.sacc__icon {
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
  opacity: 0.45;
  transition:
    scale 0.8s var(--ease-out-expo),
    opacity var(--duration-fast) ease;
}

.sacc__icon::before,
.sacc__icon::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  translate: 0 -50%;
  transition: rotate 0.8s var(--ease-out-expo);
}

.sacc__icon::after {
  rotate: 90deg;
}

.sacc__item[data-open='true'] .sacc__icon {
  scale: 1.15;
}

.sacc__item[data-open='true'] .sacc__icon::before {
  rotate: -45deg;
}

.sacc__item[data-open='true'] .sacc__icon::after {
  rotate: 45deg;
}

.sacc__head:hover .sacc__icon {
  opacity: 1;
}

.sacc__panel {
  overflow: hidden;
}

.sacc__text {
  max-width: 44rem;
  padding: 0 0 1.5rem;
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.5;
  color: #3a3a3a;
}

/* ==== principles.css ==== */
/* Bölüm sticky: 5 ilke × 520px scroll (+ ana sayfada 650px blog perdesi); yükseklik inline */
.principles {
  position: relative;
}

.principles__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Orchard: 6 × 225px, gap 10px (1440'ta 1400 iç genişlik) */
.principles__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem 0.625rem;
  align-items: start;
}

.principles__media {
  grid-column: 3 / span 2; /* ortada */
  aspect-ratio: 460 / 585;
  overflow: hidden;
}

.principles__strip {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.principles__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  overflow: hidden; /* dağınık parçalar komşu slayta sızmasın */
}

.principles__tile {
  width: 100%;
  aspect-ratio: 1;
}

/* 1. kolon: adımlar */
.principles__list {
  grid-column: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.principles__row {
  position: relative;
  padding-bottom: 0.5rem;
}

.principles__row::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: #c2c2c2;
  transition: background 0.7s var(--ease-out-expo);
}

.principles__row:has([data-active='true'])::after {
  background: var(--color-ink);
}

.principles__step {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: var(--tracking-body);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.7s var(--ease-out-expo);
}

.principles__step:hover,
.principles__step[data-active='true'] {
  color: var(--color-ink);
}

.principles__spacer {
  height: 10rem;
}

/* 6. kolon: paragraf + maddeler */
.principles__desc {
  /* Karo 3-4. kolonda; metin 5-6'ya yayılınca aradaki boş kolon kaybolup afişe yapışıyordu.
     Sol iç boşluk o nefesi geri verir, blok sağ kenara dayalı kalır. */
  grid-column: 5 / span 2;
  padding-left: 3.5rem;
}

.principles__desc-inner {
  display: flex;
  flex-direction: column;
  max-width: 27rem;
  margin-left: auto; /* satır uzunluğu okunur kalsın, blok sağa dayansın */
  text-align: right; /* satırlar sağ kenardan hizalanır, sola doğru açılır */
}

.principles__motto {
  margin-bottom: 1.15rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.principles__summary {
  font-size: var(--text-sm);
  line-height: 1.5;
  letter-spacing: var(--tracking-body);
  color: #4a4a4a; /* motto siyah kalsın, gövde bir ton geri çekilsin */
}

.principles__summary p + p {
  margin-top: 0.75rem;
}

.principles__summary--approach {
  margin-top: 1.25rem;
  color: var(--color-ink); /* "Pentograf için ..." bölümü gözlemden ayrışsın */
}



.principles__points {
  list-style: none;
  margin: 1.5rem 0 0; /* gövde paragraflarından ayrılsın */
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: var(--tracking-body);
  color: #9c9c9c;
}

@media (max-width: 1023px) {
  .principles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principles__media {
    grid-column: 1 / -1;
    max-width: 28rem;
  }

  .principles__desc {
    grid-column: 2;
    padding-left: 0; /* masaüstündeki afiş boşluğu dar ekranda bloğu sağa kaydırıyordu */
  }

  /* Dar ekranda blok tam genişlik: sağa hizalama okumayı zorlaştırır, sola döner */
  .principles__desc-inner {
    max-width: none;
    margin-left: 0;
    text-align: left;
  }
}

@media (max-width: 599px) {
  .principles__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem 0;
  }

  .principles__list,
  .principles__media,
  .principles__desc {
    grid-column: 1;
  }

  /* Karo küçülüp ortalanır: liste + karo + açıklama tek ekrana (100svh) sığsın */
  .principles__media {
    width: 100%;
    max-width: 13rem;
    margin-inline: auto;
  }

  /* Aktif satırın altındaki 10rem'lik masaüstü nefesi mobilde açıklamayı ekran dışına itiyordu */
  .principles__spacer {
    height: 0;
  }

  /* Üç paragraflı gövde dar ekranda sabitlenmiş bölümü (100svh) taşırıyordu:
     karo küçülür, satır ve blok aralıkları sıkılaşır — maddeler ekran içinde kalsın */
  /* Sağ alttaki "Proje Başlat" düğmesi son maddelerin üzerine biniyordu: alt boşluk açılır,
     karo da küçülerek bu boşluğu karşılar */
  .principles__sticky {
    padding-top: 4.5rem; /* üstteki gezinme kapsülü aktif ilkeyi örtmesin */
    padding-bottom: 6.25rem; /* sağ alttaki düğme maddelerin üstüne binmesin */
  }

  /* Afiş mobilde de büyük görünsün (asıl görsel bu); tam metin yerine ana paragraf kalır */
  .principles__media {
    max-width: 10rem;
  }

  .principles__summary--observation {
    display: none;
  }

  .principles__motto {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }

  /* Afişi küçültmeden yer açmak için ilke listesi ve blok araları sıkışır */
  .principles__list {
    gap: 0.35rem;
  }

  .principles__row {
    padding-bottom: 0.3rem;
  }

  .principles__summary {
    margin-bottom: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .principles__summary p + p {
    margin-top: 0.5rem;
  }

  /* Afiş ortada durduğu için metin de ortalanır */
  .principles__desc-inner {
    text-align: center;
  }

  /* Maddeler alt alta uzayıp ekranı taşırıyordu: tek satıra dizilir, ortalı nokta ayırır */
  .principles__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.85rem;
    font-size: 0.8125rem;
  }

  .principles__points li + li::before {
    content: '·';
    margin: 0 0.4rem;
  }
}

/* ==== pattern-tile.css ==== */
.pt {
  display: block;
  width: 100%;
  height: 100%;
}

.pt g[class^='pt-'] {
  transform-box: view-box;
  transform-origin: var(--pt-ox) var(--pt-oy);
}

/* Pusula: dört pentagon dışa nefes alır, çekirdek ters yönde büzülür */
.pt[data-animate='true'] .pt-breathe {
  animation: pt-breathe 3.2s ease-in-out infinite alternate;
}
.pt[data-animate='true'] .pt-core {
  animation: pt-core 3.2s ease-in-out infinite alternate;
}

/* Dilim: fırıldak, sürekli yavaş dönüş */
.pt[data-animate='true'] .pt-spin {
  animation: pt-spin 18s linear infinite;
}

/* Yıldız: 90° adımlarla "tıklar"; ortadaki elmas ters yöne */
.pt[data-animate='true'] .pt-tick {
  animation: pt-tick 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.pt[data-animate='true'] .pt-counter {
  animation: pt-tick-rev 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* Oyuk: kenara değdiği için dönmez; kalp atışı gibi büzülür */
.pt[data-animate='true'] .pt-tick-rev {
  animation: pt-pulse 4s ease-in-out infinite alternate;
}

/* Kafes: yavaşça büyür (kenarlar kırpılır, kafes "yaklaşır") */
.pt[data-animate='true'] .pt-spin-rev {
  animation: pt-zoom 7s ease-in-out infinite alternate;
}

@keyframes pt-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
@keyframes pt-core {
  from { transform: scale(1); }
  to { transform: scale(0.86); }
}
@keyframes pt-spin {
  to { transform: rotate(360deg); }
}
@keyframes pt-tick {
  0%, 18% { transform: rotate(0deg); }
  25%, 43% { transform: rotate(90deg); }
  50%, 68% { transform: rotate(180deg); }
  75%, 93% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pt-tick-rev {
  0%, 18% { transform: rotate(0deg); }
  25%, 43% { transform: rotate(-90deg); }
  50%, 68% { transform: rotate(-180deg); }
  75%, 93% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes pt-pulse {
  from { transform: scale(1); }
  to { transform: scale(0.88); }
}
@keyframes pt-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .pt g[class^='pt-'] {
    animation: none !important;
  }
}

/* ==== pattern-stamp.css ==== */
.pstamp {
  position: relative;
  display: block;
  width: var(--pstamp-size, 6.5rem);
  aspect-ratio: 1;
}

.pstamp__tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}