:root{
  --navy:#0f1e3d; --gold:#b08d57; --gold-l:#d7bb8a; --white:#fff;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Montserrat',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--navy);color:var(--white);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:-4px}

/* Üst bar */
.top{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:center;align-items:center;padding:20px 32px;pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:block;opacity:0;animation:fade 1.2s var(--ease) 1.6s forwards}
.brand__logo{display:block;height:clamp(96px,15vh,132px);width:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
.lang{position:absolute;right:32px;top:50%;translate:0 -50%;display:flex;gap:8px;align-items:center;font:500 .72rem/1 var(--sans);letter-spacing:.18em;opacity:0;animation:fade 1.2s var(--ease) 1.8s forwards}
.lang button{opacity:.55;padding:6px 2px;transition:opacity .3s}
.lang button:hover,.lang button[aria-pressed="true"]{opacity:1}
.lang button[aria-pressed="true"]{color:var(--gold-l)}

/* Sahne */
.stage{display:flex;height:100vh;height:100svh;width:100%}
.panel{position:relative;flex:1 1 0;min-width:0;display:block;overflow:hidden;
  clip-path:inset(100% 0 0 0);animation:curtain 1.3s var(--ease) calc(var(--i)*.18s + .15s) forwards;
  transition:flex-grow .9s var(--ease)}
.panel+.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.22);z-index:3}

.panel__img{position:absolute;inset:-4%;background-size:cover;background-position:var(--pos,50% 50%);
  transform:scale(1.28);animation:settle 2.4s var(--ease) calc(var(--i)*.18s + .15s) forwards, drift 26s ease-in-out calc(var(--i)*.18s + 2.6s) infinite alternate;
  transition:filter .9s var(--ease),translate .8s ease-out;will-change:transform;translate:var(--mx,0) var(--my,0)}
.panel__shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,30,61,.55) 0%,rgba(15,30,61,0) 26%,rgba(15,30,61,0) 42%,rgba(15,30,61,.82) 100%);
  transition:opacity .9s var(--ease)}

.panel__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(24px,3.4vw,56px) clamp(48px,9vh,96px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.panel__body>*{opacity:0;transform:translateY(24px);animation:rise 1s var(--ease) forwards;animation-delay:calc(var(--i)*.18s + 1.1s)}
.panel__body>*:nth-child(2){animation-delay:calc(var(--i)*.18s + 1.22s)}
.panel__body>*:nth-child(3){animation-delay:calc(var(--i)*.18s + 1.34s)}
.panel__body>*:nth-child(4){animation-delay:calc(var(--i)*.18s + 1.46s)}
.panel__loc{font:500 .72rem/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l)}
.panel__logo{width:clamp(150px,13vw,210px);height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
.panel__tag{font:400 clamp(1.05rem,1.35vw,1.3rem)/1.45 var(--serif);max-width:26ch;color:rgba(255,255,255,.92);
  max-height:0;overflow:hidden;transition:max-height .9s var(--ease)}
.panel__cta{display:inline-flex;align-items:center;gap:14px;font:500 .74rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.55);transition:gap .5s var(--ease),border-color .4s}
.panel__cta svg{transition:transform .5s var(--ease)}

/* Etkileşim (fare olan cihazlar): JS .is-active ekler (hover + klavye odağı) */
@media (hover:hover) and (min-width:821px){
  .stage.has-active .panel{flex-grow:.72}
  .stage.has-active .panel.is-active{flex-grow:1.9}
  .stage.has-active .panel:not(.is-active) .panel__img{filter:saturate(.55) brightness(.72)}
  .panel.is-active .panel__tag{max-height:6em}
  .panel.is-active .panel__cta{gap:22px;border-color:var(--gold-l)}
  .panel.is-active .panel__cta svg{transform:translateX(4px)}
}
@media (hover:none),(max-width:820px){
  .panel__tag{max-height:6em}
}

/* Alt bilgi */
.foot{position:fixed;left:0;right:0;bottom:16px;z-index:10;text-align:center;font:400 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);pointer-events:none;opacity:0;animation:fade 1.2s var(--ease) 2.2s forwards}

/* Mobil: üç yatay şerit */
@media (max-width:820px){
  .top{padding:16px 18px;background:linear-gradient(180deg,rgba(15,30,61,.7),rgba(15,30,61,0))}
  .brand__logo{height:72px}
  .lang{right:16px}
  .stage{flex-direction:column}
  .panel{clip-path:inset(0 100% 0 0);animation-name:curtain-x}
  .panel+.panel::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .panel__body{padding:0 20px 18px;gap:8px}
  .panel__logo{width:112px}
  .panel__loc{font-size:.6rem}
  .panel__tag{display:none}
  .panel__cta{font-size:.62rem;padding-bottom:6px}
  .panel__shade{background:linear-gradient(180deg,rgba(15,30,61,.12) 0%,rgba(15,30,61,.5) 55%,rgba(15,30,61,.85) 100%)}
  .panel__loc{text-shadow:0 1px 8px rgba(0,0,0,.6)}
  .foot{display:none}
}
@media (max-width:820px) and (min-height:760px){
  .panel__logo{width:136px}
  .panel__tag{display:block;font-size:1rem;max-width:32ch}
  .panel__body{gap:10px}
}

/* Keyframes */
@keyframes curtain{to{clip-path:inset(0 0 0 0)}}
@keyframes curtain-x{to{clip-path:inset(0 0 0 0)}}
@keyframes settle{to{transform:scale(1.08)}}
@keyframes drift{from{transform:scale(1.08) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.6%,-1%,0)}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .panel__img{transform:scale(1.06)}
}