/* Kabin web · Yön D · giriş ve 3B sahne kabı.
   Katman sırası: başlık (gerçek metin) altta · tuval üstte (pointer-events yok) · yazı, düğmeler ve cevap kartı en üstte.
   --p: kaydırma ilerlemesi 0…1 (js/sahne.js yazar). Betik, WebGL ya da hareket yoksa sabitleme olmaz; çizim ve kart durağan görünür. */
.giris { --kl: max(var(--kenar), calc((100vw - var(--kap)) / 2)); --p: 0; height: 240vh; position: relative; }
.giris-sabit { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; }

.uyum-sahne, .m-giris { position: relative; }
.sahne-tuval { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sahne-tuval canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.sahne-hazir .sahne-tuval canvas { opacity: 1; }
/* yedek çizim: sahne hazır olana kadar ve WebGL yoksa */
.sahne-yedek { position: absolute; z-index: 1; display: grid; place-items: center; transition: opacity 400ms ease; }
.sahne-yedek .cizim { width: 100%; height: 100%; }
.sahne-hazir .sahne-yedek { opacity: 0; }

.giris-baslik { position: absolute; z-index: 1; left: var(--kl); top: clamp(5.5rem, 13vh, 11rem); margin-left: -0.045em;
  font: 500 min(calc(min(var(--kap), 100vw - 2 * var(--kenar)) / 6.05), 30vh)/0.98 var(--serif); letter-spacing: -0.035em; white-space: nowrap; }
.giris-baslik .satir { display: inline; }
.taban { display: inline-block; width: 0; height: 0; }

.giris-odak { position: absolute; height: 57%; aspect-ratio: 1; left: 63%; top: 70%; transform: translate(-50%, -50%); }
.giris .sahne-yedek { height: 46%; aspect-ratio: 1; left: 54%; top: 60%; transform: translate(-50%, -50%); }

.giris-yazi { position: absolute; z-index: 3; left: var(--kl); bottom: clamp(3.5rem, 10vh, 7rem); width: min(25rem, 100% - 2 * var(--kl)); display: grid; gap: 1.25rem; }
.giris-dugme { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.giris-kart { position: absolute; z-index: 3; right: var(--kl); bottom: clamp(3.5rem, 10vh, 7rem); width: 330px;
  opacity: clamp(0, calc((var(--p) - 0.58) * 6), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.58) * 4), 1)) * 28px)); }
.giris-kart .kart { box-shadow: var(--golge-yuzen); }
.giris-kart .oneri-harf { font-size: 64px; }
.giris-kart figcaption { font-size: 12px; }

/* alt kenarda cetvel: kaydırma göstergesi (cm çentiği gibi) */
.cetvel { position: absolute; z-index: 3; left: var(--kl); right: var(--kl); bottom: clamp(1rem, 3vh, 2rem); height: 0.75rem;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 0.75rem) 0 100% / 100% 0.375rem no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 3.75rem) 0 100% / 100% 0.75rem no-repeat; opacity: 0.55; }
.cetvel-im { position: absolute; left: calc(var(--p) * 100%); bottom: 0; width: 0.75rem; height: 0.75rem; margin-left: -0.375rem; border-radius: 50%; background: var(--line); transform: translateY(-1.1rem); }

/* sabitleme olmayan durumlar */
.betiksiz .giris, .sahnesiz .giris, .azalt .giris { height: auto; }
.betiksiz .giris-sabit, .sahnesiz .giris-sabit, .azalt .giris-sabit { position: relative; }
.betiksiz .giris-kart, .sahnesiz .giris-kart, .azalt .giris-kart { opacity: 1; transform: none; }
.betiksiz .cetvel-im, .sahnesiz .cetvel-im, .azalt .cetvel-im { display: none; }

/* dar ekran: başlık iki satır, giysi ortada, yazı altta; kart girişten sonra akışta gelir */
@media (max-width: 719px) {
  .giris { height: 190vh; }
  .giris-baslik { top: 4.75rem; font-size: min(24.5vw, 17vh); line-height: 0.92; white-space: normal; }
  .giris-baslik .satir { display: block; }
  .giris-odak { height: 31%; width: auto; left: 50%; top: 56%; }
  .giris .sahne-yedek { height: auto; width: 62vw; left: 50%; top: 52%; }
  .giris-yazi { bottom: 2.75rem; gap: 0.875rem; } /* cetvel iminin (çap 0.75rem, 1.1rem yukarıda) üstünde kalır */
  .giris-yazi .lead { font-size: 1.0625rem; }
  .giris-yazi .dugme { min-height: 3rem; padding: 0 1.25rem; }
  .giris-kart { left: var(--kl); right: var(--kl); bottom: 2.25rem; width: auto; zoom: 1; }
  .giris-kart .kart { padding: 16px 20px; gap: 10px; }
  .giris-yazi { opacity: clamp(0, calc(1 - (var(--p) - 0.36) * 8), 1); } /* kart gelmeden önce yazı ve düğmeler tümüyle çekilir */
  .giris-kart { opacity: clamp(0, calc((var(--p) - 0.62) * 6), 1); }
  .cetvel { bottom: 0.625rem; }
  /* sabitleme yokken dar ekranda kart girişte gösterilmez (aynı cevap kartı aşağıda telefon ekranında var) */
  .betiksiz .giris-kart, .sahnesiz .giris-kart, .azalt .giris-kart { display: none; }
  .betiksiz .giris-yazi, .sahnesiz .giris-yazi, .azalt .giris-yazi { opacity: 1; }
}
/* geniş ama yazı ile kartın yan yana sığmadığı pencere (ör. dikey tablet; js/site.js .kart-yazi ekler): kart gelirken yazı çekilir */
.kart-yazi .giris-yazi { opacity: clamp(0, calc(1 - (var(--p) - 0.16) * 8), 1); } /* giysi 0.3’te kaymaya başlar */
.betiksiz .kart-yazi .giris-yazi, .sahnesiz .kart-yazi .giris-yazi, .azalt .kart-yazi .giris-yazi { opacity: 1; }
.sahnesiz .kart-yazi .giris-kart, .azalt .kart-yazi .giris-kart { display: none; }
@media (max-width: 899px) { .betiksiz .giris-kart { display: none; } }
/* kısa ve geniş pencere: kart giysiyle çakışmasın */
@media (min-width: 720px) and (max-height: 640px) { .giris-kart { zoom: 0.8; } }
/* alçak yatay ekran (telefon yatay, ≤ 560 px yükseklik): sabitlenen sahne pencereden uzun olmaz, düğmeler kesilmez; başlık yazıya değmeyecek kadar küçülür */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 560px) {
  .giris-sabit { min-height: 0; }
  .giris-baslik { top: 4.5rem; font-size: min(calc(min(var(--kap), 100vw - 2 * var(--kenar)) / 6.05), 22vh); line-height: 0.98; white-space: nowrap; }
  .giris-baslik .satir { display: inline; } /* dar (≤ 719 px) yatayda da tek satır */
  .giris-yazi, .giris-kart { bottom: 3rem; }
  .giris-yazi { gap: 0.875rem; }
}