/* ============================================================
   YOYSTRO — KARŞILAMA SAYFASI (kök `/`), A2 · "Komuta Amber / 3D"
   (2026-09-05 akşam).

   KAYNAK: Claude Design'da tamamlanan
   `docs/tasarim-a2-kaynak/"Karsilama - 3D.dc.html.txt"`. Orada her
   değer SATIR İÇİ ve SABİTTİR (hex, px, rgba); burada hepsi
   `var(--token)`dır — `ci/tasarim_sadakati.py` bu dosyayı tarar
   (tokenlar.css muaf, bu dosya MUAF DEĞİL). Kaynakta karşılığı
   olmayan değerler `tokenlar.css` sonundaki "A2 · KARŞILAMA 3D"
   bloğunda `-karsilama` sonekiyle TANIMLANDI.

   Sınıflar `k-` önekiyle: bu sayfa `panel.css` YÜKLEMEZ (tanıtımın
   kendi kendine yeterliliği), önek çarpışmayı sıfırlar.

   ---- KAYDIRMA DEĞİŞKENLERİ VE JS'SİZ DAVRANIŞ ----
   `karsilama.js` köke dört ilerleme değişkeni yazar:
     --p   kahraman bölümünün kaydırma ilerlemesi (0..1)
     --s1  "nasıl çalışır" sahnesi, --s2 ölçüm ızgarası, --s3 kanıt yığını
     --mx/--my  işaretçi konumu (-1..1)
   HİÇBİRİ CSS'te TANIMLANMAZ; her kullanım `var(--sX, yedek)` ile
   yazılır. Betik yüklenmezse yedek devreye girer ve sayfa DURAĞAN ama
   EKSİKSİZ olur: kaynak tasarımdaki çapraz geçişler (bir adım görünür,
   ötekiler opaklık 0) BİLEREK alınmadı, çünkü betiksiz ziyaretçide iki
   adımın metni GÖRÜNMEZ kalırdı. Yerine: üç adım normal akışta durur,
   görsel sütun yapışkandır (sticky) ve derinlik kaydırmayla artar.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--zemin); color: var(--metin);
  font-family: var(--govde); font-size: var(--punto-govde);
  line-height: var(--satir-govde);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
::selection { background: var(--vurgu); color: var(--vurgu-uzeri); }
:focus-visible { outline: var(--odak-halka) solid var(--vurgu); outline-offset: var(--bosluk-1); }

/* ---------- sayfanın iki ışık katmanı ----------
   Kaynakta iki `position: fixed` div: işaretçiyle kayan amber ortam
   ışığı ve kenarları karartan vinyet. İkisi de tıklamayı yutmaz. */
.k-isik, .k-vinyet {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.k-isik { background: var(--parilti-ortam-karsilama); }
.k-vinyet { background: var(--vinyet-karsilama); }

/* ---------- üst bar (yapışkan cam) ---------- */
.k-ustbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: var(--bosluk-4);
  padding: var(--bosluk-3) var(--icerik-dolgu-karsilama);
  background: linear-gradient(180deg, var(--zemin-seffaf), var(--zemin-saydam-karsilama));
  backdrop-filter: var(--bulanik);
}
.k-logo {
  display: flex; align-items: center; gap: var(--bosluk-3);
  text-decoration: none; min-width: 0;
  min-height: var(--dokunma-hedef);
}
/* SAHİBİ KURALI (2026-09-20 akşam, önceki 2026-09-20 öğleden sonraki
   görsel denemenin yerine geçer): `varlik/logo-yazi-*.png` kare (800x800)
   simge+yazı YIĞINIdır, tek başına yatay bir yazı-logo değil; üst barda
   ayrı `.k-simge` ile yan yana konunca İKİ simge görünüyordu (sahibi
   ölçümü, rapor sayfası kapağında da aynı arıza — bkz. rapor.css
   `.r-marka-satir`). Çözüm: yığın PNG üst bardan ÇIKARILDI (dosya
   SİLİNMEDİ, altbilgi zaten `.k-f-logo`'da ayrı simge + düz metin
   kullanıyordu), yerine altbilginin BİREBİR aynı deseni kondu: solda
   `.k-simge`, sağda marka fontuyla (`--logo-aile` = Chakra Petch,
   `.k-f-logo` ile AYNI token seti) tek satır "YOYSTRO" metni. Aile
   BİLEREK `--baslik` DEĞİL `--logo-aile`: A2 dalgası (2026-09-05)
   `--baslik`'ı Geist'e taşıdı, logotype o günden beri kendi ailesini
   ayrı token'dan alıyor (tokenlar.css'in "LOGO DEĞİŞMEZ" notu); eski
   (2026-09-05'ten kalma) span kuralı hâlâ `--baslik`'ı kullanıyordu ve
   bu yüzden Geist'e kaymıştı — burada da düzeltildi. */
.k-logo-yazi {
  font-family: var(--logo-aile); font-weight: var(--agirlik-kalin);
  letter-spacing: var(--aralik-logo); font-size: var(--punto-logo);
  color: var(--parlak); white-space: nowrap;
}
.k-simge { height: var(--logo-ustbar-boy); width: auto; display: block; flex: none; }

/* Bölüm gezinmesi: kaynakta 13px soluk, hover'da parlak. */
.k-ust-gez { display: flex; align-items: center; gap: var(--bosluk-7); }
.k-ust-gez a {
  font-size: var(--punto-yardimci); color: var(--soluk); text-decoration: none;
  min-height: var(--dokunma-hedef); display: inline-flex; align-items: center;
  transition: color var(--gecis);
}
.k-ust-gez a:hover { color: var(--parlak); }

.k-ust-eylem { display: flex; align-items: center; gap: var(--bosluk-2); }
.k-ust-hesap { display: flex; align-items: center; gap: var(--bosluk-2); }

/* Tema düğmesi karsilama.js tarafından DOĞURULUR (betik yoksa hiç
   çizilmez): çalışmayan bir düğme, tutulmayan bir sözdür. */
.k-tema-dugme {
  width: var(--dokunma-hedef); height: var(--dokunma-hedef); flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: var(--cizgi-kalinlik) solid var(--cizgi-koyu);
  border-radius: var(--yaricap-kontrol);
  background: transparent; color: var(--soluk);
  transition: color var(--gecis), border-color var(--gecis);
}
.k-tema-dugme:hover { color: var(--parlak); border-color: var(--metin); }
.k-tema-dugme svg { width: var(--ikon-boy); height: var(--ikon-boy); }

/* Dil değiştirici (2026-09-20 YENİDEN TASARIM, sahibi isteği: eski kutulu
   "TR | EN" hâli KALDIRILDI). Artık yalnız DİĞER dil gösterilir (aktif
   sayfanın kendi dili yazılmaz, çünkü zaten tıklanabilir tek seçenek
   odur); kutu/kenarlık YOK, yazı stili `.k-ust-gez a` ile BİREBİR aynı
   (aynı punto/renk, nav bağlantısı gibi okunsun diye). Hover'da vurgu
   rengi (`--vurgu-metin`, panelin "küçük-metin-güvenli" amber tonu):
   nav bağlantılarının hover'ı (`--parlak`, sade parlaklık) ile bilerek
   AYRIŞTIRILDI, dil değiştirmenin bir marka/vurgu eylemi olduğu belli
   olsun diye. Konum: tema düğmesinin (`.k-tema-dugme`) hemen SOLUNDA
   durur (bkz. tema.js `temaDugmesiKur`, düğmeyi `.k-ust-hesap`'ın hemen
   ÖNÜNE ekler, yani bu navın ARKASINA); aralarındaki boşluk nav
   bağlantı aralığıyla (`--bosluk-7`) AYNI olsun diye `.k-ust-eylem`in
   kendi `gap`i (`--bosluk-2`, düğme/CTA kümesi içindir) üstüne fark
   eklenir. */
.k-dil-gez {
  display: flex; align-items: center;
  min-height: var(--dokunma-hedef);
  margin-right: calc(var(--bosluk-7) - var(--bosluk-2));
}
.k-dil-gez a {
  font-size: var(--punto-yardimci); color: var(--soluk); text-decoration: none;
  min-height: var(--dokunma-hedef); display: inline-flex; align-items: center;
  transition: color var(--gecis);
}
.k-dil-gez a:hover { color: var(--vurgu-metin); }

/* ---------- düğmeler ----------
   Kaynakta birincil düğme dikey amber GRADYAN + amber parıltı, ikincil
   yalnız hairline çerçeve. Etiketler BÜYÜK HARF kalıyor: `GİRİŞ YAP` /
   `ÜCRETSİZ BAŞLA` metinleri testler_js/giris_kayit.test.js'te
   ÇİVİLİ (kaynaktaki "Denemeyi başlat" cümle hâli bilerek alınmadı). */
.k-dugme {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--dokunma-hedef);
  font-family: var(--baslik); font-size: var(--punto-mikro); font-weight: var(--agirlik-orta);
  letter-spacing: var(--aralik-cta-karsilama); text-decoration: none;
  padding: 0 var(--bosluk-4); white-space: nowrap;
  border: var(--cizgi-kalinlik) solid transparent;
  border-radius: var(--yaricap-kontrol);
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.k-dugme-ikincil { color: var(--metin); border-color: var(--cizgi-koyu); }
.k-dugme-ikincil:hover { color: var(--parlak); background: var(--zemin3); border-color: var(--metin); }
.k-dugme-birincil {
  color: var(--vurgu-uzeri); background: var(--vurgu-gradyan-karsilama);
  font-weight: var(--agirlik-kalin); box-shadow: var(--golge-birincil-kucuk-karsilama);
}
.k-dugme .k-ok { margin-left: var(--bosluk-2); }

/* CTA kısa/uzun metin (2026-09-20, mobil menü dalgası): `.k-cta-kisa`
   yalnız dar kırılımda görünür (aşağıdaki mobil kırılım bloğu),
   masaüstünde tam metin kalır. İkisi de HTML'de yazılıdır, tek anda
   yalnız biri `display` ile görünür; ekran okuyucu görünmeyeni zaten
   okumaz, ikinci bir aria-hidden gerekmez. */
.k-cta-kisa { display: none; }

/* ---------- mobil menü (2026-09-20, sahibi ölçümü) ----------
   `.k-ust-gez` 1180px altında (yukarıda, kırılım bloğunda) gizlenir ve
   YERİNE hiçbir şey konmuyordu: mobil ziyaretçi bölüm/rapor
   bağlantılarına ULAŞAMIYORDU. Bu düğme + panel çifti o boşluğu
   doldurur; ikisi de HTML'de YAZILIDIR (JS yalnız `hidden`/
   `aria-expanded`i değiştirir, bkz. gezinme.js), betiksiz durumda
   düğme durağan kalır ama alt bilgideki (`.k-f-alt`) rapor
   bağlantıları yine erişim sağlar. */
.k-menu-dugme {
  display: none;
  align-items: center; gap: var(--bosluk-1);
  min-height: var(--dokunma-hedef); padding: 0 var(--bosluk-3);
  font-family: inherit; font-size: var(--punto-yardimci); color: var(--soluk);
  background: transparent; cursor: pointer;
  border: var(--cizgi-kalinlik) solid var(--cizgi-koyu);
  border-radius: var(--yaricap-kontrol);
  transition: color var(--gecis), border-color var(--gecis);
}
/* Hamburger ikonu SVG DEĞİL, üç yatay çubuktan CSS ile çizilir: kanıt
   eki sayfaları (`rapor-kanit-eki.html`/`report-evidence-appendix.html`)
   hiç `<svg>` taşımaz ve rapor/report sayfalarındaki grafik SAYISI
   (test_rapor_sayfalari.py, RAPOR_GRAFIK_SAYISI) sabit ölçülür; yeni bir
   `<svg>` eklemek o iki ölçütü BOZARDI. */
.k-menu-ikon {
  position: relative; flex: none;
  width: var(--ikon-boy); height: 2px; background: currentColor; border-radius: 1px;
}
.k-menu-ikon::before, .k-menu-ikon::after {
  content: ""; position: absolute; left: 0;
  width: var(--ikon-boy); height: 2px; background: currentColor; border-radius: 1px;
}
.k-menu-ikon::before { top: -5px; }
.k-menu-ikon::after { top: 5px; }
.k-menu-dugme:hover,
.k-menu-dugme[aria-expanded="true"] { color: var(--parlak); border-color: var(--metin); }

.k-menu-acilir {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 19;
  padding: var(--bosluk-2) var(--icerik-dolgu-karsilama) var(--bosluk-4);
  background: var(--zemin3);
  border-top: var(--cizgi-kalinlik) solid var(--cizgi-koyu);
  box-shadow: var(--golge-2);
}
.k-menu-acilir[hidden] { display: none; }
.k-menu-acilir nav { display: flex; flex-direction: column; }
.k-menu-acilir a {
  padding: var(--bosluk-3) 0;
  font-size: var(--punto-yardimci); color: var(--soluk); text-decoration: none;
  min-height: var(--dokunma-hedef); display: flex; align-items: center;
  border-bottom: var(--cizgi-kalinlik) solid var(--cizgi-koyu);
  transition: color var(--gecis);
}
.k-menu-acilir a:hover { color: var(--parlak); }
.k-menu-acilir nav:last-child a:last-child { border-bottom: none; }
.k-menu-acilir-dil { margin-top: var(--bosluk-2); }
.k-menu-acilir-dil a:hover { color: var(--vurgu-metin); }

/* ---------- tema-farkında marka görseli ----------
   `<picture>` KULLANILMADI: media sorgusu yalnız
   `prefers-color-scheme`i okur, açık tema seçimini
   (`<html data-theme="gunduz">`, karsilama.js'in bağımsız tema
   sözleşmesi - bkz. orada) okuyamaz. İki görsel de çizilir, biri CSS
   ile gizlenir; karar sırası tokenlar.css'teki tema sırasının BİREBİR
   aynısıdır. */
.k-tema-acik { display: none; }
.k-tema-koyu { display: block; }
[data-theme="gunduz"] .k-tema-acik { display: block; }
[data-theme="gunduz"] .k-tema-koyu { display: none; }
@media (prefers-color-scheme: light) {
  html[data-tema-kaynak="sistem"]:not([data-theme]) .k-tema-acik { display: block; }
  html[data-tema-kaynak="sistem"]:not([data-theme]) .k-tema-koyu { display: none; }
}

/* ---------- bölüm iskeleti ----------
   `overflow: clip` ÖLÇÜLDÜ, süs değil: 3B sahnelerin kartları kutunun
   DIŞINA taşar (tasarımın kendisi öyle) ve 375px'te bu taşma belgeye
   24px yatay kaydırma açıyordu (ci/gorunum_olc.mjs, "taşma 24").
   `hidden` DEĞİL `clip`: `hidden` bir kaydırma kabı doğurur ve içerideki
   `position: sticky` sütunu o kaba hapsederdi; `clip` yalnız keser. */
.k-bolum { position: relative; z-index: 1; overflow: clip; }
.k-icerik {
  max-width: var(--icerik-azami); margin-inline: auto;
  padding: var(--bolum-dolgu) var(--icerik-dolgu-karsilama);
}
.k-etiket {
  font-family: var(--kod); font-size: var(--punto-mikro);
  letter-spacing: var(--aralik-etiket); text-transform: uppercase;
  color: var(--vurgu-metin); margin-bottom: var(--bosluk-3);
}
.k-etiket b { color: var(--vurgu-metin); font-weight: var(--agirlik-orta); }
.k-b-baslik {
  font-family: var(--baslik); font-weight: var(--agirlik-kalin); color: var(--parlak);
  font-size: var(--punto-h2-karsilama); line-height: var(--satir-h2); letter-spacing: var(--aralik-h2);
  max-width: 20ch; overflow-wrap: break-word; text-wrap: balance;
}
.k-b-giris {
  margin-top: var(--bosluk-4); color: var(--soluk);
  max-width: 48ch; font-size: var(--punto-govde); line-height: var(--satir-govde);
}

/* İki sütunlu bölüm: metin + yapışkan sahne. Sahne sütunu kayarken
   sabit durur; kaynaktaki `position: sticky` anlatımının BETİKSİZ
   çalışan hâli budur. */
.k-iki-sutun {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--bosluk-10); align-items: start;
}
.k-iki-sutun-dar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.k-iki-sutun-ters { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.k-sutun-metin { min-width: 0; }
.k-sutun-sahne { min-width: 0; position: sticky; top: calc(var(--ustbar-boy) + var(--bosluk-8)); }
.k-iki-sutun-ters .k-sutun-sahne { order: -1; }

/* ---------- kahraman ---------- */
.k-bolum-ust .k-icerik {
  min-height: 100vh; align-content: center;
  padding-top: calc(var(--bolum-dolgu) + var(--ustbar-boy));
}
.k-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--bosluk-8); row-gap: var(--bosluk-9);
  align-items: center;
}
.k-hero-metin {
  min-width: 0;
  /* Kaydırdıkça kahraman metni yükselip söner (kaynak: --p). Betik
     yoksa --p yok sayılır, metin yerinde ve tam opak kalır. */
  transform: translateY(calc(var(--p, 0) * -60px));
  opacity: calc(1 - var(--p, 0) * 1.4);
}
.k-hero h1 {
  font-family: var(--baslik); font-weight: var(--agirlik-kalin); color: var(--parlak);
  font-size: var(--punto-h1-karsilama); line-height: var(--satir-h1); letter-spacing: var(--aralik-h1);
  max-width: 17ch; overflow-wrap: break-word; text-wrap: balance;
}
/* Vurgulu sözcük: amber gradyan metnin İÇİNDE. `background-clip: text`
   desteklenmeyen tarayıcıda düz amber kalır (aşağıdaki @supports). */
.k-hero h1 em { font-style: normal; color: var(--vurgu-metin); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .k-hero h1 em {
    background-image: var(--vurgu-yazi-karsilama);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
.k-hero .k-alt {
  margin-top: var(--bosluk-5); font-size: var(--punto-vurgulu);
  color: var(--soluk); max-width: 52ch; text-wrap: pretty;
}
.k-cta {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  margin-top: var(--bosluk-7); min-height: var(--cta-boy-karsilama);
  padding: 0 var(--bosluk-6);
  font-family: var(--baslik); font-size: var(--punto-etiket); font-weight: var(--agirlik-kalin);
  letter-spacing: var(--aralik-cta-karsilama);
  text-decoration: none; color: var(--vurgu-uzeri);
  background: var(--vurgu-gradyan-karsilama); border-radius: var(--yaricap);
  box-shadow: var(--golge-birincil-karsilama);
  transition: filter var(--gecis), transform var(--gecis);
}
.k-cta:hover { filter: brightness(1.06); }
.k-cta .k-ok { transition: transform var(--gecis); }
.k-cta:hover .k-ok { transform: translateX(var(--bosluk-1)); }
/* Birincil eylemin ALTINDA, ondan sonra okunacak biçimde: mevcut
   kullanıcı "ben ne yapacağım" demesin ama yeni gelenin önüne de
   geçmesin. */
.k-cta-alt {
  margin-top: var(--bosluk-3); font-size: var(--punto-yardimci);
  color: var(--kucukgri-metin);
}
.k-cta-alt a { color: var(--vurgu-metin); text-decoration: none; font-weight: var(--agirlik-orta); }
.k-cta-alt a:hover { color: var(--parlak); }

/* Yazılan cümle: kaynaktaki terminal çipi. Betik cümleyi harf harf
   yazar; yazmazsa HTML'deki cümle olduğu gibi okunur. */
.k-yazilan {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  margin-top: var(--bosluk-6); min-height: var(--dokunma-gorsel);
  padding: var(--bosluk-2) var(--bosluk-3);
  width: 100%; max-width: 46ch; border-radius: var(--yaricap-kontrol);
  background: var(--zemin2); border: var(--cizgi-kalinlik) solid var(--cizgi);
  font-family: var(--kod); font-size: var(--punto-yardimci); color: var(--soluk);
}
.k-yazilan-ok { color: var(--vurgu-metin); }
.k-yazilan-metin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-imlec {
  width: var(--bosluk-2); height: var(--bosluk-4); flex: none;
  background: var(--vurgu); animation: k-nabiz 1s step-end infinite;
}
.k-guvenceler {
  display: flex; flex-wrap: wrap; gap: var(--bosluk-2) var(--bosluk-5);
  margin-top: var(--bosluk-6); list-style: none;
  font-size: var(--punto-mikro); color: var(--kucukgri-metin);
}
.k-guvenceler li { display: inline-flex; align-items: center; gap: var(--bosluk-2); }
.k-guvenceler li::before {
  content: ""; width: var(--bosluk-1); height: var(--bosluk-1);
  border-radius: var(--yaricap-tam); background: var(--olumlu); flex: none;
}

/* "Kaydır" işareti: yalnız kahraman bölümünün dibinde, kaydırınca söner. */
.k-kaydir {
  position: absolute; left: 50%; bottom: var(--bosluk-5);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-2);
  font-family: var(--kod); font-size: var(--punto-mikro);
  letter-spacing: var(--aralik-dar); text-transform: uppercase;
  color: var(--kucukgri-metin); opacity: calc(1 - var(--p, 0) * 3);
}
.k-kaydir i {
  width: var(--cizgi-kalinlik); height: var(--bosluk-8);
  background: linear-gradient(180deg, var(--vurgu), transparent);
  animation: k-yuz 1.8s ease-in-out infinite;
}

/* ============================================================
   3B SAHNELER
   Konumlandırma MARGIN ile DEĞİL `left/top: 50%` + `transform:
   translate(x, y)` ile yapılır: tasarım sadakati kapısı iki basamaklı
   px taşıyan padding/margin bildirimlerini yasaklar ve kaynak sahnenin
   yerleşimi tamamen o tür margin'lerdi. Sonuç BİREBİR AYNI, bildirim
   kapının okuyabildiği yerde.
   ============================================================ */
.k-sahne {
  --sahne-olcek: 1;
  position: relative; height: 600px;
  perspective: 1600px; perspective-origin: 50% 45%;
  zoom: var(--sahne-olcek);
}
.k-sahne-isik {
  position: absolute; left: 50%; top: 62%;
  width: 560px; height: 260px; transform: translate(-50%, -50%);
  border-radius: var(--yaricap-tam);
  background: var(--parilti-taban-karsilama); filter: blur(14px);
}
.k-sahne-3b {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform:
    rotateX(calc(8deg + var(--my, 0) * -5deg + var(--p, 0) * 22deg))
    rotateY(calc(-16deg + var(--mx, 0) * 9deg + var(--p, 0) * 28deg));
  transition: transform var(--gecis) var(--egri);
}
/* KONUM `transform` DEĞİL `translate` ÖZELLİĞİNDE — ÖLÇÜLMÜŞ ARIZA
   (2026-09-05): yüzen kartların `k-yuz` süzülme animasyonu `transform`
   canlandırıyor ve BÜTÜN bildirimi eziyordu; iki kart üst üste sahnenin
   tam ortasına yığılmıştı (ölçüldü: `.k-yuzen-kosu` ve `.k-yuzen-muhur`
   aynı sol/üst değerde). Kaynak tasarım konumu `margin` ile veriyordu,
   o yüzden orada çakışma yoktu; bizde margin YASAK (sadakat kapısı, iki
   basamaklı px). Bağımsız `translate` özelliği üçüncü değeriyle Z'yi de
   taşır ve `transform`dan ÖNCE uygulanır: animasyon artık yalnız
   süzülmeyi sürüyor, konumu değil. */
.k-kat { position: absolute; left: 50%; top: 50%; }
.k-sahne-kunye {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-family: var(--kod); font-size: var(--punto-mikro);
  letter-spacing: var(--aralik-id); color: var(--kucukgri-metin);
}

/* ---- kahraman sahnesi: arka levha + panel örneği + yüzen kartlar ---- */
.k-kat-arka {
  width: 640px; height: 400px;
  border-radius: var(--yaricap-panel-karsilama);
  border: var(--cizgi-kalinlik) solid var(--cizgi);
  background: linear-gradient(180deg, var(--parla-karsilama), transparent 30%), var(--zemin2);
  box-shadow: var(--golge-buyuk-karsilama); opacity: .9;
  translate:
    calc(-320px + var(--mx, 0) * -14px)
    calc(-200px + var(--my, 0) * -10px)
    -120px;
}
.k-panel {
  width: 520px; overflow: hidden;
  border-radius: var(--yaricap-kart-karsilama);
  border: var(--cizgi-kalinlik) solid var(--cizgi);
  background: linear-gradient(180deg, var(--parla-karsilama), transparent 40%), var(--zemin2);
  box-shadow: var(--isik-ust), var(--golge-buyuk-karsilama);
  translate:
    calc(-260px + var(--mx, 0) * -6px)
    calc(-170px + var(--my, 0) * -4px);
}
.k-panel-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--bosluk-3) var(--bosluk-4);
  border-bottom: var(--cizgi-kalinlik) solid var(--cizgi);
  font-size: var(--punto-mikro); color: var(--kucukgri-metin);
}
.k-panel-yol { display: flex; align-items: center; gap: var(--bosluk-2); }
.k-panel-yol b { color: var(--parlak); font-weight: var(--agirlik-orta); }
.k-cip {
  padding: var(--bosluk-1) var(--bosluk-2); border-radius: var(--yaricap-kontrol);
  background: var(--zemin3); color: var(--metin); font-weight: var(--agirlik-orta);
}
.k-cip-olumlu {
  font-family: var(--kod); font-style: normal;
  color: var(--olumlu); background: var(--olumlu-zemin);
}
.k-panel-durum { display: inline-flex; align-items: center; gap: var(--bosluk-2); color: var(--soluk); }
.k-nokta {
  width: var(--nokta-boy); height: var(--nokta-boy); flex: none;
  border-radius: var(--yaricap-tam); display: inline-block;
}
.k-nokta-olumlu { background: var(--olumlu); animation: k-nabiz var(--gecis-nabiz) ease-in-out infinite; }
.k-nokta-uyari { background: var(--uyari); }
.k-nokta-olumsuz { background: var(--olumsuz); }
.k-panel-kahraman {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--bosluk-4);
  padding: var(--bosluk-5); background: var(--parilti-hero);
}
.k-mono-vurgu {
  font-family: var(--kod); font-size: var(--punto-mikro);
  letter-spacing: var(--aralik-id); color: var(--vurgu-metin);
}
.k-selam {
  margin-top: var(--bosluk-1); font-size: var(--punto-vurgulu);
  font-weight: var(--agirlik-kalin); color: var(--parlak);
  line-height: var(--satir-h2); letter-spacing: var(--aralik-h2);
}
.k-selam span { color: var(--soluk); font-weight: var(--agirlik-orta); }
.k-panel-dugmeler { display: flex; gap: var(--bosluk-2); margin-top: var(--bosluk-3); }
.k-mini-dugme {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: var(--dokunma-gorsel); padding: var(--bosluk-1) var(--bosluk-3);
  border-radius: var(--yaricap-kontrol);
  border: var(--cizgi-kalinlik) solid var(--cizgi-koyu);
  font-size: var(--punto-mikro); color: var(--metin);
}
.k-mini-birincil {
  border-color: transparent; background: var(--vurgu-gradyan-karsilama);
  color: var(--vurgu-uzeri); font-weight: var(--agirlik-kalin);
}
.k-panel-sayac {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-left: var(--bosluk-4);
  border-left: var(--cizgi-kalinlik) solid var(--cizgi);
}
/* ÖLÇÜLDÜ (ci/gorunum_olc.mjs): bu iki etiket kahraman kartının AMBER
   YIKAMALI yüzeyinde duruyor ve orada --kucukgri-metin 3,98:1'e düşüyordu
   (kâğıt üstünde 6,02). Yıkama tasarımın parçası; metin bir ton açıldı. */
.k-mini-etiket { font-size: var(--punto-mikro); color: var(--soluk); }
.k-sayac-satir { display: flex; align-items: baseline; gap: var(--bosluk-2); }
.k-sayac-satir b {
  font-size: var(--punto-sayi-karsilama); font-weight: var(--agirlik-kalin);
  letter-spacing: var(--aralik-sayi); line-height: var(--satir-sayi); color: var(--parlak);
}
.k-sayac-satir i {
  font-size: var(--punto-mikro); padding: 0 var(--bosluk-1);
  border-radius: var(--yaricap-kontrol);
}
.k-panel-satirlar { border-top: var(--cizgi-kalinlik) solid var(--cizgi); }
.k-panel-satir {
  display: grid; grid-template-columns: var(--kare-boy) minmax(0, 1fr) auto;
  gap: var(--bosluk-3); align-items: center;
  padding: var(--bosluk-2) var(--bosluk-4);
  border-bottom: var(--cizgi-kalinlik) solid var(--cizgi);
}
.k-panel-satir:last-child { border-bottom: 0; }
.k-ikon-kap {
  width: var(--kare-boy); height: var(--kare-boy); flex: none;
  display: grid; place-items: center; border-radius: var(--yaricap-kontrol);
}
.k-ikon-kap svg { width: var(--ikon-boy); height: var(--ikon-boy); }
.k-ikon-vurgu { background: var(--vurgu-zemin); color: var(--vurgu-metin); }
.k-ikon-olumlu { background: var(--olumlu-zemin); color: var(--olumlu); }
.k-panel-satir-metin { min-width: 0; }
.k-panel-satir-metin b {
  display: block; font-size: var(--punto-mikro); font-weight: var(--agirlik-orta);
  color: var(--parlak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-panel-satir-metin i {
  display: block; font-style: normal; font-family: var(--kod);
  font-size: var(--punto-mikro); color: var(--kucukgri-metin);
}
.k-rozet {
  font-size: var(--punto-mikro); font-weight: var(--agirlik-kalin);
  padding: var(--bosluk-1) var(--bosluk-2); border-radius: var(--yaricap-kontrol);
  white-space: nowrap;
}
.k-rozet-vurgu { color: var(--vurgu-metin); background: var(--vurgu-zemin); }
.k-rozet-olumlu { color: var(--olumlu); background: var(--olumlu-zemin); }

.k-yuzen {
  width: 250px; padding: var(--bosluk-3);
  border-radius: var(--yaricap); border: var(--cizgi-kalinlik) solid var(--cizgi);
  background: var(--zemin-derin-karsilama); box-shadow: var(--golge-kart-karsilama);
}
.k-yuzen-kosu {
  translate:
    calc(-330px + var(--mx, 0) * 22px)
    calc(-230px + var(--my, 0) * 16px)
    120px;
  animation: k-yuz 7s ease-in-out infinite;
}
.k-yuzen-muhur {
  /* 240px kaynağın ölçüsü; bizim mono yığınımızda "2 onay ✓" satırı
     kırılıp tek başına bir ✓ bırakıyordu (ölçüldü, 1440 gece). */
  width: 268px;
  border-color: var(--cizgi-vurgu-karsilama);
  background: var(--parilti-kart-karsilama), var(--zemin-yuksek-karsilama);
  box-shadow: var(--halka-vurgu-karsilama), var(--golge-kart-karsilama);
  translate:
    calc(110px + var(--mx, 0) * 30px)
    calc(150px + var(--my, 0) * 22px)
    170px;
  animation: k-yuz 6s ease-in-out infinite reverse;
}
.k-yuzen-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--baslik); font-size: var(--punto-mikro);
  font-weight: var(--agirlik-kalin); letter-spacing: var(--aralik-etiket);
  text-transform: uppercase; color: var(--kucukgri-metin);
}
.k-yuzen-ust i { font-style: normal; font-family: var(--kod); color: var(--vurgu-metin); }
.k-yuzen-ust-vurgu { color: var(--vurgu-metin); }
.k-yuzen-baslik {
  margin-top: var(--bosluk-1); font-size: var(--punto-yardimci);
  font-weight: var(--agirlik-kalin); color: var(--parlak);
}
.k-yuzen-meta {
  margin-top: var(--bosluk-1); font-family: var(--kod);
  font-size: var(--punto-mikro); color: var(--soluk);
}
.k-adim-cubugu { display: flex; gap: var(--bosluk-1); margin-top: var(--bosluk-2); }
.k-adim-cubugu i { flex: 1; height: var(--cizgi-kalin); border-radius: var(--yaricap-hap); background: var(--zemin3); }
.k-adim-cubugu .k-dolu { background: var(--olumlu); }
.k-adim-cubugu .k-etkin { background: var(--vurgu); animation: k-nabiz 1.2s ease-in-out infinite; }

.k-cip-yuzen {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  white-space: nowrap; min-height: var(--dokunma-gorsel);
  padding: var(--bosluk-1) var(--bosluk-3);
  border-radius: var(--yaricap-kontrol);
  border: var(--cizgi-kalinlik) solid var(--cizgi);
  background: var(--zemin-derin-karsilama); box-shadow: var(--golge-kucuk-karsilama);
  font-family: var(--kod); font-size: var(--punto-mikro); color: var(--soluk);
}
.k-cip-yuzen-ust {
  translate:
    calc(90px + var(--mx, 0) * 18px)
    calc(-250px + var(--my, 0) * 12px)
    90px;
}
.k-cip-yuzen-alt {
  translate:
    calc(-300px + var(--mx, 0) * 26px)
    calc(200px + var(--my, 0) * 18px)
    140px;
}
.k-olumlu-metin { color: var(--olumlu); }
.k-vurgu-metin { color: var(--vurgu-metin); }
.k-olumsuz-metin { color: var(--olumsuz-metin); }
.k-mono-soluk { font-family: var(--kod); font-size: var(--punto-mikro); color: var(--kucukgri-metin); }

/* ---- "nasıl çalışır" sahnesi: üç kart YELPAZE hâlinde ----
   Kaynakta üç kart çapraz geçişle birbirinin yerini alıyordu; burada
   üçü de GÖRÜNÜR durur ve `--s1` yalnız derinliği artırır. Gerekçe
   dosyanın başındaki "JS'siz davranış" şerhinde. */
.k-sahne-adim { height: 520px; perspective: 1400px; }
.k-sahne-adim .k-sahne-3b {
  transform:
    rotateX(calc(10deg + var(--my, 0) * -4deg))
    rotateY(calc(-14deg + var(--mx, 0) * 8deg + var(--s1, 0) * -8deg));
}
.k-adim-kart {
  width: 400px; padding: var(--bosluk-5);
  border-radius: var(--yaricap-kart-karsilama);
  border: var(--cizgi-kalinlik) solid var(--cizgi);
  background: linear-gradient(180deg, var(--parla-karsilama), transparent 45%), var(--zemin-yuksek-karsilama);
  box-shadow: var(--isik-ust), var(--golge-buyuk-karsilama);
}
.k-adim-kart-1 { translate: -290px -230px calc(var(--s1, 0) * -40px); }
.k-adim-kart-2 {
  padding: 0; overflow: hidden; background: var(--zemin-derin-karsilama);
  translate: -230px -80px calc(70px + var(--s1, 0) * 40px);
}
.k-adim-kart-3 {
  border-color: var(--cizgi-olumlu-karsilama);
  box-shadow: var(--halka-olumlu-karsilama), var(--golge-buyuk-karsilama);
  translate: -170px 70px calc(150px + var(--s1, 0) * 90px);
}
.k-konusan {
  display: flex; align-items: center; gap: var(--bosluk-2);
  font-size: var(--punto-yardimci); color: var(--soluk);
}
.k-avatar {
  width: var(--kare-boy); height: var(--kare-boy); flex: none;
  display: grid; place-items: center; border-radius: var(--yaricap-kontrol);
  background: var(--vurgu-zemin); color: var(--vurgu-metin);
  font-weight: var(--agirlik-sayi); font-size: var(--punto-mikro);
}
.k-alinti {
  margin-top: var(--bosluk-3); font-size: var(--punto-vurgulu);
  color: var(--parlak); line-height: var(--satir-siki);
}
.k-soru {
  margin-top: var(--bosluk-3); padding: var(--bosluk-3);
  border-radius: var(--yaricap-kontrol);
  background: var(--zemin3); border: var(--cizgi-kalinlik) solid var(--cizgi);
  font-size: var(--punto-yardimci); color: var(--soluk);
}
.k-soru b { color: var(--vurgu-metin); }
.k-secenekler { display: flex; gap: var(--bosluk-2); margin-top: var(--bosluk-2); }
.k-secenekler span {
  display: inline-flex; align-items: center; min-height: var(--dokunma-gorsel);
  padding: var(--bosluk-1) var(--bosluk-3); border-radius: var(--yaricap-kontrol);
  border: var(--cizgi-kalinlik) solid var(--cizgi-koyu);
  font-size: var(--punto-mikro); color: var(--metin);
}
.k-uc-ust {
  display: flex; align-items: center; gap: var(--bosluk-2);
  padding: var(--bosluk-2) var(--bosluk-3);
  border-bottom: var(--cizgi-kalinlik) solid var(--cizgi);
  background: var(--zemin2);
  font-family: var(--kod); font-size: var(--punto-mikro); color: var(--kucukgri-metin);
}
.k-uc-ust span { margin-left: var(--bosluk-2); }
.k-uc-govde {
  display: flex; flex-direction: column; gap: var(--bosluk-1);
  padding: var(--bosluk-4); white-space: nowrap;
  font-family: var(--kod); font-size: var(--punto-mikro);
  line-height: var(--satir-siki); color: var(--soluk);
}
.k-uc-govde i { font-style: normal; color: var(--kucukgri-metin); }
.k-uc-govde b { font-weight: var(--agirlik-orta); }
.k-kart-ust { display: flex; justify-content: space-between; align-items: center; gap: var(--bosluk-2); }
.k-kart-baslik {
  margin-top: var(--bosluk-3); font-size: var(--punto-vurgulu);
  font-weight: var(--agirlik-kalin); color: var(--parlak); letter-spacing: var(--aralik-h2);
}
.k-uclu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bosluk-3); margin-top: var(--bosluk-4); }
.k-uclu b {
  display: block; font-size: var(--punto-sayi-orta); font-weight: var(--agirlik-kalin);
  letter-spacing: var(--aralik-h2); color: var(--parlak);
}
.k-uclu i { font-style: normal; font-size: var(--punto-mikro); color: var(--kucukgri-metin); }
.k-kart-alt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3);
  margin-top: var(--bosluk-4); padding-top: var(--bosluk-3);
  border-top: var(--cizgi-kalinlik) solid var(--cizgi);
  font-size: var(--punto-mikro); color: var(--soluk);
}

/* ---- kanıt paketi sahnesi: dört katmanlı patlatılmış yığın ---- */
.k-sahne-kanit { height: 560px; perspective: 1500px; perspective-origin: 50% 40%; }
.k-sahne-kanit .k-sahne-isik { top: 58%; width: 520px; height: 220px; }
.k-sahne-kanit .k-sahne-3b {
  transform:
    rotateX(calc(52deg - var(--s3, 0) * 8deg + var(--my, 0) * -3deg))
    rotateZ(calc(-28deg + var(--mx, 0) * 6deg))
    translateY(40px);
}
.k-katman {
  width: 380px; height: 240px; padding: var(--bosluk-4) var(--bosluk-5);
  display: flex; flex-direction: column; gap: var(--bosluk-1);
  border-radius: var(--yaricap); border: var(--cizgi-kalinlik) solid var(--cizgi);
  background: linear-gradient(180deg, var(--parla-karsilama), transparent 45%), var(--zemin2);
  box-shadow: var(--golge-kart-karsilama);
  font-family: var(--kod); font-size: var(--punto-mikro); color: var(--soluk);
}
.k-katman-1 { background: var(--zemin-derin-karsilama); translate: -190px -120px calc(var(--s3, 0) * -40px); }
.k-katman-2 { translate: -190px -120px calc(110px + var(--s3, 0) * 40px); }
.k-katman-3 { translate: -190px -120px calc(240px + var(--s3, 0) * 90px); }
.k-katman-4 {
  border-color: var(--cizgi-vurgu-karsilama);
  background: var(--parilti-kart-karsilama), var(--zemin-yuksek-karsilama);
  box-shadow: var(--halka-vurgu-karsilama), var(--golge-kart-karsilama);
  translate: -190px -120px calc(380px + var(--s3, 0) * 140px);
}
.k-katman-ad {
  font-family: var(--baslik); font-size: var(--punto-mikro);
  font-weight: var(--agirlik-kalin); letter-spacing: var(--aralik-etiket);
  text-transform: uppercase; color: var(--kucukgri-metin);
}
.k-katman-ad-vurgu { color: var(--vurgu-metin); }
.k-katman-baslik {
  margin-top: var(--bosluk-1); font-family: var(--baslik);
  font-size: var(--punto-h3-karsilama); font-weight: var(--agirlik-kalin);
  letter-spacing: var(--aralik-h2); color: var(--parlak);
}
.k-katman-dip { margin-top: auto; color: var(--kucukgri-metin); }
.k-katman-dip-satir { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-2); }
.k-fark-satir { display: flex; justify-content: space-between; gap: var(--bosluk-2); }
.k-fark-satir b { font-weight: var(--agirlik-normal); color: var(--metin); }
.k-fark-satir i { font-style: normal; }
.k-test-izgara { display: grid; grid-template-columns: repeat(14, 1fr); gap: var(--bosluk-1); margin: var(--bosluk-1) 0; }
.k-test-izgara i { height: var(--bosluk-5); border-radius: var(--yaricap-kontrol); background: var(--olumlu); }
.k-sahne-etiketler {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--bosluk-1);
  font-family: var(--kod); font-size: var(--punto-mikro);
  letter-spacing: var(--aralik-etiket); text-transform: uppercase; color: var(--kucukgri-metin);
}
.k-sahne-etiketler span {
  padding: var(--bosluk-1) var(--bosluk-2); border-radius: var(--yaricap-kontrol);
  background: var(--zemin3);
}

/* ---------- üç adım listesi (metin sütunu) ---------- */
.k-adimlar { list-style: none; margin-top: var(--bosluk-8); display: grid; gap: var(--bosluk-7); }
.k-adim { position: relative; padding-left: var(--bosluk-6); }
.k-adim::before {
  content: ""; position: absolute; left: 0; top: var(--bosluk-1); bottom: var(--bosluk-1);
  width: var(--cizgi-kalin); border-radius: var(--yaricap-hap); background: var(--cizgi-koyu);
}
.k-adim:first-child::before { background: var(--vurgu); }
.k-no {
  display: block; font-family: var(--kod); font-size: var(--punto-mikro);
  letter-spacing: var(--aralik-etiket); color: var(--vurgu-metin);
}
.k-adim h3, .k-katmanlar b {
  font-family: var(--baslik); font-weight: var(--agirlik-kalin);
  font-size: var(--punto-h3-karsilama); color: var(--parlak);
  line-height: var(--satir-h2); letter-spacing: var(--aralik-h2);
}
.k-adim h3 { margin-top: var(--bosluk-2); }
.k-adim p { margin-top: var(--bosluk-2); color: var(--soluk); line-height: var(--satir-siki); }

/* ---------- dört katman listesi ---------- */
.k-katmanlar { list-style: none; margin-top: var(--bosluk-7); display: grid; gap: var(--bosluk-1); }
.k-katmanlar li {
  display: grid; grid-template-columns: var(--kare-boy) minmax(0, 1fr);
  gap: var(--bosluk-3); padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: var(--yaricap); position: relative;
}
.k-katmanlar li:first-child { background: var(--vurgu-zemin); }
.k-katmanlar li:first-child::before {
  content: ""; position: absolute; left: 0; top: var(--bosluk-3); bottom: var(--bosluk-3);
  width: var(--cizgi-kalin); border-radius: var(--yaricap-hap); background: var(--vurgu);
}
.k-katmanlar b { display: block; font-size: var(--punto-vurgulu); }
.k-katmanlar i {
  display: block; font-style: normal; margin-top: var(--bosluk-1);
  font-size: var(--punto-yardimci); color: var(--soluk); line-height: var(--satir-siki);
}
.k-not {
  display: flex; align-items: center; gap: var(--bosluk-3);
  margin-top: var(--bosluk-6); padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: var(--yaricap); border: var(--cizgi-kalinlik) solid var(--cizgi);
  background: var(--zemin2); font-size: var(--punto-yardimci);
  color: var(--soluk); line-height: var(--satir-siki);
}
.k-not .k-ikon-kap { width: var(--kontrol-boy); height: var(--kontrol-boy); }
.k-not .k-ikon-kap svg { width: var(--ikon-boy-orta); height: var(--ikon-boy-orta); }

/* ---------- kayan bant (ölçüldü — süre --gecis-bant) ---------- */
.k-bant {
  position: relative; z-index: 1; overflow: hidden; background: var(--zemin2);
  border-top: var(--cizgi-kalinlik) solid var(--cizgi);
  border-bottom: var(--cizgi-kalinlik) solid var(--cizgi);
}
/* Süre çarpanı 5 = kopya sayısının YARISI (karsilama.html'de 10 kopya).
   --gecis-bant TEK kopyalık kayma süresidir; -%50 artık 5 kopya kaydırdığı
   için hızın aynı kalması süreyi 5 ile çarpmayı gerektirir. Çarpan ile
   kopya sayısı karsilama_bant.test.js ile birlikte çivilidir. */
.k-bant-ic { display: flex; width: max-content; animation: k-kay calc(var(--gecis-bant) * 5) linear infinite; }
.k-bant-ic p {
  padding: var(--bosluk-3) 0; font-family: var(--kod); font-size: var(--punto-mikro);
  letter-spacing: var(--aralik-mikro-karsilama); color: var(--kucukgri-metin); white-space: nowrap;
}
.k-bant-ic p b { color: var(--vurgu-metin); font-weight: var(--agirlik-orta); }

/* ---------- ölçülmüş sonuçlar ---------- */
.k-sonuc-tarih {
  margin-top: var(--bosluk-5); font-family: var(--kod);
  font-size: var(--punto-mikro); letter-spacing: var(--aralik-id);
  color: var(--kucukgri-metin); text-transform: uppercase;
}
/* Izgara hafifçe yatar ve kaydırmayla doğrulur. Betik yoksa `--s2`
   yedeği 1'dir: ızgara DÜZ ve TAM OPAK doğar. */
.k-sonuclar { perspective: 1200px; }
.k-sonuclar-izgara {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bosluk-3);
  transform-style: preserve-3d;
  transform:
    rotateX(calc(18deg - var(--s2, 1) * 18deg))
    rotateY(calc(-10deg + var(--s2, 1) * 10deg))
    translateZ(calc(-120px + var(--s2, 1) * 120px));
  opacity: calc(.35 + var(--s2, 1) * .65);
  transition: transform var(--gecis-hizli) linear, opacity var(--gecis-hizli) linear;
}
.k-sonuc {
  padding: var(--bosluk-6);
  border-radius: var(--yaricap-kart-karsilama);
  background: linear-gradient(180deg, var(--parla-karsilama), transparent 45%), var(--zemin2);
  box-shadow: var(--isik-ust), var(--golge-kart-karsilama);
}
.k-sonuc-vurgu {
  background: var(--parilti-kart-karsilama), var(--zemin2);
  transform: translateZ(40px);
}
.k-sonuc-vurgu .k-sonuc-sayi { color: var(--vurgu-metin); }
.k-sonuc-sayi {
  font-family: var(--baslik); font-weight: var(--agirlik-kalin); color: var(--parlak);
  font-size: var(--punto-sayi-buyuk-karsilama); letter-spacing: var(--aralik-sayi);
  line-height: var(--satir-sayi); font-variant-numeric: tabular-nums;
}
.k-sonuc p { margin-top: var(--bosluk-3); font-size: var(--punto-nav); color: var(--soluk); line-height: var(--satir-siki); }

/* ---------- güvence kartları ---------- */
.k-guvence {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--bosluk-4); margin-top: var(--bosluk-8);
}
.k-guvence-kart {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--bosluk-5); align-items: center;
  padding: var(--bosluk-7);
  border-radius: var(--yaricap-kart-karsilama);
  background: linear-gradient(180deg, var(--parla-karsilama), transparent 45%), var(--zemin2);
  box-shadow: var(--isik-ust), var(--golge-kart-karsilama);
}
.k-guvence-kart h3 {
  font-family: var(--baslik); font-weight: var(--agirlik-kalin);
  font-size: var(--punto-h3-karsilama); color: var(--parlak);
  line-height: var(--satir-h2); letter-spacing: var(--aralik-h2);
}
.k-guvence-kart p { margin-top: var(--bosluk-2); font-size: var(--punto-nav); color: var(--soluk); line-height: var(--satir-siki); }
.k-halka {
  width: 130px; height: 130px; flex: none;
  display: grid; place-items: center; border-radius: var(--yaricap-tam);
  background: var(--kota-halka-karsilama);
}
.k-halka span {
  width: 100px; height: 100px; border-radius: var(--yaricap-tam);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--zemin2); text-align: center;
}
.k-halka b {
  font-size: var(--punto-sayi-orta); font-weight: var(--agirlik-kalin);
  letter-spacing: var(--aralik-sayi); line-height: var(--satir-sayi); color: var(--parlak);
}
.k-halka i { font-style: normal; font-size: var(--punto-mikro); color: var(--kucukgri-metin); }
.k-onay-listesi {
  list-style: none; display: flex; flex-direction: column; gap: var(--bosluk-1);
  padding: var(--bosluk-3); width: 160px;
  border-radius: var(--yaricap-kontrol); border: var(--cizgi-kalinlik) solid var(--cizgi);
  background: var(--zemin-derin-karsilama);
  font-family: var(--kod); font-size: var(--punto-mikro); color: var(--kucukgri-metin);
}

/* ---------- kapanış kartı ---------- */
.k-kapanis {
  position: relative; overflow: hidden; text-align: center;
  padding: var(--dolgu-cta-karsilama);
  border-radius: var(--yaricap-panel-karsilama);
  background: var(--parilti-cta-karsilama), var(--cta-zemin-karsilama);
  box-shadow: var(--isik-ust), var(--golge-buyuk-karsilama);
}
.k-kapanis .k-b-baslik, .k-kapanis .k-b-giris { margin-inline: auto; }
.k-kapanis .k-b-giris { max-width: 46ch; }
.k-bolum-kapanis .k-icerik { padding-top: 0; }

/* ---------- alt bilgi ---------- */
.k-footer {
  position: relative; z-index: 1;
  padding: var(--bosluk-10) var(--icerik-dolgu-karsilama) var(--bosluk-kart-alt);
  max-width: var(--icerik-azami); margin-inline: auto;
  border-top: var(--cizgi-kalinlik) solid var(--cizgi);
}
.k-f-logo {
  display: flex; align-items: center; gap: var(--bosluk-3);
  font-family: var(--logo-aile); font-weight: var(--agirlik-kalin);
  letter-spacing: var(--aralik-logo); font-size: var(--punto-h3-karsilama);
}
.k-f-logo img { height: var(--logo-footer-boy); width: auto; flex: none; }
.k-f-slogan {
  margin-top: var(--bosluk-3); font-family: var(--baslik);
  font-size: var(--punto-etiket); letter-spacing: var(--aralik-mikro-karsilama);
  color: var(--vurgu-metin);
}
.k-f-alt {
  margin-top: var(--bosluk-8); padding-top: var(--bosluk-6);
  border-top: var(--cizgi-kalinlik) solid var(--cizgi);
  display: flex; flex-wrap: wrap; gap: var(--bosluk-2) var(--bosluk-6); justify-content: space-between;
  font-size: var(--punto-etiket); color: var(--kucukgri-metin);
}
.k-f-alt a { text-decoration: none; letter-spacing: var(--aralik-dar); }
.k-f-alt a:hover { color: var(--metin); }

/* ---------- devinim ---------- */
@keyframes k-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes k-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes k-yuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes k-belir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ÖLÇÜLÜ KAYDIRMA HAREKETİ (2026-08-25, istek: "scrolla
   birlikte hareket eden ama oynak olmayan"). Kahraman bölümüne
   DOKUNMAZ; sonraki bölümlerin içeriği 16px yükselip belirir. */
.k-bolum ~ .k-bolum .k-icerik { animation: k-belir .6s ease-out both; }
@supports (animation-timeline: view()) {
  .k-bolum ~ .k-bolum .k-icerik {
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
    animation-duration: auto;
  }
}

/* ---------- kırılımlar ---------- */
@media (max-width: 1360px) { .k-sahne { --sahne-olcek: .84; } }
@media (max-width: 1180px) {
  .k-sahne { --sahne-olcek: .72; }
  /* Bölüm gezinmesi burada gizlenir; 2026-09-20'ye kadar YERİNE hiçbir
     şey konmamıştı (sahibi ölçümü: mobilde /rapor'a erişim yolu yoktu).
     `.k-menu-dugme` onun yerini alır, dil anahtarı da (`.k-dil-gez`)
     alan kazanmak için panele taşınır (bkz. `.k-menu-acilir-dil`,
     HTML'de düğmenin panelinde AYRICA yazılıdır, ikinci bir uygulama
     DEĞİL aynı bağlantının panel içindeki KOPYASIdır). */
  .k-ust-gez { display: none; }
  .k-dil-gez { display: none; }
  .k-menu-dugme { display: inline-flex; }
}
@media (max-width: 1000px) {
  .k-hero { grid-template-columns: 1fr; }
  .k-iki-sutun, .k-iki-sutun-dar, .k-iki-sutun-ters { grid-template-columns: 1fr; gap: var(--bosluk-8); }
  .k-iki-sutun-ters .k-sutun-sahne { order: 0; }
  .k-sutun-sahne { position: static; }
  .k-sahne { --sahne-olcek: .62; }
  .k-bolum-ust .k-icerik { min-height: 0; }
  .k-kaydir { display: none; }
}
@media (max-width: 760px) {
  .k-sahne { --sahne-olcek: .56; }
  .k-sonuclar-izgara { grid-template-columns: 1fr; }
  .k-guvence-kart { grid-template-columns: 1fr; }
  .k-halka, .k-onay-listesi { justify-self: start; }
}
@media (max-width: 620px) {
  /* ÖLÇÜLDÜ: 375px'te üst çubuğun içeriği 399px sürüyordu (yatay taşma
     24px) — logotype span AÇIKKEN yapılan ölçüm. Taşmayı kapatan üç ölçü:
     dar dolgu, düğme takibinin kimlik takibine inmesi ve baştaki okun
     kalkması. GİRİŞ YAP bağı GİZLENMEDİ: mobilde giriş kapısını kapatmak,
     taşmayı düzeltmek değil ekranı eksiltmek olurdu.
     2026-09-20 akşam: `.k-logo-yazi` yığın img'den yeniden metin span'e
     döndü (bkz. yukarıdaki sahibi kuralı) ama bu kural BİLEREK KORUNDU:
     yukarıdaki taşma ölçümü zaten span için yapılmıştı ve hâlâ geçerli;
     375px'te simge + "YOYSTRO" metni birlikte sığmıyor, mobilde yalnız
     simge kalır. */
  .k-ustbar { padding: var(--bosluk-2) var(--bosluk-4); gap: var(--bosluk-2); }
  .k-logo-yazi { display: none; }
  .k-dugme { letter-spacing: var(--aralik-id); }
  .k-ust-eylem .k-ok { display: none; }
  /* CTA kısalır (2026-09-20, mobil menü dalgası): düğme + tema düğmesi +
     BEKLEME LİSTESİNE KATIL üçü birlikte 375px'te sığmıyordu; en uzun
     metin kısalır, giriş kapısı KAPATILMAZ (yukarıdaki eski not hâlâ
     geçerli, yalnız artık bir menü düğmesi de aynı satırda). */
  .k-cta-uzun { display: none; }
  .k-cta-kisa { display: inline; }
  .k-menu-etiket { display: none; }
  /* Kaynak tasarımın mobil ölçeğiyle aynı hizada (.45): daha küçüğü
     panel örneğini okunmaz bir leke yapıyordu. Taşan kartları bölümün
     `overflow: clip`i keser. */
  .k-sahne { --sahne-olcek: .45; }
  .k-yazilan { max-width: 100%; }
  .k-dugme { padding: 0 var(--bosluk-3); }
}

/* ---------- hareket azaltma ----------
   3B eğim, yüzen kartlar, kayan bant, imleç ve beliriş KAPANIR;
   yerleşim DEĞİŞMEZ (kartlar aynı yerde, yalnız durur). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .k-bant-ic, .k-imlec, .k-kaydir i, .k-nokta-olumlu,
  .k-adim-cubugu .k-etkin, .k-yuzen-kosu, .k-yuzen-muhur { animation: none; }
  .k-bolum ~ .k-bolum .k-icerik { animation: none; }
  .k-sahne-3b, .k-sonuclar-izgara { transition: none; }
  .k-hero-metin { transform: none; opacity: 1; }
  .k-kaydir { opacity: 1; }
  .k-sonuclar-izgara { transform: none; opacity: 1; }
  .k-cta, .k-cta .k-ok { transition: none; }
  .k-sonuc-vurgu { transform: none; }
}

/* 2026-09-20 akşam: yukarıdaki iki kural (yığın PNG'i üst barda tek başına
   gösterip ayrı simgeyi ≥621px'te gizlemek) `.k-logo-yazi` yeniden metin
   olduğu için KALKTI — simge artık HER genişlikte görünür, yanında tek
   satır marka metni durur; iki ayrı simge gösterme riski yok çünkü
   ikinci "simge" zaten metne döndü. */