:root{
  --ink:#05070d;
  --chalk:#f1efe8;
  --steel:#7c869f;
  --flood:#ffcf4a;
  --x:50%;
  --y:40%;
  --r:230px;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink);color:var(--chalk);
  font-family:var(--body);
  overflow:hidden;touch-action:none;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
a,a *{cursor:pointer}

/* Fotoğraf: karanlıkta bulanık bir siluet, ışığın altında net ve renkli */
.layer{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}
/* Stadyum: tüm ekranı kaplar. Gerçek bir fotoğrafla değiştirmek için url'yi değiştir. */
.stadium{
  position:absolute;inset:0;
  background:url("stadyum.svg") center bottom/cover no-repeat;
}
.figure{
  position:relative;
  height:100vh;height:100svh;width:auto;max-width:none;display:block;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.dim .stadium{filter:brightness(.3) saturate(.5) blur(2px)}
.dim .figure{filter:brightness(0) drop-shadow(0 0 2px rgba(255,255,255,.22))}
.reveal{
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0,#000 45%,rgba(0,0,0,.55) 70%,transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0,#000 45%,rgba(0,0,0,.55) 70%,transparent 100%);
}
.reveal .figure{filter:saturate(1.1) contrast(1.05)}

/* Sıcak ışık hâlesi, vinyet, film greni */
.halo{
  position:fixed;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--r) * 1.7) at var(--x) var(--y),rgba(255,207,74,.14),transparent 70%);
}
.vignette{
  position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(5,7,13,.85) 100%),
    linear-gradient(to top,rgba(5,7,13,.92),transparent 38%);
}
.grain{
  position:fixed;inset:-50%;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}
  60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}
}

/* Özel imleç: ışığın merkezi */
.cursor{
  position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;
  border:1.5px solid var(--flood);border-radius:50%;
  pointer-events:none;z-index:5;
  transform:translate(var(--x),var(--y));
  box-shadow:0 0 18px rgba(255,207,74,.6);
}

main{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(20px,3.5vw,48px);
  pointer-events:none;
}
main a{pointer-events:auto}
header{display:flex;justify-content:space-between;align-items:center}
.mark{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.04em}
.mark i{
  display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;
  background:#ff3b30;animation:rec 1.6s steps(2) infinite;
}
@keyframes rec{50%{opacity:.15}}

.hint{
  align-self:start;justify-self:center;margin-top:3vh;
  font-size:.95rem;color:var(--steel);
  animation:hint 3s ease-in-out infinite;
}
@keyframes hint{50%{opacity:.35}}

footer{
  display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;
}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(5rem,17vw,15rem);line-height:.82;letter-spacing:-.015em;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
  animation:rise 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
.sub{margin-top:18px;max-width:30ch;line-height:1.55;color:#c3c8d8;font-size:clamp(.95rem,1.3vw,1.1rem)}

.clock{display:flex;gap:clamp(8px,1.6vw,16px)}
.unit{text-align:center;min-width:clamp(58px,7vw,84px);
  padding:12px 10px 8px;border-top:2px solid var(--flood);
  background:rgba(5,7,13,.55);backdrop-filter:blur(6px)}
.unit b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1;font-variant-numeric:tabular-nums}
.unit span{font-size:.75rem;color:var(--steel)}

/* Dokunmatik cihazlar: özel imleç yok, film greni sabit (pil/performans) */
@media (hover:none){
  body{cursor:auto}
  .cursor{display:none}
  .grain{animation:none}
}
/* Telefon yatay konumda: yer dar, süsleri kıs */
@media (max-height:480px){
  h1{font-size:3.4rem}
  .sub,.hint{display:none}
  .unit{padding:6px 8px 4px;min-width:52px}
  .unit b{font-size:1.5rem}
}
@media (max-width:640px){
  .clock{width:100%}
  .unit{flex:1;min-width:0}
  :root{--r:150px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
}