/* ══════════════════════════════════════════════════════════════════════════════
   slot.css — GÖRSEL-SLOT BİLEŞENİ  ·  Ai4 · 15 Tem 2026
   USTABAŞI görsel-slot emri parça-2 · tek-vücut `vucut.css` dilinde · cc Ai3
   ══════════════════════════════════════════════════════════════════════════════
   NE İŞE YARAR: gerçek görsel HENÜZ YOKKEN yerini estetik ve KOD-DAMGALI tutar.
   Tayfun canlı sayfada `GRS-12` kodunu GÖRÜR → Ai5'in kod→yer paketiyle eşleştirir.
   ⇒ "hangi görsel nereye" konuşması ekran-üstünden yürür, tablo karşılaştırmadan.

   ── NEDEN AYRI DOSYA (vucut.css'e yazmadım) ────────────────────────────────────
   1. `vucut.css` Ai3'ün sistem katmanı — sahibi o (dokunulmaz). Bu additive katman
      onun JETONLARINI kullanır, tek satırını değiştirmez. Katlamak isterse onun kararı.
   2. Slot GEÇİCİDİR: her slot bir gün gerçek görselle DOLAR. Tüm slotlar dolunca bu
      dosya SİLİNİR — kalıcı sistemin içine karışmış olsa silinemezdi. Ayrı dosya =
      kendi ölüm tarihi olan kod. (Sonlanma kriteri: `.v-slot` grep'i 0 → dosyayı sil.)

   ── TASARIM KARARLARI (hepsi vucut.css hükümlerine bağlı) ──────────────────────
   · HÜKÜM 1 (tek zemin=aydınlık): slot `--renk-yuzey` üstünde yaşar, koyu kutu YOK.
   · HÜKÜM 3 (tek yarıçap dili): kart ⇒ `--r-md`, rozet ⇒ `--r-full`. Ara değer yok.
   · HÜKÜM 4 (metin taşıyan yüzey ham mercan KULLANAMAZ): rozet YAZI taşır ⇒ ham
     `--p-mercan` (beyazla 2.95:1) YASAK. Rozet = `--renk-marka` lacivert + beyaz
     (Ai3 ölçümü: 12.21:1). Mercan bu bileşende yalnız YAZISIZ köşe-aksanında.
   · Bileşen kendi RİTMİNİ ve DURUMLARINI verir (Ai3'ün iki pilot dersi):
     boşluk `.v-slot`'ta, `--dolu`/`--kilitli` durumları burada — sayfa geri yazmaz.
   · `--font-mono`: Ai3'ün whitepaper için sisteme aldığı jeton. Kod ROZETİ zaten bir
     KOD ⇒ icat etmek yerine onu kullandım (yeni aile açmak "dördüncü aile" ihlaliydi).

   ── 🔴 YÜZEY KAPISI (ölçtüm, uydurmadım — yerleştirmeden ÖNCE oku) ─────────────
   Kod rozeti RAKAM taşır (`GRS-12`) ⇒ iki yüzeyde YASAK:
     · ANASAYFA hero → **E4 rakam-yasağı** (`anasayfa-hero-a-kabul.mjs`: "rakam 0").
     · ÇOCUK yüzeyleri → **SIFIR-YAZI** kuralı (okuma-öncesi çocuk). Kapı rozetlerindeki
       "18"/"6" tam bu yüzden RED yiyip sökülmüştü; süzgeç "harf" arayıp rakamı kaçırmıştı
       (KABILIYET §35). Aynı tuzağa slot'la geri düşmeyelim.
   ⇒ `.v-slot` YALNIZ yetişkin/klasik yüzeylerde (hakkında · akademik-miras · whitepaper ·
     randevu) kullanılır. Çocuk yüzeyi ya da anasayfa-hero gerekirse `.v-slot--sessiz`
     kullanılır: kod DOM'da `data-grs`'de durur, ekrana YAZI olarak BASILMAZ.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── SLOT GÖVDESİ ───────────────────────────────────────────────────────────────
   Kasıtlı-boşluk okunur: kesik kenar "bekliyor" der, dolu kart ise düz kenarlıdır
   (`.v-kart`). İki yüzey karışmaz — bakan kişi bunun bir KUSUR değil KARAR olduğunu
   bir bakışta anlar. (Ekip zaten "yer-tutucu YAZI koymayı" reddetmişti: index.html:102
   portre boşluğu bilerek sessiz bırakılmış — bu bileşen o boşluğun konuşan hâli.) */
.v-slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);        /* kendi ritmi — sayfa margin yazmaz (Ai3 pilot dersi) */
}
.v-slot:last-child { margin-bottom: 0; }

.v-slot__cerceve {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  /* 🔑 HARNESS BULGUSU (ölçüldü, tahmin değil): sitede global border-box reset'i YOK ⇒
     varsayılan `content-box`ta `aspect-ratio` İÇ kutuya uygulanır, padding iki boyuta da
     eklenir ve her oranı 1'e doğru kaydırır: portre 0.75→0.778 · manzara 1.778→1.598 ·
     pano 2.333→2.200 (kare sapmadı: 1 zaten 1 — imzayı ele veren buydu).
     Bu, bileşenin VAROLUŞ SEBEBİNİ çürütürdü: yanlış ölçüde tutulan yer, gerçek görsel
     inince düzeni ZIPLATIR (CLS). Oran kilidi border-box'a bağlı. */
  box-sizing: border-box;
  /* ORAN = TEK DÜĞME. Ai5'in kürasyon paketi slot başına GERÇEK oran veriyor (4:5 · 16:7 · 3:2 …)
     ⇒ her oran için ayrı sınıf açmak değiştirici-enflasyonu olurdu. Oran bir STİL kararı değil,
     görselin KENDİ ÖLÇÜSÜ (kürasyondan gelir) ⇒ özel-özellikle taşınır; adlı ön-ayarlar altta. */
  aspect-ratio: var(--slot-oran, 4 / 3);
  background: var(--renk-yuzey);
  border: 1.5px dashed color-mix(in srgb, var(--renk-cizgi) 85%, var(--renk-marka));
  border-radius: var(--r-md);                             /* HÜKÜM 3 — kart yarıçapı */
  padding: var(--sp-5);
  overflow: hidden;
  /* çok ince ızgara dokusu: "hazırlanmış tuval" hissi, gürültü değil */
  background-image:
    linear-gradient(color-mix(in srgb, var(--renk-cizgi) 26%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--renk-cizgi) 26%, transparent) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-position: center center;
}
/* köşe aksanı — YAZISIZ dolgu ⇒ ham mercan burada MEŞRU (HÜKÜM 4 sınırı) */
.v-slot__cerceve::after {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 34px; height: 3px;
  background: var(--p-mercan);
  border-start-start-radius: var(--r-md);
}

/* ── KAMERA PİKTOGRAMI ─────────────────────────────────────────────────────────
   Satır-içi SVG (`currentColor`) — dış istek YOK (site-geneli "dış-istek=0" disiplini). */
.v-slot__pikto {
  width: clamp(30px, 7%, 42px);
  height: auto;
  color: color-mix(in srgb, var(--renk-sus) 78%, var(--renk-marka));
  flex-shrink: 0;
}

/* ── KOD ROZETİ — bileşenin VAROLUŞ SEBEBİ ────────────────────────────────────
   Tayfun bunu okuyup Ai5'in paketindeki kodla eşleştirir ⇒ okunaklılık dekorasyondan
   önce gelir: mono + harf-aralığı + lacivert/beyaz (12.21:1, Ai3 ölçümü).

   🔒 AI3 HÜKMÜ (15 Tem, USTABAŞI iletti): rozet **VARSAYILAN-SESSİZ**, yalnız
   **gözden-geçirme kipinde** (`?slot=1`) görünür. Benim ilk tasarımım tersiydi
   (varsayılan görünür + yüzey-bazlı `--sessiz` istisnası). Ai3'ün kararı daha sağlam:
   yüzey-bazlı istisna **unutulabilir bir kapıdır** — biri slotu çocuk yüzeyine ya da
   anasayfa hero'suna kopyalar, `--sessiz` yazmayı unutur ve E4/sıfır-yazı sessizce kırılır.
   Varsayılan-sessizde ihlal için ADIM ATMAK gerekir; unutmak GÜVENLİ yöne düşer.
   ⇒ Kapı artık yüzeyin dikkatine değil, kipin kendisine bağlı. */
.v-slot__kod {
  /* varsayılan: ekranda YOK, DOM'da VAR (ekran-okuyucu+eşleştirme kaybolmaz) */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* GÖZDEN-GEÇİRME KİPİ — `?slot=1` (slot.js kökte `data-slot="1"` işaretler) */
[data-slot="1"] .v-slot__kod {
  position: static; width: auto; height: auto; margin: 0; overflow: visible;
  clip-path: none; border: 0;
  display: inline-flex; align-items: center; gap: 6px;
  /* 🔑 ÖLÇTÜM: `--font-mono` ve `--v-fs-kucuk` YALNIZ vucut.css'te tanımlı; geri kalan her
     jeton tokens.css'te. `ofis-turu.html` tokens yüklüyor ama vucut YÜKLEMİYOR ⇒ orada bu iki
     jeton çözülmez. Çare sayfaya vucut.css eklemek DEĞİL (kapsamım dışı, yan-etkili): bileşen
     KENDİ KENDİNE YETSİN — geri-düşüş değeri vucut.css'in kendi değerinin birebir aynısı. */
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em;
  background: var(--renk-marka);          /* HÜKÜM 4: yazı taşıyor ⇒ ham mercan YASAK */
  color: var(--renk-zemin2);
  padding: 5px 11px;
  border-radius: var(--r-full);           /* HÜKÜM 3 — hap yarıçapı */
  box-shadow: var(--golge-sm);
  user-select: all;                       /* tek tıkla seçilir — kodu kopyalamak kolay olsun */
  white-space: nowrap;
}

/* ── TANIM — "buraya NE gelecek" ──────────────────────────────────────────────── */
.v-slot__tanim {
  font-family: var(--font-govde);
  font-size: var(--v-fs-kucuk, 15px);      /* vucut.css yoksa da doğru boyut (bkz. rozet notu) */
  line-height: var(--lh-govde);
  color: var(--renk-sus);
  margin: 0;
}
.v-slot__tanim b { color: var(--renk-murekkep); font-weight: 600; }

/* ── ORAN DEĞİŞTİRİCİLERİ ──────────────────────────────────────────────────────
   Slot GERÇEK görselin oranını tutar ⇒ görsel gelince düzen ZIPLAMAZ (CLS=0).
   Yer-tutucunun asıl işi budur: yeri "doldurmak" değil, yeri DOĞRU ölçüde tutmak. */
.v-slot--portre   { --slot-oran: 3 / 4; }
.v-slot--kare     { --slot-oran: 1 / 1; }
.v-slot--manzara  { --slot-oran: 16 / 9; }
.v-slot--pano     { --slot-oran: 21 / 9; }
/* Ön-ayar yoksa oran doğrudan verilir — Ai5 paketindeki gerçek ölçüler:
   <figure class="v-slot" style="--slot-oran: 4/5"> */

/* ── DURUMLAR (bileşen görünüş veriyorsa DURUM da vermeli — Ai3'ün `.v-cta` dersi) ── */
/* KİLİTLİ: görsel var ama yayın kapısı bekliyor (ör. Hoca onayı / etik kapı) */
.v-slot--kilitli .v-slot__cerceve { border-style: solid; opacity: .72; }
[data-slot="1"] .v-slot--kilitli .v-slot__kod { background: var(--renk-sus); }
/* NOT: `--sessiz` değiştiricisi EMEKLİ (Ai3 hükmü) — sessizlik artık VARSAYILAN,
   istisna değil. Yüzey-bazlı istisna kapısı kaldırıldığı için unutulacak bir şey de kalmadı. */

/* ── ERİŞİM ────────────────────────────────────────────────────────────────────
   Slot bir GÖRSEL DEĞİL, boş bir yer ⇒ `role="img"`+`alt` YALAN olurdu (olmayan
   görseli varmış gibi duyurur). `figure`+`figcaption` gerçeği söyler: bu bir
   şekil-yeri, açıklaması da tanımı. Piktogram dekoratif ⇒ aria-hidden.
   HAREKET YOK: iskelet-parıltısı (shimmer) "yükleniyor" der — burada yüklenen bir şey
   yok, bekleyen bir KARAR var. Yanlış vaat vermez ⇒ reduce-motion kendiliğinden temiz. */
.v-slot__cerceve:focus-visible { outline: none; box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) {
  .v-slot, .v-slot__cerceve { transition: none; }   /* zaten hareket yok — niyet açık kayıtta */
}

/* ── DAR EKRAN ─────────────────────────────────────────────────────────────────
   Tablet birinci sınıf (Ai3 k10). Dar viewport'ta portre slot ekranı yutmasın. */
@media (max-width: 520px) {
  .v-slot--portre .v-slot__cerceve { aspect-ratio: 4 / 5; }
  .v-slot__cerceve { padding: var(--sp-4); }
}