/* Çelik Motor Yenileme — galeri.css (Atölye page only)
   Angled photo wall + full-screen 3D gallery, ported from Artmim v2 Üretim (T, 28 Oct). No captions under photos. */

/* ── photo wall ─────────────────────────────────────────── */
.galeri-sayfa{background:var(--kagit)}
.duvar-bolum{overflow:hidden;padding:clamp(72px,8vw,130px) 0 clamp(80px,9vw,150px)}
.duvar-bolum + .duvar-bolum{padding-top:0}
.duvar__bas{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px);position:relative;z-index:2}
.duvar__bas h2{margin:0}
.duvar__metin{max-width:58ch;color:var(--metin-2);margin:18px 0 0;font-size:clamp(18px,1.4vw,20px)}
.duvar__yan{display:grid;justify-items:end;gap:8px;font-size:15px;font-weight:600;color:var(--metin-2);text-transform:uppercase;letter-spacing:.08em}
.duvar__yan b{font-weight:700;color:var(--metin);display:flex;align-items:center;gap:10px;font-size:16px}
.duvar__yan b i{width:34px;height:2px;background:var(--kirmizi)}

.duvar{--ara:clamp(10px,1.1vw,16px);--ry0:-10deg;position:relative;perspective:2400px;perspective-origin:50% 30%;container-type:inline-size;width:min(1240px,88vw);margin:0 auto}
.duvar-bolum--ters .duvar{--ry0:10deg}
.duvar__ic{position:relative;z-index:1;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:calc((100cqw - 7 * var(--ara)) / 8 * .667);gap:var(--ara);
  transform:rotateY(var(--ry,var(--ry0))) rotateX(var(--rx,7deg)) rotateZ(-1deg);transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.duvar-bolum--ters .duvar__ic{transform:rotateY(var(--ry,var(--ry0))) rotateX(var(--rx,7deg)) rotateZ(1deg)}
.duvar__kare{pointer-events:auto;position:relative;padding:0;border:0;overflow:hidden;border-radius:4px;background:var(--kagit-2);cursor:zoom-in;
  box-shadow:0 34px 60px -30px rgba(15,16,18,.6),0 10px 20px -12px rgba(15,16,18,.4);
  opacity:0;transform:translateZ(-160px) translateY(40px);
  transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 50ms),opacity .9s calc(var(--i) * 50ms),filter .5s,box-shadow .5s}
.duvar.gorundu .duvar__kare{opacity:1;transform:translateZ(2px)}  /* 3D hit test: tile sits in front of the grid */
.duvar.gorundu .duvar__kare{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s,box-shadow .5s}
.duvar.gorundu .duvar__ic:has(.duvar__kare:hover) .duvar__kare:not(:hover){opacity:.62;filter:saturate(.55)}
.duvar.gorundu .duvar__kare:hover,.duvar.gorundu .duvar__kare:focus-visible{transform:translateZ(70px) scale(1.03);z-index:2;outline:none;
  box-shadow:0 50px 80px -34px rgba(15,16,18,.75),0 16px 30px -14px rgba(15,16,18,.5)}
.duvar__kare:focus-visible::after{box-shadow:inset 0 0 0 3px var(--kirmizi)}
.duvar__kare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.duvar__kare:hover img{transform:scale(1.06)}
.duvar__kare::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);pointer-events:none;border-radius:inherit}
.duvar__hayal{position:absolute;z-index:0;background:center/cover;filter:blur(5px) saturate(.5);opacity:.3;border-radius:4px;pointer-events:none}
.duvar__hayal--0{left:-9%;top:12%;width:9%;aspect-ratio:3/4}
.duvar__hayal--1{left:-7%;top:58%;width:11%;aspect-ratio:4/3}
.duvar__hayal--2{right:-8%;top:2%;width:8%;aspect-ratio:3/4}
.duvar__hayal--3{right:-10%;top:40%;width:12%;aspect-ratio:4/3}
.duvar__hayal--4{right:-6%;top:78%;width:9%;aspect-ratio:3/2}
@media (max-width:760px){
  .duvar{width:auto;margin:0 var(--bosluk);perspective:none}
  .duvar__ic,.duvar-bolum--ters .duvar__ic{grid-template-columns:1fr 1fr;grid-auto-rows:auto;transform:none;gap:8px}
  .duvar__kare{grid-column:auto !important;grid-row:auto !important;aspect-ratio:1/1}
  .duvar__kare:nth-child(5n + 1){grid-column:1 / -1 !important;aspect-ratio:16/10}
  .duvar__hayal{display:none}
  .duvar__yan{justify-items:start}
}
@media (prefers-reduced-motion:reduce){.duvar__kare,.duvar__ic,.duvar__kare img{transition:none !important}}

/* ── full-screen gallery ────────────────────────────────── */
html.isik-acik,html.isik-acik body{overflow:hidden}
.isik-kutu{position:fixed;inset:0;z-index:200;background:rgba(12,13,15,.985);display:grid;place-items:center;opacity:0;visibility:hidden;
  transition:opacity .4s,visibility 0s .4s;color:var(--metin-k)}
.isik-kutu.acik{opacity:1;visibility:visible;transition:opacity .4s}
.isik-kutu > img{max-width:92vw;max-height:84vh;object-fit:contain}
.isik-kutu__sahne{position:absolute;inset:0;display:none;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.isik-kutu__sahne:active{cursor:grabbing}
.isik-kutu__sahne canvas{position:absolute;inset:0;width:100% !important;height:100% !important}
.isik-kutu.kutu-3b .isik-kutu__sahne{display:block}
.isik-kutu.kutu-3b > img{display:none}
.isik-kutu__dugme{position:absolute;z-index:2;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(23,24,27,.82);border:1px solid rgba(255,255,255,.28);color:#fff;transition:background .2s,border-color .2s}
.isik-kutu__dugme:hover,.isik-kutu__dugme:focus-visible{background:var(--kirmizi);border-color:var(--kirmizi);outline:none}
.isik-kutu__dugme .ik{width:22px;height:22px}
.isik-kutu__kapat{top:22px;right:22px}
.isik-kutu__onceki{left:22px;top:50%;transform:translateY(-50%)}
.isik-kutu__onceki .ik{transform:scaleX(-1)}
.isik-kutu__sonraki{right:22px;top:50%;transform:translateY(-50%)}
.isik-kutu__sayac{position:absolute;z-index:2;bottom:26px;left:50%;transform:translateX(-50%);font-size:16px;font-weight:600;letter-spacing:.08em;color:var(--metin-k2);
  padding:6px 14px;border-radius:999px;background:rgba(23,24,27,.82)}
@media (max-width:640px){
  .isik-kutu__dugme{width:48px;height:48px}
  .isik-kutu__onceki,.isik-kutu__sonraki{top:auto;bottom:18px;transform:none}
  .isik-kutu__sayac{bottom:30px}
}

/* ── cursor tag (mouse only) ────────────────────────────── */
.imlec{position:fixed;left:0;top:0;z-index:210;pointer-events:none}
.imlec span{display:block;transform:translate(16px,16px) scale(.6);opacity:0;transform-origin:0 0;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);
  padding:8px 14px;border-radius:999px;background:var(--kirmizi);color:#fff;font-size:15px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.imlec.acik span{opacity:1;transform:translate(16px,16px) scale(1)}