/* ==========================================================================
   #giris — hero. TASARIM-SPEC §4.1, §5.8, §5.9. Sahibi: P3b.
   Ziyaretçinin gördüğü İLK ekran.

   Durumlar (hepsi aynı markup):
   - Varsayılan (JS'siz, azalt, GSAP yok): metin ilk ekranı doldurur, sayılar
     altında statik liste (temel.css §21), statik iz görünür.
   - .giris--koreo (giris.js, GSAP var): #giris pin'lenir; sayılar ve açıklamalar
     ekranın üstüne biner. Gizli başlangıç durumlarını JS verir (§2.6), CSS değil.
   - .giris--dom-sayi (C kademesi): sayılar DOM'da görünür (WebGL çizmez).
   - html.webgl-hazir: sayıyı parçacıklar çizer, DOM'daki rakam görünmez kalır.
   - html.webgl-hazir / html.sahne-2d: statik iz çekilir, canvas akar.

   Yalnız transform ve opacity canlandırılır. Telefonun temel.css'teki transform
   geçişi burada KAPALI: scrub'la çakışıp gecikme yaratır.
   ========================================================================== */

.bolum--giris {
  /* Başlık ölçüsü: dar-siyah Archivo'da "HER RİTİMDE" ≈ 5,05em genişlikte.
     Mobil: kenarlar arasında ~%88. Masaüstü: sol sütun (≈ 690px) ve ekran yüksekliği. */
  --giris-h1: clamp(2.875rem, 15.4vw, 5.75rem);
  --giris-tel-w: min(300px, calc((100svh - 200px) * .45));
  padding-block: 0;                 /* pin'li bölüm (§2.4) */
  isolation: isolate;
}

.giris__sabit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh; min-height: 100svh;
  overflow-x: clip;                 /* geniş statik iz ve kayan telefon taşmasın */
}

/* ---------- 1. Metin bloğu ---------- */
.giris__metin {
  position: relative; z-index: 2;
  grid-row: 1; grid-column: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  min-height: 100vh; min-height: 100svh;
  /* Mobil: metin alt yarıda; üstteki boşlukta şerit akar (§4.1). Metin uzunsa (küçük
     ekran) yukarı doğru büyür; pin, metnin ALTI ekranın altına gelince başlar (giris.js). */
  padding-top: calc(var(--ust-yukseklik) + 18svh);
  padding-bottom: calc(clamp(20px, 6svh, 64px) + env(safe-area-inset-bottom));
}

.giris__metin .hap { margin-bottom: 18px; }

/* Başlık: dar-siyah BÜYÜK harf + Instrument Serif italik küçük harf. */
.bolum--giris .baslik-dev {
  font-size: var(--giris-h1);
  line-height: .84;
  letter-spacing: -.022em;
  color: var(--yazi);
  text-wrap: nowrap;               /* iki satır markup'ta sabit; tarayıcı yeniden dengelemesin */
  margin: 0;
}
.bolum--giris .baslik-dev .satir { display: block; }
.bolum--giris .baslik-dev .satir__ic { display: inline-block; }
/* İlk satır: optik hizalama — dar H'nin sol kenar boşluğunu kapat. */
.bolum--giris .baslik-dev .satir:first-child { margin-left: -.03em; }
.bolum--giris .baslik-dev .serif-vurgu {
  /* Serif'in x-yüksekliği Archivo büyük harfinin ~%45'i: 1,12em ile göz dengesi kurulur.
     Satır aralığı sıkı: "d"nin çıkıntısı üst satırın taban çizgisine yaklaşır. */
  font-size: 1.12em;
  line-height: .8;
  letter-spacing: -.012em;
  margin-top: -.02em;
  padding-left: .02em;
  color: var(--yazi);
}

.giris__alt {
  margin-top: 20px;
  max-width: 34rem;
  color: var(--yazi-2);
}

.giris__metin .magaza-grup { margin-top: 26px; }

.giris__alt-satir {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 16px;
  margin-top: 10px;
}
.giris__alt-satir .dugme--metin { margin-left: -4px; color: var(--yazi); }
.giris__alt-satir .dugme--metin .ikon { transition: transform var(--s-kisa) var(--e-standart); }
@media (hover: hover) {
  .giris__alt-satir .dugme--metin:hover .ikon { transform: translateY(2px); }
}
.giris__not {
  font-size: var(--t-kucuk); line-height: 1.4; color: var(--yazi-2);
}

.giris__metin .cip-satir { margin-top: 16px; gap: 6px; }
.giris__metin .cip {
  padding: 5px 9px;
  font-size: 11px; letter-spacing: .1em;
  background: rgba(6,7,10,.35);
}

/* Kısa telefon ekranı (SE, 360×640): metin bir ekrandan uzun, sabit şerit metnin
   arkasına düşer. Metnin arkasına zeminle aynı renkte yumuşak bir perde: iz üstte
   görünür kalır, paragraf ve düğmeler okunur. Statik, canlandırılmaz. */
@media (max-width: 767.98px) and (max-height: 760px) {
  .giris__metin::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: calc(-1 * var(--kenar)); right: calc(-1 * var(--kenar)); bottom: 0;
    top: calc(var(--ust-yukseklik) + 18svh - 48px);
    background: linear-gradient(180deg, rgba(6,7,10,0) 0, rgba(6,7,10,.86) 64px, rgba(6,7,10,.9) 100%);
  }
}

/* ---------- 2. Statik iz (JS'siz, azalt, sahne hazır olmadan önce) ---------- */
.giris__statik-iz {
  position: absolute; z-index: 0; left: 0;
  top: calc(var(--ust-yukseklik) + 7svh);
  width: 300%; max-width: none; height: 17svh;
  overflow: visible;
  pointer-events: none;
  /* Kenarlarda söner: iz ekranın içinden geçer, kutudan kesilmez. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 27%, transparent 33.3%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 27%, transparent 33.3%);
  transition: opacity 400ms var(--e-standart), visibility 0s 400ms;
}
.giris__statik-iz path {
  fill: none;
  stroke: var(--kirmizi); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* §5.9: 2px iz, altında 8px'lik %18 hale. Statik filtre, animasyonsuz. */
  filter: drop-shadow(0 0 3px rgba(255,23,68,.55)) drop-shadow(0 0 8px rgba(255,23,68,.18));
}
html.webgl-hazir .giris__statik-iz,
html.sahne-2d .giris__statik-iz { opacity: 0; visibility: hidden; }

/* ---------- 3. Telefon (yalnız masaüstü) ---------- */
.giris__telefon { display: none; }

/* ---------- 4. Sayılar: statik liste (temel.css §21'in hero'ya uyarlaması) ---------- */
.giris__sayilar {
  position: relative; z-index: 1;
  grid-row: 2; grid-column: 1;
  width: min(100% - 2 * var(--kenar), var(--genislik));
  margin-inline: auto;
  padding-bottom: var(--bolum-dikey);
}
.giris__sayilar .giris__deger { color: var(--yazi); }
.giris__aciklama b {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -.005em;
  margin-bottom: 4px;
}

/* ---------- 5. Koreografi (GSAP var, azalt yok) ---------- */
.giris--koreo .giris__sayilar {
  /* grid-area auto: mutlak konumlu ızgara çocuğu, satır alanına değil kapsayıcının
     tamamına göre yerleşsin. Alta sabit ve bir ekran boyu: metin ekrandan uzunsa da
     pin anında görünen alan tam bu kutudur. */
  position: absolute; inset: auto 0 0 0; z-index: 1;
  height: 100vh; height: 100svh;
  grid-area: auto;
  width: auto; margin: 0; padding: 0;
  display: block;
  pointer-events: none;
}
.giris--koreo .giris__sayi {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  padding: var(--ust-yukseklik) var(--kenar) env(safe-area-inset-bottom);
  border: 0;
}
.giris--koreo .giris__deger {
  align-self: center;
  /* Hedef genişlik: dikey ekranda %84, yatayda %50 (WebGL sayı düzlemiyle aynı, §5.3).
     --gen = rakamın em cinsinden genişliği (ölçüldü, letter-spacing dahil). */
  --hedef: 84vw;
  font-size: min(var(--t-dev-sayi), calc(var(--hedef) / var(--gen, 1)), 40svh);
  line-height: .8;
  letter-spacing: -.03em;
  white-space: nowrap;
  transform-origin: 50% 55%;
  color: var(--yazi);
}
.giris--koreo .giris__sayi[data-faz="1"] .giris__deger { --gen: .96; }
.giris--koreo .giris__sayi[data-faz="2"] .giris__deger { --gen: 2.18; }
.giris--koreo .giris__sayi[data-faz="3"] .giris__deger { --gen: 3.12; }
.giris--koreo .giris__aciklama {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 22svh;
  max-width: 30ch;
  padding-bottom: 12px;
  text-align: center;
  font-size: var(--t-govde); line-height: 1.45;
  color: var(--yazi-2);
  text-wrap: balance;
}
.giris--koreo .giris__aciklama b {
  display: block;
  font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1;
  color: var(--yazi);
  margin-bottom: 8px;
}

/* WebGL sayıyı parçacıklarla çiziyor: DOM rakamı yer tutar ama görünmez (§4.1). */
html.webgl-hazir:not(.kademe-c) .giris--koreo:not(.giris--dom-sayi) .giris__deger { visibility: hidden; }

/* Metin tamamen çıktı: görünmeyen düğmeler tıklanmasın, odak almasın. */
.giris--metin-gitti .giris__metin { visibility: hidden; pointer-events: none; }

/* will-change yalnız pin etkinken (§2.6). */
.giris--pin .giris__metin > *,
.giris--pin .baslik-dev .satir,
.giris--pin .giris__deger,
.giris--pin .giris__aciklama,
.giris--pin .giris__telefon { will-change: transform, opacity; }

/* Açılış (giris.js, yükleme örtüsü kalkarken bir kez): satırlar maskeden yükselir.
   Dolgu + eksi kenar boşluğu = düzen değişmez; serif "y"nin kuyruğu kesilmez. */
.giris--acilis .baslik-dev .satir {
  overflow: hidden;
  padding: .22em .16em .16em; margin: -.22em -.16em -.16em;   /* İ noktası ve "y" kuyruğu */
}
.giris--acilis .baslik-dev .satir:first-child { margin-left: -.19em; }

/* ---------- 6. Tablet (768–1023): mobil düzen, daha geniş nefes ---------- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .giris__metin { padding-top: calc(var(--ust-yukseklik) + 22svh); }
  .bolum--giris { --giris-h1: clamp(4rem, 13.5vw, 7.5rem); }
}

/* ---------- 7. Masaüstü (≥ 1024) ---------- */
@media (min-width: 1024px) {
  .bolum--giris {
    /* Sol 7 kolon ≈ 690px ve ekran yüksekliği: ikisinden küçüğü. */
    --giris-h1: clamp(5rem, min(9.1vw, 15.5svh), 9.5rem);
  }
  .giris__metin {
    justify-content: center;
    padding-top: calc(var(--ust-yukseklik) + 5svh);
    padding-bottom: 7svh;
  }
  .giris__metin > :not(h1) { max-width: 640px; }
  .giris__metin .hap { margin-bottom: 26px; }
  .giris__alt { margin-top: 28px; max-width: 32rem; }
  .giris__metin .magaza-grup { margin-top: 34px; }
  .giris__alt-satir { margin-top: 14px; }
  .giris__metin .cip-satir { margin-top: 22px; }
  .bolum--giris .baslik-dev .serif-vurgu { padding-left: .5em; }   /* editoryal kaydırma */

  .giris__statik-iz {
    /* svh: statik düzende .giris__sabit ilk ekrandan uzundur, yüzde kayardı. */
    top: 40svh; height: 20svh;
    width: 160%;
    /* 2D şeritteki gibi: başlık sütununun arkasında sönük, telefona doğru tam. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 5%, rgba(0,0,0,.45) 30%, #000 45%, #000 54%, transparent 62.5%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 5%, rgba(0,0,0,.45) 30%, #000 45%, #000 54%, transparent 62.5%);
  }

  .giris__telefon {
    display: block;
    position: absolute; z-index: 1;
    top: 50vh; top: 50svh;          /* ilk ekranın ortası (statik düzende kutu daha uzun) */
    right: max(var(--kenar), calc((100% - var(--genislik)) / 2 + 12px));
    width: var(--giris-tel-w);
    margin-top: calc(var(--giris-tel-w) * -10 / 9 + var(--ust-yukseklik) / 2);
    transform: perspective(1600px) rotateY(-16deg) rotateX(4deg);
    transform-origin: 50% 50%;
    transition: none;
  }
  /* Telefonun arkasında tek ışık kaynağının yansıması: yumuşak kırmızı hale. */
  .giris__telefon::before {
    content: ""; position: absolute; z-index: -1;
    inset: 8% -38% 4% -30%;
    background: radial-gradient(50% 46% at 50% 55%, rgba(255,23,68,.20), rgba(139,0,0,.08) 55%, transparent 75%);
    transform: translateZ(-120px);
    pointer-events: none;
  }
  /* Ekran görseli gelince yumuşakça belirir (html.ekran-var, giris.js). */
  html.js:not(.ekran-var) .giris__telefon .telefon__ekran img { opacity: 0; }
  .giris__telefon .telefon__ekran img { transition: opacity 700ms var(--e-cikis); }

  .giris--koreo .giris__deger { --hedef: 50vw; font-size: min(var(--t-dev-sayi), calc(var(--hedef) / var(--gen, 1)), 42svh); }
  .giris--koreo .giris__aciklama b { font-size: 2.5rem; }
  .giris--koreo .giris__aciklama { max-width: 34ch; }
}

/* Çok geniş ekranlar: başlık sütunu 1200px kapsayıcıya oturur. */
@media (min-width: 1600px) {
  .bolum--giris { --giris-h1: clamp(5rem, min(8.4vw, 15.5svh), 9.5rem); }
}

/* ---------- 8. Azalt modu (§2.6, §5.9) ---------- */
html.hareket-azalt .giris__telefon .telefon__ekran img { transition: none; }
html.hareket-azalt .giris__statik-iz { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .giris__telefon .telefon__ekran img, .giris__statik-iz { transition: none; }
}

/* ---------- Entegrasyon: masaüstünde şerit paragrafın arkasından geçiyor ----------
   K0'da 3D şerit metin sütununun arkasından akar ve alt metni kesiyordu (P3a notu).
   Paragrafın arkasına zeminle aynı renkte yumuşak, statik bir perde: paragrafla birlikte
   çıkar (çocuk öğe), sayıların üstünde kalmaz. */
@media (min-width: 1024px) {
  .giris__alt { position: relative; text-shadow: 0 1px 10px rgba(6,7,10,.9); }
  .giris__alt::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -26px -40px;
    background: rgba(6,7,10,.84);
    /* Kenarları iki eksende maskeyle sönümlenen perde (radyal gradyan kenarlarda çok zayıf kalıyordu). */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent);
            mask-composite: intersect;
  }
}