/* final — telefon-el + ekran katmanı + halka motifinin kapanışı */
.fn{position:relative;isolation:isolate;overflow:hidden;background:var(--taban);display:grid;
  grid-template-columns:minmax(0,1fr) min(38vw,560px);align-items:center}
.fn-halka{position:absolute;z-index:-1;width:min(150vw,1500px);aspect-ratio:1;left:62%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none}
.fn-c{fill:none;stroke:var(--cizgi);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fn-c--ince{stroke-dasharray:3 8}
.fn-tik line{stroke:var(--cizgi);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fn-tik .fn-isaret{stroke:var(--kirmizi);stroke-width:2}

.fn-sahne{grid-column:2;grid-row:1;position:relative;aspect-ratio:2/3;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(0deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(0deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}
.fn-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ekran katmanı: mantıksal 220x500 px, JS 4 köşeye homografiyle oturtur */
.fn-ekran{position:absolute;left:0;top:0;width:220px;height:500px;transform-origin:0 0;opacity:0;
  display:grid;place-content:center;justify-items:center;gap:44px;border-radius:30px;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 100%,rgba(254,17,1,.55),transparent 70%),#07090f;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.6);pointer-events:none}
.fn-ekran.hazir{opacity:1;transition:opacity .6s}
.fn-logo{width:176px;height:auto}
.fn-kayit{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:21px;letter-spacing:.1em;color:#fff;
  padding:13px 22px;background:var(--kirmizi);border-radius:4px;box-shadow:var(--kirmizi-glow)}
.fn-imlec{width:3px;height:22px;background:#fff;animation:fn-yan 1s steps(1) infinite}
@keyframes fn-yan{50%{opacity:0}}

.fn-metin{grid-column:1;grid-row:1;position:relative;z-index:1;margin-inline:0;padding-left:var(--kenar);width:auto;
  padding-block:clamp(56px,8vw,110px);display:grid;gap:34px;justify-items:start}
.fn-baslik{display:grid;gap:clamp(14px,1.6vw,24px);margin:0}
.fn-dev{font-size:clamp(40px,6.2vw,92px);line-height:.95;max-width:9.5ch}
.fn-orta{color:var(--metin-9)}
.fn-butonlar{display:flex;flex-wrap:wrap;gap:14px}

@media (max-width:899px){
  .fn{grid-template-columns:1fr}
  .fn-sahne{grid-column:1;grid-row:1;width:min(100%,440px);justify-self:center;
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 22%);-webkit-mask-composite:source-over;mask-image:linear-gradient(0deg,transparent 0,#000 22%);mask-composite:add}
  .fn-metin{grid-column:1;grid-row:2;margin-top:-90px;padding:0 var(--kenar) 64px;justify-items:stretch;text-align:left}
  .fn-halka{left:50%;top:34%;width:190vw}
  .fn-butonlar .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.fn-imlec{animation:none}}