/* Peak · ana sayfa giriş sahnesi · Yön C · Makas (Revize 1, 13 Eki)
   Kaynak: maket2/giris/giris.css + yon-c.html. temel.css üstüne gelir; yalnız sahneye özgü kurallar. */

.sahne{position:relative;height:640vh}
.sabit{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--gece)}
.sabit>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* ışık yerinde durur (left/top sabit), giris.js onu transform ile kaydırır: --dx/--dy px. left/top her karede değişince
   Google'ın yerleşim kayması ölçüsü (CLS) masaüstünde 0,4 çıkıyordu (tarama u1, 14 Eki); görünüş aynı. */
.sahne-isik{position:absolute;pointer-events:none;border-radius:50%;width:min(1300px,130vw);aspect-ratio:1;left:70%;top:54%;
  transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px)));
  background:radial-gradient(closest-side,rgba(30,80,255,.30),rgba(30,80,255,.17) 30%,rgba(30,80,255,.07) 55%,rgba(11,27,107,.03) 74%,rgba(11,27,107,0))}

/* panolar: solda metin, sağda grafik */
.pano{position:absolute;left:var(--kenar);top:50%;transform:translateY(-50%);width:min(700px,43vw);pointer-events:none;z-index:5;will-change:opacity,transform}
.pano.giris-p{width:min(800px,47vw)}
/* yalnız görünen panonun öğeleri tıklanır; görünmez panonun adım satırları ilk ekrandaki düğmeleri örtüyordu (tarama u3, 14 Eki) */
.pano.acik a,.pano.acik .adim-s,.pano.acik button{pointer-events:auto}
.pano h2{font-size:clamp(36px,3.9vw,70px);margin:18px 0 20px}
.pano .govde{font-size:clamp(16px,1.1vw,19px);max-width:560px}
.giris-p .baslik{font-size:clamp(58px,8vw,146px)}
.giris-p .lede{margin-top:30px;font-size:clamp(18px,1.42vw,25px);max-width:640px}
.giris-p .alt-c{margin-top:16px;font-size:clamp(15px,1.02vw,18px)}
.giris-p .satir{margin-top:36px}

/* adım listesi (kurulum / ölçekleme) */
.adimlar-s{margin-top:24px;display:grid;gap:3px;max-width:560px}
.adim-s{display:grid;grid-template-columns:42px 1fr;gap:3px 10px;padding:11px 16px;border-radius:14px;border:1px solid transparent;cursor:pointer;
  transition:background .5s,border-color .5s,opacity .5s,transform .8s var(--egri);opacity:.4}
.adim-s:hover{border-color:rgba(127,212,255,.28)}
.adim-s .no{color:var(--soluk);padding-top:3px;transition:color .5s}
.adim-s b{font-weight:600;font-size:17px;color:#fff}
.adim-s span{grid-column:2;font-size:14.5px;color:var(--metin);line-height:1.35;display:none}
.adim-s.simdi{opacity:1;background:var(--kart);border-color:var(--cizgi)}
.adim-s.simdi span{display:block}
.adim-s.simdi .no,.adim-s.tamam .no{color:var(--buz)}
.adim-s.tamam{opacity:.85}
.pano:not(.acik) .adim-s{opacity:0;transform:translateY(12px)}

/* grafiğin üstündeki etiketler */
.etiketler{position:absolute;inset:0;pointer-events:none;z-index:4}
.et{position:absolute;left:0;top:0;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--buz);opacity:0;will-change:transform,opacity}
.et em{font-style:normal;color:var(--soluk);font-weight:500;letter-spacing:.06em;margin-right:8px}
.et.uc{font-size:13px;font-weight:600;letter-spacing:.02em}
.et.uc.harc{color:#9DB8FF}
.et.uc.kasa{color:var(--buz)}
.et.uc.zemin{padding:3px 9px;border-radius:8px;background:rgba(5,7,15,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.et.kacak{color:var(--metin);font-weight:500;font-size:13.5px;letter-spacing:.01em}
.et.kacak:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--buz);margin-right:9px;vertical-align:0}
.et.kacak.kapandi{color:var(--soluk);text-decoration:line-through;text-decoration-color:rgba(127,212,255,.6)}
.et.kacak.kapandi:before{background:var(--buz)}
.et.bant{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--buz)}
.et.bant em{color:var(--soluk)}
.et.adim{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--soluk)}
.et.adim.yandi{color:var(--buz)}
.et.not{font-size:12.5px;color:var(--soluk);font-weight:400;letter-spacing:.02em}
.et.not i{display:inline-block;width:18px;height:10px;margin-right:8px;vertical-align:-1px;border-radius:2px;
  background:repeating-linear-gradient(135deg,rgba(127,212,255,.55) 0 1.5px,transparent 1.5px 5px)}
.et.not .kaz{color:var(--buz)}
.et.not .den{opacity:.6}
/* kesişim: kasana giren harcamayı geçtiği an */
.et.kesisim{font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;padding:7px 12px;border-radius:999px;
  background:rgba(7,10,24,.62);border:1px solid rgba(127,212,255,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.et.kesisim:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--buz);margin-right:9px;vertical-align:1px}

/* ilerleme: cam şerit */
.ilerle{position:absolute;left:var(--kenar);bottom:34px;z-index:6;display:flex;flex-direction:column;gap:12px;width:min(520px,42vw);
  padding:14px 20px 16px;border-radius:16px;opacity:0;transition:opacity .8s}
.ilerle .cizgi{height:2px;border-radius:2px;background:rgba(127,212,255,.14);position:relative;overflow:hidden;order:2}
.ilerle .cizgi i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--kobalt),var(--buz))}
.ilerle ul{list-style:none;display:flex;justify-content:space-between;gap:18px}
.ilerle li{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soluk);cursor:pointer;transition:color .4s;white-space:nowrap}
.ilerle li em{font-style:normal;margin-right:9px;opacity:.7}
.ilerle li.bu{color:var(--buz)}
.ilerle li:hover{color:#fff}

.kaydir{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);font-size:12px;letter-spacing:.14em;color:var(--soluk);z-index:6;
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;pointer-events:none}
.kaydir:after{content:"";width:1px;height:38px;background:linear-gradient(var(--buz),transparent);animation:ak 2.2s ease-in-out infinite}
@keyframes ak{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* düz hâl (hareket azaltılmış ya da çizim yok): sahne tek durağan kare; panolar alt alta normal akışta */
.duz .sahne{height:auto}
.duz .sabit{position:relative;height:100vh;height:100svh}
.duz .ilerle,.duz .kaydir{display:none}
.duz-panolar{display:grid;gap:72px;padding:56px var(--kenar) 120px}
.duz-panolar .pano{position:relative;left:auto;right:auto;top:auto;transform:none!important;opacity:1!important;width:auto;max-width:760px;pointer-events:auto}
.duz-panolar .adim-s{opacity:1!important;transform:none!important;display:grid!important}
.duz-panolar .adim-s span{display:block}
/* JavaScript yoksa: başlık ve düğmeler görünür, öteki panolar gizli */
.js-yok .sahne{height:auto}
.js-yok .sabit{position:relative}
.js-yok .pano:not(.giris-p){display:none}

@media (max-width:820px){
  .sahne{height:620vh}
  .pano,.pano.giris-p{left:20px;right:20px;width:auto;top:96px;transform:none}
  .giris-p .baslik{font-size:clamp(46px,14.4vw,64px)}
  .giris-p .lede{margin-top:18px;font-size:17px}
  .giris-p .alt-c{margin-top:10px}
  .giris-p .satir{margin-top:22px;gap:14px 22px}
  .pano h2{font-size:clamp(28px,8.4vw,36px);margin:10px 0 10px}
  .pano .govde{font-size:15px}
  .adimlar-s{margin-top:12px;gap:2px}
  .adim-s{padding:7px 12px;grid-template-columns:32px 1fr}
  .adim-s:not(.simdi){display:none}
  .adim-s b{font-size:15px}
  .adim-s span{font-size:13px}
  /* telefon (Revize 2, n): grafik yazıları en az 13 px; adım kartının yeri sabit (grafik zıplamasın) */
  .pano .etiket{font-size:13px;letter-spacing:.12em}
  .giris-p .alt-c{font-size:15px}
  .adimlar-s{min-height:80px;align-content:start}
  .pano .etiket .bir{white-space:nowrap}
  .et{font-size:13px}
  .et.kacak{font-size:14px;font-weight:600;color:#fff}
  .et.kacak:before{width:9px;height:9px;border-width:1.6px;vertical-align:-1px}
  .et.bant{font-size:13px;letter-spacing:.1em}
  .et.not{font-size:13px}
  .et.not i{width:20px;height:11px}
  .et.kesisim{font-size:13px;padding:6px 12px}
  .et.lejant{display:flex;gap:18px;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--metin)}
  .et.lejant span:before{content:"";display:inline-block;width:16px;height:2px;border-radius:2px;margin-right:8px;vertical-align:4px}
  .et.lejant .h:before{background:#4F86FF}
  .et.lejant .k:before{background:#BFEAFF;height:2.5px}
  .ilerle{left:16px;right:16px;width:auto;bottom:auto;top:76px;padding:0;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .ilerle ul{display:none}
  .kaydir{display:none}
  .duz-panolar{gap:56px;padding:40px 20px 96px}
}
@media (prefers-reduced-motion:reduce){.kaydir:after{animation:none}}