/* TPI Proje Galerisi — frontend stilleri
   Renkler ve ölçüler CSS değişkenleriyle; Elementor panelinden üzerine yazılır. */

.tpi-gal{
  --tpg-gold:#C9A227;
  --tpg-hair:#DED8C8;
  --tpg-paper:#F3EFE4;
  --tpg-ink:#1E1E1E;
  --tpg-shade:rgba(30,30,30,.55);
  --tpg-lift:0 18px 40px -28px rgba(30,26,15,.55);
  --tpg-gap:4px;
  --tpg-row:210px;
  --tpg-cols:4;
  --tpg-mrow:130px;
  --tpg-rail:420px;
  --tpg-ratio:4/3;
  --tpg-thumb:104px;
  --tpg-thumbh:78px;
  position:relative;
}
.tpi-gal *,.tpi-gal *::before,.tpi-gal *::after{box-sizing:border-box}
.tpi-gal--empty{
  border:1px dashed var(--tpg-hair);padding:28px;text-align:center;
  color:var(--tpg-ink);font-size:14px;
}

/* ---------- ortak kare ---------- */
.tpi-gal__shot{
  position:relative;overflow:hidden;margin:0;background:var(--tpg-paper);
  isolation:isolate;
}
.tpi-gal[data-lightbox="1"] .tpi-gal__shot{cursor:zoom-in}
.tpi-gal__img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .45s ease;
}
.tpi-gal__shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px var(--tpg-hair);transition:box-shadow .3s ease;
}
.tpi-gal__shot:hover::after,.tpi-gal__shot:focus-visible::after{box-shadow:inset 0 0 0 1px var(--tpg-gold)}
.tpi-gal__shot:focus-visible{outline:2px solid var(--tpg-gold);outline-offset:3px}

.tpi-gal__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(201,162,39,.92),rgba(201,162,39,.35));
  transform:scaleY(0);transform-origin:bottom;opacity:0;mix-blend-mode:multiply;
  transition:transform .45s cubic-bezier(.2,.75,.25,1),opacity .35s ease;
}

.tpi-gal__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 16px 14px;
  background:linear-gradient(to top,var(--tpg-shade),transparent);
  color:#F6F2E7;transform:translateY(8px);opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.tpi-gal__shot:hover .tpi-gal__cap,.tpi-gal__shot:focus-visible .tpi-gal__cap{opacity:1;transform:none}
.tpi-gal__cap-t{display:block;font-size:13px;font-weight:600;line-height:1.35}
.tpi-gal__cap-m{display:block;font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;opacity:.82;margin-top:3px}
@media (hover:none){ .tpi-gal__cap{opacity:1;transform:none} }

/* ---------- hover efektleri ---------- */
.tpi-gal[data-hover="zoom"] .tpi-gal__shot:hover .tpi-gal__img,
.tpi-gal[data-hover="zoom"] .tpi-gal__shot:focus-visible .tpi-gal__img{transform:scale(1.045)}

.tpi-gal[data-hover="color"] .tpi-gal__img{filter:saturate(.28) contrast(1.03)}
.tpi-gal[data-hover="color"] .tpi-gal__shot:hover .tpi-gal__img,
.tpi-gal[data-hover="color"] .tpi-gal__shot:focus-visible .tpi-gal__img{filter:none;transform:scale(1.015)}

.tpi-gal[data-hover="lift"] .tpi-gal__shot{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease}
.tpi-gal[data-hover="lift"] .tpi-gal__shot:hover,
.tpi-gal[data-hover="lift"] .tpi-gal__shot:focus-visible{transform:translateY(-7px);box-shadow:var(--tpg-lift);z-index:4}

.tpi-gal[data-hover="curtain"] .tpi-gal__shot:hover .tpi-gal__veil,
.tpi-gal[data-hover="curtain"] .tpi-gal__shot:focus-visible .tpi-gal__veil{transform:scaleY(1);opacity:1}

.tpi-gal[data-hover="diag"] .tpi-gal__veil{
  transform:none;opacity:1;
  background:linear-gradient(115deg,rgba(201,162,39,.9),rgba(201,162,39,.55));
  clip-path:polygon(100% 0,142% 0,112% 100%,70% 100%);
  transition:clip-path .55s cubic-bezier(.22,.72,.24,1);
}
.tpi-gal[data-hover="diag"] .tpi-gal__shot:hover .tpi-gal__veil,
.tpi-gal[data-hover="diag"] .tpi-gal__shot:focus-visible .tpi-gal__veil{clip-path:polygon(-42% 0,142% 0,112% 100%,-72% 100%)}

.tpi-gal[data-hover="corner"] .tpi-gal__veil{
  background:var(--tpg-gold);transform:none;opacity:.95;
  clip-path:polygon(0 100%,0 100%,0 100%);
  transition:clip-path .5s cubic-bezier(.22,.72,.24,1);
}
.tpi-gal[data-hover="corner"] .tpi-gal__shot:hover .tpi-gal__veil,
.tpi-gal[data-hover="corner"] .tpi-gal__shot:focus-visible .tpi-gal__veil{clip-path:polygon(0 100%,0 30%,100% 68%,100% 100%)}
.tpi-gal[data-hover="corner"] .tpi-gal__cap{background:none;color:var(--tpg-ink)}

.tpi-gal[data-hover="frame"] .tpi-gal__veil{
  background:none;mix-blend-mode:normal;transform:none;opacity:0;
  border:1px solid var(--tpg-gold);inset:50%;
  transition:inset .46s cubic-bezier(.22,.72,.24,1),opacity .22s ease;
}
.tpi-gal[data-hover="frame"] .tpi-gal__shot:hover .tpi-gal__veil,
.tpi-gal[data-hover="frame"] .tpi-gal__shot:focus-visible .tpi-gal__veil{inset:12px;opacity:1}
.tpi-gal[data-hover="frame"] .tpi-gal__shot:hover .tpi-gal__img{transform:scale(1.03)}

.tpi-gal[data-hover="spot"] .tpi-gal__veil{
  transform:none;opacity:0;mix-blend-mode:normal;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(20,18,14,0) 0,rgba(20,18,14,0) 64px,rgba(20,18,14,.62) 150px);
  transition:opacity .3s ease;
}
.tpi-gal[data-hover="spot"] .tpi-gal__shot:hover .tpi-gal__veil{opacity:1}
.tpi-gal[data-hover="spot"] .tpi-gal__shot:hover .tpi-gal__img{filter:saturate(.7)}

/* ---------- Sıra ---------- */
.tpi-gal[data-layout="rows"] .tpi-gal__items{display:flex;flex-wrap:wrap;gap:var(--tpg-gap)}
.tpi-gal[data-layout="rows"] .tpi-gal__items::after{content:"";flex-grow:999999;flex-basis:0}
.tpi-gal[data-layout="rows"] .tpi-gal__shot{
  flex-grow:var(--ar);flex-basis:calc(var(--ar) * var(--tpg-row));min-width:110px;
}
.tpi-gal[data-layout="rows"] .tpi-gal__img{aspect-ratio:var(--ar)}
@media (max-width:600px){
  .tpi-gal[data-layout="rows"] .tpi-gal__shot{flex-basis:calc(var(--ar) * (var(--tpg-row) * .7))}
}

/* ---------- Mozaik ---------- */
.tpi-gal[data-layout="mosaic"] .tpi-gal__items{
  display:grid;gap:var(--tpg-gap);grid-auto-flow:dense;
  grid-template-columns:repeat(var(--tpg-cols),minmax(0,1fr));
  grid-auto-rows:var(--tpg-mrow);
}
.tpi-gal[data-layout="mosaic"] .tpi-gal__shot{width:100%;height:100%}
.tpi-gal[data-layout="mosaic"] .tpi-gal__shot:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.tpi-gal[data-layout="mosaic"] .tpi-gal__shot:nth-child(6n+4){grid-column:span 2}
.tpi-gal[data-layout="mosaic"] .tpi-gal__shot:nth-child(6n+5){grid-row:span 2}
@media (max-width:720px){
  .tpi-gal[data-layout="mosaic"] .tpi-gal__items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tpi-gal[data-layout="mosaic"] .tpi-gal__shot:nth-child(6n+1),
  .tpi-gal[data-layout="mosaic"] .tpi-gal__shot:nth-child(6n+5){grid-row:span 1}
}

/* ---------- Şerit ---------- */
/* Not: snap "mandatory" + CSS scroll-behavior:smooth birlikteyken Chrome
   programatik kaydırmayı iptal ediyor. Snap proximity, yumuşatma JS'ten. */
.tpi-gal[data-layout="rail"] .tpi-gal__items{
  display:flex;gap:var(--tpg-gap);overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--tpg-hair) transparent;
  overscroll-behavior-x:contain;
  /* tema scroll-behavior:smooth uyguluyor; yumuşatmayı JS yaptığı için kapatıyoruz */
  scroll-behavior:auto;
}
.tpi-gal[data-layout="rail"] .tpi-gal__items::-webkit-scrollbar{height:3px}
.tpi-gal[data-layout="rail"] .tpi-gal__items::-webkit-scrollbar-thumb{background:var(--tpg-hair)}
.tpi-gal[data-layout="rail"] .tpi-gal__shot{
  flex:0 0 auto;scroll-snap-align:start;
  height:var(--tpg-rail);width:calc(var(--ar) * var(--tpg-rail));
}
@media (max-width:600px){
  .tpi-gal[data-layout="rail"] .tpi-gal__shot{height:calc(var(--tpg-rail) * .62);width:calc(var(--ar) * var(--tpg-rail) * .62)}
}

/* ---------- Levha ---------- */
.tpi-gal[data-layout="plate"] .tpi-gal__items{display:grid;grid-template-columns:minmax(0,1fr) var(--tpg-thumb);gap:var(--tpg-gap)}
.tpi-gal__plate{
  position:relative;aspect-ratio:var(--tpg-ratio);overflow:hidden;background:var(--tpg-paper);
  grid-column:1;grid-row:1;
}
.tpi-gal[data-lightbox="1"] .tpi-gal__plate{cursor:zoom-in}
.tpi-gal__plate .tpi-gal__shot{
  position:absolute;inset:0;opacity:0;
  transition:opacity .55s ease,transform .9s cubic-bezier(.2,.7,.3,1),clip-path .7s cubic-bezier(.3,.8,.25,1);
}
.tpi-gal__plate .tpi-gal__shot.is-on{opacity:1;z-index:1}
.tpi-gal__plate .tpi-gal__shot::after{box-shadow:inset 0 0 0 1px var(--tpg-hair)}

.tpi-gal__col{position:relative;min-height:0;grid-column:2;grid-row:1}
.tpi-gal__thumbs{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--tpg-gap);
  overflow-y:auto;scrollbar-width:none;scroll-behavior:auto;
}
.tpi-gal__thumbs::-webkit-scrollbar{display:none}
.tpi-gal__thumb{
  appearance:none;border:0;padding:0;background:none;cursor:pointer;position:relative;
  flex:0 0 auto;height:var(--tpg-thumbh);overflow:hidden;
}
.tpi-gal__thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.9);transition:filter .3s ease}
.tpi-gal__thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--tpg-hair);transition:box-shadow .25s ease}
.tpi-gal__thumb:hover img,.tpi-gal__thumb[aria-current="true"] img{filter:none}
.tpi-gal__thumb[aria-current="true"]::after{box-shadow:inset 0 0 0 2px var(--tpg-gold)}
.tpi-gal__thumb:focus-visible{outline:2px solid var(--tpg-gold);outline-offset:2px}

.tpi-gal__scroll{
  position:absolute;left:0;right:0;height:30px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:0;padding:0;cursor:pointer;color:var(--tpg-ink);
  font:inherit;font-size:10px;font-weight:600;letter-spacing:.6px;
  transition:opacity .22s ease,color .18s ease;
}
.tpi-gal__scroll--up{top:0;background:linear-gradient(to bottom,var(--tpg-paper) 45%,transparent)}
.tpi-gal__scroll--down{bottom:0;background:linear-gradient(to top,var(--tpg-paper) 45%,transparent)}
.tpi-gal__scroll:hover{color:var(--tpg-gold)}
.tpi-gal__scroll svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}
.tpi-gal__scroll.is-off{opacity:0;pointer-events:none}

@media (max-width:720px){
  .tpi-gal[data-layout="plate"] .tpi-gal__items{grid-template-columns:minmax(0,1fr)}
  .tpi-gal__plate{grid-column:1;grid-row:1}
  .tpi-gal__col{grid-column:1;grid-row:2;height:var(--tpg-thumbh)}
  .tpi-gal__thumbs{position:static;flex-direction:row;overflow-x:auto;overflow-y:hidden;height:100%}
  .tpi-gal__thumb{width:calc(var(--tpg-thumbh) * 1.34)}
  .tpi-gal__scroll{display:none}
}

/* geçiş efektleri (Levha) */
.tpi-gal[data-trans="slide"] .tpi-gal__plate .tpi-gal__shot{transform:translateX(7%)}
.tpi-gal[data-trans="slide"] .tpi-gal__plate .tpi-gal__shot.is-on{transform:none}
.tpi-gal[data-trans="wipe"] .tpi-gal__plate .tpi-gal__shot{clip-path:inset(0 0 0 100%)}
.tpi-gal[data-trans="wipe"] .tpi-gal__plate .tpi-gal__shot.is-on{clip-path:inset(0 0 0 0)}
.tpi-gal[data-trans="diag"] .tpi-gal__plate .tpi-gal__shot{clip-path:polygon(100% 0,142% 0,112% 100%,70% 100%)}
.tpi-gal[data-trans="diag"] .tpi-gal__plate .tpi-gal__shot.is-on{clip-path:polygon(-42% 0,142% 0,112% 100%,-72% 100%)}
.tpi-gal[data-trans="iris"] .tpi-gal__plate .tpi-gal__shot{clip-path:circle(0% at 50% 50%)}
.tpi-gal[data-trans="iris"] .tpi-gal__plate .tpi-gal__shot.is-on{clip-path:circle(78% at 50% 50%)}
.tpi-gal[data-trans="zoom"] .tpi-gal__plate .tpi-gal__shot{transform:scale(1.09)}
.tpi-gal[data-trans="zoom"] .tpi-gal__plate .tpi-gal__shot.is-on{transform:scale(1)}
.tpi-gal[data-trans="kenburns"] .tpi-gal__plate .tpi-gal__shot{transform:scale(1.02)}
.tpi-gal[data-trans="kenburns"] .tpi-gal__plate .tpi-gal__shot.is-on{transform:scale(1.09);transition:opacity .6s ease,transform 9s linear}
.tpi-gal[data-trans="slices"] .tpi-gal__plate .tpi-gal__shot,
.tpi-gal[data-trans="tiles"] .tpi-gal__plate .tpi-gal__shot{transition:none}

/* parçalı geçiş katmanı */
.tpi-gal__tiles{position:absolute;inset:0;z-index:2;pointer-events:none}
.tpi-gal__tile{
  position:absolute;background-repeat:no-repeat;opacity:0;
  transition:opacity .4s ease,transform .55s cubic-bezier(.22,.72,.24,1);
  will-change:opacity,transform;backface-visibility:hidden;
}
.tpi-gal__tiles--slices .tpi-gal__tile{transform:scaleY(.04);transform-origin:bottom}
.tpi-gal__tiles--tiles .tpi-gal__tile{transform:scale(.86)}
.tpi-gal__tiles.is-in .tpi-gal__tile{opacity:1;transform:none}
.tpi-gal__tiles--tiles .tpi-gal__tile::after{
  content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--tpg-gold);
  opacity:.8;transition:opacity .45s ease;
}
.tpi-gal__tiles--tiles.is-in .tpi-gal__tile::after{opacity:0}

/* ---------- Yığın ---------- */
.tpi-gal[data-layout="stack"] .tpi-gal__items{position:relative;aspect-ratio:var(--tpg-ratio);perspective:1400px;display:block}
.tpi-gal[data-layout="stack"] .tpi-gal__shot{
  position:absolute;inset:0;transform-origin:50% 92%;
  transition:transform .72s cubic-bezier(.22,.72,.24,1),opacity .5s ease,filter .6s ease;
  box-shadow:0 24px 48px -34px rgba(30,26,15,.75);
}
.tpi-gal[data-layout="stack"] .tpi-gal__shot.is-back{filter:brightness(.94) saturate(.8)}
.tpi-gal[data-layout="stack"] .tpi-gal__shot.is-gone{opacity:0;pointer-events:none}

/* ---------- alt kontroller ---------- */
.tpi-gal__foot{display:flex;align-items:center;gap:14px;margin-top:14px}
.tpi-gal__nav,.tpi-gal__play{
  appearance:none;border:1px solid var(--tpg-ink);background:transparent;color:var(--tpg-ink);
  width:38px;height:38px;flex:0 0 auto;cursor:pointer;display:grid;place-items:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.tpi-gal__nav:hover,.tpi-gal__play:hover,.tpi-gal__play[aria-pressed="true"]{background:var(--tpg-gold);border-color:var(--tpg-gold);color:#1E1E1E}
.tpi-gal__nav:focus-visible,.tpi-gal__play:focus-visible{outline:2px solid var(--tpg-gold);outline-offset:2px}
.tpi-gal__nav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tpi-gal__play svg{width:13px;height:13px;fill:currentColor;stroke:none}
.tpi-gal__ico-pause{display:none}
.tpi-gal__play[aria-pressed="true"] .tpi-gal__ico-play{display:none}
.tpi-gal__play[aria-pressed="true"] .tpi-gal__ico-pause{display:block}
.tpi-gal__count{font-size:12px;font-weight:600;color:var(--tpg-ink);font-variant-numeric:tabular-nums;letter-spacing:.6px;opacity:.7}
.tpi-gal__track{flex:1;height:1px;background:var(--tpg-hair);position:relative;overflow:hidden}
.tpi-gal__bar{position:absolute;inset-block:0;left:0;width:0;background:var(--tpg-gold);transition:width .2s ease,left .12s linear}

/* ---------- tam ekran ---------- */
.tpi-gal-lb{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  background:rgba(16,14,10,.94);padding:clamp(16px,4vw,56px);
}
.tpi-gal-lb[hidden]{display:none}
.tpi-gal-lb__img{max-width:100%;max-height:78vh;object-fit:contain;box-shadow:0 30px 80px -40px #000}
.tpi-gal-lb__bar{
  position:absolute;left:0;right:0;bottom:0;padding:18px clamp(16px,4vw,56px);
  display:flex;align-items:baseline;gap:18px;color:#EDE7D9;
  border-top:1px solid rgba(237,231,217,.16);
}
.tpi-gal-lb__t{font-size:14px;font-weight:600}
.tpi-gal-lb__m{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;opacity:.75}
.tpi-gal-lb__n{margin-left:auto;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.75}
.tpi-gal-lb__btn,.tpi-gal-lb__close{
  position:absolute;border:1px solid rgba(237,231,217,.35);background:rgba(0,0,0,.25);
  color:#EDE7D9;cursor:pointer;display:grid;place-items:center;
}
.tpi-gal-lb__btn{top:50%;transform:translateY(-50%);width:46px;height:46px}
.tpi-gal-lb__btn:hover,.tpi-gal-lb__close:hover{background:#C9A227;border-color:#C9A227;color:#1E1E1E}
.tpi-gal-lb__btn:focus-visible,.tpi-gal-lb__close:focus-visible{outline:2px solid #C9A227;outline-offset:2px}
.tpi-gal-lb__btn svg,.tpi-gal-lb__close svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tpi-gal-lb__prev{left:clamp(8px,2vw,24px)}
.tpi-gal-lb__next{right:clamp(8px,2vw,24px)}
.tpi-gal-lb__close{top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);width:40px;height:40px;background:transparent}

@media (prefers-reduced-motion:reduce){
  .tpi-gal *,.tpi-gal *::before,.tpi-gal *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .tpi-gal__items{scroll-behavior:auto}
  .tpi-gal__tiles{display:none}
}