/* =====================================================================
   Sonsuz Duvar (Kareler sayfası). Görüntüleyici stilleri components.css'te.
   Sahne tam ekran; kareler JS ile mutlak konumlanır (translate3d) ve her
   yöne sarar. Kare kabı (.wall__tile) konum + eğim, iç katman (.wall__inner)
   giriş/çıkış animasyonu, görsel (img) iç paralaks taşır — üçü ayrı öğe ki
   GSAP ile döngü aynı özelliğe yazmasın.
   JS yoksa (.wall-on yok) sade ızgara görünür.
   ===================================================================== */

.wall { position: relative; background: var(--bg); color: var(--fg); }

/* ---- JS yokken: ızgara ---- */
.wall__fallback { list-style: none; margin: 0; padding: 32px var(--gutter) 64px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.wall__fallback img { display: block; width: 100%; height: auto; }
html:not(.wall-on) .wall__stage, html:not(.wall-on) .wall__center, html:not(.wall-on) .wall__ui, html:not(.wall-on) .wall__cursor { display: none; }

/* ---- JS açıkken: tam ekran sahne ---- */
.wall-on .wall { height: calc(100svh - var(--header-h)); min-height: 520px; overflow: hidden; }
.wall-on .wall__fallback { display: none; }
/* JS hiç çalışmazsa 3 sn sonra ızgara görünür */
.wall-on .wall:not(.is-ready) .wall__fallback { display: grid; position: absolute; inset: 0; overflow: auto; visibility: hidden; animation: wall-failsafe 0s 3s forwards; }
@keyframes wall-failsafe { to { visibility: visible; } }

.wall__stage {
  position: absolute; inset: 0; overflow: hidden; overflow: clip;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.wall-dragging .wall__stage { cursor: grabbing; }
.wall-cursor .wall__stage, .wall-cursor .wall__stage * { cursor: none; }

.wall__tile {
  position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: none;
  display: block; cursor: inherit; will-change: transform; contain: layout style;
}
.wall__inner { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.wall__inner img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1); will-change: transform; -webkit-user-drag: none;
  transition: opacity var(--d-base) var(--e-settle), filter var(--d-base) var(--e-settle);
}
/* Üstüne gelinen kare renkli kalır, diğerleri griye döner; duvar hareket ederken bu etki kapalı */
.wall__stage:has(.wall__tile:hover) .wall__tile:not(:hover) img { opacity: .8; filter: grayscale(.9); }
.wall.is-moving .wall__tile img { opacity: 1 !important; filter: none !important; }
.wall.is-moving .wall__cap { opacity: 0 !important; }
.wall__tile:focus-visible { outline: none; }
.wall__tile:focus-visible .wall__inner { outline: 3px solid var(--loop); outline-offset: 3px; }
.wall__cap {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  padding: 4px 8px; background: var(--ink); color: #F3F4F1; border-radius: 2px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; translate: 0 6px; transition: opacity var(--d-quick) var(--e-settle), translate var(--d-quick) var(--e-settle);
}
.wall__tile:hover .wall__cap, .wall__tile:focus-visible .wall__cap { opacity: 1; translate: 0 0; }

/* Ortadaki başlık: fotoğrafların üstünde kâğıt etiket (dergi kapağı künyesi gibi) */
.wall__center {
  position: absolute; left: 50%; top: 50%; z-index: 5; translate: -50% -50%;
  display: grid; justify-items: center; gap: 4px; pointer-events: none; text-align: center;
  padding: 16px 30px 14px; background: var(--bg); color: var(--fg);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 22px 60px rgba(20,14,10,.22);
}
.wall__title {
  overflow: hidden; padding: 0 .04em .12em;      /* harfler kutudan doğar; ğ/ç kuyruğu kesilmez */
  font-family: var(--f-display); font-weight: 380; font-stretch: 62.5%;
  font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.02em; white-space: nowrap;
}
.wall__title .ch { display: inline-block; will-change: transform; }
.wall__count { color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; }

/* Alt çubuk: haplar */
.wall__ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px var(--gutter) 18px; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
}
.wall__chips { display: flex; flex-wrap: wrap; gap: 8px; pointer-events: auto; }
.wall__chips .chip { flex: none; white-space: nowrap; min-height: 38px; padding: 0 14px; font-size: .85rem; }
.wall__chips .chip:not([aria-pressed="true"]) { background: var(--bg); }
.chip__n { font-size: .75rem; margin-inline-start: 4px; }
.wall__hint { margin: 0; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

/* Özel imleç (yalnız fare). Dış kap GSAP ile imleci izler (x/y); büyüme/renk iç noktada —
   GSAP, animasyonladığı öğedeki CSS scale/translate'i kendi dönüşümüne katıp sıfırladığı için ayrı. */
.wall__cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.wall__cursor-dot {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #F3F4F1; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; scale: .4; transition: opacity var(--d-quick) var(--e-settle), scale var(--d-base) var(--e-settle), background-color var(--d-quick);
}
.wall-cursor .wall.is-over .wall__cursor-dot { opacity: 1; scale: 1; }
.wall-cursor .wall.is-over .wall__cursor-dot.is-tile { background: var(--loop); scale: 1.12; }
.wall-dragging .wall__cursor-dot { scale: .7 !important; }

@media (max-width: 700px) {
  .wall__hint { display: none; }
  .wall__center { padding: 10px 18px 9px; }
  .wall__ui { padding-bottom: 12px; }
  .wall__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .wall__chips::-webkit-scrollbar { display: none; }
  .wall-on .wall { height: calc(100svh - var(--header-h) - 84px); }   /* alt dok payı */
}