/* Crea Brand Works — hareket katmanı (referans: uifolio digital-agency demosu, kendi uygulamamız).
   Tümü .js sınıfına bağlı: JS kapalıyken ya da "hareketi azalt" (.rm) açıkken sayfa statik XD
   hâlinde kalır. Zamanlamalar referanstan ölçüldü (bkz. PROJECT-MAP > Kritik Kararlar). */

/* ---------- Lenis (yumuşak kaydırma) — kütüphanenin zorunlu stilleri ---------- */

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

html.lenis {
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Sabit header çapalara gelince başlığı örtmesin */
section[id],
footer[id] {
  scroll-margin-top: 96px;
}

/* ---------- Preloader: siyah perde + kavisli SVG çekilişi ---------- */

.loader {
  display: none;
}

.js:not(.rm):not(.loader-seen) .loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: block;
  pointer-events: none;
}

.loader__curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: none;
  height: 110vh;
  fill: #000;
}

.loader__brand {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.loader__brand img {
  width: clamp(150px, 12vw, 206px);
}

/* Gizleme, gösteren kuralla aynı önekle yazılır (aksi hâlde özgüllükte yenilir) */
.js:not(.rm):not(.loader-seen) .loader.is-done {
  display: none;
}

/* Header, perde kalkarken aşağıdan gelir (referans: y 40 → 0, opaklık 0 → 1) */
.js:not(.rm):not(.loader-seen) .site-header__inner {
  opacity: 0;
  transform: translateY(40px);
}

.js:not(.rm):not(.loader-seen) .site-header__inner.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease-enter), transform 500ms var(--ease-enter);
}

/* ---------- Yapışkan header: kaydırınca camlı bar olarak tepeye yapışır ---------- */

.site-header.is-stuck {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding-block: 12px;
  animation: header-in var(--duration-base) var(--ease-enter);
}

/* Bulanıklık sahte katmanda: header'ın kendisine backdrop-filter verilirse
   içindeki position:fixed menü örtüsü header kutusuna hapsolur */
.site-header.is-stuck::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(23 23 23 / .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@keyframes header-in {
  from { transform: translateY(-100%); }
}

@media (min-width: 1280px) {
  .site-header.is-stuck {
    padding-block: calc(15 * var(--u));
  }
}

/* ---------- Alt kenar bulanıklık bandı (referans: 100px, blur 10px, saydam → opak maske) ---------- */

.edge-blur {
  display: none;
}

/* Yalnız masaüstü (uifolio'da mobilde bant yok) */
.js:not(.rm) .edge-blur {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  height: 64px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0), #000);
  mask-image: linear-gradient(rgb(0 0 0 / 0), #000);
  transition: opacity var(--duration-base) var(--ease-move);
}

.edge-blur.is-hidden {
  opacity: 0;
}

@media (min-width: 1280px) {
  .js:not(.rm) .edge-blur {
    display: block;
    height: calc(100 * var(--u));
  }
}

/* ---------- Şerit → kart morfu (yalnız masaüstü; JS .has-morph verir) ---------- */

.project__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.project__strip {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.has-morph .hero__strip {
  visibility: hidden;
}

.has-morph .project {
  overflow: visible;
}

.has-morph .project__frame {
  z-index: 5;
  will-change: transform, width, height, clip-path;
}

.has-morph .project__bar {
  z-index: 2;
  opacity: 0;
  transition: opacity 300ms var(--ease-move);
}

.has-morph .project.is-formed .project__bar {
  opacity: 1;
}

/* ---------- Referans logoları: sırayla zoom-in (animate.css zoomIn, 2 sn) ---------- */

.js:not(.rm) .refs .ref {
  opacity: 0;
}

.js:not(.rm) .refs .ref.is-in {
  animation: zoom-in 2s var(--ease-move) var(--delay, 0ms) both;
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Footer: sonsuz kayan kelime işareti ---------- */

.site-footer__track {
  display: flex;
  width: max-content;
}

.site-footer__track .site-footer__wordmark {
  padding-right: .2em;
}

.js:not(.rm) .site-footer__track {
  animation: marquee 70s linear infinite;
}

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

/* ---------- Durdur/oynat (WCAG 2.2.2): yalnız klavye odağında görünür ----------
   Osman 2026-10-04: ikon fare/dokunmatikte görünmesin. Görünmezken tıklanamaz da
   (pointer-events: none) — yoksa şeridi kimse fark etmeden durduran gizli bir alan olur. */

.site-footer__band,
.refs {
  position: relative;
}

.motion-toggle {
  display: none;
}

.js:not(.rm) .motion-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-move);
}

.js:not(.rm) .motion-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.motion-toggle__play,
.motion-toggle[aria-pressed="true"] .motion-toggle__pause {
  display: none;
}

.motion-toggle[aria-pressed="true"] .motion-toggle__play {
  display: block;
}

/* Önek, akışı başlatan .js:not(.rm) kuralından güçlü olmalı (animation kısaltması play-state'i sıfırlar) */
.js.motion-paused:not(.rm) .site-footer__track {
  animation-play-state: paused;
}

/* ---------- "17+" sayacı: görünmez hedef sayı kutunun genişliğini tutar, sayan rakam sağa yaslı
   üstünde durur. Rakamlar orantılı: "14"/"16", "17"den 20-25px geniş (ölçüldü) → ara değerler
   kutuyu büyütmesin diye akış dışında; sola taşarlar, "+" yerinden oynamaz. ---------- */

.js:not(.rm) .stats__digits[data-count] {
  position: relative;
  display: inline-block;
}

.js:not(.rm) .stats__digits[data-count]::before {
  content: attr(data-count);
  visibility: hidden;
}

.js:not(.rm) .stats__count {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap; /* kutudan geniş ara değer ("14") iki satıra kırılmasın */
}

/* ---------- Blog rozeti: hover'da tarih çıkar, chevron girer ---------- */

.post__date {
  overflow: hidden;
}

.post__date-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
  transition: transform var(--duration-base) var(--ease-move), opacity var(--duration-fast) var(--ease-move);
}

.post__chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 16px;
  opacity: 0;
  transform: translate(-50%, 150%);
  transition: transform var(--duration-base) var(--ease-move), opacity var(--duration-fast) var(--ease-move);
}

.post:hover .post__date-text,
.post:focus-within .post__date-text {
  opacity: 0;
  transform: translateY(-120%);
}

.post:hover .post__chevron,
.post:focus-within .post__chevron {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media (min-width: 1280px) {
  .post__chevron {
    width: calc(10 * var(--u));
    height: calc(16 * var(--u));
  }
}

/* ---------- Hareketi azalt: geçişler kapalı ---------- */

@media (prefers-reduced-motion: reduce) {
  .site-header.is-stuck {
    animation: none;
  }

  .post__date-text,
  .post__chevron {
    transition: none;
  }
}