/* ===========================================================================
   about — 3B küp sayfası · STİL
   Tasarım sözleşmesi: "Camın Altı Kuralı" (Kaptan direktifi 2026-08-16).
   Token'lar yeniden icat EDİLMEDİ, rehberden birebir kopyalandı.
   Dış bağımlılık YOK (ev doktrini: native, sıfır kütüphane).
   =========================================================================== */

:root {
  /* --- rehberden birebir --- */
  --ground:      #08060f;
  --ground-2:    #0d0a1c;
  --text:        #f6f4ff;
  --muted:       rgba(246, 244, 255, .60);
  --faint:       rgba(246, 244, 255, .38);
  --cyan:        #6ee7ff;
  --magenta:     #f472d0;
  --violet:      #a78bfa;

  --glass-bg:     linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
  --glass-border: rgba(255, 255, 255, .16);
  --glass-shadow: 0 10px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.28);

  --serif: "Palatino Linotype", "Palatino", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "Cascadia Code", "SF Mono", ui-monospace, "Consolas", monospace;

  /* --- bu sayfaya özel --- */
  --kup: min(56vmin, 420px);          /* küp kenarı */
  --yari: calc(var(--kup) / 2);
  /* Küpü yarım kenar geri iter → ÖN YÜZ tam Z=0'a oturur → ölçek 1.0000.
     ÖLÇÜLDÜ (Ö5): geri itilmeden ön yüz 1.1426 kat büyütülüp çiziliyordu,
     yani yüzdeki metin yeniden örnekleniyor ve yumuşuyordu. */
  --geri: calc(var(--kup) / -2);
}

* { box-sizing: border-box; }

/* Sayfa KAYDIRMAZ: tek ekran, gezinme küpü döndürerek.
   (Kaptan 2026-09-07: her çeyrek dönüş bir konu açar.) */
html, body { height: 100%; overflow: hidden; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- atmosfer */
/* Rehber kuralı 1 — ÖLÇÜLDÜ (NOTLAR-olcumler.md Ö3b): canlı arka plan olmadan
   küpün yüz tonları ayırt edilemiyor, form düz okunuyor. Bu katman şart. */
.atmosfer {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, var(--ground-2), var(--ground) 60%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .72; will-change: transform; }
.b1 { width: 46vw; height: 46vw; left: -10vw; top: -8vw;
      background: radial-gradient(circle at 30% 30%, #e935c1, transparent 68%);
      animation: kay1 11s ease-in-out infinite, nabiz 6s ease-in-out infinite; }
.b2 { width: 42vw; height: 42vw; right: -8vw; top: 2vw;
      background: radial-gradient(circle at 60% 40%, #5b5bf5, transparent 66%);
      animation: kay2 14s ease-in-out infinite, nabiz 7.5s ease-in-out infinite -3s; }
.b3 { width: 40vw; height: 40vw; left: 20vw; top: 38vh;
      background: radial-gradient(circle at 50% 50%, #29d3f0, transparent 64%);
      animation: kay3 12s ease-in-out infinite, nabiz 5.5s ease-in-out infinite -5s; }
.b4 { width: 32vw; height: 32vw; right: 8vw; bottom: -10vw;
      background: radial-gradient(circle at 40% 60%, #ff6b9d, transparent 66%);
      animation: kay1 16s ease-in-out infinite reverse, nabiz 9s ease-in-out infinite -2s; }

/* Üç duraklı döngü: iki duraklı olan ileri-geri sallanıyordu, mekanik
   duruyordu. Üç durak "dolaşan ışık" hissi veriyor. */
@keyframes kay1 { 0%,100%{transform:translate(0,0) scale(1)}
                  34%{transform:translate(30vw,18vh) scale(1.34)}
                  67%{transform:translate(-14vw,26vh) scale(0.82)} }
@keyframes kay2 { 0%,100%{transform:translate(0,0) scale(1)}
                  35%{transform:translate(-28vw,22vh) scale(1.30)}
                  70%{transform:translate(15vw,10vh) scale(0.80)} }
@keyframes kay3 { 0%,100%{transform:translate(0,0) scale(1)}
                  30%{transform:translate(26vw,-20vh) scale(1.38)}
                  65%{transform:translate(-18vw,-8vh) scale(0.84)} }
/* Işıkların nefesi — parlaklık salınımı, "ışık" hissini güçlendirir. */
@keyframes nabiz { 0%,100%{opacity:.52} 50%{opacity:1} }

/* Referanstan alınan karakter: kenarlardaki nokta/tel-kafes veri alanı.
   Saf CSS — görsel indirilmiyor. Ortaya doğru maskeyle sönüyor. */
.arka-sahne {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; display: block;
}

.kafes {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, rgba(110,231,255,.5) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 26%, transparent 74%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0, transparent 26%, transparent 74%, #000 100%);
}

/* Rehber kuralı 5 — %4-5 grain; "düz AI gradyanı" hissini kırar. */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- kabuk */
/* Gerçek cam (backdrop-filter) YALNIZ burada — 3B dışı kabukta.
   Küp yüzlerinde kullanılamaz: ÖLÇÜLDÜ, opak bloğa dönüşüyor (Ö1). */
.cam {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
@supports not (backdrop-filter: blur(1px)) {
  .cam { background: rgba(20, 15, 40, .88); }
}

/* ÜST ÇUBUK ve GİRİŞ BAŞLIĞI kaldırıldı (Kaptan 2026-09-07: "üstteki prxs
   yazan çubuğu kaldır ... kim yapıyor ne bitti ne sürüyor kaldır").
   Kazanılan dikey alan küpe verildi: kenar tavanı 420 → 520 px, dikey pay
   %56 → %72. Gezinme tek yerde toplandı: aşağıdaki ray. */

/* Sol dikey ray — tek gezinme öğesi. Bir düğme = bir SATIR (yan yana iki küp). */
.ray {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 30; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 10px; border-radius: 18px;
}
.ray button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.4); background: transparent;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.ray button[aria-current="true"] {
  background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 14px var(--cyan); transform: scale(1.25);
}


/* Şimşek katmanı — küplerin ARKASINDA (z 9 < sahne 10). Yarı saydam cam
   yüzünden ark küpün içinden de sızıyor, elektrik hissi güçleniyor.
   Canvas 3B zincirin dışında: preserve-3d bağlamına dokunmuyor. */
.simsek {
  position: fixed; inset: 0; z-index: 9;
  pointer-events: none; display: block;
}

/* --------------------------------------------------------------- 3B sahne */
.sahne {
  position: fixed; inset: 0; z-index: 10;
  perspective: 1500px; overflow: hidden; pointer-events: none;
}
.yer {
  position: absolute; left: 50%; top: 50%;
  width: var(--kup); height: var(--kup);
  margin-left: calc(var(--yari) * -1); margin-top: calc(var(--yari) * -1);
  transform-style: preserve-3d; will-change: transform, opacity;
}
.kup { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.yuz {
  position: absolute; inset: 0; padding: clamp(14px, 2.2vmin, 22px);
  overflow: hidden;
  display: flex; flex-direction: column;
  /* ÖLÇÜLDÜ (Ö3a): olmazsa arka yüzlerin aynalanmış metni okunuyor. */
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* PAH (bevel) + kenar ışığı.
     Köşe yarıçapı 14 → 5 px: yuvarlak köşe, küpün 8 köşesinde saydam üçgen
     boşluk bırakıyordu (yüzler orada birleşemiyor). Küçük yarıçap boşluğu
     kapatır, pah hissini korur.
     `filter: drop-shadow` KULLANILMADI: ölçüldü, uygulandığı elemanın 3B
     bağlamını düzleştiriyor (Ö5a). Buradaki her şey box-shadow/gradient. */
  /* Kaptan 2026-09-07: "kenarları sivri değil daha oval". 4 → 20 px.
     Bedeli ölçülüydü: yuvarlak köşe, küpün 8 köşesinde saydam üçgen boşluk
     bırakıyor. Küp zaten yarı saydam olduğu için bu boşluk cam köşesi gibi
     okunuyor; keskin köşenin sertliğinden daha iyi duruyor. */
  border-radius: 20px;
  /* CAM KALINLIĞI.
     Arka plan parlaklaşınca tek çizgilik kenar yetmedi, küpün formu silikleşti.
     Şimdi kenar üç katman: dış çizgi (cam yüzeyinin sınırı) · iç halka (camın
     KALINLIĞI) · üst/alt pah. Renk nötr beyaz — cam kenarı renksizdir,
     rengini ortamdan alır; doygun siyan "neon çerçeve" gibi duruyordu. */
  border: 1px solid rgba(224,240,255,.46);
  box-shadow:
    /* 1) iç halka — camın kesit kalınlığı */
    inset 0 0 0 1px rgba(255,255,255,.09),
    /* 2) pah: üstte ışık, altta gölge */
    inset 0  2px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.52),
    /* 3) yanlarda yumuşak kırılma */
    inset  4px 0 9px -5px rgba(255,255,255,.20),
    inset -4px 0 9px -5px rgba(0,0,0,.40),
    /* 4) dipte ışık birikmesi — cam blokta ışık tabana toplanır */
    inset 0 -46px 64px -46px rgba(110,231,255,.16),
    /* 5) dış hâle */
    0 0 40px rgba(160,205,255,.16);
  /* Metin solması yumuşak olsun (açı değişimi ani sıçramasın). */
  transition: none;
}
.yuz ul { transition: opacity 90ms linear; }

/* ŞEFFAF CAM YÜZEY + IŞIK YANSIMASI
   (Kaptan 2026-09-07: "küplere ışık yansıması ve şeffaf yüzey isteniyor")

   Üç katman, hepsi background — hiçbiri 3B'yi düzleştirmiyor
   (mix-blend-mode / filter / opacity KULLANILMADI, ölçülmüş yasak):
     1) dar parlak şerit  → cam yüzeyden yansıyan ışık huzmesi
     2) geniş yumuşak hâle → kaynağa bakan köşenin aydınlanması
     3) taban              → yarı saydam renk; arka plan içinden geçer

   Yüz başına iki değişken:
     --isik : aydınlanma. Tek yönlü ışık (sol-üst-ön) ile yüz normalinin
              açısından geliyor — estetik sıralama değil.
     --cam  : taban opaklığı. DÜŞÜK = daha şeffaf. Metin kontrastı buna
              bağlı; değiştirirsen kontrastı YENİDEN ÖLÇ (Ö16). */
.yuz {
  --isik: .40;
  --cam:  .58;
  background:
    /* 1) FRESNEL — cam, sığ açıda (kenara doğru) çok daha fazla yansıtır.
       Önceki sürümde yansıma düz bir şeritti ve "CSS gradyanı" gibi
       duruyordu; kenara doğru artan yansıma gerçek camın davranışı. */
    radial-gradient(125% 125% at 50% 50%,
      transparent 52%,
      rgba(205,226,255, calc(var(--isik) * .15)) 86%,
      rgba(226,240,255, calc(var(--isik) * .30)) 100%),
    /* 2) Işık hâlesi — keskin şerit DEĞİL, dağınık elips. Gerçek yansıma
       kenarı keskin bir çizgi değildir.
       Yükseklik %52 → %34 ve merkez yukarı alındı: hâle METİN BLOĞUNUN
       ÜSTÜNDEN geçiyordu, yazının üstünü yıkayıp özensiz gösteriyordu.
       Artık yalnız yüzün üst şeridinde duruyor. */
    radial-gradient(72% 34% at 30% 6%,
      rgba(228,238,255, calc(var(--isik) * .26)), transparent 68%),
    /* 3) Taban — RENK ÇOK AZALTILDI. Cam neredeyse renksizdir; rengini
       arkasındaki ortamdan alır. Önceki mor dolgu, küpü camdan çok
       boyalı plastiğe benzetiyordu. */
    linear-gradient(155deg,
      rgba(150,142,205, calc(var(--isik) * .17)),
      rgba(12,10,26, var(--cam)));
}
.y-ust  { --isik: .95; --cam: .50; }
.y-on   { --isik: .72; --cam: .55; }
.y-sol  { --isik: .52; --cam: .58; }
.y-sag  { --isik: .34; --cam: .62; }
.y-arka { --isik: .22; --cam: .64; }
.y-alt  { --isik: .14; --cam: .66; }

/* Zemin gölgesi — küpün havada asılı durmasını bitirir.
   `filter: blur` YOK (3B'yi düzleştirir); yumuşaklık radial-gradient'ten. */
/* Zemin gölgesi. Işık sol-üst-önden geldiği için gölge SAĞA-AŞAĞI kayık;
   ortalanmış simetrik elips ışık yönüyle çelişiyor ve yapay duruyordu.
   `filter: blur` YOK (3B'yi düzleştirir); yumuşaklık gradyan duraklarından. */
.golge {
  position: absolute; left: 50%; top: 100%;
  width: calc(var(--kup) * 1.28); height: calc(var(--kup) * 0.26);
  transform: translate(-46%, calc(var(--kup) * 0.12));
  background: radial-gradient(ellipse 50% 50% at 46% 42%,
    rgba(0,0,0,.50) 0%, rgba(0,0,0,.30) 30%,
    rgba(0,0,0,.14) 52%, rgba(0,0,0,.05) 70%, transparent 84%);
  pointer-events: none;
}

/* Yüzeyin üstüne ince bir ışık katmanı: üstte gökyüzü yansıması, dipte
   soğuk toplanma. `::after` bir yaprak eleman — 3B bağlamı etkilemez. */
.yuz::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), transparent 20%),
    linear-gradient(0deg,   rgba(120,205,255,.075), transparent 26%);
}
/* Kapak yüzleri (üst/alt) metinsiz; onlarda katman daha da hafif dursun. */
.yuz.ust::after, .yuz.alt::after { opacity: .55; }

/* Tek ad taşıyan yüz (emeği geçenler) — büyük, ortalanmış, başlıksız. */
.yuz-buyuk { align-items: center; justify-content: center; text-align: center; }
.yuz-buyuk ul { gap: 18px; }
.yuz-buyuk .ad {
  font-family: var(--serif); font-weight: 400;
  /* Dört ad tek yüzde; en uzunu ("Berkan Doğankan Çağlar") sığsın diye
     tavan 38 → 29 px. Taşma denetimi (ABOUT_OLC.tasanYuzler) doğruluyor. */
  font-size: clamp(16px, 3.2vmin, 29px); line-height: 1.25;
  letter-spacing: .01em; text-wrap: balance;
}

.on   { transform: translateZ(var(--yari)); }
.arka { transform: rotateY(180deg) translateZ(var(--yari)); }
.sag  { transform: rotateY(90deg)   translateZ(var(--yari)); }
.sol  { transform: rotateY(-90deg)  translateZ(var(--yari)); }
/* Sondaki `rotate()` yüzü KENDİ düzleminde çevirir (en sağdaki dönüşüm en
   içte uygulanır). Küp yaw ile döndükçe üst/alt yüzün yazısı 90°'lik
   adımlarla yatıyordu — ÖLÇÜLDÜ: konu 3'te (yaw 270°) başlık dikey okunuyordu.
   Motor `--ust-donme` / `--alt-donme` değerlerini çeyreğe göre yazıp bunu
   telafi eder; alt yüzde ayrıca 180° var, çünkü `rotateX(-90deg)` yüzün
   yerel yukarısını izleyiciye çevirip yazıyı baş aşağı gösteriyor. */
.ust  { transform: rotateX(90deg)   translateZ(var(--yari)) rotate(var(--ust-donme, 0deg)); }
.alt  { transform: rotateX(-90deg)  translateZ(var(--yari)) rotate(var(--alt-donme, 180deg)); }

/* ═════════ TAŞMA: ÜST VE ALT YÜZ İÇERİK TAŞIR ═════════════════════════════
   Kaptan (2026-09-07): "sığmadığı durumlarda küplerin üst ve alt yüzünü
   kullanalım." Bu iki yüz eskiden BOŞTU (yalnız cam yüzeyi). Artık yan yüze
   sığmayan maddeleri taşıyorlar; küpü ↑/↓ ile eğince okunur. */

/* Üst yüz camın en aydınlık yüzü (--isik:.95) — açık zeminde açık yazı
   okunmazdı. Bu iki yüzde zemin koyulaştırılıyor, AMA YALNIZ İÇERİK VARSA:
   koşulsuz uygulandığında taşma olmayan konularda üst yüz siyah bir levhaya
   dönüyor ve camın şeffaflığını öldürüyordu (ölçüldü, ekran görüntüsü). */
.yuz.ust:has(ul), .yuz.alt:has(ul) { background: rgba(10, 8, 20, .58); }

/* İpucu mutlak konumlu olduğu için listeye YER AÇMAZ; dolu bir listede son
   satırın üstüne biniyordu (ölçüldü, osint paneli). Liste bu yüzden altta
   ipucu kadar boşluk bırakır — ve bu boşluk taşma ölçümüne de girer, yani
   kesim zaten ipucunu hesaba katmış olur. */
.yuz.tasiyor ul { padding-bottom: 16px; }

/* TAŞMA İPUCU — sessiz kırpma kabul edilemez: sığmayan madde varsa yan yüz
   bunu SÖYLER. Mutlak konumlu, flex akışına girmez, düzeni bozmaz. */
.yuz.tasiyor::before {
  content: '↑ devamı üst yüzde';
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center; pointer-events: none;
  font-size: clamp(11px, 1.25vmin, 12px); letter-spacing: .10em;
  text-transform: uppercase; color: rgba(110, 231, 255, .72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
/* Üst yüz de dolduysa zincir aşağı devam eder — ipucu yönü değişir. */
.yuz.ust.tasiyor::before { content: '↓ devamı alt yüzde'; }

/* Yazı boyutları ÖLÇÜLEREK ayarlandı (Ö6): ilk halinde .not 9.72px'e düşüyordu
   — kontrast 6.5:1 ile yeterliydi ama boyut okunaklı değildi. Yüzde boş yer
   vardı (içerik 203px / kullanılabilir ~371px), o yüzden büyütüldü. */
/* `flex:1` + `align-content:center`: az maddeli yüzlerde (ör. 2 madde) liste
   tepeye yapışıp altta ölü alan bırakıyordu. Şimdi kalan boşlukta dikeyde
   ortalanıyor; dolu yüzlerde davranış değişmiyor. */
.yuz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
          overflow: hidden; flex: 1 1 auto; align-content: center; }
/* Maddeler arası ince ayraç — listeye ritim verir, maddeler birbirine
   karışmaz. Tek maddede çizgi çıkmaz (li + li). */
/* Önizlemeli madde: solda kendi sitemizin gerçek ekran görüntüsü (WebP),
   sağda ad + açıklama. Görsel `object-fit: cover` ile üst kısmı gösterir —
   sayfaların kimliği orada. */
.yuz li.onizlemeli {
  grid-template-columns: 96px 1fr;
  grid-template-areas: 'gorsel metin';
  align-items: center; gap: 12px;
}
.yuz li.onizlemeli .onizleme { grid-area: gorsel; }
.yuz li.onizlemeli .oge-metin { grid-area: metin; }
/* KARIŞIK LİSTEDE HİZA (ölçüldü 2026-09-07): domain paneli 8'den 12 adrese
   çıkınca bazı adreslerin önizlemesi olmadı (parola kapısı arkasındalar,
   ekran görüntüsü alınamıyor). Önizlemesiz maddeler görsel sütununu
   ayırmayınca metin sola kaçtı ve liste KIRIK göründü. Aynı yüzde önizlemeli
   madde varsa, önizlemesiz maddeler de aynı 96px'i BOŞ olarak ayırır —
   sol kenar tek hizada kalır. Yalnız karışık listeyi etkiler. */
.yuz ul:has(li.onizlemeli) li:not(.onizlemeli) {
  grid-template-columns: 96px 1fr;
  grid-template-areas: '. metin';
  align-items: center; gap: 12px;
}
.yuz ul:has(li.onizlemeli) li:not(.onizlemeli) .oge-metin { grid-area: metin; }
.yuz .onizleme {
  width: 96px; height: 60px; display: block;
  object-fit: cover; object-position: top center;
  border-radius: 6px;
  border: 1px solid rgba(214,232,255,.22);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  opacity: .92;
}

.yuz li { display: grid; gap: 3px; padding: 11px 0;
  /* YAZI ANİMASYONU: yüz izleyiciye dönünce maddeler sırayla yükselerek
     belirir. Sürekli açı-opaklığı yerine EŞİK + gecikmeli geçiş kullanılıyor;
     her karede yeniden tetiklenmediği için titremiyor. */
  opacity: 0; transform: translateY(12px);
  transition: opacity .46s ease, transform .52s cubic-bezier(.22,.72,.24,1);
}
.yuz.acik li { opacity: 1; transform: none; }
.yuz.acik li:nth-child(1) { transition-delay: .04s; }
.yuz.acik li:nth-child(2) { transition-delay: .10s; }
.yuz.acik li:nth-child(3) { transition-delay: .16s; }
.yuz.acik li:nth-child(4) { transition-delay: .22s; }
.yuz.acik li:nth-child(5) { transition-delay: .28s; }
.yuz.acik li:nth-child(6) { transition-delay: .34s; }
.yuz li + li { border-top: 1px solid rgba(255,255,255,.075); }
.yuz li:first-child { padding-top: 0; }
.yuz li:last-child  { padding-bottom: 0; }
.yuz .ad { font-size: clamp(13px, 2.05vmin, 16px); font-weight: 600;
           line-height: 1.2; letter-spacing: .004em; }
/* TIKLANABİLİR ADRES — sahnenin tek etkileşimli parçası.
   `pointer-events: auto`: `#sahne` genelinde `none`; yalnız bu geri açılır,
   böylece sürükleme her yerde çalışırken adres tıklanabilir kalır.
   Altı çizili DEĞİL, noktalı alt kenarlık: 12 adresin altını çizmek listeyi
   gürültüye boğuyordu; üzerine gelince tam çizgiye ve cam mavisine döner. */
.yuz .ad-baglanti {
  display: inline-block; pointer-events: auto; cursor: pointer;
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted rgba(140, 215, 255, .45);
  transition: color .16s ease, border-color .16s ease;
}
.yuz .ad-baglanti:hover,
.yuz .ad-baglanti:focus-visible {
  color: #9fe4ff; border-bottom-color: #9fe4ff; border-bottom-style: solid;
}
.yuz .ad-baglanti:focus-visible { outline: 2px solid #6ee7ff; outline-offset: 3px; }
/* Yüz kapalıyken (arka tarafta) bağlantı tıklanamaz olmalı — görünmeyen bir
   yüzeye tıklanması kullanıcıyı şaşırtırdı. */
.yuz:not(.acik) .ad-baglanti { pointer-events: none; }
/* Yüz METNİ --muted'ten daha parlak: yüzler şeffaflaşınca (Ö16) arkadaki
   aurora yer yer açılıyor ve .60 opaklıkta kontrast 3.59:1'e düşüyordu —
   WCAG AA sınırı 4.5. Düz listede --muted olduğu gibi kalır; orada zemin
   sabit ve sorun yok. */
.yuz .not { font-size: clamp(11px, 1.7vmin, 13px); line-height: 1.4;
            color: rgba(246, 244, 255, .84); }
.yuz .rol { font-size: clamp(11px, 1.5vmin, 12.5px); color: var(--cyan); opacity: .9; }

.panel-baslik {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 12px; flex: none; opacity: .85;
}

/* Konu adı — yüzeyin DIŞINDA, küpün altında.
   Kaptan 2026-09-07: "katkıcı, şirket gibi yüzey işgalleri gereksiz".
   Tek kelimelik etiket koca bir küp yüzünü harcıyordu; üst ve alt yüz
   artık metinsiz temiz yüzey, ad buraya taşındı. 3B'nin dışında olduğu
   için dönmüyor, her açıda okunur. */
.konu-adi {
  position: absolute; left: 50%; bottom: 6vh;
  transform: translateX(-50%);
  white-space: nowrap; pointer-events: none; z-index: 12;
}
.konu-adi-metin {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(16px, 2.1vmin, 21px);
  /* Küçük boyutta serif, açılan harf aralığıyla "levha yazısı" gibi durur;
     sıkışık dizilmiş serif amatör görünüyordu. */
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(246,244,255,.90);
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}

/* ------------------------------------------------------- kaydırma sürücüsü */

/* yakalayıcı: sürükleme yüzeyi. touch-action pan-y → dikey scroll korunur,
   yatay sürükleme küpü çevirir. */
/* ⚠ z-index 15 → 4 (2026-09-07). ÖLÇÜLDÜ: yakalayıcı `#sahne`nin (z-index 10)
   ÜSTÜNDEYDİ; küpteki adres bağlantılarına tıklama hiç ulaşmıyordu — bağlantı
   eklemek tek başına ÇALIŞMAZDI, sessizce ölü kalırdı.
   Şimdi yakalayıcı sahnenin ALTINDA. Sürükleme BOZULMAZ, çünkü `#sahne` ve
   `#simsek` zaten `pointer-events: none` — küpün üstündeki her tıklama/sürükleme
   olayı onların içinden geçip yakalayıcıya iner. Yalnız `pointer-events: auto`
   verilen tek şey adres bağlantılarıdır (aşağıda). z=4: `.grain` (3) üstünde,
   `#simsek` (9) altında. */
.yakala { position: fixed; inset: 0; z-index: 4; cursor: grab; touch-action: pan-y; }
.yakala.tutuluyor { cursor: grabbing; }

/* --------------------------------------------------------------- düz liste */
/* Erişilebilirlik + prefers-reduced-motion yedeği: küpü çevirmeden TÜM içerik. */
.duz {
  position: relative; z-index: 40; max-width: 1080px;
  margin: 0 auto; padding: 96px 24px 80px;
}
body:not(.duz-acik) .duz { display: none; }
body.duz-acik .sahne,
body.duz-acik .yakala,
body.duz-acik .ray,


.duz h2 {
  font-family: var(--serif); font-weight: 400; font-size: 30px;
  margin: 48px 0 6px; text-wrap: balance;
}
.duz .konu-not { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.duz .izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.duz .kart { padding: 15px 17px; border-radius: 16px; }
.duz .kart .ad { font-weight: 600; margin-bottom: 3px; }
.duz .kart .not { color: var(--muted); font-size: 13px; }
.duz .kart .rol { color: var(--cyan); font-size: 12px; margin-top: 4px; }

.duz-dugme {
  position: fixed; right: 22px; bottom: 22px; z-index: 45;
  padding: 10px 17px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text);
  border: 1px solid var(--glass-border);
}

/* Kaptan (2026-09-07): "sayfanın sol altına by prxs yazalım, basınca prxs ana
   sayfasına gitsin."
   Sessiz durur, üstüne gelince aydınlanır: imza olmalı, düğme gibi
   bağırmamalı — sağ alttaki "Düz liste" sayfanın işlevi, bu ise künyesi. */
.imza {
  position: fixed; left: 22px; bottom: 22px; z-index: 45;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font: inherit; font-size: 12.5px; letter-spacing: .02em;
  color: rgba(236, 240, 252, .55);
  background: rgba(18, 16, 34, .38);
  border: 1px solid rgba(214, 232, 255, .13);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.imza b { font-weight: 700; letter-spacing: .06em; }
.imza:hover, .imza:focus-visible {
  color: #cdeaff; border-color: rgba(110, 231, 255, .45);
  background: rgba(24, 30, 54, .66);
}
.imza:focus-visible { outline: 2px solid #6ee7ff; outline-offset: 3px; }
/* Düz liste açıkken imza da çekilsin: o kip tam ekran metin okuma kipidir. */
body.duz-acik .imza { display: none; }

/* ------------------------------------------------------------- duyarlılık */
@media (max-width: 900px) {
  /* Bu genişliğin altında iki küp yan yana sığmaz; motor tek sütuna düşer
     (kup-motoru.js → sutunSayisi). --kup değerini JS ölçerek yazıyor. */
  .ray { left: 10px; }
}
@media (max-width: 560px) {
  .kafes { display: none; }
  /* İkisi YAN YANA kalır (künye solda, "Düz liste" sağda): ölçüldü, 375 px
     genişlikte toplam ~205 px yer kaplıyorlar, rahat sığıyorlar. Alt alta
     dizilselerdi alt bant 100 px'i geçer ve küplerin dikey payını yerdi. */
  .duz-dugme { right: 14px; bottom: 14px; padding: 8px 13px; font-size: 12px; }
  .imza { left: 14px; bottom: 14px; padding: 7px 11px; font-size: 11.5px; }
}

/* Rehber şartı: prefers-reduced-motion zorunlu.
   ⚠ DÜZELTME: Önceki hâli küpü GİZLEYİP düz listeye düşüyordu. Kaptan'ın
   makinesinde Windows "animasyonları göster" kapalı olduğu için sayfa küp
   yerine kart listesi açtı — sayfanın asıl içeriği hiç görünmedi. Windows'ta
   bu ayar sık kapatılır, yani kusur yaygın.
   Doğrusu: KENDİLİĞİNDEN OLAN hareketi kapat, içeriği kaldırma.
   Küpü çevirmek kullanıcının kendi eylemi; kısıtlanmaz. */
/* ⚠ İKİNCİ DÜZELTME (2026-09-07): burada `.blob { animation: none }` vardı
   ve arka plan TAMAMEN donuyordu. Kaptan "hareketli arka plan eksik" dedi —
   haklıydı. Aynı hata iki kez yapıldı: hareket azaltma "özelliği KALDIR"
   demek değil, "şiddetini DÜŞÜR" demek.
   Aurora artık duruyor değil, 2.5 kat YAVAŞ sürükleniyor. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Yavaşlat ama DURDURMA. 65-90 sn fazla yavaştı: Kaptan "ışıklar hareketli
     olsun" dedi, haklıydı — o sürede hareket fark edilmiyor. */
  .b1 { animation-duration: 22s, 13s; }
  .b2 { animation-duration: 28s, 15s; }
  .b3 { animation-duration: 24s, 11s; }
  .b4 { animation-duration: 32s, 18s; }
  .kup { transition: none !important; }
}

/* ═════════ ÜST ŞERİT + PREZİ TARZI SUNUM ═══════════════════════════════════
   Kaptan (2026-09-07): "en üstte ayrı butonlar olsun … Prezi sunumu tam ekran".
   ⚠ Küpün alanını YEMEZ: şerit yüzer, yalnız kendi yüksekliği kadar yer kaplar
   ve küp sahnesi `position:fixed` olduğu için itilmez. Kaptan daha önce üstteki
   çubuğu "küp daha büyük alana sahip olmalı" diye kaldırtmıştı; bu yüzden şerit
   ince tutuldu ve zemini saydam. */
/* Kaptan (2026-09-07): "üstteki PRXS NEDİR · PRXS NASIL ÇALIŞIR · AIOS NEDİR ·
   AIOS NASIL ÇALIŞIR butonları daha büyük olsun."
   Önceki ölçü 10–12px idi; sayfanın ana girişleri olmalarına rağmen küpün
   yanında dipnot gibi duruyorlardı. Yeni ölçü 14–19px.
   Taşma riski `flex-wrap` + dar ekran kuralıyla kapatıldı: dört düğme dar
   ekranda alt satıra iner, kırpılmaz. */
.ust-serit {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 32; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 0 10px;
  /* ÖLÇÜLDÜ (375×812): `max-width` ile bırakıldığında konumlandırılmış öğe
     büzülüp EN GENİŞ düğmenin genişliğine oturuyor ve dört düğme DÖRT satıra
     iniyordu (135 px yükseklik, küpün üstünü kaplıyor). Açık `width` verilince
     satır kutusu belirli olur ve düğmeler ikişerli sarılır. */
  width: min(96vw, 900px);   /* 780 px masaustunde dort dugmeyi ikiye boluyordu (olculdu: toplam 782 px) */
}
.serit-dugme {
  appearance: none; cursor: pointer; white-space: nowrap;
  font: 650 clamp(14px, 1.95vmin, 19px)/1 var(--yazi, system-ui), system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(240, 244, 255, .90);
  padding: 14px 26px; border-radius: 999px;
  background: rgba(18, 16, 34, .58);
  border: 1px solid rgba(214, 232, 255, .26);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.serit-dugme:hover, .serit-dugme:focus-visible {
  color: #cdeaff; border-color: rgba(110, 231, 255, .55);
  background: rgba(24, 30, 54, .78);
}
.serit-dugme:focus-visible { outline: 2px solid #6ee7ff; outline-offset: 3px; }
/* Dar ekran: dört düğme iki satıra iner; ölçüyü biraz kısıp taşmayı önler
   (yine de eski 12px'ten büyük kalır — direktifin sözü "daha büyük"tü). */
@media (max-width: 620px) {
  .serit-dugme { font-size: 13px; padding: 11px 17px; letter-spacing: .05em; }
  .ust-serit { gap: 8px; }
}
/* Telefon dikey: dört düğme DÖRT satıra inip küpün üstünü kaplıyordu
   (ölçüldü 375×812). Bu ölçüde ikişerli İKİ satıra sığar — küp motoru da
   üstte tam 90 px pay ayırıyor (kup-motoru.js `ustPay`). */
@media (max-width: 430px) {
  .serit-dugme { font-size: 11px; padding: 8px 11px; letter-spacing: .04em; }
  .ust-serit { gap: 7px; top: 12px; }
}
body.duz-acik .ust-serit { display: none; }

/* Sunum katmanı — kapalıyken [hidden] ile tamamen kalkar. */
.sunum {
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #16112c 0%, #08060f 62%);
}
.sunum[hidden] { display: none !important; }
body.sunum-acik { overflow: hidden; }

/* ── PREZİ KİPİ (Kaptan 2026-09-07: "PRXS NEDİR'e basınca bu gelecek;
   sunum tam ekran ve 2 saniye ile açılacak") ──────────────────────────────
   Gömülü oynatıcı kendi arayüzünü getiriyor: bizim ok/nokta/sayaç
   göstergelerimiz üstüne binerdi, o yüzden bu kipte gizleniyorlar.
   Kapatma düğmesi KALIYOR — tam ekrandan çıkışın görünür tek yolu o. */
.sunum-prezi-kip .sunum-ok,
.sunum-prezi-kip .sunum-noktalar,
.sunum-prezi-kip .sunum-sayac { display: none; }
.sunum-prezi-kip .sunum-tuval { display: block; }

.prezi-sar { position: absolute; inset: 0; background: transparent; pointer-events: none; }
.prezi-cerceve { width: 100%; height: 100%; border: 0; display: block; }

/* ÖNDEN ISITILAN KUTU — gövdenin doğrudan çocuğu, ASLA taşınmaz.
   Kapalıyken 1×1 ve görünmez: yükleme başlar ama hiçbir yeri kaplamaz.
   `display:none` KULLANILAMAZ — o durumda tarayıcı yüklemeyi erteler ve
   ısıtmanın tamamı boşa giderdi. Bu yüzden görünür ama ölçüsüz. */
.prezi-kutu {
  position: fixed; left: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; overflow: hidden; z-index: 1;
  border: 0; contain: strict;
}
.prezi-kutu.acik {
  inset: 0; width: auto; height: auto; opacity: 1; pointer-events: auto;
  z-index: 59; background: #000; contain: none;
}
/* Prezi kipinde katman SAYDAM ve tıklama geçirgen olur: siyah zemini artık
   kutu veriyor, kontroller ise katmanda kalıp iframe'in ÜSTÜNDE duruyor.
   `pointer-events` ayrımı olmasaydı görünmez katman bütün tıklamaları yer,
   sunumun kendi kontrolleri kullanılamazdı. */
.sunum.sunum-prezi-kip { background: transparent; pointer-events: none; }
.sunum-prezi-kip .sunum-kapat { pointer-events: auto; }
.sunum-prezi-kip .prezi-bekle { pointer-events: none; }
.prezi-ozet { pointer-events: auto; }

/* 2 saniyelik açılış: tam ekran geçişi ile iframe yüklemesi üst üste
   binmesin diye. Sayı büyük ve sakin — bekleyiş görünür olmalı. */
.prezi-bekle {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: radial-gradient(120% 90% at 50% 30%, #16112c 0%, #05040a 70%);
}
.prezi-ad {
  font: 600 clamp(13px, 1.7vmin, 16px)/1.3 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: rgba(236,240,252,.62);
}
.prezi-sayi {
  font: 300 clamp(64px, 13vmin, 132px)/1 var(--sans);
  color: #cdeaff; letter-spacing: -.03em;
  text-shadow: 0 0 42px rgba(110, 231, 255, .45);
  animation: prezi-nabiz 1s ease-in-out infinite;
}
.prezi-not { font: 400 13px/1.4 var(--sans); color: rgba(236,240,252,.42); }
@keyframes prezi-nabiz { 0%,100% { opacity: .95; transform: scale(1); }
                         50%     { opacity: .55; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .prezi-sayi { animation: none; } }

/* Yazılı özete kaçış: Prezi yüklenmezse (ağ, engelleyici, oturum) ziyaretçi
   içeriksiz kalmasın. Köşede durur, sunumun önüne geçmez. */
.prezi-ozet {
  position: absolute; left: 18px; bottom: 18px; z-index: 62;
  appearance: none; cursor: pointer; white-space: nowrap;
  font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(236,240,252,.62); padding: 9px 14px; border-radius: 999px;
  background: rgba(18,16,34,.62); border: 1px solid rgba(214,232,255,.18);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.prezi-ozet:hover, .prezi-ozet:focus-visible {
  color: #cdeaff; border-color: rgba(110,231,255,.5);
}

/* Kurtarma katmanı: gömülü oynatıcı 20 sn'de açılmazsa. Boş ekran bırakmak
   yerine üç somut çıkış: yeni sekme · yazılı özet · beklemeye devam. */
.prezi-kurtar {
  position: absolute; inset: 0; z-index: 3; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
  background: rgba(5, 4, 10, .90);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.prezi-kurtar-baslik {
  font: 600 clamp(18px, 2.6vmin, 24px)/1.2 var(--sans); color: #f6f4ff;
}
.prezi-kurtar-not {
  font: 400 14px/1.6 var(--sans); color: rgba(236,240,252,.62);
  max-width: 46ch; margin: 0;
}
.prezi-kurtar-sira { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.prezi-kurtar-dugme {
  appearance: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 13px/1 var(--sans); letter-spacing: .04em;
  padding: 12px 20px; border-radius: 999px;
  color: #05040a; background: #6ee7ff; border: 1px solid #6ee7ff;
}
.prezi-kurtar-dugme.ikincil {
  color: rgba(236,240,252,.82); background: rgba(18,16,34,.6);
  border-color: rgba(214,232,255,.22);
}
.prezi-kurtar-dugme:hover { filter: brightness(1.08); }

/* KAMERA: Prezi hissi burada. Tuval kayar+yakınlaşır, slaytlar sabit durur. */
/* Tuval SABİT — kaydırma yok. Prezi hissi slaytların kendi ölçek
   dönüşümünden geliyor (bkz. sunum.js ölçüm notu: `vw` bu ortamda
   `innerWidth/100` ile aynı değeri vermiyor, kamera kaydırma sessizce kayıyordu). */
.sunum-tuval {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.slayt {
  grid-area: 1 / 1;                 /* hepsi ÜST ÜSTE, tam ortada */
  width: min(76vw, 860px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 34px 30px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(.82);
  transform-origin: 50% 50%; will-change: transform, opacity;
  transition: opacity .52s ease, transform .72s cubic-bezier(.22, .68, .16, 1),
              visibility 0s linear .52s;
}
@media (prefers-reduced-motion: reduce) {
  /* Hareketi KALDIRMA, YAVAŞLAT — bu projenin ölçülmüş dersi. */
  .slayt { transition-duration: 1s, 1.3s, 0s; }
}
.slayt.etkin { opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s; }
.slayt-ust {
  font: 700 clamp(30px, 7.2vmin, 78px)/1.04 'Fraunces', Georgia, serif;
  letter-spacing: -.015em;
  background: linear-gradient(180deg, #ffffff, #b9d9ff 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slayt-alt {
  font: 600 clamp(11px, 1.7vmin, 14px)/1 system-ui, sans-serif;
  letter-spacing: .20em; text-transform: uppercase; color: #6ee7ff;
}
.slayt-metin {
  margin: 6px 0 0; max-width: 46ch;
  font: 400 clamp(14px, 2.15vmin, 19px)/1.6 system-ui, sans-serif;
  color: rgba(238, 240, 250, .84);
}

.sunum-kapat, .sunum-ok {
  position: absolute; z-index: 2; appearance: none; cursor: pointer;
  color: rgba(236, 240, 252, .78); background: rgba(18, 16, 34, .55);
  border: 1px solid rgba(214, 232, 255, .20); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .16s ease, border-color .16s ease, opacity .16s ease;
}
.sunum-kapat { top: 18px; right: 20px; width: 40px; height: 40px; font-size: 17px; }
.sunum-ok { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 26px; line-height: 1; }
.sunum-geri { left: 20px; } .sunum-ileri { right: 20px; }
.sunum-kapat:hover, .sunum-ok:hover:not(:disabled) { color: #cdeaff; border-color: rgba(110, 231, 255, .55); }
.sunum-ok:disabled { opacity: .22; cursor: default; }
.sunum-kapat:focus-visible, .sunum-ok:focus-visible, .nokta:focus-visible {
  outline: 2px solid #6ee7ff; outline-offset: 3px;
}
.sunum-sayac {
  position: absolute; bottom: 22px; left: 24px; z-index: 2;
  font: 600 12px/1 ui-monospace, Consolas, monospace; letter-spacing: .14em;
  color: rgba(236, 240, 252, .48);
}
.sunum-noktalar {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; gap: 9px;
}
.nokta {
  appearance: none; cursor: pointer; width: 9px; height: 9px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(214, 232, 255, .38);
  background: transparent; transition: background .2s ease, border-color .2s ease;
}
.nokta.etkin { background: #6ee7ff; border-color: #6ee7ff; }