/* hero — "Halkadan geç". 300vh kaydırma alanı, içinde sticky sahne. */
.hero{position:relative;height:300vh;background:var(--taban);--neon:1;
  --fk:1.12;--ax:.73;--ay:.42}
.hero-sahne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--taban)}

/* Fotoğraf kutusu: cover'ı CSS ile kendimiz kuruyoruz ki halka konumu (%64.7,%37.5) hesaplanabilsin.
   Kutu 3:2; halka merkezi ekranda (--ax,--ay) noktasına yaklaşır, kenar boşluk bırakmaz. */
.hero-foto{--fw:max(calc(100vw*var(--fk)),150svh);--fh:calc(var(--fw)/1.5);
  position:absolute;width:var(--fw);height:var(--fh);
  left:clamp(100vw - var(--fw),calc(var(--ax)*100vw - .647*var(--fw)),0px);
  top:clamp(100svh - var(--fh),calc(var(--ay)*100svh - .375*var(--fh)),0px);
  transform-origin:64.7% 37.5%;will-change:transform,opacity}
.hero-img{width:100%;height:100%;display:block;max-width:none;object-fit:cover;
}
.hero-bloom-kap{position:absolute;inset:0;pointer-events:none;will-change:opacity}
.hero-bloom{position:absolute;left:64.7%;top:37.5%;width:50%;height:74%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(254,17,1,.62),rgba(254,17,1,.22) 42%,rgba(254,17,1,.06) 68%,transparent 100%);
  opacity:calc(var(--neon)*.85)}
/* Neon sönükken fotoğrafı karartan katman. Filtre yerine opaklık: kompozitörde çizilir, karede yeniden hesap yok.
   --neon (0..1) yumurta.js'in "sönen neon" sürprizi tarafından da yazılır. */
.hero-sonuk{position:absolute;inset:0;background:#030509;pointer-events:none;opacity:calc((1 - var(--neon))*.86)}
/* Açılış: görsel hazır olunca (.yan) neon tek yumuşak tereddütle yanar. fill=backwards: bitince --neon'a döner */
.hero--js:not(.yan) .hero-sonuk{opacity:.86}
.hero--js:not(.yan) .hero-bloom{opacity:0}
.hero.yan .hero-sonuk{animation:h-sonuk 1.5s linear backwards}
.hero.yan .hero-bloom{animation:h-bloom 1.5s linear backwards}
@keyframes h-sonuk{0%{opacity:.86;animation-timing-function:cubic-bezier(.5,0,.75,0)}
  13%{opacity:.34;animation-timing-function:ease-out}19%{opacity:.62;animation-timing-function:cubic-bezier(.25,.1,.25,1)}
  58%,100%{opacity:0}}
@keyframes h-bloom{0%{opacity:0;animation-timing-function:cubic-bezier(.5,0,.75,0)}
  13%{opacity:.45;animation-timing-function:ease-out}19%{opacity:.16;animation-timing-function:cubic-bezier(.25,.1,.25,1)}
  58%,100%{opacity:.85}}
/* Easter egg isabet alanı: halka elipsi (görselde merkez 64.7/37.5, yarıçap ≈ 11.5% × 20%) */
.hero-neon-alan{position:absolute;left:64.7%;top:37.5%;width:25%;height:44%;transform:translate(-50%,-50%);
  border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}

.hero-tunel{position:absolute;inset:0;opacity:0;pointer-events:none;transform-origin:49% 52%;will-change:transform,opacity}
.hero-tunel img{width:100%;height:100%;object-fit:cover;object-position:49% 52%;max-width:none}

/* metin okunurluğu: sol negatif alan + alt */
.hero-vinyet{position:absolute;inset:0;pointer-events:none;will-change:opacity;
  background:linear-gradient(90deg,rgba(5,9,16,.88) 0%,rgba(5,9,16,.55) 34%,rgba(5,9,16,0) 58%),
             linear-gradient(0deg,rgba(5,9,16,.7) 0%,rgba(5,9,16,0) 32%)}
.hero-karanlik{position:absolute;inset:0;background:var(--taban);opacity:0;pointer-events:none;will-change:opacity}
.hero-icerideyim{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;will-change:opacity,transform;text-align:center}
.hero-icerideyim .dev{font-size:clamp(40px,11vw,176px);letter-spacing:.01em;text-shadow:0 0 40px rgba(254,17,1,.35)}

/* ——— metin ——— */
.hero-metin{position:absolute;inset:0;left:0;right:0;margin-inline:auto;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding-top:var(--ust-h);pointer-events:none;will-change:opacity,transform}
.hero-metin > *{pointer-events:auto}
.hero-metin.kapali > *{pointer-events:none}
.hero-etiket{color:var(--kirmizi);margin-bottom:18px;animation:h-yuksel .6s var(--ease-cik) .2s both}
.hero-h1{line-height:.92;letter-spacing:.005em}
.hero-h1 .satir{display:block;overflow:hidden;padding:.06em 0 .08em;margin-bottom:-.08em}
.hero-h1 .satir--kucuk{font-size:clamp(20px,2.3vw,38px);letter-spacing:.08em;color:var(--metin-9)}
.hero-h1 .satir--dev{font-size:clamp(56px,7.2vw,132px);margin-top:.02em}
.hero-h1 .satir-ic{display:block;transform:translate3d(0,110%,0);animation:h-satir .9s var(--ease-cik) both}
.hero-h1 .satir--kucuk .satir-ic{animation-delay:.3s}
.hero-h1 .satir--dev .satir-ic{animation-delay:.42s}
/* nokta = halkanın yankısı: neon tam yandığı anda yerine oturur */
.hero-nokta{display:inline-block;transform-origin:50% 80%;animation:h-nokta .5s cubic-bezier(.3,1.6,.5,1) .95s both}
/* sitenin banner dili: kırmızı eğik şerit; zemin soldan açılır, yazı ardından gelir */
.hero-serit{position:relative;display:inline-flex;margin-top:22px;padding:9px 16px 9px 14px;isolation:isolate;
  font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap}
.hero-serit::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--kirmizi);border-radius:2px;
  transform:skewX(-14deg);transform-origin:0 50%;animation:h-serit .55s var(--ease-cik) .8s both}
.hero-serit span{display:block;animation:h-solma .4s ease-out 1s both}
.hero-alt{margin-top:16px;max-width:30em;font-size:clamp(15px,1.2vw,18px);font-weight:500;color:var(--metin-7);animation:h-yuksel .6s var(--ease-cik) 1.05s both}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;animation:h-yuksel .7s var(--ease-cik) 1.15s both}
@keyframes h-satir{to{transform:none}}
@keyframes h-yuksel{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes h-solma{from{opacity:0}}
@keyframes h-serit{from{transform:skewX(-14deg) scaleX(0)}}
@keyframes h-nokta{from{transform:scale(0);opacity:0}}
/* JS varken açılış, neon yanmaya başlayınca (.yan) oynar; JS yoksa hemen oynar */
.hero--js:not(.yan) :is(.hero-etiket,.satir-ic,.hero-nokta,.hero-serit span,.hero-alt,.hero-cta,.hero-ipucu),
.hero--js:not(.yan) .hero-serit::before{animation-play-state:paused}

/* kaydırma ipucu */
.hero-ipucu{position:absolute;left:var(--kenar);bottom:28px;display:flex;align-items:center;gap:12px;pointer-events:none;
  animation:h-yuksel .8s var(--ease-cik) 1.7s backwards;will-change:opacity}
.ipucu-halka{width:14px;height:14px;border-radius:50%;border:2px solid var(--kirmizi);box-shadow:0 0 6px var(--kirmizi-a8),inset 0 0 4px var(--kirmizi-a5)}
.hero-ipucu .etiket{color:var(--metin-7);font-size:11px}
.ipucu-cizgi{position:relative;width:1px;height:42px;background:var(--k3);overflow:hidden;margin-left:4px}
.ipucu-cizgi::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--kirmizi);animation:h-akis 1.6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes h-akis{to{top:110%}}

@media (max-width:760px){
  .hero{--fk:1;--ax:.5;--ay:.31}
  .hero-metin{justify-content:flex-end;padding-top:0;padding-bottom:92px}
  .hero-etiket{margin-bottom:12px}
  .hero-h1 .satir--kucuk{font-size:clamp(17px,5.1vw,26px)}
  /* "TEK ADRES." kenardan kenara: genişlik / yazı oranı ≈ 6.25 */
  .hero-h1 .satir--dev{font-size:min(calc((100vw - 2*var(--kenar))/6.25),74px)}
  .hero-serit{margin-top:16px;font-size:12px;padding:8px 14px 8px 12px}
  .hero-alt{margin-top:12px;font-size:14px}
  .hero-cta{margin-top:20px;gap:10px;width:100%}
  .hero-cta .btn{flex:1;padding:0 12px;min-width:0}
  .hero-vinyet{background:linear-gradient(0deg,rgba(5,9,16,.95) 0%,rgba(5,9,16,.8) 38%,rgba(5,9,16,0) 64%)}
  .hero-ipucu{bottom:22px}
  .hero-ipucu .ipucu-cizgi{height:30px}
}
@media (max-height:640px) and (min-width:761px){.hero-h1 .satir--dev{font-size:clamp(44px,5.6vw,96px)}.hero-alt{margin-top:12px}.hero-cta{margin-top:18px}}

/* reduced motion: zoom yok, statik kare, normal akış */
@media (prefers-reduced-motion:reduce){
  .hero{height:100vh;height:100svh}
  .hero-sahne{position:relative}
  .hero-tunel,.hero-karanlik,.hero-icerideyim,.hero-ipucu{display:none}
  .hero-etiket,.hero-alt,.hero-cta,.hero-nokta,.hero-serit span,.hero-serit::before{animation:none}
  .hero-h1 .satir-ic{transform:none;animation:none}
}