:root{
  --canvas:#12100d;
  --panel:#1c1712;
  --accent:#ff6a2a;
  --accent-hover:#ff8a52;
  --accent-muted:rgba(255,106,42,.16);
  --text-secondary:#beb2a3;
  --text-primary:#f5ede2;
  --ease:cubic-bezier(.22,.7,.28,1);
  --ease-soft:cubic-bezier(.4,.05,.2,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--text-primary);font-family:"Manrope",system-ui,sans-serif;
  line-height:1.6;opacity:0;transition:opacity .8s var(--ease-soft)}
body.arrived{opacity:1}
h1,h2,h3{font-family:"Anton",sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.08}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.skip{position:fixed;top:-48px;left:16px;z-index:99;background:var(--accent);color:#1a0d05;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus-visible{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env .glow{position:absolute;left:-20%;bottom:-45%;width:140%;height:80%;
  background:radial-gradient(ellipse 60% 55% at 50% 100%,rgba(255,106,42,.10) 0%,rgba(255,106,42,.035) 45%,transparent 72%);
  animation:glowdrift 96s var(--ease-soft) -12s infinite alternate}
@keyframes glowdrift{from{transform:translateX(-4%) scale(1)}to{transform:translateX(4%) scale(1.08)}}
.env .grain{position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.env .fxsmoke{position:absolute;inset:-12%;background-repeat:no-repeat;mix-blend-mode:screen;pointer-events:none}
.env .fx1{background-image:url("fx-duman-1.webp");background-size:48%;background-position:88% 8%;opacity:.2;
  animation:fxdrift1 150s var(--ease-soft) -50s infinite alternate}
@keyframes fxdrift1{from{transform:translate(-3%,1%) scale(1)}to{transform:translate(4%,-3%) scale(1.12)}}
.env .fx2{background-image:url("fx-duman-2.webp");background-size:66%;background-position:4% 82%;opacity:.15;
  animation:fxdrift2 190s var(--ease-soft) -120s infinite alternate}
@keyframes fxdrift2{from{transform:translate(3%,0) scale(1.04)}to{transform:translate(-4%,2%) scale(1.15)}}
/* kıvılcımlar: köze yakın, küçük ölçekte, yukarı doğru sönerek */
.env .fxsparks{position:absolute;left:-10%;right:-10%;bottom:0;height:62vh;
  background-image:url("fx-kivilcim.webp");background-size:38%;background-position:center bottom;
  mix-blend-mode:screen;opacity:0;
  -webkit-mask-image:linear-gradient(0deg,#000 8%,transparent 72%);mask-image:linear-gradient(0deg,#000 8%,transparent 72%);
  animation:fxrise 54s linear infinite}
.env .fxsparks.sp2{background-position:22% bottom;background-size:30%;animation-delay:-27s;animation-duration:68s}
@keyframes fxrise{0%{opacity:0;transform:translateY(10%)}18%{opacity:.3}70%{opacity:.3}100%{opacity:0;transform:translateY(-26%)}}
.env .fxember{position:absolute;left:0;right:0;bottom:0;height:26vh;
  background-image:url("fx-koz.webp");background-size:cover;background-position:center bottom;
  mix-blend-mode:screen;opacity:.14;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 88%);mask-image:linear-gradient(180deg,transparent,#000 88%);
  animation:emberbreathe 13s var(--ease-soft) -4s infinite alternate}
@keyframes emberbreathe{from{opacity:.1}to{opacity:.18}}
@media (max-width:720px){
  .env .fx1{background-size:96%;opacity:.17}
  .env .fx2{background-size:130%;opacity:.13}
  .env .fxsparks{background-size:70%}
  .env .fxsparks.sp2{background-size:58%}
  .env .fxember{height:18vh}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:baseline;gap:28px;
  padding:18px clamp(20px,5vw,56px);
  background:linear-gradient(180deg,rgba(18,16,13,.82),rgba(18,16,13,0))}
nav .brand{font-family:"Anton",sans-serif;font-size:1.25rem;letter-spacing:.06em;color:var(--text-primary);text-decoration:none}
nav .brand em{color:var(--accent);font-style:normal}
nav .links{display:flex;gap:22px;margin-left:auto;align-items:baseline}
nav .links a{color:var(--text-secondary);text-decoration:none;font-size:.92rem;font-weight:600;transition:color .3s var(--ease)}
nav .links a:hover{color:var(--text-primary)}
nav .links a.cta{color:#1a0d05;background:var(--accent);padding:9px 18px;border-radius:999px;transition:background .3s var(--ease),transform .3s var(--ease)}
nav .links a.cta:hover{background:var(--accent-hover);transform:translateY(-1px)}
@media (max-width:720px){nav .links a:not(.cta){display:none}}

main{position:relative;z-index:2}

.btn{display:inline-block;background:var(--accent);color:#1a0d05;font-weight:600;text-decoration:none;
  padding:14px 30px;border-radius:999px;border:none;font-size:1rem;font-family:"Manrope",sans-serif;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,106,42,.25)}
.btn.ghost{background:transparent;color:var(--text-primary);border:1px solid rgba(245,237,226,.35)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

footer{position:relative;z-index:2;background:linear-gradient(180deg,rgba(13,11,9,.94),rgba(13,11,9,.72)),url("fx-koz.webp") center bottom/cover;padding:44px clamp(22px,7vw,110px);
  display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;justify-content:space-between;
  border-top:1px solid rgba(245,237,226,.07)}
footer .brand{font-family:"Anton",sans-serif;font-size:1.1rem}
footer .brand em{color:var(--accent);font-style:normal}
footer p{color:var(--text-secondary);font-size:.88rem}

.rv .part{opacity:0;transform:translateY(26px)}
.rv.in .part{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in .part:nth-child(2){transition-delay:.12s}
.rv.in .part:nth-child(3){transition-delay:.24s}
.rv.in .part:nth-child(4){transition-delay:.36s}
.rv.in.done .part:nth-child(2),
.rv.in.done .part:nth-child(3),
.rv.in.done .part:nth-child(4){transition-delay:0s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rv .part{opacity:1;transform:none}
  .ing li{opacity:1;transform:none;color:var(--text-primary)}
  .env .fxsparks{display:none}
  body{opacity:1}
}
body.pinned .rv .part{opacity:1;transform:none}
body.pinned .ing li{opacity:1;transform:none;color:var(--text-primary)}