/* ===========================================================================
   about — 3B küp sayfası · STİL
   Tasarım sözleşmesi: "Camın Altı Kuralı" (Not 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.
   (Not (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%);
}
/* Belirginlik 2. tur: bulanıklık 70→58 px (leke daha okunur), opaklık
   .72→.92. Aurora arka planın ana hareketi; sönük kalınca sayfa durgun
   görünüyordu. */
.blob { position: absolute; border-radius: 50%; filter: blur(58px); opacity: .92; will-change: transform; }
.b1 { width: 46vw; height: 46vw; left: -10vw; top: -8vw;
      background: radial-gradient(circle at 30% 30%, #e935c1, transparent 68%);
      animation: kay1 9s ease-in-out infinite, nabiz 5s 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 11s ease-in-out infinite, nabiz 6.2s 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 10s ease-in-out infinite, nabiz 4.6s 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 13s ease-in-out infinite reverse, nabiz 7.4s 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:.38} 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ı (2026-09-07: "üstteki başlık
   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 {
  position: relative;
  width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.4); background: transparent;
  /* Ölçek YAYLI bir eğriyle (hafif aşıp oturur), renk düz eğriyle: ikisi aynı
     eğriyle gitseydi renk de "zıplıyor" gibi görünürdü. */
  transition: background .26s cubic-bezier(.22,.72,.24,1),
              border-color .26s cubic-bezier(.22,.72,.24,1),
              box-shadow .3s ease,
              transform .34s cubic-bezier(.34,1.56,.64,1);
}
.ray button:hover { border-color: rgba(160,225,255,.85); transform: scale(1.15); }
.ray button[aria-current="true"] {
  background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 14px var(--cyan); transform: scale(1.3);
}
/* Etkin noktadan yayılan halka: hangi konuda olduğun çevresel görüşle de
   fark edilsin diye. Yalnız etkin olanda çalışır, bu yüzden tek bir animasyon. */
.ray button[aria-current="true"]::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(110, 231, 255, .5);
  animation: rayNabiz 2.6s cubic-bezier(.2,.6,.3,1) infinite;
  pointer-events: none;
}
@keyframes rayNabiz {
  0%   { transform: scale(.65); opacity: .85; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (pointer: coarse) {
  .ray button[aria-current="true"]::after { animation: none; opacity: .5; }
}


/* Ş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 */
/* ÇARPMA PARLAMASI — küpler birleşirken temas anında bir kez patlar.
   Opaklığı ve `--r` (şok halkası yarıçapı) JS sürüyor: kup-motoru.js →
   birlesimGuncelle. Burada yalnız biçim var.

   ÜÇ KATMAN, üstten alta:
     1) ŞOK HALKASI — içi boş, genişleyen ince halka. Tek başına bir parlama
        "ekran beyazladı" gibi duruyordu; genişleyen halka olayın MERKEZİNİ
        ve yayıldığını gösteriyor.
     2) ÇEKİRDEK — temas noktasındaki sıcak nokta.
     3) HÂLE — sahnenin moruna oturan geniş, yumuşak yayılma.

   `pointer-events:none` şart: tam ekranı kaplıyor, tıklamayı yutsaydı pencere
   düğmeleri ölürdü. */
.carpma {
  --r: 0vmin;
  position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 50% 50%,
      transparent calc(var(--r) - 7vmin),
      rgba(206,244,255,.58) calc(var(--r) - 1.2vmin),
      rgba(150,222,255,.20) var(--r),
      transparent calc(var(--r) + 4vmin)),
    radial-gradient(30vmin 30vmin at 50% 50%,
      rgba(255,255,255,.95), rgba(190,240,255,.42) 40%, rgba(110,231,255,0) 74%),
    radial-gradient(82vmin 62vmin at 50% 50%,
      rgba(110,231,255,.32), rgba(167,139,250,.11) 56%, rgba(0,0,0,0) 80%);
  mix-blend-mode: screen;
}
/* Işık patlaması, azaltmanın asıl hedef aldığı şey — kapalı kalır.
   (Birleşmenin KENDİSİ azaltmada da oynuyor; bkz. kup-motoru.js.) */
@media (prefers-reduced-motion: reduce) and (pointer: coarse) { .carpma { display: none; } }

.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. */
  /* Not (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
   (Not (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);
  /* --golge-y/-o/-a: kup-motoru.js sürüyor. Küp yükselince gölge YERDE kalır
     (ters öteleme), küçülür ve soluklaşır — yükseklik hissini veren şey bu. */
  transform: translate(-46%, calc(var(--kup) * 0.12))
             translateY(var(--golge-y, 0px)) scale(var(--golge-o, 1));
  opacity: var(--golge-a, 1);
  transition: none;
  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 uzun ad 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 ═════════════════════════════
   Not (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(9px, 1.25vmin, 11px); 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 GÖRÜNÜRLÜĞÜ ARTIK AÇIYA BAĞLI, ZAMANA DEĞİL.
     ÖNCEKİ HÂLİ: yüz `.acik` sınıfını alınca maddeler zamanlayıcıyla,
     kademeli gecikmelerle beliriyordu. Sorun: küp döndürülürken sınıf
     eşiği aşıldığı anda animasyon BAŞTAN tetikleniyor, yazılar sıçrayarak
     kayboluyor/geliyordu — dönüş sırasında "kesik kesik" görünüyordu ve
     küpün fiziksel gerçekliğini bozuyordu.
     ŞİMDİ: motor her kareye `--gor` yazıyor (yüz ne kadar karşıya bakıyor,
     0..1). Opaklık doğrudan ondan türüyor, yani yazı küple BİRLİKTE dönüyor.
     Kademe kayboldu mu? Hayır — `--sira` ile her maddenin eşiği biraz
     kaydırıldı: yüz döndükçe maddeler SIRAYLA açılıyor. Kademe artık
     zamanlayıcının değil, dönüşün kendisinin sonucu. */
  --sira: 0;
  --acilma: clamp(0, (var(--gor, 0) - var(--sira) * 0.045) * 3.4, 1);
  opacity: var(--acilma);
  transform: translateY(calc((1 - var(--acilma)) * 9px));
}
.yuz li:nth-child(1)  { --sira: 0; }
.yuz li:nth-child(2)  { --sira: 1; }
.yuz li:nth-child(3)  { --sira: 2; }
.yuz li:nth-child(4)  { --sira: 3; }
.yuz li:nth-child(5)  { --sira: 4; }
.yuz li:nth-child(6)  { --sira: 5; }
.yuz li:nth-child(7)  { --sira: 6; }
.yuz li:nth-child(8)  { --sira: 7; }
.yuz li:nth-child(9)  { --sira: 8; }
.yuz li:nth-child(10) { --sira: 9; }
.yuz li:nth-child(11) { --sira: 10; }
.yuz li:nth-child(12) { --sira: 11; }
/* Slayt yüzü tek parça: kademe yok, bütün olarak açılır. */
.yuz-slayt .slayt-ust, .yuz-slayt .slayt-alt, .yuz-slayt .slayt-metin {
  opacity: var(--gor, 1);
}
.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; }
/* 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(10px, 1.5vmin, 12px); color: var(--cyan); opacity: .9; }

.panel-baslik {
  font-family: var(--mono); font-size: 10px; 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.
   Not (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; }
/* JS'siz yedek: inline `style=` yerine sınıf. CSP'den 'unsafe-inline'ı
   düşürmek için gerekliydi — inline stil özniteliği CSP ile engellenir,
   sınıf engellenmez. */
.duz.duz-jssiz { display: block; }
/* Düz liste açıkken 3B katmanların HEPSİ kapanır: küp sahnesi, sürükleme
   yüzeyi, ray, şimşek tuvali ve çarpma parlaması.
   ⚠ Bu seçici listesi bildirim bloğu OLMADAN duruyordu (virgülle bitip bir
   sonraki kurala yapışıyordu). Sonuç: liste açıkken küp arkada görünmeye
   devam ediyor, kartların üstüne biniyordu. */
body.duz-acik .sahne,
body.duz-acik .yakala,
body.duz-acik .ray,
body.duz-acik .simsek,
body.duz-acik .carpma { display: none; }

.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;
  transition: opacity .40s ease, transform .46s cubic-bezier(.22,.72,.24,1);
}
/* ⚠ KARTLAR VARSAYILAN OLARAK GÖRÜNÜR. Gizleme yalnız animasyonu kurmak için
   bir an uygulanıyor (`kartlar-hazir`), hemen ardından açılış geliyor.
   Sırayı tersine kurmak (varsayılan `opacity:0`) tehlikeliydi: tetikleyici bir
   sebeple çalışmazsa liste BOMBOŞ açılırdı. Şimdi en kötü durumda animasyon
   oynamaz, içerik yine görünür. */
.duz.kartlar-hazir .kart { opacity: 0; transform: translateY(12px); }
.duz.kartlar-gelsin .kart { opacity: 1; transform: none; }
/* SON ÇARE: süre dolduğunda uygulanır (kup-motoru.js/kartlariGetir). Geçişi
   iptal edip son duruma OTURTUR. Geçiş normal tamamlandıysa görsel olarak
   hiçbir şey değişmez; saat donmuşsa kart görünür hâle gelir. Yalnız sınıfı
   kaldırmak YETMİYORDU: donmuş geçiş hedefe koşmadan opacity'yi 0'da tutuyor. */
.duz.kartlar-bitti .kart { transition: none; opacity: 1; transform: none; }
.duz.kartlar-gelsin .izgara .kart:nth-child(1)  { transition-delay: .02s; }
.duz.kartlar-gelsin .izgara .kart:nth-child(2)  { transition-delay: .06s; }
.duz.kartlar-gelsin .izgara .kart:nth-child(3)  { transition-delay: .10s; }
.duz.kartlar-gelsin .izgara .kart:nth-child(4)  { transition-delay: .14s; }
.duz.kartlar-gelsin .izgara .kart:nth-child(5)  { transition-delay: .18s; }
.duz.kartlar-gelsin .izgara .kart:nth-child(6)  { transition-delay: .22s; }
.duz.kartlar-gelsin .izgara .kart:nth-child(7)  { transition-delay: .26s; }
.duz.kartlar-gelsin .izgara .kart:nth-child(8)  { transition-delay: .30s; }
.duz.kartlar-gelsin .izgara .kart:nth-child(n+9) { transition-delay: .34s; }
.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);
}

/* ------------------------------------------------------------- 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; }
    .duz-dugme { left: 50%; right: auto; transform: translateX(-50%); }
}

/* Rehber şartı: prefers-reduced-motion zorunlu.
   ⚠ DÜZELTME: Önceki hâli küpü GİZLEYİP düz listeye düşüyordu. Not'ı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. Not "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) and (pointer: coarse) {
  html { scroll-behavior: auto; }
  /* Yavaşlat ama DURDURMA. 65-90 sn fazla yavaştı: Not "ışıklar hareketli
     olsun" dedi, haklıydı — o sürede hareket fark edilmiyor. */
  .b1 { animation-duration: 15s, 9s; }
  .b2 { animation-duration: 19s, 10s; }
  .b3 { animation-duration: 16s, 8s; }
  .b4 { animation-duration: 22s, 12s; }
  .kup { transition: none !important; }
}

/* ═════════ ÜST ŞERİT + PREZİ TARZI SUNUM ═══════════════════════════════════
   Not (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. Not 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. */
.ust-serit {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 32; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 0 10px; max-width: 96vw;
}
.serit-dugme {
  appearance: none; cursor: pointer; white-space: nowrap;
  font: 600 clamp(10px, 1.35vmin, 12px)/1 var(--yazi, system-ui), system-ui, sans-serif;
  letter-spacing: .10em; text-transform: uppercase;
  color: rgba(236, 240, 252, .82);
  padding: 9px 15px; border-radius: 999px;
  background: rgba(18, 16, 34, .52);
  border: 1px solid rgba(214, 232, 255, .20);
  -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, .72);
}
.serit-dugme:focus-visible { outline: 2px solid #6ee7ff; outline-offset: 3px; }
body.duz-acik .ust-serit { display: none; }

/* Sunum katmanı — kapalıyken [hidden] ile tamamen kalkar. */
/* SUNUM KATMANI = YALNIZ KONTROLLER.
   ⚠ İki kez değişti. (1) tüm ekranı kaplayan panel → (2) küpün düz ön yüzüne
   oturan pencere → (3) şimdi: hiçbir panel yok. Slaytlar KÜPÜN YÜZLERİNDE
   (kup-motoru.js → sunumBaslat) ve küp döndürülerek slayt geçiliyor.
   Bu yüzden katman ŞEFFAF ve `pointer-events: none` — aksi hâlde küpün
   sürükleme yüzeyini (z-4) kapatır, slayt geçişi imkânsız olurdu.
   Yalnız kontroller tıklamayı geri alıyor. */
.sunum {
  position: fixed; inset: 0; z-index: 60;
  background: none; pointer-events: none;
}
.sunum-tuval { display: none; }          /* slayt gövdesi artık küpte */
.sunum-kapat, .sunum-ok, .sunum-sayac, .sunum-noktalar, .nokta {
  pointer-events: auto;
}
.sunum[hidden] { display: none !important; }
body.sunum-acik { overflow: hidden; }
/* ARKA PERDE — sunum artık tüm ekranı kaplamıyor (küpün ön yüzüne oturuyor),
   dolayısıyla panelin DIŞI tıklanabilir kalıyordu: arkadaki küp sürüklenebiliyor,
   şerit düğmelerine basılabiliyordu. Perde hem tıklamayı durduruyor hem de
   arkayı karartıp gözü panele topluyor. z-59: panelin (60) hemen altı. */
/* ⚠ PERDE TIKLAMAYI YUTMAMALI. Sunum açıkken küpü sürükleyerek slayt
   geçiyoruz; perde `pointer-events: auto` olsaydı sürükleme ölürdü.
   Görevi yalnız arkayı karartıp gözü küpe toplamak. */
body.sunum-acik::after {
  content: ''; position: fixed; inset: 0; z-index: 8;
  background: rgba(6, 5, 14, .46);
  pointer-events: none;
}
/* Sunum açıkken şerit düğmeleri karışmasın. */
body.sunum-acik .ust-serit { opacity: 0; pointer-events: none; }

/* 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(88%, 780px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 9px; padding: 24px 22px;
  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) and (pointer: coarse) {
  /* Hareketi KALDIRMA, YAVAŞLAT — bu projenin ölçülmüş dersi. */
  .slayt { transition-duration: 1s, 1.3s, 0s; }
  /* Kademeli girişler KALIR, yalnız ÖTELEME düşer: geçiş hâlâ var (sıra
     okunuyor), yer değiştiren bir şey yok. Hareket duyarlılığının hedefi
     kayma; solma değil. */
  .yuz li { transform: none; }
  .duz.kartlar-hazir .kart { transform: none; }
}
.slayt.etkin { opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s; }
.slayt-ust {
  /* Panel artık ekrandan küçük: vmin tabanlı eski puntolar kutuyu taşırıyordu. */
  font: 700 clamp(24px, 5.2vmin, 56px)/1.05 '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(13px, 1.75vmin, 17px)/1.55 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: 12px; right: 13px; width: 34px; height: 34px; font-size: 15px; }
.sunum-ok { top: 50%; transform: translateY(-50%); width: 38px; height: 38px; font-size: 22px; line-height: 1; }
.sunum-geri { left: 11px; } .sunum-ileri { right: 11px; }
.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; }

/* ═══════════ PENCERE, DEV KÜPTEN AÇILIR ═══════════
   Küpler birleşip merkezde dev bir küpe kaynadıktan SONRA pencere o
   noktadan büyüyerek gelir. Bu yüzden `transform-origin` merkez ve
   başlangıç ölçeği küçük: pencere ekranın herhangi bir yerinden değil,
   küpün durduğu yerden açılıyormuş gibi okunur.
   Animasyonu JS (sunum.js) Web Animations ile sürüyor; buradaki kural
   yalnız kaynak noktasını ve pencere kapalıyken tıklamayı geçirmemeyi
   garanti ediyor. */
.sunum { transform-origin: 50% 50%; }
/* `.duz` belge akışında ve EKRANDAN UZUN. Kendi %50'si çoğu zaman ekranın
   dışında kalır; oradan ölçeklenince pencere küpten değil, sayfanın bir
   yerinden geliyormuş gibi görünüyordu. 50vh, sayfa başındayken ekranın
   ortasına — yani dev küpün durduğu noktaya — denk gelir. */
.duz { transform-origin: 50% 50vh; }
.sunum[hidden] { pointer-events: none; }
/* NOT: geçişler Web Animations API ile sürülüyor, CSS `animation` ile değil —
   bu yüzden hareket azaltma BURADAN kapatılamaz. Kapatma JS tarafında:
   kup-motoru.js → pencereAc/pencereKapa ve sunum.js → azaltilmis(). */


/* ═══════════ SLAYT, KÜPÜN YÜZÜNDE ═══════════
   Konu listesi yerine tek bir slayt taşıyan yüz: içerik ortalanır, punto
   yüzün boyuna göre (vmin değil — küp ekrandan küçük, vmin taşırıyordu).
   `--kup` yüzün kenarı olduğu için ondan türetiliyor. */
.yuz.yuz-slayt {
  justify-content: center; align-items: center; text-align: center;
  gap: calc(var(--kup) * 0.022);
  padding: calc(var(--kup) * 0.09);
}
.yuz-slayt .slayt-ust {
  font: 700 calc(var(--kup) * 0.115)/1.05 'Fraunces', Georgia, serif;
  letter-spacing: -.015em;
  background: linear-gradient(180deg, #ffffff, #b9d9ff 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.yuz-slayt .slayt-alt {
  font: 600 calc(var(--kup) * 0.032)/1 system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #6ee7ff;
}
.yuz-slayt .slayt-metin {
  margin: calc(var(--kup) * 0.018) 0 0; max-width: 34ch;
  font: 400 calc(var(--kup) * 0.043)/1.5 system-ui, sans-serif;
  color: rgba(238, 240, 250, .86);
}
/* Sunum modunda ray gizlenir: dönüş artık konu değil slayt geziniyor,
   ray yanıltıcı olurdu. */
body.kup-sunum .ray { opacity: 0; pointer-events: none; }


/* ═══════════ MÜZİK UYDULARI — sol üst / sağ üst minik küpler ═══════════
   `.yer` ölçüsünü `--kup`ten alıyor; uydunun kendi boyu için ÜÇ değişkenin
   de burada yeniden tanımlanması gerekiyor. `--yari`/`--geri` :root'ta
   `--kup`ten türetilmişti ve orada ÇÖZÜLDÜ — alt elemanda `--kup`i
   değiştirmek onları geri hesaplatmaz. (Bu tuzağa düşülürse uydu doğru
   boyutta görünür ama yüzleri ana küpün yarı-kenarı kadar dışarı taşar.) */
.yer.mini {
  --kup: var(--mini, 120px);
  --yari: calc(var(--mini, 120px) / 2);
  --geri: calc(var(--mini, 120px) / -2);
  z-index: 1;                  /* ana küplerin ARKASINDA: merkez onlar */
  /* `#sahne` genelinde pointer-events yok; uydular KUMANDA olduğu için
     burada geri açılıyor. Ana küplerin sürükleme yüzeyi (.yakala) altta
     kaldığından, uydu üstünde başlayan sürükleme ana küpü döndürmez
     (olay ayrıca stopPropagation ile kesiliyor). */
  pointer-events: auto; cursor: grab; touch-action: none;
}
.yer.mini.tutuluyor { cursor: grabbing; }
/* Ses çubuğu — sol uydunun yüzlerinde */
.mini-cubuk {
  width: 62%; height: calc(var(--mini) * 0.035);
  margin-top: calc(var(--mini) * 0.03);
  border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.16);
}
.mini-cubuk-dolu {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,
    hsl(var(--ton) 100% 68%), hsl(calc(var(--ton) + 80) 100% 66%));
}
.mini-yuz {
  padding: calc(var(--mini) * 0.11);
  justify-content: center; align-items: center; text-align: center;
  gap: calc(var(--mini) * 0.035);
  border-radius: calc(var(--mini) * 0.13);
}
.mini-yuz > * { opacity: var(--gor, 1); }
.mini-etiket {
  font: 600 calc(var(--mini) * 0.062)/1 system-ui, sans-serif;
  letter-spacing: .20em; text-transform: uppercase;
  color: rgba(110, 231, 255, .82); min-height: 1em;
}
.mini-ad {
  font: 700 calc(var(--mini) * 0.142)/1.1 'Fraunces', Georgia, serif;
  color: #f6f4ff; text-wrap: balance;
}
.mini-alt {
  font: 400 calc(var(--mini) * 0.078)/1.2 system-ui, sans-serif;
  color: rgba(246, 244, 255, .62);
}
.mini-soz {
  font: 400 calc(var(--mini) * 0.105)/1.38 system-ui, sans-serif;
  color: rgba(246, 244, 255, .58); text-wrap: balance;
}
/* Öndeki yüzün satırı vurgulu: hangisinin "şu anki" söz olduğu belli olsun. */
.mini-soz.etkin { color: #eaf4ff; font-weight: 600; }
/* Telefonda ekran zaten dar; uydular ana küpün üstüne biner. Gizlenir. */
/* ⚠ Mobilde uydular ARTIK GİZLENMİYOR (istek). Konumu kup-motoru.js →
   uyduKonum tek sütunda üst köşelere alıyor. */
@media (max-width: 900px) {
  .uydu-ipucu { font-size: 9px; letter-spacing: .10em; }
}

/* ═══════════ RGB KENARLAR — müzikle yanıp sönen ═══════════
   Değişkenleri kup-motoru.js kare başına :root'a yazıyor:
     --kenar-h       ton (0-360), sürekli kayar
     --kenar-parlak  0..1, vuruşla yükselir
     --kenar-hale    dış hâlenin yarıçapı
   Yedek değerler var: müzik modülü yüklenmezse kenar sabit ve sakin kalır,
   sayfa yine düzgün görünür.

   ⚠ YALNIZ DIŞ KENAR RENKLENİYOR. Camın iç vurguları (pah, kalınlık halkası,
   dip ışığı) NÖTR bırakıldı — hepsi renklenince küp cam olmaktan çıkıp
   plastik bir neon kutuya dönüyordu. */
/* ⚠ `--ton` KÖKTE DE TANIMLI OLMALI. Önce yalnız `.yuz` üzerinde tanımlıydı;
   küp dışındaki her eleman (Büyük Görünüm tuşu, düz liste yazıları) için
   `var(--ton)` çözülemiyor ve o bildirim TAMAMEN geçersiz sayılıyordu
   ("invalid at computed-value time") — bir öncekine düşmüyor, komple
   siliniyor. ÖLÇÜLDÜ: tuşun zemini `none`, kenarlığı yok çıktı.
   Kökteki bu tanım varsayılanı verir; yüzler kendi kaydırmalarıyla üzerine
   yazar. */
:root { --kenar-h: 200; --kenar-parlak: .5; --kenar-hale: 14px; --ton: var(--kenar-h); --yazi-parlak: .55; }

/* ⚠ CANLILIK (2. tur): ilk hâl "sönük" bulundu. Üç şey birden yükseltildi —
   doygunluk 92→100%, kenar alfası 0.30-0.85 → 0.55-1.0, hâle yarıçapı ve
   yoğunluğu. Ayrıca her yüze FARKLI TON KAYDIRMASI verildi: tek ton küpü
   tek renge boyuyordu, kaydırma ile küp döndükçe tayf geçiyor — "RGB" asıl
   bundan okunuyor. */
.yuz { --ton: var(--kenar-h); }
.yuz.on   { --ton: calc(var(--kenar-h) + 0); }
.yuz.sag  { --ton: calc(var(--kenar-h) + 62); }
.yuz.arka { --ton: calc(var(--kenar-h) + 124); }
.yuz.sol  { --ton: calc(var(--kenar-h) + 186); }
.yuz.ust  { --ton: calc(var(--kenar-h) + 31); }
.yuz.alt  { --ton: calc(var(--kenar-h) + 155); }

.yuz {
  border-color: hsl(var(--ton) 100% 66% / calc(.55 + var(--kenar-parlak) * .45));
}
/* Hâle her yüzde: eskiden yalnız ön yüzdeydi ve küp dönünce renk kayboluyordu. */
.yuz {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0  2px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.52),
    inset 0 -46px 64px -46px hsl(var(--ton) 100% 60% / calc(.20 + var(--kenar-parlak) * .40)),
    0 0 var(--kenar-hale) hsl(var(--ton) 100% 64% / calc(.35 + var(--kenar-parlak) * .55)),
    0 0 calc(var(--kenar-hale) * 2.4) hsl(var(--ton) 100% 58% / calc(var(--kenar-parlak) * .30));
}
@media (prefers-reduced-motion: reduce) and (pointer: coarse) {
  /* Renk KALIR, yanıp sönme sabitlenir — sıçrama olmaz. */
  .yuz { box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0  2px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.52),
    0 0 22px hsl(var(--ton) 100% 64% / .48); }
}


/* ═══════════ ROBOTİK KURUKAFA — küp yüzlerinde RGB amblem ═══════════
   `kurukafa.svg` MASKE olarak kullanılıyor; SVG'nin kendi rengi yok, rengi
   buradaki degrade veriyor. Degrade `--ton`dan besleniyor, yani amblem
   kenarlarla AYNI renk sistemine bağlı: müzikle birlikte kayıyor ve vuruşta
   parlıyor. Her yüzün tonu farklı olduğu için küp döndükçe kurukafa da renk
   değiştiriyor.

   ⚠ `opacity` ÖZELLİĞİ KULLANILMADI. Bu dosyanın ölçülmüş yasağı: 3B
   zincirindeki bir elemana opacity/filter uygulamak preserve-3d bağlamını
   düzleştiriyor. Saydamlık degradenin ALFA kanalına gömüldü.

   ⚠ Çizgi ağırlıklı ve soluk: dolu bir kafatası yüzdeki yazıyı okunmaz
   yapıyordu. Amblem yazının ARKASINDA duruyor (z-index), oyma cam hissi. */
.yer:not(.mini) .yuz::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(155deg,
    hsl(var(--ton) 100% 66% / calc(.13 + var(--kenar-parlak) * .24)) 0%,
    hsl(calc(var(--ton) + 70) 100% 62% / calc(.10 + var(--kenar-parlak) * .28)) 50%,
    hsl(calc(var(--ton) + 150) 100% 68% / calc(.15 + var(--kenar-parlak) * .22)) 100%);
  -webkit-mask: url("kurukafa.svg") center 44% / auto 62% no-repeat;
          mask: url("kurukafa.svg") center 44% / auto 62% no-repeat;
}
/* Yazı amblemin ÜSTÜNDE kalsın. */
.yuz > * { position: relative; z-index: 1; }

/* Uydularda daha küçük ve daha soluk: o yüzler zaten küçük, amblem baskın
   olursa parça adı ve sözler okunmuyor. */
.yer.mini .yuz::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(155deg,
    hsl(var(--ton) 100% 66% / calc(.09 + var(--kenar-parlak) * .15)) 0%,
    hsl(calc(var(--ton) + 110) 100% 64% / calc(.07 + var(--kenar-parlak) * .17)) 100%);
  -webkit-mask: url("kurukafa.svg") center 42% / auto 54% no-repeat;
          mask: url("kurukafa.svg") center 42% / auto 54% no-repeat;
}


/* ═══════════ DEVRE KARTI KENARLIĞI — her yüzde ═══════════
   `devre.svg` maske; rengi buradaki degrade veriyor ve o da `--ton`dan
   besleniyor, yani kenarlık da müzikle renk değiştirip yanıp sönüyor.
   İzler yalnız KENARDA dolaşıyor, orta boş — yüzlerde metin okunuyor.
   `opacity` özelliği yine kullanılmadı (3B zincirini düzleştirir); saydamlık
   degradenin alfasında. */
.yuz::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg,
    hsl(var(--ton) 100% 72% / calc(.30 + var(--kenar-parlak) * .45)) 0%,
    hsl(calc(var(--ton) + 60) 100% 68% / calc(.24 + var(--kenar-parlak) * .48)) 50%,
    hsl(calc(var(--ton) + 130) 100% 74% / calc(.30 + var(--kenar-parlak) * .42)) 100%);
  -webkit-mask: url("devre.svg") center / 100% 100% no-repeat;
          mask: url("devre.svg") center / 100% 100% no-repeat;
}


/* ═══════════ KALDIRILAN ARAYÜZ PARÇALARI ═══════════
   İstek: "düz liste yazısı kalksın, ortadaki açıklama da kalksın, gerek yok."
   DOM'dan SİLİNMİYOR, yalnız gizleniyor:
     · `?duz=1` derin bağlantısı hâlâ düz listeyi açıyor (JS'siz/erişilebilir
       yedek olarak duruyor, `<noscript>` bloğu da yerinde),
     · konu adı ekran okuyucular için canlı bölge olarak kalıyor.
   Sonradan geri istenirse tek satır silmek yetiyor. */
.duz-dugme { display: none; }
.konu-adi { display: none; }


/* ═══════════ TANITIM YÜZLERİ — fotoğraf ve tanıtım yazısı ═══════════
   Küp yüzü kare; fotoğraf ise dikey. `object-fit: cover` ile kırpılıyor ama
   ⚠ KIRPMA İKİ AŞAMALI. Önce DOSYADA: gece karesinin üstündeki boş gökyüzü
   kesildi (foto/ altındaki dosyalar zaten kırpılmış hâlde). Sonra BURADA:
   çerçeve kareye yakın olduğu ve fotoğraflar dikey olduğu için `cover` yine
   kırpıyordu — "fotoğraf çok yakın" geri bildirimi bundandı. Çerçeve
   portre oranına çekildi (genişlik %82), böylece kırpma payı düştü ve
   fotoğraf uzaktan görünüyor.
   Ölçüler `--kup`ten türetiliyor: küp ekrana göre büyüyüp küçüldüğü için
   px ya da vmin sabitleri bir ekranda taşıyor, ötekinde küçük kalıyordu. */
.yuz.yuz-foto {
  justify-content: center; align-items: center;
  padding: calc(var(--kup) * 0.075);
}
.foto-cerceve {
  position: relative; width: 100%; height: 100%; margin: 0 auto;
  border-radius: calc(var(--kup) * 0.035);
  overflow: hidden;
  border: 1px solid hsl(var(--ton) 100% 74% / .45);
  box-shadow: 0 calc(var(--kup) * 0.02) calc(var(--kup) * 0.06) rgba(0,0,0,.45);
}
/* ⚠ KIRPMA YALNIZ DİKEYDE. Önce portre bir çerçeveye `object-fit: cover`
   uygulanıyordu; o düzen fotoğrafı YANLARDAN kırpıyor ve yüz kadraja çok
   yakın görünüyordu ("hâlâ çok yakın" geri bildirimi bundandı).
   Şimdi görüntü `width:100%` ile tam ene oturuyor, yüksekliği kendi oranından
   geliyor ve taşan kısmı çerçeve kırpıyor — yani en HİÇ kırpılmıyor.
   Hangi dikey bandın görüneceğini `--foto-y` seçiyor (veri.js → `odak`):
   değer küçüldükçe görüntü yukarı kayar, yani özne yukarı çıkar. */
.foto-cerceve .foto {
  position: absolute; left: 0; width: 100%; height: auto;
  top: var(--foto-y, 50%); transform: translateY(-50%);
  display: block;
}
/* YATAY KARE: geniş fotoğrafta `width:100%` çerçeveyi dolduramaz, altta üstte
   boşluk kalırdı. Onlar yüksekliğe oturuyor; bu sefer kırpma ende olur ki
   manzarada sorun değil. */
.foto-cerceve.foto-yatay .foto {
  width: auto; height: 100%; left: 50%;
  transform: translate(-50%, -50%);
}
.foto-cerceve.foto-yatay { width: 100%; height: 100%; }

/* Alt şerit: fotoğrafın altına doğru koyulaşan degrade + ad. Degrade şart —
   fotoğrafın alt kenarı açık tonlu olduğunda yazı okunmuyordu. */
.foto-altyazi {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(var(--kup) * 0.10) calc(var(--kup) * 0.045) calc(var(--kup) * 0.035);
  font: 600 calc(var(--kup) * 0.040)/1.25 var(--sans);
  letter-spacing: .06em; color: #f4f7ff;
  background: linear-gradient(180deg, rgba(8,6,15,0) 0%, rgba(8,6,15,.82) 62%, rgba(8,6,15,.94) 100%);
}

.yuz.yuz-metin {
  justify-content: center;
  padding: calc(var(--kup) * 0.095) calc(var(--kup) * 0.085);
  gap: calc(var(--kup) * 0.03);
}
/* Başlık serif: gövde sans, başlık serif — iki ses ayrışınca sayfa daha
   dingin okunuyor. Renk düz beyaz değil, üstten alta hafif soğuyan bir
   degrade; camın üstünde düz beyaz sert duruyordu. */
.metin-baslik {
  margin: 0;
  font: 400 calc(var(--kup) * 0.105)/1.1 var(--serif);
  letter-spacing: .004em;
  background: linear-gradient(180deg, #ffffff, #bcd9ff 82%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metin-govde p {
  margin: 0 0 calc(var(--kup) * 0.026);
  font: 400 calc(var(--kup) * 0.040)/1.62 var(--sans);
  color: rgba(240, 243, 252, .90);
  text-wrap: pretty;
}
.metin-govde p:last-child { margin-bottom: 0; }
/* İlk paragraf giriş cümlesi: bir tık büyük ve aydınlık, göz oraya insin. */
.metin-govde p:first-child {
  font-size: calc(var(--kup) * 0.046);
  color: #f2f6ff;
}
/* Devre kartı bu yüzlerde biraz soluk: fotoğrafın ve yazının önüne geçmemeli. */
.yuz-foto::after, .yuz-metin::after { opacity: .55; }
/* ⚠ KURUKAFA YAZI YÜZLERİNDE DURUYOR (istek: "yazıların olduğu yüzeylerde
   kurukafaların durmasını istiyorum"). Bir ara kapatılmıştı; geri açıldı.
   Yalnız FOTOĞRAF yüzünde kapalı — orada fotoğraf zaten tüm yüzü kaplıyor,
   amblem görünmeyeceği gibi altında kalıp boşuna çiziliyordu. */
.yuz-foto::before { display: none; }


/* ═══════════ SÖZ YÜZÜ — iri, RGB, tek cümle ═══════════
   Rengi `--ton`dan alıyor; kenarlıklar ve kurukafa ile aynı renk sisteminde
   olduğu için küp döndükçe ve müzik vurdukça birlikte değişiyor.
   `filter` KULLANILMADI (3B zincirini düzleştirir); renk geçişi
   background-clip ile, parlaklık ise degradenin kendi alfasıyla veriliyor. */
.yuz.yuz-soz {
  justify-content: center; align-items: center; text-align: center;
  padding: calc(var(--kup) * 0.09);
}
.soz-metin {
  margin: 0;
  font: 700 calc(var(--kup) * 0.108)/1.22 var(--serif);
  letter-spacing: -.008em; text-wrap: balance;
  background: linear-gradient(102deg,
    hsl(var(--ton) 100% 72%) 0%,
    hsl(calc(var(--ton) + 65) 100% 68%) 38%,
    hsl(calc(var(--ton) + 140) 100% 74%) 72%,
    hsl(calc(var(--ton) + 210) 100% 70%) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Söz yüzünde devre deseni soluk; kurukafa DURUYOR (istek üzerine). */
.yuz-soz::after { opacity: .35; }


/* ═══════════ BÜYÜK GÖRÜNÜM TUŞU ═══════════
   Dört sunum düğmesinin yerine tek, ortada duran RGB tuş. Rengi `--ton`dan
   geliyor; kenarlıklar ve kurukafa ile aynı sistemde, yani müzikle birlikte
   kayıyor ve vuruşta parlıyor. */
.buyuk-gorunum {
  padding: 11px 26px; border-radius: 999px;
  font: 700 13px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: #ffffff;
  border: 1px solid hsl(var(--ton) 100% 72% / calc(.55 + var(--kenar-parlak) * .45));
  background:
    linear-gradient(100deg,
      hsl(var(--ton) 100% 58% / calc(.32 + var(--kenar-parlak) * .34)) 0%,
      hsl(calc(var(--ton) + 70) 100% 56% / calc(.30 + var(--kenar-parlak) * .36)) 50%,
      hsl(calc(var(--ton) + 145) 100% 60% / calc(.32 + var(--kenar-parlak) * .34)) 100%);
  box-shadow:
    0 0 calc(10px + var(--kenar-parlak) * 26px) hsl(var(--ton) 100% 62% / calc(.35 + var(--kenar-parlak) * .45)),
    inset 0 1px 0 rgba(255,255,255,.30);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
}
.buyuk-gorunum:hover { transform: scale(1.06); }
/* İLGİ ÇEKİCİLİK: üstünden geçen parlama + hafif nabız. Renk zaten `--ton`dan
   geliyor; buradaki hareket dikkat çekmek için, rengi değiştirmiyor.
   `overflow:hidden` + ::before ile parlama düğmenin içinde kalıyor. */
.buyuk-gorunum { position: relative; overflow: hidden; animation: bgNabiz 2.8s ease-in-out infinite; }
.buyuk-gorunum::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: bgParlama 3.2s ease-in-out infinite;
}
@keyframes bgParlama { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes bgNabiz {
  0%, 100% { box-shadow: 0 0 calc(10px + var(--kenar-parlak) * 26px) hsl(var(--ton) 100% 62% / calc(.35 + var(--kenar-parlak) * .45)), inset 0 1px 0 rgba(255,255,255,.30); }
  50%      { box-shadow: 0 0 calc(22px + var(--kenar-parlak) * 40px) hsl(var(--ton) 100% 66% / calc(.55 + var(--kenar-parlak) * .45)), inset 0 1px 0 rgba(255,255,255,.40); }
}
@media (prefers-reduced-motion: reduce) and (pointer: coarse) {
  /* Hareket kısılır ama KAPANMAZ — bu dosyanın ilkesi. */
  .buyuk-gorunum { animation-duration: 6s; }
  .buyuk-gorunum::before { animation-duration: 7s; }
}
.buyuk-gorunum:focus-visible { outline: 2px solid #6ee7ff; outline-offset: 3px; }


/* ═══════════ TÜM YAZILAR RGB VE RİTİMLE PARLIYOR ═══════════
   İstek: "yazılar bembeyaz değil, bütün yazılar RGB'li, müzik ritmi ile
   uyumlu parlayıp sönecek."

   Kurgu: renk `--ton`dan (sürekli kayan), parlaklık `--kenar-parlak`tan
   (müzik vuruşu) geliyor. İkisini de kup-motoru.js kare başına yazıyor.

   ⚠ OKUNABİLİRLİK KORUNDU. Gövde metnine tam doygun degrade uygulamak
   yazıyı okunmaz yapıyordu; gövde YÜKSEK AÇIKLIKTA hafif renk tonu alıyor
   (doygunluk düşük, açıklık %86 civarı), yalnız BAŞLIKLAR tam degrade
   kullanıyor. Böylece sayfa renkli ama metin hâlâ rahat okunuyor. */
/* Yazı açıklığı VURUŞ ZARFINA bağlı (`--yazi-parlak`, kup-motoru.js):
   her vuruşta hafif parlar, sonra kısılır. Kenar parlaklığı (`--kenar-parlak`)
   sürekli seviyeyi izler; yazıya onu bağlamak titreme veriyordu. */
.yuz .ad,
.mini-ad {
  color: hsl(var(--ton) 85% calc(74% + var(--yazi-parlak) * 22%));
}
.yuz .not,
.mini-alt,
.mini-soz,
.metin-govde p,
.foto-altyazi {
  color: hsl(var(--ton) 60% calc(68% + var(--yazi-parlak) * 24%));
}
.metin-govde p:first-child {
  color: hsl(var(--ton) 70% calc(76% + var(--yazi-parlak) * 20%));
}
.panel-baslik,
.mini-etiket {
  color: hsl(calc(var(--ton) + 40) 100% calc(58% + var(--yazi-parlak) * 24%));
}
/* Başlıklar: tam degrade, vuruşta parlıyor. */
.metin-baslik {
  background: linear-gradient(160deg,
    hsl(var(--ton) 100% calc(64% + var(--yazi-parlak) * 22%)) 0%,
    hsl(calc(var(--ton) + 75) 100% calc(60% + var(--yazi-parlak) * 24%)) 55%,
    hsl(calc(var(--ton) + 150) 100% calc(66% + var(--yazi-parlak) * 20%)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Düz liste kartları da aynı sisteme girsin. */
.duz .kart .ad { color: hsl(var(--ton) 85% calc(82% + var(--kenar-parlak) * 12%)); }
.duz .kart .not { color: hsl(var(--ton) 55% calc(74% + var(--kenar-parlak) * 14%)); }
.duz h2 {
  color: hsl(calc(var(--ton) + 30) 90% calc(78% + var(--kenar-parlak) * 12%));
}

/* ═══════════ BÜYÜK GÖRÜNÜM TUŞUNA ARKA PLAN ═══════════
   Tuş şeffaf bir çerçeveydi ve aurora üstünde kayboluyordu; artık kendi
   koyu zemini var, RGB degrade onun ÜSTÜNDE duruyor. */
.buyuk-gorunum {
  background:
    linear-gradient(100deg,
      hsl(var(--ton) 100% 58% / calc(.34 + var(--kenar-parlak) * .34)) 0%,
      hsl(calc(var(--ton) + 70) 100% 56% / calc(.32 + var(--kenar-parlak) * .36)) 50%,
      hsl(calc(var(--ton) + 145) 100% 60% / calc(.34 + var(--kenar-parlak) * .34)) 100%),
    linear-gradient(rgba(10, 8, 22, .88), rgba(10, 8, 22, .88));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}


/* ═══════════ SÜRÜKLEME VE SEÇİM KİLİDİ ═══════════
   Küpü döndürmek bir SÜRÜKLEME jesti; tarayıcı aynı hareketi "metni seç ve
   taşı" ya da "görseli sürükle" diye yorumlayabiliyordu. Sonuç: dönerken
   yazılar mavi seçim içinde kalıyor, fotoğraf hayalet bir kopya olarak
   imlece yapışıyordu.
   Yalnız küp/sahne katmanı kilitleniyor — düz liste ve sunum metinleri
   seçilebilir kalsın diye oraya dokunulmadı. */
.sahne, .yer, .kup, .yuz, .yuz *,
.ray, .ust-serit {
  -webkit-user-select: none; user-select: none;
}
.yuz img, .foto, .onizleme {
  -webkit-user-drag: none; user-drag: none; pointer-events: none;
}


/* ═══════════ BÜYÜK GÖRÜNÜM KUTUSU — dikdörtgen, küp diliyle ═══════════
   Kare küpten farkı: genişlik, yükseklik ve derinlik AYRI değişkenler.
   Ön/arka yüz genişlik kadar geniş ve derinliğin yarısı kadar öne itilir;
   sağ/sol yüz ise DERİNLİK kadar geniştir ve genişliğin yarısı kadar öne
   itilir. Tek bir `--kup` ile bu yapılamıyordu, o yüzden ayrı kurallar. */
.yer.gorunum-kutu {
  width: var(--kg, 260px); height: var(--ky, 52px);
  margin-left: calc(var(--kg, 260px) / -2);
  margin-top: calc(var(--ky, 52px) / -2);
  z-index: 2;
  pointer-events: auto; cursor: grab; touch-action: none;
}
.yer.gorunum-kutu.tutuluyor { cursor: grabbing; }
.yer.gorunum-kutu:focus-visible { outline: 2px solid #6ee7ff; outline-offset: 6px; }

.kutu-yuz {
  position: absolute; top: 0; height: var(--ky);
  display: flex; align-items: center; justify-content: center;
  padding: 0 calc(var(--ky) * 0.5);
  border-radius: calc(var(--ky) * 0.28);
}
.kutu-yuz.on   { left: 0; width: var(--kg); transform: translateZ(calc(var(--kd) / 2)); }
.kutu-yuz.arka { left: 0; width: var(--kg); transform: rotateY(180deg) translateZ(calc(var(--kd) / 2)); }
.kutu-yuz.sag  { left: calc((var(--kg) - var(--kd)) / 2); width: var(--kd);
                 transform: rotateY(90deg)  translateZ(calc(var(--kg) / 2)); }
.kutu-yuz.sol  { left: calc((var(--kg) - var(--kd)) / 2); width: var(--kd);
                 transform: rotateY(-90deg) translateZ(calc(var(--kg) / 2)); }
/* Üst/alt kapaklar: genişlik kadar geniş, DERİNLİK kadar yüksek. Dikey olarak
   ortalanıp yüksekliğin yarısı kadar itiliyorlar. */
.kutu-yuz.ust  { left: 0; width: var(--kg); height: var(--kd);
                 top: calc((var(--ky) - var(--kd)) / 2);
                 transform: rotateX(90deg)  translateZ(calc(var(--ky) / 2)); }
.kutu-yuz.alt  { left: 0; width: var(--kg); height: var(--kd);
                 top: calc((var(--ky) - var(--kd)) / 2);
                 transform: rotateX(-90deg) translateZ(calc(var(--ky) / 2)); }

.kutu-yazi {
  font: 700 calc(var(--ky) * 0.26)/1 var(--sans);
  letter-spacing: .20em; text-transform: uppercase; white-space: nowrap;
  color: hsl(var(--ton) 100% calc(78% + var(--kenar-parlak) * 16%));
}
/* Yan yüzler dar: oradaki yazı küçülüp sığsın. */
.kutu-yuz.sag .kutu-yazi, .kutu-yuz.sol .kutu-yazi {
  font-size: calc(var(--kd) * 0.20); letter-spacing: .06em;
}
/* Kutuda devre deseni ince kalsın, kurukafa hiç olmasın: küçük bir yüzey. */
.kutu-yuz::before { display: none; }
.kutu-yuz::after { opacity: .5; }


/* ═══════════ UYDU İPUÇLARI — "döndür" yönergeleri ═══════════
   Sabit katman; konumu kare döngüsü yazıyor. Minik, RGB, ritimle parlıyor.
   Büyük görünümde ve tek sütunda (uydular gizli) gizlenir. */
.uydu-ipucu {
  position: fixed; left: 0; top: 0; z-index: 31; pointer-events: none;
  white-space: nowrap;
  /* 11 px → 7.5 px, aralık .16em → .12em: "çok büyük" geri bildirimi. */
  font: 600 7.5px/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: hsl(calc(var(--ton) + 40) 100% calc(62% + var(--yazi-parlak) * 24%));
  text-shadow: 0 0 10px hsl(var(--ton) 100% 60% / .55);
  transition: opacity .3s ease;
}


/* NOT: bu dosyadaki tüm `prefers-reduced-motion` blokları `and (pointer: coarse)`
   ile dokunmatik cihaza sınırlandı — PC'de işletim sistemi ayarı ne olursa
   olsun tam güç (istek). */
/* ═══════════ HAFİF MOD — mobil / zayıf cihaz (body.hafif, kup-motoru.js) ═══════════
   Görünüm aynı dilde kalıyor; kare başına maliyet düşürülüyor. Her kural
   masaüstündeki bir pahalı efektin ucuz karşılığı. */

/* Yüz gölgesi hafifte de masaüstü kuralıyla aynı: nefes alan RGB hâle.
   (Hâle yarıçapı kup-motoru.js'te hafifte 6 px adımla yazılıyor.) */
/* Kurukafa ve devre maskeleri: gradyan + maske her yüzde yeniden boyanıyor.
   Hafifte sabit tonda (ana renk) kalıyorlar — --ton yazımından etkilenmiyor. */
/* ⚠ KURAL (3. tur): "mobil dahil hiç animasyon eksik olmasın." Hafif mod
   artık HİÇBİR görünür efekti kapatmıyor; yalnız görünmeyen tasarruflar
   kalıyor (canvas çözünürlüğü, stil yazım sıklığı, backdrop-filter).
   Kurukafa, devre, nefes alan parıltı: hepsi masaüstüyle aynı. Parıltı
   masaüstü kuralından geliyor; hâle yarıçapı kup-motoru.js'te hafifte 6 px
   adımla yazılıyor — nefes duruyor, yeniden çizim seyrekleşiyor. */

/* Aurora: blur 58 → 26 px, 4 leke → 2 leke. */
body.hafif .blob { filter: blur(24px); }   /* 4 leke de açık; blur yarıçapı görünmez tasarruf */

/* Tam ekran karışım katmanları: mix-blend-mode telefonda her karede tam
   ekran birleştirme demek. Grain sabit ama blend pahalı; carpma zaten
   anlık. */
body.hafif .grain { mix-blend-mode: normal; opacity: .035; }
/* carpma: açık (anlık parlama, animasyonun parçası) */

/* backdrop-filter: cam efekti telefonda en pahalı GPU işlerinden. Kabuk
   elemanlarında düz yarı saydam zemine düşülüyor. */
body.hafif .cam,
body.hafif .serit-dugme,
body.hafif .sunum-kapat, body.hafif .sunum-ok,
body.hafif .buyuk-gorunum {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(14, 11, 28, .78);
}

/* Yazı gölgesi (ipuçları): küçük ama her karede renk değişiyor; kaldır. */
body.hafif .uydu-ipucu { text-shadow: none; }

/* Kademeli giriş hafifte de masaüstüyle aynı (öteleme + solma). */


/* ═══════════ SAĞ UYDU — ALT YÜZ "ŞARKIYA GİT" ═══════════
   Küp yukarı çekilip öne devrildiğinde alt yüz öne gelir ve düğme gibi
   okunmalı. `.devrik` sınıfını motor 55°'den sonra veriyor: o anda alt yüz
   belirgin biçimde parlar, bırakınca bağlantı açılacağını haber verir. */
.mini-yuz.alt-sarki {
  /* Alt yüz varsayılan olarak 180° çevrili (ana küplerde alttan bakınca
     okunması için). Bu yüz ÖNE devrilerek okunuyor; çevrilmezse yazı
     baş aşağı çıkıyordu (tarayıcıda görüldü). */
  --alt-donme: 0deg;
  justify-content: center; align-items: center; text-align: center;
  padding: calc(var(--mini) * 0.10);
  gap: calc(var(--mini) * 0.03);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  transition: box-shadow .18s ease, background .18s ease;
}
.yer.mini.devrik .mini-yuz.alt-sarki {
  background: linear-gradient(160deg,
    hsl(var(--ton) 100% 60% / .30), hsl(calc(var(--ton) + 90) 100% 58% / .22));
  box-shadow: inset 0 0 0 1px hsl(var(--ton) 100% 78% / .8),
              0 0 22px hsl(var(--ton) 100% 64% / .85);
}
.mini-yuz.alt-sarki .mini-ad { font-size: calc(var(--mini) * 0.16); }


/* ═══════════ MOBİL DÜZELTMELERİ (yalnız dokunmatik; masaüstü hattı değişmedi) ═══════════ */
@media (pointer: coarse) {
  /* `pan-y` telefonda sürüklemeyi TARAYICIYA kaptırıyordu: parmak biraz
     dikey gidince pointercancel geliyor, küp yarı yolda donuyordu; Android
     Chrome'da aşağı çekiş sayfayı YENİLİYORDU. Sayfa zaten kaymıyor. */
  .yakala { touch-action: none; }
  html, body { overscroll-behavior: none; }
}
/* Yüz gölgesi hafifte tek dış hâle, SABİT yarıçap (22 px, kup-motoru.js).
   İkinci, 2.4 kat geniş hâle her yüzün katman sınırını büyütüp bulanıklık
   maliyetini üçe katlıyordu; görünür nabız artık `.nabiz-hale`de. */
body.hafif .yuz {
  /* 64 px bulanık İÇ gölge kaldırıldı: her boyamada yüzün tamamını
     bulanıklaştırıyordu (raster maliyetinin büyük kısmı). Aynı "dipte ışık
     birikmesi" alttaki gradyanla, bulanıklık sıfır maliyetle. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0  2px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.52),
    0 0 var(--kenar-hale) hsl(var(--ton) 100% 64% / calc(.40 + var(--kenar-parlak) * .55));
  background:
    linear-gradient(0deg,
      hsl(var(--ton) 100% 60% / calc(.16 + var(--kenar-parlak) * .30)) 0%,
      hsl(var(--ton) 100% 60% / 0) 30%),
    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%),
    radial-gradient(72% 34% at 30% 6%,
      rgba(228,238,255, calc(var(--isik) * .26)), transparent 68%),
    linear-gradient(155deg,
      rgba(150,142,205, calc(var(--isik) * .17)),
      rgba(12,10,26, var(--cam)));
}
/* Nabız hâlesi: küpün ARKASINDA, dönmeyen, yalnız opaklığı değişen ışık
   yuvarlağı. Vuruşla 60 fps parlar; hiçbir yüz yeniden boyanmaz. */
.nabiz-hale { display: none; }
body.hafif .nabiz-hale {
  display: block; position: absolute; inset: -14%; border-radius: 50%;
  pointer-events: none; opacity: .3; will-change: opacity;
  transform: translateZ(calc(var(--yari) * -1.25));
  background: radial-gradient(circle at 50% 50%,
    hsl(var(--ton) 100% 62% / .55) 0%,
    hsl(calc(var(--ton) + 90) 100% 58% / .30) 36%,
    transparent 66%);
}

@media (pointer: coarse) {
  /* Telefonda ipucu uydunun altında, köşeye yaslı, iki satıra kırılabilir. */
  .uydu-ipucu { white-space: normal; max-width: 44vw; font-size: 6.5px; letter-spacing: .08em; line-height: 1.35; }
  .ipucu-sol { text-align: left; }
  .ipucu-sag { text-align: right; }
}

/* LEKELER hafifte `filter: blur` YOK: dört bulanık katman her karede ayrı
   çevrimdışı geçiş + iki bulanıklık geçişi demekti. Yumuşaklık gradyan
   duraklarından; hareket (kay1-3 ve nabiz animasyonları) aynen sürüyor. */
body.hafif .blob { filter: none; }
body.hafif .b1 { background: radial-gradient(circle at 30% 30%, rgba(233,53,193,1) 0%, rgba(233,53,193,.92) 8%, rgba(233,53,193,.78) 16%, rgba(233,53,193,.60) 24%, rgba(233,53,193,.43) 32%, rgba(233,53,193,.29) 40%, rgba(233,53,193,.18) 48%, rgba(233,53,193,.10) 56%, rgba(233,53,193,.05) 64%, rgba(233,53,193,.02) 72%, rgba(233,53,193,.00) 80%); }
body.hafif .b2 { background: radial-gradient(circle at 60% 40%, rgba(91,91,245,1) 0%, rgba(91,91,245,.92) 8%, rgba(91,91,245,.78) 16%, rgba(91,91,245,.60) 24%, rgba(91,91,245,.43) 32%, rgba(91,91,245,.29) 40%, rgba(91,91,245,.18) 48%, rgba(91,91,245,.10) 56%, rgba(91,91,245,.05) 64%, rgba(91,91,245,.02) 72%, rgba(91,91,245,.00) 80%); }
body.hafif .b3 { background: radial-gradient(circle at 50% 50%, rgba(41,211,240,1) 0%, rgba(41,211,240,.92) 8%, rgba(41,211,240,.78) 16%, rgba(41,211,240,.60) 24%, rgba(41,211,240,.43) 32%, rgba(41,211,240,.29) 40%, rgba(41,211,240,.18) 48%, rgba(41,211,240,.10) 56%, rgba(41,211,240,.05) 64%, rgba(41,211,240,.02) 72%, rgba(41,211,240,.00) 80%); }
body.hafif .b4 { background: radial-gradient(circle at 40% 60%, rgba(255,107,157,1) 0%, rgba(255,107,157,.92) 8%, rgba(255,107,157,.78) 16%, rgba(255,107,157,.60) 24%, rgba(255,107,157,.43) 32%, rgba(255,107,157,.29) 40%, rgba(255,107,157,.18) 48%, rgba(255,107,157,.10) 56%, rgba(255,107,157,.05) 64%, rgba(255,107,157,.02) 72%, rgba(255,107,157,.00) 80%); }
/* İpuçları her karede taşınıyor; kendi katmanında olsun, metin yeniden boyanmasın. */
body.hafif .uydu-ipucu { will-change: transform; }