/* Siluet ana sayfa B7 rakamlar (ANA-SAYFA-KURGU 2.7). Sahibi WP8.
   Tek ekranda çapraz kompozisyon: "2005" sol üst, "22" sağda, "5" aşağıda ortaya yakın, sol altta faaliyet alanı. Boy sırası okuma sırasıyla büyür (yazı boyu 22 : 26 : 33 birim,
   mürekkep boyu yaklaşık 1 : 1,2 : 1,5): "2005" en geniş, "5" en uzun; üç rakam bir hiyerarşi kurar, "5" sonradan eklenmiş durmaz. Rakamların içi cephe detaylarıyla dolar
   (background-clip: text, sakin ve düşük doygun); dolgu yalnız 40vh beklemesinde yavaşça akar (--ak, js/b-sayilar.js), G6 ve G7 sırasında durur.
   Bölüm sözleşmesi (ORTAK 4): section izdir, doğrudan çocuğu [data-sahne] yapışık 100svh. */
@font-face { font-family: "Geist Mono"; src: local("Geist Mono"), url("../../fonts/GeistMono-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

.sayilar { --zemin: #FAF9F7; --bant-h: 16.6svh; --yol: 40vh; position: relative; height: calc(100svh + var(--devir-giris, 0px) + var(--yol) + var(--devir-cikis, 0px)); }
.sayilar__sahne {
  --u: min(1vw, 1.5625svh);                       /* 1440x900 ve 1280x720'de aynı oran: kompozisyon hangi ekranda olursa olsun tek ekrana sığar */
  --mono: var(--mono-yazi, "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
}
.sayilar__ic { position: absolute; inset: 0; background: var(--zemin); }
/* G7 (js/b-iletisim.js) bu katmanı 1 -> 3,4 ölçekler: kendi bileşik katmanı olmazsa background-clip: text rakamlar her karede yeniden taranır (ölçüm, başsız Edge: G7 medyanı 1440x900 48 -> 7-14 ms, 390x844 28 -> 7 ms; kaydırma durunca keskin yeniden çizim js/b-iletisim.js g7()) */
html:not(.az-hareket) .sayilar__ic { will-change: transform; }
.sayilar__kamera { position: absolute; inset: 0; transform-origin: 50% 50%; }

/* ---------- rakamlar ---------- */
.sayilar__r { position: absolute; display: block; margin: 0; width: max-content; font-size: var(--fs); }
/* ink üstü kutunun .13 em altındadır; kutu üstünü ink hedefinden geri alırız. Ink altı kutu altının .06 em üstündedir. */
.sayilar__r--a { --fs: min(clamp(200px, calc(22 * var(--u)), 340px), calc(var(--azami, 1200px) / 2.36)); left: var(--kenar); top: calc(max(88px, 11svh) - .13em); }
.sayilar__r--b { --fs: clamp(150px, calc(26 * var(--u)), 460px); right: calc(var(--kenar) + .008em); top: calc(33svh - .13em); }
.sayilar__r--c { --fs: clamp(150px, calc(33 * var(--u)), 540px); left: 36vw; bottom: calc(12.5svh - .06em); }
.sayilar__n {
  display: block; margin: 0 -.04em 0 -.03em; padding: .04em .04em .06em 0; white-space: nowrap;
  font-weight: 700; font-size: inherit; line-height: .8; letter-spacing: -.04em; font-variant-numeric: lining-nums;
  color: #4A4742;                                  /* dolgu gelmeden önce ve desteklemeyen tarayıcıda düz mürekkep */
  -webkit-text-size-adjust: none;
}
/* dolgu: fotoğraf + sakin, düşük doygun işleme (Burcu R69: aşırı renkli olmasın; Kurallar 12: soluk da olmasın): üstteki katman doygunluğu sıcak nötre çeker,
   ortadaki katman en açık yerleri sınırlar (rakam sayfa zemininden ayrılır), alttaki fotoğraf. js/b-sayilar.js görsel çözülünce .foto ekler. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sayilar__n.foto {
    background-image: linear-gradient(#A19A8F, #A19A8F), linear-gradient(#BDB8B0, #BDB8B0), var(--foto);
    background-blend-mode: saturation, multiply, normal;
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, var(--s, cover) var(--s, cover);
    background-position: 0 0, 0 0, calc(var(--x0, 0px) + (var(--x1, 0px) - var(--x0, 0px)) * var(--ak, 0)) calc(var(--y0, 0px) + (var(--y1, 0px) - var(--y0, 0px)) * var(--ak, 0));
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
}
[data-delik] { display: inline; }

/* ---------- etiketler ve faaliyet alanı ---------- */
.sayilar__et, .sayilar__bant-yazi { font-family: var(--mono); }
.sayilar__et { position: absolute; display: block; overflow: clip; font-size: 13px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; color: var(--gri); white-space: nowrap; padding: 2px 0; }
.sayilar__et > span, .sayilar__sehir > span { display: block; }
.sayilar__r--a .sayilar__et { left: calc(100% + 22px); top: calc(var(--fs) * .13 + 2px); }
.sayilar__r--b .sayilar__et { right: calc(var(--fs) * -.008); top: calc(100% + 2px); }
.sayilar__r--c .sayilar__et { left: calc(100% + 10px); bottom: calc(var(--fs) * .06 + 2px); }
.sayilar__alan { position: absolute; left: var(--kenar); bottom: 6.5svh; display: grid; gap: 10px; }
.sayilar__alan .sayilar__et { position: static; }
.sayilar__sehir { margin: 0; overflow: clip; padding: .08em 0 .16em; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.15; font-weight: 500; letter-spacing: -.018em; color: var(--metin); }

/* ---------- G6 bantları (yalnız devir kurulunca js görünür yapar) ----------
   Sitenin metin siyahı: krem sayfada tek koyu an, gerçek bir film kesmesi gibi okunur (sayfa tonunda bant krem üstüne krem kalıyordu). Altyazı sıcak açık ton. */
.sayilar__bant { position: absolute; left: 0; right: 0; z-index: 4; height: var(--bant-h); background: #1D1D1F; visibility: hidden; pointer-events: none; }
.sayilar__bant--ust { top: 0; }
.sayilar__bant--alt { bottom: 0; display: flex; align-items: center; justify-content: center; }
.sayilar__bant-yazi { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #F5EFE8; opacity: 0; }
/* telefon (js/b-sayilar.js .g6-tel): Kurumsal akışta olduğu için bantlar ekrana sabitlenir, Rakamlar ekranın altından yapışma noktasına yükselirken kapanıp açılır */
.sayilar.g6-tel .sayilar__bant { position: fixed; }
.sayilar.g6-tel .sayilar__bant--alt { align-items: flex-start; padding-top: calc(var(--bant-h) * .3); }   /* altyazı bandın üst üçte birinde: sağ alttaki Ara | WhatsApp hapına yapışmaz */

/* ---------- telefon: rakamlar alt alta, etiketler rakamın üstünde ---------- */
@media (max-width: 899px) {
  /* ANA-SAYFA-KURGU 2.7 telefon: rakamlar alt alta; spec boyları (30/34/30vw) 390'da yarı boş kalıyordu, rakamlar büyütüldü ve masaüstü zikzağı korundu
     (2005 solda, 22 sağa yaslı, 5 içeride); etiketler yan yana sığmadığı için her rakamın üstünde, rakamın hizasında */
  .sayilar { --yol: 28vh; --bant-h: 18svh; }
  .sayilar__kamera { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: clamp(84px, 12svh, 104px) var(--kenar) calc(clamp(72px, 11svh, 92px) + env(safe-area-inset-bottom, 0px)); }
  .sayilar__r, .sayilar__alan { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; }
  .sayilar__r { display: flex; flex-direction: column-reverse; align-items: flex-start; width: auto; }
  .sayilar__r--a { --fs: min(38vw, 17.5svh, calc(var(--azami, 1200px) / 2.36)); }
  .sayilar__r--b { --fs: min(52vw, 24svh); align-self: flex-end; align-items: flex-end; margin-right: calc(var(--fs) * .044); }
  .sayilar__r--c { --fs: min(56vw, 26svh); margin-left: 24vw; }
  .sayilar__r .sayilar__et { position: static; margin: 0 0 calc(10px - var(--fs) * .13) calc(var(--fs) * .03); }
  .sayilar__r--b .sayilar__et { margin: 0 calc(var(--fs) * -.03) calc(10px - var(--fs) * .13) 0; }
}

/* ---------- hareket azaltma: sabit kompozisyon, bant ve delik yok ---------- */
html.az-hareket .sayilar { height: auto; }
html.az-hareket .sayilar__sahne { position: relative; }
html.az-hareket .sayilar__bant { display: none; }