/* Tasarım — Sahne */
:root {
  --display: 'Big Shoulders Display', Impact, sans-serif; --font: 'Inter Tight', system-ui, sans-serif;
  --bg: #070708; --surface: #121214; --line: rgba(255,255,255,.12); --text: #f5f2ea; --muted: #8e8a82;
  --accent: #f5f2ea; --page-tone: #f2b134; --header-h: 84px;
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .45s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.98); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.02); } }
body::after { opacity: .07; }
::selection { background: var(--page-tone); color: #000; }

/* Açılışta sinema perdesinin siyah bantları çekilir */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: linear-gradient(#000 0 50%, transparent 50%) top / 100% 100% no-repeat, linear-gradient(transparent 50%, #000 50%) bottom / 100% 100% no-repeat;
  animation: bars 1.3s .15s cubic-bezier(.7, 0, .2, 1) forwards;
}
@keyframes bars { to { background-size: 100% 0%, 100% 0%; } }

/* Üst bar */
.site-header { mix-blend-mode: difference; }
.brand img { filter: brightness(0) invert(1); width: 140px; }
.site-nav a { font: 500 12px var(--font); letter-spacing: .18em; position: relative; padding: 6px 0; color: #fff; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle span { background: #fff; }
@media (max-width: 760px) {
  .menu-open .site-header { mix-blend-mode: normal; }
  .site-nav { background: #070708; align-items: flex-start; padding: 0 var(--gutter); gap: 4px; }
  .site-nav a { font: 900 clamp(48px, 15vw, 80px)/1 var(--display); letter-spacing: 0; text-transform: uppercase; }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current] { color: var(--page-tone); }
  .site-nav .lang { font: 600 16px var(--font); letter-spacing: .2em; margin-top: 24px; }
}

/* Özel imleç */
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 95; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: #fff; mix-blend-mode: difference; opacity: 0; transform: translate3d(var(--x), var(--y), 0);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s, background .3s;
}
.cursor.on { opacity: 1; }
.cursor.big { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor.play { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--page-tone); mix-blend-mode: normal; }
.cursor::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -5px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #000; opacity: 0; transition: opacity .3s; }
.cursor.play::after { opacity: 1; }
.has-cursor input, .has-cursor textarea { cursor: text; }

/* Arka planda oynayan fragman */
.stage-media, .stage-video { position: absolute; inset: 0; overflow: hidden; }
.stage-video iframe {
  position: absolute; left: 50%; top: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); border: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(1.18); opacity: 0; transition: opacity 1.4s;
}
.stage-video iframe.on { opacity: 1; }
.stage-still { position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; opacity: 0; transform: scale(1.08); transition: opacity 1s, transform 8s linear; }
.stage-still.on { opacity: 1; transform: scale(1); }
.stage-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 70% 40%, transparent 30%, rgba(0,0,0,.65) 100%), linear-gradient(to top, rgba(7,7,8,.95), rgba(7,7,8,0) 60%), linear-gradient(to right, rgba(7,7,8,.85), rgba(7,7,8,.15) 65%), rgba(0,0,0,.18);
}

/* Ana sayfa sahnesi */
.stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; display: flex; align-items: flex-end; padding: 0 var(--gutter) clamp(36px, 7vh, 72px); }
.stage-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: .02em; font: 900 min(7vw, 10.4vh)/.88 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.stage-item {
  display: inline-block; text-decoration: none; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55);
  transition: color .5s, -webkit-text-stroke-color .5s, transform .6s var(--ease); transform-origin: left;
}
.stage-item:hover { -webkit-text-stroke-color: #fff; }
.stage-item.on { color: #fff; -webkit-text-stroke-color: transparent; transform: translateX(.12em); }
.stage-item.on::before { content: ''; display: inline-block; width: .5em; height: .1em; margin: 0 .18em .2em -.62em; vertical-align: middle; background: var(--tone); }
/* Üst boşluk İ noktası için; boşluk üstteki filmin altına bindiği için tıklamayı yalnız bağlantı alır */
.stage-list li { overflow: hidden; padding-top: .3em; margin-top: -.3em; pointer-events: none; }
.stage-list .stage-item { pointer-events: auto; }
.stage-list li .stage-item { animation: rise 1.1s var(--ease) both; }
.stage-list li:nth-child(2) .stage-item { animation-delay: .08s; } .stage-list li:nth-child(3) .stage-item { animation-delay: .16s; }
.stage-list li:nth-child(4) .stage-item { animation-delay: .24s; } .stage-list li:nth-child(5) .stage-item { animation-delay: .32s; }
.stage-list li:nth-child(6) .stage-item { animation-delay: .4s; } .stage-list li:nth-child(7) .stage-item { animation-delay: .48s; }
@keyframes rise { from { transform: translateY(105%); } }
.stage-progress { position: absolute; right: var(--gutter); bottom: clamp(44px, 8vh, 84px); width: clamp(80px, 12vw, 180px); height: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.stage-progress i { position: absolute; inset: 0; background: var(--page-tone); transform: scaleX(0); transform-origin: left; }
.stage.tick .stage-progress i { animation: progress 14s linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }
@media (max-width: 760px) {
  .stage-list { font-size: min(11vw, 6.6vh); }
  .stage-item.on::before { display: none; }
  .stage-item.on { transform: none; }
  .stage-progress { left: var(--gutter); right: auto; bottom: 22px; }
}
.page-home .site-footer { margin-top: 0; }

/* Projeler: açılan afiş perdeleri */
.s-label { position: absolute; z-index: 2; top: calc(var(--header-h) + 8px); left: var(--gutter); margin: 0; font: 600 12px var(--font); letter-spacing: .24em; color: var(--muted); }
.reels { display: flex; height: 100vh; height: 100svh; min-height: 560px; padding: calc(var(--header-h) + 48px) var(--gutter) 32px; gap: 8px; }
.reel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 6px; text-decoration: none; transition: flex-grow .9s var(--ease); background: #111; }
.reel:hover, .reel:focus-visible { flex-grow: 4.2; }
.reel-img { position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; filter: grayscale(1) brightness(.55); transform: scale(1.12); transition: filter .8s, transform 1.2s var(--ease); }
.reel:hover .reel-img, .reel:focus-visible .reel-img { filter: none; transform: scale(1); }
.reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 50%); pointer-events: none; }
.reel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 4px; background: var(--tone); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.reel:hover::before { transform: scaleX(1); }
.reel-title {
  position: absolute; z-index: 1; left: 50%; bottom: 28px; white-space: nowrap; font: 900 clamp(26px, 2.6vw, 44px)/1 var(--display); text-transform: uppercase;
  writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); transition: opacity .3s;
}
.reel:hover .reel-title { writing-mode: horizontal-tb; transform: none; left: 28px; font-size: clamp(36px, 4.4vw, 76px); }
@media (max-width: 860px) {
  .reels { flex-direction: column; height: auto; min-height: 0; }
  .reel { flex: none; height: 46vw; min-height: 180px; }
  .reel-img { filter: none; transform: none; }
  .reel-title, .reel:hover .reel-title { writing-mode: horizontal-tb; transform: none; left: 20px; bottom: 18px; font-size: clamp(30px, 8vw, 48px); }
}
.page-portfolio .site-footer { margin-top: 48px; }

/* Film sayfası */
.s-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; display: flex; align-items: flex-end; padding: 0 var(--gutter) clamp(40px, 8vh, 90px); }
.s-hero.short { height: 72vh; min-height: 420px; }
.s-hero-still { position: absolute; inset: -12% 0; background: var(--bg) center / cover no-repeat; }
.s-hero-title { position: relative; margin: 0; max-width: 12ch; font: 900 clamp(64px, 12vw, 220px)/.84 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.s-hero-title::after { content: ''; display: block; width: 1.2em; height: .06em; margin-top: .22em; background: var(--tone, var(--page-tone)); }
.s-scroll { position: absolute; right: var(--gutter); bottom: clamp(40px, 8vh, 90px); width: 1px; height: 90px; background: rgba(255,255,255,.25); overflow: hidden; }
.s-scroll::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: drip 2s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }
.s-story { display: grid; grid-template-columns: minmax(200px, .8fr) 2fr; gap: clamp(32px, 6vw, 110px); padding: clamp(80px, 12vw, 180px) var(--gutter) 0; align-items: start; }
.s-story-side { position: sticky; top: calc(var(--header-h) + 24px); }
.s-poster { width: 100%; height: auto; max-width: 360px; border-radius: 4px; box-shadow: 0 40px 80px rgba(0,0,0,.6); }
.story h2 { font: 600 12px var(--font); letter-spacing: .24em; color: var(--tone, var(--muted)); margin: 0 0 28px; text-transform: uppercase; }
.story p { font: 400 clamp(22px, 2.3vw, 36px)/1.38 var(--font); letter-spacing: -.015em; margin: 0 0 1em; color: #e9e5dc; }
@media (max-width: 860px) { .s-story { grid-template-columns: 1fr; } .s-story-side { position: static; } .s-poster { max-width: 240px; } }
.s-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: clamp(24px, 3vw, 48px); padding: clamp(80px, 10vw, 160px) var(--gutter) 0; }
.yt { border-radius: 6px; }
.yt img { opacity: .7; filter: grayscale(.4); transition: opacity .5s, filter .5s, transform .8s var(--ease); }
.yt:hover img { opacity: 1; filter: none; }
.yt button::before { background: var(--tone, #fff); width: 96px; height: 96px; margin: -48px; }
.yt button::after { border-color: transparent transparent transparent #000; }
.has-cursor .yt button::before, .has-cursor .yt button::after { opacity: 0; }
.video figcaption { color: var(--muted); letter-spacing: .22em; }
/* Künye: film sonu jeneriği gibi ortalı iki sütun */
.s-credits { display: grid; justify-items: center; gap: 72px; padding: clamp(100px, 12vw, 200px) var(--gutter) 0; text-align: center; }
.credit-block { width: min(720px, 100%); }
.credit-block h3 { font: 900 clamp(28px, 3vw, 44px)/1 var(--display); letter-spacing: .04em; color: var(--tone, #fff); margin: 0 0 28px; }
.credit-block dl { margin: 0 0 28px; }
.credit-block dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 8px; font-size: 14px; letter-spacing: .06em; }
.credit-block dt { display: block; text-align: right; color: var(--muted); }
.credit-block dd { display: block; text-align: left; }
.credit-block dl div.solo { grid-template-columns: 1fr; }
.credit-block dl div.solo dd { text-align: center; }
@media (max-width: 520px) { .credit-block dl div { grid-template-columns: 1fr; gap: 2px; } .credit-block dt, .credit-block dd { text-align: center; } }
.prev-next { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(100px, 12vw, 200px); border-top: 1px solid var(--line); }
.pn { position: relative; display: grid; align-content: end; gap: 10px; min-height: 46vh; padding: 40px var(--gutter); overflow: hidden; text-decoration: none; }
.pn + .pn, .pn + span + .pn { border-left: 1px solid var(--line); }
.pn.next { text-align: right; }
.pn-img { position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; opacity: 0; transform: scale(1.1); transition: opacity .8s, transform 1.4s var(--ease); }
.pn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.2)); opacity: 0; transition: opacity .8s; }
.pn:hover .pn-img, .pn:hover::after { opacity: 1; transform: none; }
.pn > :not(.pn-img) { position: relative; z-index: 1; }
.pn-label { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.pn-title { font: 900 clamp(40px, 6vw, 110px)/.88 var(--display); text-transform: uppercase; transition: color .4s; }
.pn:hover .pn-title { color: var(--tone); }
@media (max-width: 700px) { .prev-next { grid-template-columns: 1fr; } .pn { min-height: 30vh; } .pn + .pn, .pn + span + .pn { border-left: 0; border-top: 1px solid var(--line); } }
.page-film .site-footer { margin-top: 0; }

/* İletişim */
.s-contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; padding: 56px var(--gutter); }
@media (max-width: 760px) { .s-contact { grid-template-columns: 1fr; } }
.glass-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(28px, 4vw, 56px); }
.contact-info h2 { font: 900 clamp(40px, 5vw, 72px)/.9 var(--display); text-transform: uppercase; }
.contact-form button { background: var(--text); color: #000; border-radius: 999px; }
.map { padding: 0 var(--gutter); }
.map iframe { border-radius: 10px; }

/* Alt bilgi */
.site-footer { border-top: 1px solid var(--line); }
.legal { color: #e9e5dc; }