/* ============================================================
   TANITIM SİTESİ — GECE YAYINI
   ============================================================
   🔴 NEDEN YENİDEN YAZILDI: ilk sürüm 12 kart ve TEK kart stiliyle
   kuruluydu; dört bölüm de aynı kalıbı tekrarlıyordu (mono etiket →
   başlık → paragraf → kart sırası). Deniz'in tarifiyle "hiç uğraşılmamış,
   yapay zekâ yapmış gibi". Sorun renk ya da yazı değil, RİTİMSİZLİKTİ:
   hiçbir bölüm diğerinden farklı davranmıyordu.

   Yeni kural: HER BÖLÜM FARKLI DAVRANIR.
     .perde   tam ekran, arkada gerçek ekran görüntüsü
     .blok    kaplı, asimetrik görsel + metin
     .serit   kenardan kenara koyu, dev oyun listesi
     .afis    tam genişlik oyun afişi (oyunlar sayfası)
     .ikili   iki büyük blok
   Aynı "kutu" kalıbı yalnız SSS ve paketlerde kaldı.

   🔴 `ortak.css`'e DOKUNULMUYOR (TV ve telefon onu paylaşıyor); yalnız
   z-index listesine site sınıfları eklendi — atmosfer katmanı içeriğin
   üstüne boyanıyordu.
   ============================================================ */

:root {
  --kenar: clamp(20px, 5vw, 88px);
  --kap: 1240px;

  /* ------------------------------------------------------------
     TİPOGRAFİ — KURUMSAL ÖLÇEK
     🔴 Bir tur önce hero Archivo **900** @107px ve **−3.7px** sıkıştırmaydı;
     bölüm başlıkları 900@66px, oyun adları 900@62px ve YEDİ AYRI RENKTE.
     Deniz'in tarifi: "site baya çocuk sitesi gibi… ama biz KURUMSAL
     firmalara satıyoruz". Ağırlık+sıkıştırma+gökkuşağı üçlüsü tüketiciye
     satan bir eğlence markasının dili; işletmeye satan site ölçülü konuşur.
     Ağırlık 900 → 600/700, boyutlar yarıya, sıkıştırma −0.02em'e indi.
     ------------------------------------------------------------ */
  /* 🔴 11.8px'ti. Bu token yalnız süs etiketlerinde değil, İÇERİK
     taşıyan yerlerde de kullanılıyor: oyun satırındaki "2-250 kişi · 10-15 dk",
     afişteki kapasite künyesi, paket notu, tablo başlığı. Mono + 0.14em harf
     aralığı + 11.8px üçlüsü kurumsal bir sayfada okunmuyordu. */
  --t-etiket: clamp(12.5px, .92vw, 13.5px);
  --t-govde:  clamp(15px, 1.05vw, 17px);
  --t-alt:    clamp(18px, 1.35vw, 21px);
  --t-baslik: clamp(26px, 2.6vw, 40px);
  --t-hero:   clamp(34px, 3.9vw, 58px);
  --t-dev:    clamp(20px, 1.9vw, 28px);
  --t-rakam:  clamp(28px, 2.6vw, 38px);
}

/* ---- içeriğe atla: klavyeyle gezen ziyaretçi her sayfada altı bağlantıyı
   tek tek geçmek zorunda kalıyordu ---- */
.atla {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--kirmizi); color: #fff; padding: 12px 20px; border-radius: 0 0 3px 0;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.atla:focus { left: 0; }

/* ---- iskelet ---- */
.site-govde { max-width: none; margin: 0; padding: 0; }
/* Bağlantıların varsayılan mavisi hiçbir yerde sızmasın. */
.site-govde a { color: inherit; }
.kap { max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar); }
.genis { max-width: 1600px; }

/* ---- üst çubuk ----
   🔴 `site-ust` sınıf adı `test-site.js:116`'da kilitli, değişmiyor. */
.site-ust {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  max-width: 1600px; margin: 0 auto; padding: 22px var(--kenar);
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
}
.site-marka { text-decoration: none; display: flex; flex-direction: column; justify-content: center;
  line-height: 1; min-height: 44px; }
.sm-ad { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .01em; color: var(--metin); }
.sm-alt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--kirmizi-parlak); margin-top: 4px; }
.site-gez { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
/* 🔴 Dokunma hedefi: satır 33px yüksekliğindeydi. Parmak ucu ~44px'lik
   bir alan ister; 33px'te yanlış bağlantıya basılıyor. */
.site-gez a {
  color: var(--soluk); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 0 14px; border-radius: 2px; transition: color .18s;
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-gez a:hover { color: var(--metin); }
.site-gez a.etkin { color: var(--altin); }
.site-panel {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-decoration: none; color: var(--metin); border: 1px solid var(--cizgi);
  padding: 0 20px; min-height: 44px; display: inline-flex; align-items: center;
  border-radius: 2px; transition: border-color .18s, color .18s;
}
.site-panel:hover { border-color: var(--altin); color: var(--altin); }

/* ============================================================
   PERDE — açılış
   ============================================================
   🔴 ARKA PLANDA EKRAN GÖRÜNTÜSÜ KULLANMA. Bir kez denendi ve felaketti:
   TV ekranı bir FOTOĞRAF DEĞİL, baştan aşağı YAZI. %34 saydamlıkla arkaya
   konunca "Telefonunu kumandaya çevir", "B7E4", "34/36 oyuncu hazır" ve
   oyuncu adları dev başlığın içinden geçti; ikisi de okunmadı.
   Deniz'in tarifi: "arkasında silik bir sürü şey yazıyor, ne yazdığı bile
   okunmuyor". Ürün görüntüsü NET ve AYRI bir öge olarak duruyor artık. */
.perde {
  position: relative; overflow: hidden;
  padding: clamp(96px, 12vh, 150px) 0 clamp(50px, 7vh, 92px);
}
.perde::after {          /* yalnız köşe ışığı — okunacak bir şey yok */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 78% 18%, rgba(201,24,43,.15), transparent 70%);
}
.perde .kap { position: relative; z-index: 2; }
.perde-ic { display: block; }
.perde-yazi { min-width: 0; }
/* 🔴 `.perde p` kuralı bunu eziyordu (aynı öge hem `p` hem `.kunye`):
   künye 13px yerine 28.8px basılıyordu. Seçici güçlendirildi. */
.perde .kunye {
  font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .14em;
  color: var(--altin); display: flex; gap: 16px; align-items: center;
  /* 🔴 `nowrap + overflow:hidden` dar ekranda künyeyi SESSİZCE kesiyordu —
     kırpıldığı hiçbir yerde belli olmuyor. Sarmasına izin verildi. */
  margin-bottom: clamp(14px, 2vh, 26px); flex-wrap: wrap;
}
.kunye i { display: block; width: clamp(24px, 4vw, 58px); height: 1px; background: var(--altin-koyu); font-style: normal; }
.perde h1 {
  font-size: var(--t-hero); font-weight: 600; line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 clamp(14px, 2vh, 24px); max-width: 20ch;
}
/* 🔴 `.im` (altın serif italik) kaldırıldı: butik/dergi tonu veriyordu.
   Şablonlarda kalan varsa sade metin gibi görünsün diye nötr bırakıldı. */
.perde h1 .im, .blok h2 .im, .serit .ikiz h2 .im { font-family: inherit; font-style: normal; font-weight: 600; color: inherit; }
.perde p {
  font-size: var(--t-alt); color: var(--soluk); max-width: 60ch;
  line-height: 1.6; margin: 0;
}
/* 🔴 Düğmeler paragrafın 300px SAĞINDA, havada duruyordu: sayfanın birincil
   çağrısı metinden kopmuş, boş alanın ortasında kalmıştı. Metnin hemen
   altına alındı — okuma sırası başlık → açıklama → eylem. */
.perde-sira {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(20px, 3vh, 30px); margin-bottom: clamp(28px, 4vh, 52px);
}
/* Ürün görüntüsü: kabın tamamını kaplıyor. 1080px'lik sınır 1264px'lik
   kapta sağda 184px'lik bir çıkıntı bırakıyordu. */
.perde .ekran { max-width: 100%; }
.perde .ekran img { width: 100%; }
.perde-alt span { white-space: nowrap; }
.perde-alt {
  margin-top: clamp(26px, 4vh, 48px); display: flex; justify-content: space-between;
  align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .12em; color: var(--soluk);
  border-top: 1px solid var(--cizgi-koyu); padding-top: 14px;
}

/* ---- düğmeler ---- */
.dgm-satir { display: flex; gap: 14px; flex-wrap: wrap; }
.site-dgm {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; padding: 13px 22px; border-radius: 3px;
  background: var(--kirmizi); color: #fff; border: 1px solid var(--kirmizi);
  transition: background .18s, border-color .18s, color .18s;
}
.site-dgm:hover { background: var(--kirmizi-parlak); border-color: var(--kirmizi-parlak); }
.site-dgm.bos { background: transparent; color: var(--metin); border-color: var(--cizgi); box-shadow: none; }
.site-dgm.bos:hover { border-color: var(--altin); color: var(--altin); }

/* ============================================================
   BLOK — asimetrik görsel + metin
   ============================================================ */
/* 🔴 Dolgu küçüldü: 160px'lik üst+alt, kısa içerikle birleşince
   bölümler arasında 250px'e varan ölü siyah bant bırakıyordu. */
.blok { padding: clamp(52px, 7vh, 96px) 0; }
.blok-bas {
  font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .14em;
  color: var(--altin); display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
}
.blok-bas::before { content: ''; width: 34px; height: 1px; background: var(--altin-koyu); }
.blok h2, .serit .ikiz h2 {
  font-size: var(--t-baslik); font-weight: 600; line-height: 1.14; letter-spacing: -.02em;
  margin: 0 0 16px; max-width: 24ch;
}

.blok p, .serit .ikiz p { font-size: var(--t-govde); color: var(--soluk); max-width: 54ch; line-height: 1.6; margin: 0; }

/* iki sütun: metin + görsel (yön sınıfla değişir) */
.ikiz { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.ikiz.ters > :first-child { order: 2; }

/* ---- adım listesi: kart DEĞİL, dev rakam + satır ---- */
.adim-liste { display: flex; flex-direction: column; gap: clamp(16px, 2.2vh, 28px); margin-top: 8px; }
.adim {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 32px); align-items: start;
  padding-top: 20px; border-top: 1px solid var(--cizgi-koyu);
}
/* Dev içi boş rakamlar yerine sakin mono numara. */
.adim-no {
  font-family: var(--font-mono); font-size: var(--t-rakam); font-weight: 700; line-height: 1;
  color: var(--altin-koyu); letter-spacing: 0;
}
.adim h3 { font-size: var(--t-alt); font-weight: 600; margin: 0 0 8px; letter-spacing: -.02em; }
.adim p { font-size: var(--t-govde); color: var(--soluk); line-height: 1.55; max-width: 42ch; }

/* ---- görsel çerçevesi ---- */
.ekran { position: relative; }
.ekran img { display: block; width: 100%; height: auto; border-radius: 3px; border: 1px solid var(--cizgi); }
/* 🔴 Çentik görselden KOPUK, havada duran bir "L" gibi duruyordu. İki
   sebebi vardı: (1) çerçevenin 9px dışındaydı, (2) `.ekran` kutusu yalnız
   görseli değil ALTINDAKİ KÜNYEYİ de kapsıyor — "alt" demek görselin
   altı değil, künyenin altı demekti. Çentik görselin ÜST köşesine alındı;
   orası kutunun da üst kenarı olduğu için her zaman görsele oturuyor. */
.ekran::after {
  content: ''; position: absolute; right: -1px; top: -1px; width: 24px; height: 24px;
  border-right: 2px solid var(--altin); border-top: 2px solid var(--altin);
  border-top-right-radius: 3px;
}
.ekran-etk {
  font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .12em;
  color: var(--soluk); margin-top: 14px; display: block;
}
.ekran.egik { transform: rotate(-1.2deg); }
/* 🔴 Telefon karesi 300px'te kalınca sağ sütun boş görünüyordu. Panel
   içine alındı: çerçeve sütunu dolduruyor, telefon ortada duruyor. */
.ekran.telefon {
  background: linear-gradient(160deg, var(--panel), var(--zemin2));
  border: 1px solid var(--cizgi); border-radius: 4px;
  padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; align-items: center;
  /* 🔴 Panel sütunun tamamına (664px) yayılıyordu; içindeki telefon 300px
     kalınca kutunun yarısı boş görünüyor ve yanındaki metin sütunu
     dikeyde ortalanırken çok aşağı kayıyordu. */
  max-width: 460px; margin-left: auto; margin-right: auto;
}
/* 🔴 300px'lik üst sınır geniş sütunda paneli yarı yarıya boş bırakıyordu
   (664px'lik kutuda 300px'lik telefon). Sütuna göre büyüyor. */
.ekran.telefon img { max-width: min(360px, 72%); border-radius: 20px; border-color: var(--cizgi); }
.ekran.telefon .ekran-etk { text-align: center; }

/* ============================================================
   ŞERİT — kenardan kenara, dev oyun listesi
   ============================================================ */
.serit {
  background: linear-gradient(180deg, var(--zemin2), #080706 60%, var(--zemin2));
  border-top: 1px solid var(--cizgi-koyu); border-bottom: 1px solid var(--cizgi-koyu);
  padding: clamp(56px, 8vh, 104px) 0;
  /* 🔴 Vitrinin arkasındaki ışık halkası (`::before`, inset -14%) sayfayı
     yatayda 22px taşırıyordu. Sözde-öge olduğu için düğüm taramasında da
     görünmüyordu — şeridi kırpmak hem halkayı hem gelecekteki benzerlerini
     sayfa dışına taşırmaktan kurtarıyor. */
  overflow: hidden;
}
 /* 🔴 Başlık solda, paragraf ta sağda duruyordu; aralarındaki boşluk
   yüzünden ikisi bir bütün gibi okunmuyordu. Paragraf başlığın altına. */
.serit-ust { max-width: 34ch; margin-bottom: clamp(24px, 3.4vh, 44px); }
.serit-ust h2 { margin-bottom: 16px !important; max-width: none; }
.serit-ust h2 { font-size: var(--t-baslik); font-weight: 600; line-height: 1.14; letter-spacing: -.02em; margin: 0; }
.serit-ust p { font-size: var(--t-govde); color: var(--soluk); max-width: 46ch; margin: 0; line-height: 1.55; }
.oyun-sahne { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 70px); align-items: center; }

.oyun-liste { display: flex; flex-direction: column; }
.oyun-satir {
  --renk: var(--kirmizi);
  display: flex; align-items: baseline; gap: 18px; text-decoration: none;
  padding: clamp(8px, 1.4vh, 18px) 0; border-bottom: 1px solid var(--cizgi-koyu);
  transition: color .2s, padding-left .2s;
}
.oyun-satir .ad {
  font-size: var(--t-dev); font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: var(--metin); transition: color .2s;
  /* 🔴 Oyun adı ASLA sarmasın: "NE KADAR?" iki satıra düşünce liste
     bozuluyor ve vitrinle hizası kayıyor. */
  white-space: nowrap;
}
.oyun-satir .olcu {
  font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .06em;
  color: var(--soluk); margin-left: auto; white-space: nowrap; align-self: center;
}
/* 🔴 Yedi dev renkli isim "oyuncak" gibi duruyordu. Renk artık yalnız
   INCE bir işaret: satırın solundaki 2px'lik çizgi. Yazı nötr kalıyor. */
.oyun-satir { border-left: 2px solid transparent; padding-left: 14px; }
.oyun-satir:hover, .oyun-satir.acik { border-left-color: var(--renk); background: rgba(255,255,255,.02); }
.oyun-satir.acik .ad { color: var(--metin); }

.oyun-vitrin { position: relative; }
.oyun-vitrin img {
  display: block; width: 100%; height: auto; border-radius: 3px; border: 1px solid var(--cizgi);
  grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease;
}
.oyun-vitrin { display: grid; }
.oyun-vitrin img.gorunur { opacity: 1; }
.oyun-vitrin::before {
  content: ''; position: absolute; inset: -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--vitrin-renk, var(--kirmizi)) 0%, transparent 68%);
  opacity: .18; transition: background .35s;
}

/* ============================================================
   AFİŞ — oyunlar sayfası, oyun başına tam genişlik
   ============================================================ */
.afis {
  --renk: var(--kirmizi);
  position: relative; padding: clamp(44px, 6vh, 84px) 0; border-top: 1px solid var(--cizgi-koyu);
  /* Anasayfadan `/oyunlar#logomogo` diye gelindiğinde bölüm ekranın tam
     tepesine yapışıyordu; nefes payı bırakılıyor. */
  scroll-margin-top: 24px;
}
/* 🔴 Oyun rengi bölümün SOL KENARINDA tam boy 2px'lik bir çubuktu; sayfanın
   en solunda, içerikten kopuk duruyordu — kaydırma çubuğu artığı gibi
   okunuyor. Renk artık oyunun ADININ yanında: anasayfadaki liste satırlarıyla
   aynı dil, ve neyi işaretlediği belli. */
.afis-ad { border-left: 2px solid var(--renk); padding-left: 16px; }
.afis .kap { position: relative; z-index: 1; }
.afis-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 4.4vw, 76px); align-items: center; }
.afis:nth-child(even) .afis-ic > :first-child { order: 2; }
.afis:nth-child(even) { --isik-x: 88%; }
.afis-ad {
  color: var(--metin);
  font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1.16; letter-spacing: -.015em;
  margin: 0 0 12px;
}
.afis-ozet { font-size: var(--t-alt); color: var(--metin); opacity: .9; line-height: 1.4; margin: 0 0 22px; max-width: 34ch; }
.afis-olcu { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.afis-olcu span {
  font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .08em;
  border: 1px solid var(--cizgi); border-radius: 2px; padding: 9px 14px; color: var(--soluk);
}
/* 🔴 Rozetin YAZISI oyun rengindeydi: NERESİ?'nde mavi, DOĞRU TON'da
   turkuaz çıkıyor, "tıklanabilir bağlantı" gibi okunuyordu. Renk yalnız
   kenarlıkta kaldı. */
.afis-olcu span.vurgu { border-color: var(--renk); color: var(--metin); }
.afis-adim { list-style: none; padding: 0; margin: 0 0 20px; counter-reset: a; }
.afis-adim li {
  counter-increment: a; position: relative; padding: 11px 0 11px 44px;
  border-top: 1px solid var(--cizgi-koyu); font-size: var(--t-govde); line-height: 1.5; color: var(--metin);
}
.afis-adim li::before {
  content: counter(a, decimal-leading-zero); position: absolute; left: 0; top: 12px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--altin-koyu); letter-spacing: .06em;
}
.afis-puan { font-size: var(--t-govde); color: var(--soluk); line-height: 1.55; margin: 0; }
.afis-puan b { color: var(--altin); font-weight: 700; }

/* ============================================================
   İKİLİ — iki büyük blok
   ============================================================ */
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--cizgi-koyu); }
.ikili-yol {
  background: var(--zemin); padding: clamp(38px, 6vh, 84px) clamp(26px, 4vw, 64px);
  display: flex; flex-direction: column; gap: 14px; text-decoration: none;
  transition: background .25s;
}
.ikili-yol:hover { background: var(--panel); }
.ikili-yol .etk { font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .14em; color: var(--altin); }
.ikili-yol h3 { font-size: var(--t-baslik); font-weight: 600; line-height: 1.16; letter-spacing: -.015em; margin: 0;
  /* 🔴 RENK ŞART: bağlantı içindeki başlık yoksa tarayıcının mavi link
     rengini alıyor — sayfadaki en büyük iki yazı mavi çıkıyordu. */
  color: var(--metin); transition: color .25s; }
.ikili-yol:hover h3 { color: var(--altin); }
.ikili-yol p { font-size: var(--t-govde); color: var(--soluk); line-height: 1.55; margin: 0; max-width: 34ch; }
.ikili-yol .ok { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; color: var(--metin); margin-top: auto; padding-top: 18px; }

/* ============================================================
   PAKET + SSS — tek "kutu" kalıbının kaldığı yer
   ============================================================ */
.paket-serit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--cizgi-koyu); margin-top: 40px; }
.paket { background: var(--zemin); padding: clamp(28px, 3.4vw, 46px); display: flex; flex-direction: column; }
.paket.one-cikan { background: var(--panel); }
.paket h3 { font-size: var(--t-alt); font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.pk-not { font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .12em; color: var(--altin); margin-bottom: 22px; }
.paket ul { list-style: none; padding: 0; margin: 0; }
.paket li { padding: 13px 0; border-top: 1px solid var(--cizgi-koyu); color: var(--soluk); font-size: var(--t-govde); }

/* 🔴 SSS bölümü DAR kapta (`.kap`, 1240px) duruyordu, sayfanın geri kalanı
   GENİŞ kapta (1600px): 1440px'te sol kenar 72px'ten 172px'e atlıyordu —
   sayfanın ortasında hizanın kaydığı tek yer. Kap eşitlendi, okuma ölçüsü
   bölümün kendi genişliğiyle korunuyor. */
.sss { margin-top: 34px; column-gap: clamp(24px, 4vw, 64px); max-width: 1040px; }
.sss details { border-top: 1px solid var(--cizgi); break-inside: avoid; }
.sss summary {
  cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative;
  font-size: var(--t-alt); font-weight: 600; letter-spacing: -.01em;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: '+'; position: absolute; right: 0; top: 18px; color: var(--altin);
  font-family: var(--font-mono); font-size: 22px; font-weight: 400;
}
.sss details[open] summary::after { content: '−'; }
.sss p { padding: 0 0 22px; color: var(--soluk); font-size: var(--t-govde); line-height: 1.6; max-width: 62ch; }

/* ============================================================
   ALT BİLGİ
   ============================================================ */
.site-alt { border-top: 1px solid var(--cizgi); padding: clamp(38px, 6vh, 72px) var(--kenar) 44px; max-width: 1600px; margin: 0 auto; }
.sa-satir { display: flex; gap: 8px 26px; flex-wrap: wrap; margin-bottom: 20px; }
/* 🔴 Bağlantı kutusu 16px yüksekliğindeydi — telefonda isabet ettirmesi zor. */
.sa-satir a { color: var(--soluk); text-decoration: none; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 40px; }
.sa-satir a:hover { color: var(--altin); }
/* 🔴 `--altin-koyu` bu zeminde 4.36:1 veriyordu, WCAG AA eşiği 4.5. */
.sa-mono { font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .12em; color: var(--soluk); }

/* ============================================================
   HAREKET
   ============================================================
   🔴 JavaScript KAPALIYKEN HER ŞEY GÖRÜNÜR. Belirme animasyonu yalnız
   `<html class="js">` varken devreye giriyor; sınıfı `site-etkiler.js`
   kendisi ekliyor. Aksi hâlde JS'siz ziyaretçi boş sayfa görürdü —
   arama motorları da öyle. */
.js .belir-kaydir { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .belir-kaydir.gorundu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .belir-kaydir { opacity: 1; transform: none; transition: none; }
  .site-dgm:hover { transform: none; }
}

/* ============================================================
   MOBİL
   ============================================================
   🔴 `test-site.js:244-248` bu media query'nin varlığını arıyor. */
@media (max-width: 900px) {
  .ikiz, .oyun-sahne, .afis-ic { grid-template-columns: 1fr; }
  .ikiz.ters > :first-child, .afis:nth-child(even) .afis-ic > :first-child { order: 0; }
  .ikili, .paket-serit { grid-template-columns: 1fr; }
  .site-ust { position: static; padding: 14px var(--kenar) 0; background: var(--zemin); border-bottom: 1px solid var(--cizgi-koyu); gap: 12px; }

  /* 🔴 GEZİNME TELEFONDA KIRIKTI. Dört bağlantı esnek sırada sarıyordu:
     üstte üç tane, altta ORTALANMIŞ TEK BAŞINA "Kafeler için". Hem çirkin
     hem de hangi satırın menü olduğu belirsiz. 2×2 ızgara ile dördü de
     eşit kutuda, her biri 46px yüksekliğinde. */
  .site-gez {
    order: 3; flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    margin: 12px calc(var(--kenar) * -1) 0; border-top: 1px solid var(--cizgi-koyu);
  }
  .site-gez a {
    justify-content: center; min-height: 46px; padding: 0 10px; border-radius: 0;
    border-bottom: 1px solid var(--cizgi-koyu);
  }
  .site-gez a:nth-child(odd) { border-right: 1px solid var(--cizgi-koyu); }
  .site-gez a.etkin { background: rgba(201,163,92,.07); }
  .site-panel { margin-left: auto; }

  .perde { padding: clamp(30px, 5vh, 56px) 0 clamp(36px, 6vh, 64px); }
  /* `space-between` telefonda maddeleri iki yana savuruyor, iki satırlık
     tırtıklı bir blok çıkıyordu. İki sütuna, sola yaslı. */
  .perde-alt { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr;
    gap: 9px 16px; justify-items: start; }
  /* Masaüstünde maddeler tek satırda kalsın diye `nowrap`; 175px'lik telefon
     sütununda ise "MÜŞTERİ TARAFINDA UYGULAMA GEREKMEZ" sarmayınca sayfayı
     231px taşırıyordu. (Bekçi yakaladı.) */
  .perde-alt span { white-space: normal; }
  /* 🔴 Bölüm dolguları telefonda ekranın yarısı kadar boş bant bırakıyordu. */
  .blok { padding: clamp(40px, 5vh, 64px) 0; }
  .serit { padding: clamp(40px, 5vh, 64px) 0; }
  .ikiz { gap: 26px; }

  /* 🔴 `.olcu` telefonda TAMAMEN GİZLİYDİ: kapasite ve süre — kafe
     sahibinin ilk sorduğu iki bilgi — küçük ekranda yok oluyordu.
     Gizlemek yerine adın altına alındı. */
  .oyun-satir { flex-wrap: wrap; gap: 2px 18px; padding-right: 26px; position: relative; }
  .oyun-satir .olcu { margin-left: 0; flex: 0 0 100%; align-self: flex-start; }
  /* Satırların bağlantı olduğu dokunmatik ekranda belli değildi (üstüne
     gelme diye bir şey yok); ok işareti onu söylüyor. */
  .oyun-satir::after {
    content: '→'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-family: var(--font-mono); color: var(--soluk); font-size: 15px;
  }
  /* Telefon karesi: 22px dolgu + %62 genişlik, 350px'lik kutuda görseli
     217px'e düşürüyordu — kutunun yarısı boş kalıyordu. */
  .ekran.telefon { padding: 20px 16px; }
  .ekran.telefon img { max-width: min(300px, 82%); }

  .dgm-satir .site-dgm { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .sss { column-count: 1 !important; }
  /* Masaüstünde satır kıran <br>'ler telefonda kırık dizgi üretiyordu. */
  .mst { display: none; }
}

/* ============================================================
   KURUMSAL BÖLÜMLER
   ============================================================
   🔴 Site "ne olduğunu" anlatıyordu, "nasıl çalışırız"ı anlatmıyordu.
   İşletmeye satan bir sayfada alıcı önce ÖLÇÜ ve SÜREÇ arar: kaç kişi,
   ne gerekiyor, veri nerede duruyor, kaç günde kurulur, sözleşme nasıl.
   Bu bölümler o soruların karşılığı. ============================ */

/* ---- Teknik ölçü tablosu ---- */
/* 🔴 `td { max-width }` OTOMATİK tablo düzeninde YOK SAYILIR: hücre
   içeriğine göre genişlemeye devam etti, satır 127 karaktere çıktı.
   Ölçüyü tutmanın tek yolu `table-layout: fixed` + tabloya üst sınır. */
.tablo-kurumsal { width: 100%; max-width: 880px; table-layout: fixed;
  border-collapse: collapse; margin-top: 26px; }
.tablo-kurumsal caption { text-align: left; font-family: var(--font-mono); font-size: var(--t-etiket);
  letter-spacing: .14em; color: var(--altin); padding-bottom: 14px; }
.tablo-kurumsal th, .tablo-kurumsal td {
  text-align: left; padding: 16px 18px 16px 0; border-top: 1px solid var(--cizgi-koyu);
  font-size: var(--t-govde); vertical-align: top; line-height: 1.55;
}
/* 🔴 Etiket sütunu %34'tü: iki kelimelik başlıklar için 440px, değer sütunu
   ise 855px — satır 113 karaktere uzuyordu (rahat okuma bandı 60-85). */
.tablo-kurumsal th { font-weight: 600; color: var(--metin); width: 27%; padding-right: 28px; }
.tablo-kurumsal td { color: var(--soluk); }
.tablo-kurumsal tr:last-child th, .tablo-kurumsal tr:last-child td { border-bottom: 1px solid var(--cizgi-koyu); }
/* 🔴 `.mono` DÖRT UZUN CÜMLEYİ daktilo yazısına çeviriyordu: aynı sütunda
   kimi satır Archivo kimi Spline Mono, kimi soluk kimi parlak — tablo
   bozuk görünüyordu. Mono artık yalnız RAKAM için; cümle her satırda aynı. */
.tablo-kurumsal td b { font-family: var(--font-mono); font-weight: 700; color: var(--metin);
  letter-spacing: -.01em; font-size: .96em; }

/* ---- Süreç şeridi ---- */
.surec { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--cizgi-koyu); border: 1px solid var(--cizgi-koyu); margin-top: 28px; }
.surec-adim { background: var(--zemin); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.surec-adim .sn { font-family: var(--font-mono); font-size: var(--t-etiket); letter-spacing: .12em; color: var(--altin); }
.surec-adim h3 { font-size: var(--t-alt); font-weight: 600; margin: 0; letter-spacing: -.01em; }
.surec-adim p { font-size: var(--t-govde); color: var(--soluk); margin: 0; line-height: 1.5; }

/* ---- Güvenlik maddeleri ---- */
.guvenlik { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
  background: var(--cizgi-koyu); border: 1px solid var(--cizgi-koyu); margin-top: 26px; }
.guvenlik-madde { background: var(--zemin); padding: 24px 22px; }
.guvenlik-madde h3 { font-size: var(--t-alt); font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.guvenlik-madde p { font-size: var(--t-govde); color: var(--soluk); margin: 0; line-height: 1.55; }
.guvenlik-madde .etk { font-family: var(--font-mono); font-size: var(--t-etiket);
  letter-spacing: .12em; color: var(--altin); display: block; margin-bottom: 10px; }

/* ---- Rakam şeridi ---- */
.rakamlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--cizgi-koyu); border-top: 1px solid var(--cizgi-koyu); border-bottom: 1px solid var(--cizgi-koyu); }
.rakam { background: var(--zemin); padding: 26px 20px; }
.rakam b { display: block; font-family: var(--font-mono); font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700; color: var(--metin); letter-spacing: -.01em; margin-bottom: 6px; }
.rakam span { font-size: var(--t-govde); color: var(--soluk); }