:root {
  --night: #190e11; --dark: #110c0e; --paper: #f4eadb;
  --muted: #c0aca0; --fire: #edaa6f; --line: #4b3633;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: var(--night); color: var(--paper); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
body.media-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--fire); outline-offset: 6px; }
button:disabled { cursor: default; opacity: .4; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, p, figure { margin: 0; }
h2 { font: 400 clamp(42px,5.2vw,76px)/1.04 Georgia, serif; letter-spacing: -.04em; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; top: -70px; left: 16px; padding: 15px 20px; background: var(--paper); color: var(--dark); }
.skip:focus { top: 12px; }

/* Tek logo, kampın ortasından menüye JavaScript koordinatlarıyla taşınır. */
.site-header { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 82px; pointer-events: none; }
.site-header::before { content: ""; position: absolute; inset: 0; background: rgba(17,12,14,.93); border-bottom: 1px solid rgba(244,234,219,.08); opacity: 0; transition: opacity .3s; }
.site-header.scrolled::before { opacity: 1; }
.brand {
  position: absolute; top: 0; left: 0; width: var(--brand-width,78vw); pointer-events: auto;
  transform: translate3d(var(--brand-x,11vw),var(--brand-y,22svh),0) scale(var(--brand-scale,1));
  transform-origin: top left; will-change: transform;
}
.brand img { width: 100%; height: auto; }
.nav { position: absolute; top: 19px; right: 5vw; display: flex; align-items: center; gap: 30px; pointer-events: auto; animation: nav-enter .8s .12s both; }
.nav a, .nav-trailer { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 3px; font-size: 12px; letter-spacing: .04em; background: transparent; }
.nav-trailer { color: var(--fire); gap: 8px; }
.nav a:hover, .nav-trailer:hover { color: #ffcd99; }

/* Her sahne, tam ekran bir pencerede kendi kaydırma payını kullanır. */
.hero { position: relative; height: 150svh; background: #2b1417; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.hero-stage { background: #2b1417; }
.hero-base { position: absolute; inset: 0; z-index: -3; will-change: transform; }
.hero-base img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 50%; }
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,rgba(23,10,14,.22),transparent 35%,rgba(23,10,14,.15) 60%,#190e11 100%),
    linear-gradient(90deg,rgba(22,10,13,.12),transparent 48%,rgba(22,10,13,.1));
}
.scene-foreground { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translate3d(0,var(--near-y,0px),0); will-change: transform; }
.scene-foreground img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero-forest { opacity: .95; }
.fire-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at var(--fire-x,62%) var(--fire-y,51%),rgba(236,145,65,.13),transparent 30%);
  animation: fire-breathe 5.5s ease-in-out infinite;
}
.embers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.embers i { position: absolute; left: calc(var(--fire-x,63%) + var(--offset-x,0px)); top: calc(var(--fire-y,48%) + var(--offset-y,0px)); width: 2px; height: 2px; background: #ffe1ac; opacity: 0; animation: ember 10s var(--delay,0s) ease-out infinite; }
.embers i:nth-child(1) { --offset-x: -8px; --offset-y: 3px; --delay: -1s; }
.embers i:nth-child(2) { --offset-x: 6px; --offset-y: -4px; --delay: -4s; }
.embers i:nth-child(3) { --offset-x: -12px; --offset-y: 5px; --delay: -7s; }
.embers i:nth-child(4) { --offset-x: 10px; --offset-y: 2px; --delay: -6s; }
.embers i:nth-child(5) { --offset-x: 2px; --offset-y: -6px; --delay: -8s; }
.embers i:nth-child(6) { --offset-x: -4px; --offset-y: -3px; --delay: -3s; }
.media-open .embers i, .media-open .fire-glow { animation-play-state: paused; }
.hero-copy { position: absolute; z-index: 6; top: var(--copy-y,62svh); left: 0; right: 0; width: min(860px,88vw); margin-inline: auto; text-align: center; will-change: opacity,transform; }
.tagline { font-size: 11px; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; color: #e2cfbc; }
.hero-promise { font: 400 clamp(20px,2vw,30px)/1.3 Georgia, serif; margin-top: 21px; color: #f5e5d2; letter-spacing: -.015em; }
.actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.button { display: inline-flex; min-width: 200px; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; font-size: 14px; font-weight: 700; transition: background .2s; }
.button span, .button small { font-size: 10px; font-weight: 400; white-space: nowrap; }
.button b { font-weight: 400; }
.primary { background: var(--fire); color: #28130d; }
.primary:hover { background: #ffca97; }
.secondary { background: rgba(27,14,17,.44); border: 1px solid #b48a70; }
.secondary:hover { background: #533029; }
.trailer-link { display: inline-flex; align-items: center; justify-content: center; gap: 11px; background: transparent; padding: 8px 12px; min-height: 44px; font-size: 11px; margin-top: 15px; }
.trailer-link:hover { color: var(--fire); }
.play-icon { display: grid; place-items: center; width: 27px; height: 27px; padding-left: 2px; border: 1px solid #af8166; border-radius: 50%; font-size: 9px; }
.scroll-hint { position: absolute; z-index: 6; bottom: 27px; left: 0; right: 0; text-align: center; color: #d4baaa; font-size: 8px; letter-spacing: .22em; pointer-events: none; }

.chapter { position: relative; height: 145svh; }
.build { background: #283026; }
.reclaim { background: #3a231a; }
.threat { background: #111923; }
.chapter-stage { background: inherit; }
.scene-base { position: absolute; inset: 0; z-index: -3; }
.scene-base img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(0,var(--scene-y,0px),0) scale(var(--scene-scale,1.07)); will-change: transform; }
.scene-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.build .scene-wash {
  background: linear-gradient(90deg,rgba(16,23,17,.72),transparent 72%),
    linear-gradient(0deg,rgba(14,22,16,.86),rgba(14,22,16,.24) 36%,transparent 78%);
}
.reclaim .scene-wash {
  background: linear-gradient(270deg,rgba(35,16,12,.79),transparent 70%),
    linear-gradient(0deg,rgba(31,16,12,.85),rgba(31,16,12,.19) 40%,transparent 76%);
}
.threat .scene-wash {
  background: linear-gradient(90deg,rgba(9,14,23,.84),transparent 72%),
    linear-gradient(0deg,rgba(8,12,22,.9),rgba(8,12,22,.23) 42%,transparent 80%);
}
.scene-atmosphere { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 60% 84%,rgba(194,210,219,.08),transparent 65%); opacity: var(--fog-opacity,.55); transform: translate3d(0,var(--fog-y,0px),0); }
.build .scene-atmosphere { background: radial-gradient(ellipse at 45% 80%,rgba(226,184,105,.09),transparent 66%); }
.reclaim .scene-atmosphere { background: radial-gradient(ellipse at 65% 78%,rgba(209,133,80,.1),transparent 64%); }
.reclaim .scene-foreground { top: auto; left: -8vw; right: auto; bottom: -4svh; width: 50vw; height: 84svh; }
.reclaim .scene-foreground img { object-fit: contain; object-position: left bottom; }
.threat .scene-foreground { top: auto; bottom: -7svh; height: 70svh; mask-image: linear-gradient(0deg,#000 68%,transparent); }
.threat .scene-foreground img { filter: saturate(.48) brightness(.7); }
.chapter-copy { position: absolute; z-index: 5; left: 6vw; bottom: 20%; width: min(550px,45vw); }
.reclaim .chapter-copy { left: auto; right: 6vw; }
.eyebrow { font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--fire); }
.chapter-copy h2 { margin-top: 22px; }
.chapter-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.7; color: #e4d3c2; margin-top: 23px; }
.build .eyebrow { color: #edc78a; }
.reclaim .eyebrow { color: #f0b07d; }
.threat .eyebrow { color: #b8ccd7; }
.threat .chapter-copy > p:not(.eyebrow) { color: #c6cbd3; }
.scene-number { display: block; font-size: 10px; line-height: 1.5; letter-spacing: .16em; color: rgba(244,234,219,.62); }
.chapter-stage > .scene-number { position: absolute; z-index: 5; top: 15svh; right: 6vw; }

/* Galeri doğal yatay kaydırılır; dikey kaydırma sahiplendirilmez. */
.media { background: #140d0f; padding: 70px 0 110px; scroll-margin-top: 82px; }
.media-heading { padding: 0 6vw; margin-bottom: 38px; }
.media-heading .eyebrow { color: #bb9d89; }
.media-heading h2 { margin-top: 16px; font-size: clamp(38px,4.2vw,62px); }
.gallery-track { display: flex; gap: 24px; padding: 0 6vw 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 6vw; scrollbar-width: thin; scrollbar-color: #805744 transparent; }
.gallery-track::-webkit-scrollbar { height: 4px; }
.gallery-track::-webkit-scrollbar-thumb { background: #805744; border-radius: 3px; }
.gallery-shot { flex: 0 0 70vw; width: 70vw; min-width: 0; display: block; padding: 0; text-align: left; background: transparent; scroll-snap-align: start; cursor: zoom-in; }
.gallery-shot picture { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.gallery-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gallery-shot:hover img { transform: scale(1.018); }
.gallery-shot > span, .gallery-shot figcaption { display: flex; justify-content: space-between; gap: 18px; font: 18px/1.4 Georgia,serif; padding: 17px 0 5px; color: #d9c7b6; }
.gallery-shot b { font: 16px Arial,sans-serif; color: var(--fire); }

.trailer-section { background: var(--dark); }
.trailer-poster { position: relative; display: block; width: 100%; aspect-ratio: 16/9; min-height: 75svh; padding: 0; overflow: hidden; background: var(--dark); text-align: left; }
.trailer-poster picture { position: absolute; inset: 0; }
.trailer-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.trailer-shade, .poster-shade { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(15,8,10,.88),rgba(15,8,10,.11) 64%,rgba(15,8,10,.1)); }
.poster-play { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 94px; height: 94px; border: 1px solid rgba(244,234,219,.75); border-radius: 50%; background: rgba(18,12,15,.37); display: grid; place-items: center; padding-left: 4px; font-size: 22px; transition: background .2s,border-color .2s; }
.trailer-poster:hover .poster-play { background: var(--fire); border-color: var(--fire); color: #28130d; }
.poster-copy { position: absolute; bottom: 9svh; left: 6vw; right: 16vw; }
.poster-copy span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--fire); margin-bottom: 18px; }
.poster-copy strong { display: block; font: 400 clamp(43px,5.2vw,76px)/1.08 Georgia,serif; letter-spacing: -.04em; }
.poster-duration { position: absolute; right: 6vw; bottom: 9svh; font-size: 11px; letter-spacing: .1em; color: #e3cbb7; }

.join { position: relative; min-height: 650px; height: 90svh; display: grid; place-items: center; padding: 80px 6vw; isolation: isolate; overflow: hidden; background: #211014; }
.join-scene { position: absolute; inset: 0; z-index: -3; }
.join-scene picture { width: 100%; height: 100%; }
.join-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 48%; }
.ambient-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 25% 50%; opacity: 0; transition: opacity 1.2s; }
.ambient-loop.playing, .join-scene.playing .ambient-loop { opacity: 1; }
.join::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(20,10,13,.65),rgba(28,11,14,.65) 55%,#140d0f),linear-gradient(90deg,rgba(23,11,14,.27),transparent 60%); }
.join-copy { text-align: center; width: min(780px,100%); }
.join-copy h2 { font-size: clamp(42px,5.5vw,80px); }
.join-copy .eyebrow { margin-bottom: 20px; }
.join-copy .actions { max-width: 440px; margin: 34px auto 0; }
.platform-note { font-size: 10px; line-height: 1.7; color: #b9a597; letter-spacing: .035em; margin-top: 25px; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #140d0f; padding: 20px 6vw; font-size: 10px; color: #a58c7d; }
footer p span { margin-left: 20px; }
footer a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 0; }
footer a:hover { color: var(--fire); }

/* Ortak video ve görüntü penceresi; bütün gizli içerikler [hidden] ile kapanır. */
.viewer { position: fixed; width: min(1100px,94vw); max-width: 94vw; max-height: 95svh; overflow: auto; padding: 0 12px 12px; border: 1px solid var(--line); background: var(--dark); color: var(--paper); }
.viewer::backdrop { background: rgba(9,5,8,.93); }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 7px 3px; }
.viewer-header p { font-size: 11px; color: var(--muted); letter-spacing: .025em; }
.viewer .close { min-width: 44px; min-height: 44px; padding: 8px; background: transparent; font-size: 12px; }
.viewer .close:hover { color: var(--fire); }
.viewer-video { display: block; width: 100%; max-height: 72svh; background: #000; }
.viewer-figure { margin: 0; }
.viewer .full-image { width: 100%; object-fit: contain; max-height: 72svh; }
.viewer-controls { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 14px; padding-top: 12px; }
.viewer-controls button { width: 44px; min-height: 44px; border: 1px solid var(--line); background: transparent; font-size: 20px; }
.viewer-controls button:hover:not(:disabled) { background: #3b2421; color: var(--fire); }
.viewer .caption { font-size: 12px; line-height: 1.6; text-align: center; color: var(--muted); padding: 0 8px; }

/* Girişler logoyu veya gerçek ateşle hizasını değiştirmez. */
.hero-copy > .tagline, .hero-copy > .hero-promise, .hero-copy > .actions, .hero-copy > .trailer-link { animation: copy-enter 1s both; }
.hero-copy > .tagline { animation-delay: .1s; }
.hero-copy > .hero-promise { animation-delay: .2s; }
.hero-copy > .actions { animation-delay: .3s; }
.hero-copy > .trailer-link { animation-delay: .4s; }
.reveal { opacity: 1; transform: none; }
.js .reveal { transition: opacity .8s,transform .8s; }
.js .reveal.visible { opacity: 1; transform: none; }
@keyframes copy-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nav-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fire-breathe { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes ember { 0% { opacity: 0; transform: translate(0,0); } 18% { opacity: .6; } 80% { opacity: .16; } 100% { opacity: 0; transform: translate(18px,-105px); } }

@media (max-width: 1100px) {
  .chapter-copy { width: 48vw; }
  .chapter-copy h2 { font-size: clamp(43px,5.8vw,64px); }
  .chapter-copy > p:not(.eyebrow) { font-size: 14px; }
  .hero-promise { font-size: 24px; }
}
@media (max-width: 760px) {
  .site-header { height: 72px; }
  .nav { top: 14px; right: 6vw; gap: 19px; }
  .nav a, .nav-trailer { font-size: 10px; }
  .hero { height: 135svh; }
  .hero-copy { width: 88vw; }
  .tagline { font-size: 9px; letter-spacing: .15em; }
  .hero-promise { font-size: 21px; line-height: 1.35; margin-top: 18px; }
  .actions { gap: 9px; margin-top: 20px; }
  .button { flex: 1; min-width: 0; min-height: 50px; padding: 14px 12px; gap: 9px; font-size: 13px; }
  .button span, .button small { font-size: 10px; }
  .trailer-link { margin-top: 12px; }
  .scroll-hint { bottom: 24px; font-size: 7px; letter-spacing: .16em; }
  .chapter { height: 125svh; }
  .chapter-copy { left: 7vw; bottom: 20%; width: 82vw; }
  .reclaim .chapter-copy { left: auto; right: 7vw; }
  .chapter-copy h2 { font-size: clamp(43px,10.8vw,58px); margin-top: 17px; }
  .chapter-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.7; margin-top: 20px; max-width: 330px; }
  .eyebrow { font-size: 8px; letter-spacing: .18em; }
  .chapter-stage > .scene-number { top: 15svh; right: 7vw; font-size: 9px; }
  .build .scene-wash { background: linear-gradient(0deg,rgba(14,22,16,.89),rgba(14,22,16,.58) 42%,rgba(14,22,16,.05) 76%); }
  .reclaim .scene-wash { background: linear-gradient(0deg,rgba(31,16,12,.9),rgba(31,16,12,.6) 42%,rgba(31,16,12,.04) 78%); }
  .threat .scene-wash { background: linear-gradient(0deg,rgba(8,12,22,.94),rgba(8,12,22,.57) 45%,rgba(8,12,22,.04) 80%); }
  .reclaim .scene-foreground { left: -20vw; bottom: -5svh; width: 82vw; height: 68svh; }
  .hero-forest img, .forest-deep img { object-fit: contain; object-position: center bottom; }
  .threat .scene-foreground { height: 50svh; }
  .media { padding: 65px 0 75px; }
  .media-heading { margin-bottom: 28px; }
  .media-heading h2 { font-size: 39px; }
  .gallery-track { gap: 2vw; padding-bottom: 12px; }
  .gallery-shot { flex-basis: 88vw; width: 88vw; }
  .gallery-shot > span, .gallery-shot figcaption { font-size: 16px; padding-top: 15px; }
  .poster-play { width: 70px; height: 70px; font-size: 18px; top: 42%; }
  .poster-copy { left: 7vw; right: 10vw; bottom: 11svh; }
  .poster-copy span { font-size: 8px; letter-spacing: .16em; margin-bottom: 17px; }
  .poster-copy strong { font-size: 47px; }
  .poster-duration { right: 7vw; bottom: 6svh; font-size: 10px; }
  .join { min-height: 570px; height: 86svh; }
  .join-copy h2 { font-size: 49px; }
  .join-copy .actions { margin-top: 30px; }
  .platform-note { font-size: 9px; letter-spacing: .015em; }
  footer { padding: 18px 6vw; flex-wrap: wrap; font-size: 9px; }
  footer p span { display: none; }
  .viewer { padding-inline: 8px; padding-bottom: 8px; }
  .viewer-header { gap: 12px; }
  .viewer-header p, .viewer .caption { font-size: 10px; }
  .viewer .caption { padding-inline: 2px; }
  .viewer-controls { gap: 8px; }
}
@media (max-width: 380px) {
  .nav { gap: 15px; }
  .hero-promise { font-size: 20px; }
  .button { padding-inline: 10px; gap: 7px; font-size: 12px; }
  .poster-copy strong { font-size: 43px; }
  .join-copy h2 { font-size: 45px; }
}
@media (max-width: 340px) {
  .button { padding-inline: 8px; gap: 5px; font-size: 11px; }
  .hero-promise { font-size: 19px; }
  .tagline { font-size: 8px; letter-spacing: .12em; }
  .chapter-copy h2 { font-size: 40px; }
  .chapter-copy > p:not(.eyebrow) { font-size: 12px; }
  .poster-copy strong { font-size: 40px; }
  .join-copy h2 { font-size: 42px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .hero-promise { margin-top: 16px; font-size: 23px; }
  .hero-copy .actions { margin-top: 18px; }
  .trailer-link { margin-top: 10px; }
  .chapter-copy { bottom: 16%; }
}

/* Azaltılmış harekette aynı hikâye sabit sahnelerle normal akışta okunur. */
.reduced-motion { scroll-behavior: auto; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation: none !important; transition: none !important; }
.reduced-motion .hero, .reduced-motion .chapter { height: auto; }
.reduced-motion .stage { position: relative; top: auto; height: 100svh; }
.reduced-motion .hero-base, .reduced-motion .scene-base img, .reduced-motion .scene-foreground, .reduced-motion .scene-atmosphere { transform: none !important; will-change: auto; }
.reduced-motion .hero-copy { opacity: 1 !important; transform: none !important; will-change: auto; }
.reduced-motion .reveal { opacity: 1; transform: none; }
.reduced-motion .embers, .reduced-motion .fire-glow, .reduced-motion .ambient-loop { display: none; }
.reduced-motion .brand { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero, .chapter { height: auto; }
  .stage { position: relative; top: auto; height: 100svh; }
  .hero-base, .scene-base img, .scene-foreground, .scene-atmosphere { transform: none !important; will-change: auto; }
  .hero-copy { opacity: 1 !important; transform: none !important; will-change: auto; }
  .reveal { opacity: 1; transform: none; }
  .embers, .fire-glow, .ambient-loop { display: none; }
  .brand { will-change: auto; }
}