/* giris.css — GİRİŞ FÖYÜ (F3 · sayfa): tek adım, iri numara, gölgesiz hairline panel.
   Yalnız ana sayfa yükler; motoru js/giris.js. Token'lar core.css'ten — burada renk
   sistemi kurulmaz. Ölçek emsali (gövde 17/1,55 · düğme 42) arastirma.json →
   giris-kartlari-2026-09-tur2. Malzeme R1 (Linear): gölge yok, 1px hairline + yüzey
   basamağı. 🔒 Tasarım onaylı, değiştirme — gerekçe arsiv/giris-foyu/README.md.
   ⚠️ @media sınırı js/giris.js'teki MASAUSTU ile AYNI sayı olmak zorunda (bekçi
   test/giris.test.js); ayrışırsa föy açılır ama stilsiz kalır. */

/* ── motor ──────────────────────────────────────────────────────────── */
.fy{
  --fy-w: 480px; --fy-pad: 1.85rem; --fy-h2: 1.75rem; --fy-p: 1.0625rem; --fy-lh: 1.55;
  --renk: var(--pop); --renk-on: #0a0a0a;
  --tint: #141414; --tint-2: #0f0f0f;
  --tint: color-mix(in oklab, var(--renk) 11%, #121212);
  --tint-2: color-mix(in oklab, var(--renk) 4%, #0e0e0e);
  position:fixed; inset:0; z-index:1100; font-family:var(--font-b); color:var(--cream);
}
.fy__maske{ position:absolute; inset:0; width:100%; height:100%; }
.fy__maske path{ fill:rgba(5,5,4,.885); fill-rule:evenodd; opacity:0; transition:opacity .36s var(--ease); }
.fy.is-on .fy__maske path{ opacity:1; }
.fy__cizgi{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; transition:opacity .2s var(--ease-o); }
.fy__cizgi path{ fill:none; stroke:var(--renk); stroke-opacity:.8; stroke-width:1.25; transition:stroke-dashoffset .5s var(--ease-exp); }
.fy__cizgi circle{ fill:var(--renk); }
.fy.is-tam .fy__cizgi{ opacity:.35; }
.fy__kupa{ position:absolute; z-index:6; width:38px; height:38px; border-radius:50%; padding:0;
  background:var(--renk); border:0; color:var(--renk-on); cursor:pointer; font:800 .8rem/38px var(--font-m); text-align:center;
  box-shadow:0 0 0 2px rgba(5,5,4,.9), 0 0 0 3px rgba(244,239,228,.22), 0 6px 18px -6px rgba(0,0,0,.8);   /* krem halka: koyu evrede de görünür */
  transition:top .36s var(--ease-door), left .36s var(--ease-door), transform .16s var(--ease-exp); }
.fy__kupa b{ position:relative; z-index:1; }
.fy__kupa::after{ content:''; position:absolute; inset:-4px; border-radius:50%; }
.fy__kupa:hover{ transform:scale(1.06); } .fy__kupa:active{ transform:scale(.96); }
.fy__kupa-halka{ position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--renk); animation:fy-nabiz 1.2s ease-in-out infinite; }
@keyframes fy-nabiz{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(1.85); opacity:0 } }
.fy.is-bakildi .fy__kupa-halka{ animation:none; inset:-5px; opacity:.45; }
.fy.is-tam .fy__kupa{ box-shadow:0 0 0 2px rgba(5,5,4,.9), 0 0 0 6px color-mix(in oklab, var(--renk) 35%, transparent); }
.fy__x{ position:absolute; top:1.1rem; right:1.4rem; z-index:7; font:600 .66rem/1 var(--font-m); letter-spacing:.14em; color:var(--muted);
  background:rgba(14,14,14,.7); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:.5rem .7rem; cursor:pointer;
  transition:color var(--dur-2), border-color var(--dur-2), transform .16s var(--ease-exp); }
.fy__x:hover{ color:var(--cream); border-color:var(--renk); } .fy__x:active{ transform:scale(.97); }
.fy :focus-visible{ outline:2px solid var(--renk); outline-offset:2px; }

/* ── föy: malzeme + yanaşma ─────────────────────────────────────────── */
.fy__foy{ position:absolute; top:1.1rem; bottom:1.1rem; width:min(var(--fy-w), calc(100vw - 2rem));
  display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain;
  background: linear-gradient(165deg, var(--tint) 0%, var(--tint-2) 100%);
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in oklab, var(--renk) 10%, transparent), transparent 55%),
    linear-gradient(165deg, var(--tint) 0%, var(--tint-2) 100%);
  border:1px solid rgba(255,255,255,.085); border-radius:var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.55), 0 30px 70px -28px rgba(0,0,0,.85);
  opacity:0; }   /* geçiş yalnız is-on'da: açılışta kabuk anında yerine oturur, çizgi doğru ölçer */
.fy__foy{ left:1.1rem; }
.fy__foy.is-sag{ transform:translateX(calc(100vw - 100% - 2.2rem)) translateX(18px); }
.fy__foy.is-sol{ transform:translateX(-18px); }
.fy.is-on .fy__foy{ opacity:1; }
.fy.is-on .fy__foy.is-sag{ transform:translateX(calc(100vw - 100% - 2.2rem)); }
.fy.is-on .fy__foy.is-sol, .fy.is-on .fy__foy.is-alt, .fy.is-on .fy__foy.is-ust{ transform:none; }
.fy.is-on .fy__foy{ transition:transform .3s cubic-bezier(.2,0,0,1), opacity .3s var(--ease-o); }   /* M3 emphasized */
.fy__foy > *{ transition:opacity .21s cubic-bezier(.05,.7,.1,1) .09s, transform .21s cubic-bezier(.05,.7,.1,1) .09s; }
.fy__foy.is-gecis > *{ opacity:0; transform:translateX(-12px); transition:opacity .09s cubic-bezier(.3,0,.8,.15), transform .09s cubic-bezier(.3,0,.8,.15); }
.fy__bas{ padding:1.35rem var(--fy-pad) 1rem; border-bottom:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:.35rem; flex:none; }
.fy__eyebrow{ font:500 .66rem/1 var(--font-m); letter-spacing:.16em; color:var(--renk); text-transform:uppercase; }
.fy__bas b{ font-family:var(--font-d); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; text-transform:lowercase; }
.fy__bas-alt{ font:500 .64rem/1.3 var(--font-m); letter-spacing:.1em; color:var(--muted-2); }

/* ── sayfa gövdesi ─────────────────────────────────────────────────── */
.fy__meta{ display:block; font:500 .62rem/1 var(--font-m); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.3rem; }
.fy__h{ font-family:var(--font-d); font-weight:800; font-size:var(--fy-h2); line-height:1.02; letter-spacing:-.03em; text-transform:lowercase; margin:0 0 .7rem; color:var(--cream); text-wrap:balance; }
.fy__p{ margin:0; font-size:var(--fy-p); line-height:var(--fy-lh); color:rgba(244,239,228,.86); max-width:60ch; text-wrap:pretty; }
.fy__p + .fy__p{ margin-top:.85rem; }
.fy__p b{ color:var(--cream); font-family:var(--font-m); font-weight:600; font-size:.88em; }
.fy-tus{ display:flex; gap:.6rem; margin-top:1.2rem; align-items:center; flex-wrap:wrap; }
.fy-ileri{ margin-left:auto; height:42px; padding:0 1.15rem; font:700 .82rem/42px var(--font-m); letter-spacing:.02em; color:var(--on-accent); background:var(--pop); border:0; border-radius:var(--r); cursor:pointer; transition:background-color var(--dur-2), transform .16s var(--ease-exp); }
.fy-ileri:hover{ background:var(--pop-d); } .fy-ileri:active{ transform:scale(.97); }
.fy-geri{ height:42px; font:500 .74rem/42px var(--font-m); color:var(--muted); background:transparent; border:0; cursor:pointer; padding:0 .3rem; }
.fy-geri:hover{ color:var(--cream); }
.fy-yer{ display:inline-flex; align-items:center; gap:.55rem; height:42px; padding:0 1rem 0 .8rem; font:600 .76rem/1 var(--font-m); color:var(--cream);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); cursor:pointer;
  transition:background-color var(--dur-2), border-color var(--dur-2), transform .16s var(--ease-exp); }
.fy-yer:hover{ border-color:var(--renk); background:color-mix(in oklab, var(--renk) 12%, transparent); }
.fy-yer:active{ transform:scale(.97); }
.fy-yer[aria-pressed="true"]{ background:var(--renk); color:var(--renk-on); border-color:var(--renk); }
.fy-yer__nokta{ width:10px; height:10px; border-radius:50%; background:var(--renk); box-shadow:0 0 0 3px color-mix(in oklab, var(--renk) 28%, transparent); }
.fy-yer[aria-pressed="true"] .fy-yer__nokta{ background:var(--renk-on); box-shadow:none; }

/* ═══ F3 · SAYFA — tek adım, iri sayı; omurga = kenar şeridi + nokta nav ═ */
.fv3 .fy__foy{ --fy-h2: 2.25rem; background:#0f1011; box-shadow:inset 0 1px 0 rgba(244,239,228,.04); border-color:#23252a; }   /* R1: yalnız 1px çizgi + yüzey basamağı, gölge yok */
.fv3 .fy__bas{ border-bottom-color:#17181a; padding-bottom:1rem; }
.fv3__nav{ border-top-color:#17181a; }
.fv3__sayfa{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:1.6rem var(--fy-pad) 1rem;
  opacity:0; transform:translateY(8px); transition:opacity .22s var(--ease-o), transform .3s var(--ease-exp); position:relative; }
.fv3__sayfa > *{ flex:none; }
.fv3__sayfa.is-on{ opacity:1; transform:none; }
.fv3__no{ display:block; font:800 4.2rem/1 var(--font-m); letter-spacing:-.05em; color:var(--renk); margin:0 0 .6rem -.05em; }
.fv3 .fy__meta{ margin-bottom:.8rem; }
.fv3__h{ margin-bottom:.9rem; }
.fv3__nav{ display:flex; gap:.5rem; padding:1rem var(--fy-pad) 1.3rem; flex:none; border-top:1px solid rgba(255,255,255,.07); }
.fv3__nokta{ flex:1; height:28px; background:transparent; border:0; padding:0; cursor:pointer; position:relative; }
.fv3__nokta i{ display:block; height:3px; border-radius:2px; background:color-mix(in oklab, var(--renk) 30%, transparent); transition:background-color .2s, transform .2s; }
.fv3__nokta.is-gecti i, .fv3__nokta.is-simdi i{ background:var(--renk); }
.fv3__nokta.is-simdi i{ transform:scaleY(1.6); }
/* kenar şeridi: föyün sol kenarında evre rengi dolar */
.fv3 .fy__foy::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom, #86a06a, #d2b56a 50%, #b07a52);
  -webkit-mask:linear-gradient(#000 var(--dolu, 0%), rgba(0,0,0,.15) 0); mask:linear-gradient(#000 var(--dolu, 0%), rgba(0,0,0,.15) 0); }

/* ── reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .fy *{ transition-property:opacity !important; transition-duration:.2s !important; }
  .fy__kupa-halka{ animation:none; inset:-5px; opacity:.5; }
}
/* ── mobil: alt/üst föy ─────────────────────────────────────────────── */
/* ⚠️ ULAŞILAMAZ: föy bu genişlikte hiç kurulmuyor (js/giris.js MASAUSTU kapısı).
   Silinmedi çünkü mobil turu buradan başlayacak — ama CANLI KOD DEĞİL, ölçülmemiş
   sayılır (Çağkan 8 Eyl: "mobile sızmasın, mobili ayrıca tasarlayacağız"). */
@media (max-width: 900px){
  .fy{ --fy-pad: 1.25rem; --fy-h2: 1.5rem; --fy-p: 1rem; }
  .fy__foy{ top:auto; bottom:0; left:0 !important; right:0 !important; width:100%; max-height:62vh; border-radius:var(--r) var(--r) 0 0; }
  .fy__foy.is-alt{ transform:translateY(24px); }
  .fy__foy.is-ust{ top:0; bottom:auto; max-height:54vh; border-radius:0 0 var(--r) var(--r); transform:translateY(-24px); }
  .fy-ileri, .fy-geri, .fy-yer{ height:44px; line-height:44px; }
  .fv3__no{ font-size:3rem; }
}