/* Hector Louis - Sube sayfalari - sinematik hareket katmani (sube-sinema.css) v2 */

/* ---- Hero: sinematik, sicak ve krem zemine yumusak gecis ---- */
.ch--photo .ch__shade{background:
  radial-gradient(52% 46% at 50% 47%,rgba(20,12,7,.56),rgba(20,12,7,0) 100%),
  linear-gradient(180deg,rgba(20,12,7,.74) 0%,rgba(28,17,9,.34) 24%,rgba(28,17,9,.26) 50%,rgba(28,17,9,.3) 72%,rgba(236,227,207,0) 85%,rgba(236,227,207,.55) 94%,#ECE3CF 100%)!important}
.ch--photo .ch__media img{filter:brightness(1.04) saturate(1.05)}

.sbx-ghost,.sbx-embers,.sbx-flare,.sbx-lg,.sbx-vig{position:absolute;pointer-events:none}

.sbx-ghost{left:0;right:0;top:52%;margin-top:-.5em;font-size:clamp(110px,21vw,340px);line-height:1;white-space:nowrap;opacity:0;transition:opacity 2.6s ease .5s}
.ch.in .sbx-ghost{opacity:1}
.sbx-ghost__t{display:inline-flex;will-change:transform}
.sbx-ghost span{font-family:"Cinzel",Georgia,serif;font-weight:500;font-size:1em;letter-spacing:.05em;text-transform:uppercase;color:rgba(236,227,207,.045);-webkit-text-stroke:1px rgba(236,227,207,.15);padding-right:.45em}

.sbx-embers{inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:0;transition:opacity 2s ease .8s}
.sbx-m .ch.in .sbx-embers{opacity:1}

/* anamorfik isik + mercek yansimalari */
.sbx-flare{left:0;top:0;width:0;height:0;mix-blend-mode:screen;opacity:0;transition:opacity 2.4s ease 1.8s;will-change:transform}
.sbx-m .ch.in .sbx-flare{opacity:1}
.sbx-flare__s{position:absolute;left:-62vw;top:-1px;width:124vw;height:2px;background:linear-gradient(90deg,rgba(255,190,120,0),rgba(255,190,120,.07) 22%,rgba(255,228,186,.7) 50%,rgba(255,190,120,.07) 78%,rgba(255,190,120,0));filter:blur(.5px)}
.sbx-flare__s::after{content:"";position:absolute;left:34%;right:34%;top:-7px;height:16px;background:radial-gradient(closest-side,rgba(255,204,150,.32),rgba(255,204,150,0))}
.sbx-flare__h{position:absolute;left:-130px;top:-130px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,204,.5),rgba(255,190,120,.14) 34%,rgba(255,170,90,0))}
.sbx-lg{left:0;top:0;border-radius:50%;mix-blend-mode:screen;opacity:0;transition:opacity 2.4s ease 2.2s;will-change:transform}
.sbx-m .ch.in .sbx-lg{opacity:1}
.sbx-lg--a{width:70px;height:70px;margin:-35px 0 0 -35px;background:radial-gradient(closest-side,rgba(255,210,150,0) 55%,rgba(255,210,150,.13) 82%,rgba(255,210,150,0))}
.sbx-lg--b{width:26px;height:26px;margin:-13px 0 0 -13px;background:radial-gradient(closest-side,rgba(150,205,215,.16),rgba(150,205,215,0))}
.sbx-lg--c{width:120px;height:120px;margin:-60px 0 0 -60px;background:radial-gradient(closest-side,rgba(255,196,130,.06),rgba(255,196,130,.03) 70%,rgba(255,196,130,0))}

/* vinyet + projektor titremesi (alt kisim krem gecisi bozulmasin diye maskeli) */
.sbx-vig{inset:0;background:radial-gradient(120% 95% at 50% 42%,rgba(8,5,3,0) 50%,rgba(8,5,3,.55) 100%);-webkit-mask-image:linear-gradient(#000 62%,transparent 88%);mask-image:linear-gradient(#000 62%,transparent 88%)}
.sbx-m .sbx-vig{animation:sbxFlicker 7s steps(1,end) infinite}
@keyframes sbxFlicker{0%{opacity:1}9%{opacity:.86}10%{opacity:1}37%{opacity:.93}38%{opacity:1}63%{opacity:.89}64%{opacity:.97}65%{opacity:1}}

.sbx-m .ch--photo .ch__media img{animation:sbxKen 34s ease-in-out infinite alternate}
@keyframes sbxKen{from{transform:scale(1.07) translate3d(-1.2%,.6%,0)}to{transform:scale(1.18) translate3d(1.4%,-1.3%,0)}}

/* ---- Akan serit ---- */
.sbx-band{position:relative;overflow:hidden;padding:clamp(20px,3.2vw,40px) 0;border-top:1px solid rgba(74,50,32,.13);border-bottom:1px solid rgba(74,50,32,.13);background:linear-gradient(90deg,rgba(201,163,107,.13),rgba(201,163,107,.03) 50%,rgba(201,163,107,.13))}
.sbx-band__t{display:flex;width:max-content;will-change:transform}
.sbx-band__g{display:flex;flex:none;align-items:center;gap:clamp(22px,3vw,52px);padding-right:clamp(22px,3vw,52px)}
.sbx-band span{font-family:"Cinzel",Georgia,serif;font-weight:500;font-size:clamp(30px,5.4vw,82px);line-height:1.05;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#4A3220}
.sbx-band span.o{color:transparent;-webkit-text-stroke:1px rgba(143,111,62,.8)}
.sbx-band i{font-style:normal;font-size:clamp(14px,1.6vw,24px);color:#C9A36B}

/* ---- Bolumler ---- */
.sbx .cw{position:relative;isolation:isolate}
.sbx-sec{position:relative;isolation:isolate}
.sbx-num{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sbx-num span{position:absolute;right:-1.5vw;top:24px;font-family:"Cinzel",Georgia,serif;font-weight:500;font-size:clamp(150px,25vw,380px);line-height:.85;color:rgba(74,50,32,.035);-webkit-text-stroke:1px rgba(74,50,32,.1)}

.sbx-m .sbx-split .sbx-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.16em .03em .18em;margin:-.16em -.03em -.18em}
.sbx-m .sbx-split .sbx-w>span{display:inline-block;transform:translate3d(0,112%,0) rotate(3deg);transform-origin:0 100%;transition:transform 1.15s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0) * 90ms + 100ms)}
.sbx-m .sbx-split.sbx-on .sbx-w>span{transform:none}

.sbx-card.sbx-tilt{transition:transform .16s ease-out,box-shadow .35s!important;box-shadow:0 34px 60px -32px rgba(74,50,32,.38)}
.sbx-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,240,212,.55),rgba(255,240,212,0) 46%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s}
.sbx-tilt .sbx-sheen{opacity:1}

.sbx-aura{position:absolute;top:0;bottom:0;left:0;width:100%;z-index:-1;overflow:hidden;pointer-events:none}
.sbx-aura i{position:absolute;width:56vw;height:56vw;max-width:880px;max-height:880px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,163,107,.2),rgba(201,163,107,0))}
.sbx-aura i:nth-child(1){top:2%;left:-14%}
.sbx-aura i:nth-child(2){top:34%;right:-16%;background:radial-gradient(closest-side,rgba(226,196,143,.24),rgba(226,196,143,0))}
.sbx-aura i:nth-child(3){top:68%;left:18%}
.sbx-m .sbx-aura i{animation:sbxAura 26s ease-in-out infinite alternate}
.sbx-m .sbx-aura i:nth-child(2){animation-duration:32s;animation-delay:-9s}
.sbx-m .sbx-aura i:nth-child(3){animation-duration:38s;animation-delay:-17s}
@keyframes sbxAura{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,-4vw,0) scale(1.12)}100%{transform:translate3d(-4vw,5vw,0) scale(.94)}}

/* ---- Sol ray ---- */
.sbx-rail{position:fixed;left:clamp(18px,2.1vw,36px);top:50%;z-index:40;display:none;flex-direction:column;align-items:center;gap:18px;transform:translateY(-50%);color:rgba(74,50,32,.62);transition:color .6s;pointer-events:none}
.sbx-rail.dark{color:rgba(236,227,207,.72)}
.sbx-rail__l{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Cinzel",Georgia,serif;font-size:10px;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap;transition:opacity .22s}
.sbx-rail__b{position:relative;width:1px;height:120px}
.sbx-rail__b::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.28}
.sbx-rail__b i{position:absolute;inset:0;background:#C9A36B;transform-origin:50% 0;transform:scaleY(0)}
@media (min-width:1280px){.sbx-m .sbx-rail{display:flex}}
.sbx-m .sbx-rail{animation:sbxFade 1.2s ease 2.3s backwards}

/* ---- Acilis sahnesi: siyahtan perde acilir (CSS ile ilk karede baslar) ---- */
@media (prefers-reduced-motion:no-preference){
  .ch--photo::before,.ch--photo::after{content:"";position:absolute;left:0;right:0;z-index:6;background:#0e0906;pointer-events:none}
  .ch--photo::before{top:0;height:0;box-shadow:0 1px 0 rgba(201,163,107,.3);animation:sbxGateT 2.7s cubic-bezier(.65,0,.25,1) backwards}
  .ch--photo::after{bottom:0;height:0;box-shadow:0 -1px 0 rgba(201,163,107,.3);animation:sbxGateB 2.7s cubic-bezier(.65,0,.25,1) backwards}
  .ch--photo .ch__media{animation:sbxFade 1.9s ease .25s backwards}
}
@keyframes sbxGateT{0%,12%{height:calc(50% + 1px)}48%,72%{height:calc(var(--navh0,88px) + 9%)}100%{height:0}}
@keyframes sbxGateB{0%,12%{height:50%}48%,72%{height:9%}100%{height:0}}
@keyframes sbxFade{from{opacity:0}}

/* sayfalar arasi kararma */
.sbx-cut{position:fixed;inset:0;z-index:2147483000;background:#0e0906;opacity:0;pointer-events:none;transition:opacity .42s cubic-bezier(.6,0,.4,1)}
.sbx-leave .sbx-cut{opacity:1;pointer-events:auto}

@media (max-width:640px){
  .sbx-ghost{top:50%}
  .sbx-num span{top:40px;right:-4vw}
  .sbx-aura i{width:90vw;height:90vw}
}
@media (prefers-reduced-motion:reduce){
  .sbx-embers,.sbx-flare,.sbx-lg,.sbx-rail{display:none!important}
  .sbx-aura i,.ch--photo .ch__media img{animation:none!important}
}