/* ---------------------------------------------------------------------------
   ANA EKRAN — terman.space'e girince gelen tek ekran.

   Mira, 7 Eyl: *"Terman.space'e girdiğim anda … ne agent network ne bir şey,
   hiçbir şey görmeyeceğim; direkt olarak bu orb çıkacak karşıma. Ve ben
   sadece ama sadece onunla konuşacağım."*

   O yüzden bu ekran çalışma alanının bir GÖRÜNÜMÜ değil, onun ÜSTÜNDE duran
   ayrı bir kabuk: kenar çubuğu yok, sekme yok, başlık çubuğu yok. Çalışma
   alanı arkada olduğu gibi duruyor (terminaller kapanmıyor, soketler
   kopmuyor) — yalnız görünmüyor.

   Yerleşim `/assets/orb-ana-ekran.html` önizlemesinden, rapor penceresi ise
   Mira'nın seçtiği SARKIT tasarımından (`orb-rapor-designs.html` 01):
   *"sarkıt dizaynını beğendim, haberin olsun."* Rapor orb'dan sarkıyor —
   ışık ipi, altında kâğıt; koyu ekrandaki tek açık yüzey o.

   Orb'un kendisi `/assets/orb-kit.css`ten (01 · Sıvı). İki kopya CSS
   olmasın diye buraya kopyalanmadı; index.html ikisini de alıyor.
   ------------------------------------------------------------------------ */

/* ÇALIŞMA ALANI ORB EKRANINDAYKEN ÇİZİLMEZ.
 *
 * `el.hidden = true` bu kutuda tek başına hiçbir şey yapmıyor: `layout.css`
 * `.app { display: grid }` diyor ve bir YAZAR bildirimi tarayıcının kendi
 * `[hidden] { display: none }` kuralını yener. Orb ekranı opak ve `fixed`
 * olduğu için görüntü yine doğru çıkıyordu — ama altta yirmi terminal her
 * yazışta çizilmeye devam ediyordu, ve bu ekranın bütün iddiası "arkada
 * hiçbir şey yok".
 *
 * `display: none` DEĞİL, `visibility: hidden`: ilki xterm'in ölçüsünü
 * sıfırlar ve dönüşte yeniden hizalanmak zorunda kalır (kötü ihtimalle
 * PTY'ye 0x0 gider). Görünürlük ise yerleşimi olduğu gibi bırakıp yalnız
 * ÇİZİMİ kesiyor, ve dönüş bedava. Odak da gitmiş oluyor: görünmez bir
 * terminale klavye sızmaz.
 *
 * Kazanç TAM DEĞİL ve olduğundan fazlası iddia edilmesin: tarayıcı bu
 * ağacı BİRLEŞTİRMİYOR, ama xterm veri geldikçe kendi canvas'ına yazmaya
 * devam ediyor — o çizim CSS'e değil sokete bağlı. Kesilen şey sayfanın
 * boyaması; kesilmeyen şey xterm'in kendi işi. */
.app[hidden] { visibility: hidden; }

.anaekran {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: auto 1fr auto auto;
  overflow: hidden;
  background: var(--ae-ink);
  color: var(--ae-fg);
  font: 15px/1.55 ui-sans-serif, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;

  --ae-ink:   #07090d;
  --ae-line:  rgba(214, 222, 233, .13);
  --ae-line2: rgba(214, 222, 233, .24);
  --ae-line3: rgba(214, 222, 233, .42);
  --ae-fg:    #e8ecf4;
  --ae-dim:   rgba(232, 236, 244, .58);
  --ae-dim2:  rgba(232, 236, 244, .34);
  --ae-dim3:  rgba(232, 236, 244, .18);
  --ae-amber: #e0b93c;
  --ae-green: #3fbf8f;
  --ae-red:   #c0554a;
  --ae-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ae-ease:  cubic-bezier(.2, .7, .2, 1);
}
.anaekran[hidden] { display: none; }
.anaekran *, .anaekran *::before, .anaekran *::after { box-sizing: border-box; }

/* ---- ARKA PLAN: tek video, galaksi (Mira'nın seçimi) -------------------
   7 Eyl'de seçildi. 10 Eyl'de bir gün beş video arasında dönen bir rotasyon
   vardı, aynı akşam Mira'nın isteğiyle kaldırıldı — ikinci katman ve çapraz
   geçiş de onunla gitti. Üretim, loop dikişi ve ölçümler:
   docs/orb-arkaplan.md.

   İkisi de `position: absolute` ve bu ŞART: `.anaekran` dört satırlık bir
   grid (başlık / merkez / giriş / alt) ve akışta duran iki çocuk daha o
   satırları kaydırırdı. Mutlak konumlu grid çocukları yerleştirmeye hiç
   girmez.

   Video ekranın DİBİNDE (z-index 0), perde onun üstünde (1), orb'un zemin
   ışığı ikisinin de üstünde (2). Sıra önemli: ışık videonun altında
   kalsaydı durum rengi (dinliyorum/düşünüyorum) hiç görünmezdi. */
.ae__fon {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
/* PERDE KALDIRILDI (7 Eyl, aynı gün). Mira: *"orb'un arka planında böyle bir
   siyahlık var, o siyahlığı tamamen kaldırır mısın?"*

   Önce merkezi koyultan bir leke vardı, sonra kenarları koyultan bir vinyet;
   ikisi de videoyu bastırıyordu. Şimdi hiçbiri yok — video olduğu gibi
   görünüyor.

   Okunurluk perdeden değil, YAZININ KENDİSİNDEN geliyor: orb'un altındaki
   her satırın kendi gölgesi var (`text-shadow`), giriş kutusunun kendi
   bulanık zemini. Bunu perdeyle çözmek, bir satır uğruna bütün ekranı
   karartmaktı.

   Düğüm duruyor ve boş: geri gelmesi gerekirse tek bir `background`
   satırıdır, ve o gün hangi değerin denendiği yukarıda yazıyor. */
.ae__fonperde {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: none;
}

/* Orb'un zemine vurduğu ışık. Ekranın tek renkli yeri o, gerisi mürekkep. */
.anaekran::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(58% 46% at 50% 42%, var(--ae-zemin, rgba(124,140,255,.10)) 0%, transparent 72%);
  transition: background 1.1s var(--ae-ease);
}

/* ---- üst çizgi --------------------------------------------------------- */
.ae__ust {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px calc(14px + env(safe-area-inset-top, 0px));
  font: 500 10.5px/1 var(--ae-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ae-dim2);
}
.ae__ad { color: var(--ae-dim); letter-spacing: .3em; }
.ae__ustdurum b { color: var(--ae-fg); font-weight: 500; }
.ae__ustsag { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---- ÇOK ŞEFFAF GEÇİŞ DÜĞMELERİ ----------------------------------------
   Mira: *"Sol üstte çok şeffaf bir şekilde 'eski yuvaya geri dön' gibi bir
   şey olacak."* Şeffaflık burada bir üslup değil bir HÜKÜM: bu ekranın
   sözü "başka hiçbir şey yok", ve o sözü ilk bozacak şey ekranın köşesinde
   parlayan bir düğme olurdu. Duruyor ama bakmadıkça görünmüyor; eli
   üstüne gelince tam görünür oluyor.

   Aynı düğmenin çalışma alanındaki eşi `.yuva-orb` (aşağıda). */
.ae__kapi {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 13px; border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--ae-fg);
  font: 500 10.5px/1 var(--ae-mono); letter-spacing: .12em; text-transform: uppercase;
  opacity: .16;
  transition: opacity .22s var(--ae-ease), border-color .22s, background .22s;
}
.ae__kapi:hover, .ae__kapi:focus-visible {
  opacity: .96; border-color: var(--ae-line); background: rgba(255, 255, 255, .03);
  outline: none;
}
.ae__kapi i {
  font-style: normal; font-size: 12px; line-height: 1; opacity: .8;
}
/* Dokunmatikte hover yok: parmakla erişilen bir düğme "bakmadıkça
   görünmez" olamaz, çünkü bakmakla dokunmak aynı şey. Ölçüldü değil,
   sebep basit — telefonda .16 opaklık, düğmenin hiç olmaması demek. */
@media (hover: none) {
  .ae__kapi { opacity: .42; }
}

/* ---- MERKEZ — orb ------------------------------------------------------ */
.ae__merkez {
  position: relative; z-index: 3;
  display: grid; justify-items: center; align-content: center;
  min-height: 0;
}
/* Orb'un ölçüsü KUTUDA yazılı (`--ae-s`), orb onu `--s` olarak alıyor:
   kullanım halkaları ve onların yazısı orb'un dışına taşıyor, ve kutunun
   onlara ne kadar yer açacağını bilmesi için ölçüyü kendisinin de görmesi
   gerekiyordu. Terminal kipi ve telefon aynı değişkeni yazıyor. */
.ae__orbkutu {
  position: relative; display: grid; place-items: center;
  --ae-s: clamp(150px, 30vmin, 300px);
  /* Üstte halkaların kavisli yazısı (orb kenarından ~0,22 s), altta dış
     halka (~0,12 s) — ikisi de sözün satırına binmesin. */
  margin-block: calc(var(--ae-s) * .2) calc(var(--ae-s) * .12);
  transition: margin .38s var(--ae-ease);
}
/* KOCAMAN, ve ekranla birlikte büyür: bu bir düğme değil, sayfanın kendisi.
   Bugünkü orb ekranda gezen bir düğme (master-orb.css `.is-dragging`);
   buradaki ekranın çapası, o yüzden sürüklenmiyor. */
.ae__orbkutu .orb2 {
  --s: var(--ae-s);
  --ctr: 1.6;
  cursor: pointer;
  /* Jervis konuşurken sesin yüksekliğiyle şişip iner. `--ae-ses` 0..1,
     `ana-ekran.js` rAF'ta yazıyor; kaynağı playback worklet'inin kare başına
     verdiği rms (master-orb.js `_onPlayFrame`).

     Geçiş KISA (60 ms): uzun bir geçiş sesi takip etmez, geciktirir — ve
     geciken bir nabız, sesle ilgisi olmadığını ele verir. Büyüme %7'de
     bırakıldı; daha fazlası, ekranın çapası olan bir nesnede zıplama gibi
     duruyor. */
  transform: scale(calc(1 + var(--ae-ses, 0) * .07));
  transition: transform .06s linear;
}
@media (prefers-reduced-motion: reduce) {
  .ae__orbkutu .orb2 { transform: none; }
}
.ae__halka, .ae__puf {
  position: absolute; inset: -6%; border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.ae__halka { border: 1px solid var(--glow); }
.ae__halka--2 { animation-delay: 1.3s; }
.anaekran[data-durum="listen"] .ae__halka,
.anaekran[data-durum="mic"] .ae__halka { animation: ae-dalga 2.6s var(--ae-ease) infinite; }
.anaekran[data-acil="1"] .ae__halka { animation: ae-dalga 1.1s var(--ae-ease) infinite; }
@keyframes ae-dalga {
  0%   { transform: scale(.96); opacity: .55; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* Bir kart düştüğünde orb bir kez halka atar — "buraya bak"ın sessiz hâli. */
.ae__puf { border: 1px solid rgba(224, 185, 60, .8); }
.ae__puf.at { animation: ae-dalga 1.05s var(--ae-ease) 1; }

/* ---- KULLANIM HALKALARI: orb'u saran iki yay (11 Eyl) -------------------
   Mira sol kenar için beş tasarım gördü, "02 · Halkalar"ı seçti ve yerini
   değiştirdi: *"bu halkalar dizaynını sadece direkt olarak Orb'un etrafına
   saracak şekilde yaparsak bence daha mükemmel olabilir."* Önizleme:
   /assets/orb-kullanim-designs.html (02), kayıt olarak duruyor.

   İç halka OTURUM (5 sa, kalın, parlak), dış halka HAFTA (7 gün, ince,
   soluk); ikisi de saat 12'den saat yönünde dolar. Sayılar dış halkanın
   üstünde kavis boyunca: oturum saat 12'nin solunda biter, hafta sağında
   başlar. Dış halkanın üstünde kayan tek nokta "bu canlı" der.

   Renk orb'dan DEĞİL: halkalar durumu (dinliyor/düşünüyor) değil bir
   ölçüyü söylüyor, ve orb yeşile dönünce halkanın da yeşile dönmesi o
   ölçüyü okunmaz yapardı. Seviye: <75 beyaz, 75-90 kehribar, ≥90 kırmızı +
   ışıma + 2,4 sn'de bir kısa sarsıntı (önizlemedekiyle aynı).

   Geometri JS'te (`kuHalkaHTML`): 100×100 çizim, kutu orb'un %140'ı. Hepsi
   yüzde, yani halkalar orb'la birlikte küçülüyor — terminal açılınca da
   82 px'lik orb'u sarıyorlar. */
.ae__ku {
  position: absolute; inset: -20%; pointer-events: none;
  transition: opacity .6s var(--ae-ease);
}
.ae__ku[hidden] { display: none; }
.ae__kusvg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.ae__kuiz { fill: none; stroke: rgba(214, 222, 233, .10); }
.ae__kuiz--i, .ae__kuyay--i { stroke-width: 1.5; }
.ae__kuiz--d, .ae__kuyay--d { stroke-width: .9; }
.ae__kuyay {
  fill: none; stroke-linecap: round;
  transition: stroke-dasharray 1.2s var(--ae-ease), stroke .5s var(--ae-ease),
              opacity .4s var(--ae-ease);
}
.ae__kuyay--i { stroke: rgba(232, 236, 244, .92); filter: drop-shadow(0 0 1px rgba(232, 236, 244, .55)); }
.ae__kuyay--d { stroke: rgba(214, 222, 233, .58); }
/* %0'da yuvarlak uç tek bir nokta çizerdi — "biraz kullanılmış" gibi. */
.ae__kuyay[data-bos="1"] { opacity: 0; }
.ae__kuyay[data-sv="uyari"] { stroke: var(--ae-amber); }
.ae__kuyay[data-sv="kritik"] { stroke: #ff5a4e; filter: drop-shadow(0 0 1.6px rgba(255, 90, 78, .95)); }
/* Saat 12'deki sıfır çentiği: iki yayın da başladığı yer. */
.ae__kusifir { stroke: rgba(214, 222, 233, .30); stroke-width: .35; stroke-linecap: round; }

/* Yazı: boyu JS yazıyor (`font-size` özniteliği, ekranda ~10 px), burada
   boy YOK — CSS'teki bir boy özniteliği ezerdi. Okunurluk videonun üstünde
   harfin kendi koyu halesinden (paint-order: stroke). */
.ae__kuyazi {
  fill: rgba(232, 236, 244, .46);
  font-family: var(--ae-mono); font-weight: 500; letter-spacing: .1em;
  stroke: rgba(7, 9, 13, .62); stroke-width: .3em; stroke-linejoin: round;
  paint-order: stroke;
}
.ae__kuad { text-transform: uppercase; letter-spacing: .18em; }
.ae__kuyuzde {
  fill: rgba(232, 236, 244, .95);
  font-family: ui-sans-serif, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400; font-size: 1.32em; letter-spacing: .02em;
}
.ae__kugeri { fill: rgba(232, 236, 244, .36); letter-spacing: .04em; }
.ae__kuyazi[data-sv="uyari"] .ae__kuyuzde { fill: #f0d27a; }
.ae__kuyazi[data-sv="kritik"] .ae__kuyuzde { fill: #ff6a5e; }
.ae__kuyazi[data-sv="kritik"] .ae__kugeri { fill: rgba(255, 138, 128, .7); }

.ae__kudon {
  /* Yörüngesi dış halkanın KENDİSİ (44 birim): tel üstünde kayan bir
     boncuk. Halkanın dışında (46,6) dolaşırken tepede yazının dibine
     giriyordu — ekran görüntüsünde "%28"in yanında bir leke (ölçüldü). */
  position: absolute; inset: 6%; border-radius: 50%;
  animation: ae-ku-don 22s linear infinite;
}
.ae__kudon i {
  position: absolute; left: 50%; top: 0;
  width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: rgba(214, 222, 233, .7); box-shadow: 0 0 8px rgba(214, 222, 233, .6);
}
@keyframes ae-ku-don { to { transform: rotate(360deg); } }
.ae__ku[data-sv="kritik"] .ae__kudon { animation-duration: 4s; }
.ae__ku[data-sv="kritik"] .ae__kudon i { background: #ff5a4e; box-shadow: 0 0 10px #ff5a4e; }
.ae__ku[data-sv="kritik"] .ae__kusvg { animation: ae-ku-titre 2.4s linear infinite; }
/* Sarsıntı sürekli DEĞİL, 2,4 sn'de bir kısa bir darbe: sürekli titreyen
   bir şeyi göz birkaç saniyede siler, aralıklı olanı her seferinde görür. */
@keyframes ae-ku-titre {
  0%, 24%, 100% { transform: translate(0, 0) rotate(0); }
  3%  { transform: translate(-1.6px, .6px) rotate(-.6deg); }
  6%  { transform: translate(1.8px, -.6px) rotate(.6deg); }
  9%  { transform: translate(-1.4px, .4px) rotate(-.4deg); }
  12% { transform: translate(1.2px, .5px) rotate(.4deg); }
  15% { transform: translate(-.8px, -.4px) rotate(-.2deg); }
  18% { transform: translate(.6px, .2px) rotate(.1deg); }
  21% { transform: translate(-.3px, 0) rotate(0); }
}
/* Ölçüm eski (uç cevap vermiyor ya da Anthropic düştü): sayı kalır ama
   söner, nokta durur ve kehribara döner — "canlı" diye bayat sayı
   göstermek, hiç göstermemekten kötü. */
.ae__ku[data-bayat="1"] { opacity: .45; }
.ae__ku[data-bayat="1"] .ae__kudon { animation-play-state: paused; }
.ae__ku[data-bayat="1"] .ae__kudon i { background: var(--ae-amber); box-shadow: none; }
/* Ölçüm YOK ama uç sebebini söylüyor (yabancı hesap, 20 Eyl — "köprü eski,
   kurulum komutunu yeniden çalıştır" / "claude girişi yok"): halka yok, sebep
   halkanın kavisli yazısının yerinde tek satır. Kutunun üst payı zaten o
   yazı için açılmış (`margin-block`), yani söze binmiyor. */
.ae__kunot {
  position: absolute; left: 50%; bottom: calc(100% + .2em); transform: translateX(-50%);
  width: max-content; max-width: min(300%, 92vw); text-align: center;
  font: 500 10px/1.4 var(--ae-mono); letter-spacing: .08em;
  color: rgba(232, 236, 244, .42);
  text-shadow: 0 0 6px rgba(7, 9, 13, .9), 0 1px 2px rgba(7, 9, 13, .9);
  pointer-events: none;
}
.ae__kunot[hidden] { display: none; }
/* Terminal kipinde orb 82 px ve tepede: yazı orada okunmaz, nokta kalabalık.
   Halkalar kalıyor. */
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__kuyazi,
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__kudon,
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__kunot,
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__kusifir { display: none; }

/* ---- ÇAĞRI YOKKEN: orb'un üstünde SUSTURULMUŞ MİKROFON -----------------
   Mira, 8 Eyl: *"eğer aramada değilsek orb'un üstü böyle bir çarpı olsun ki
   Jervis'in beni duymadığını ve dinlemediğini bileyim."* İlk hâli düz bir
   çapraz idi ve reddedildi (*"bok gibi"*); beş tasarım çizildi, seçilen
   ikinci: **kesik mikrofon**. Çapraz "bir şey kapalı" der, mikrofon
   "SENİ DUYMUYORUM" der — ve kimsenin öğrenmesi gerekmeyen tek şekil bu.
   Seçim sayfası: frontend/assets/orb-carpi-designs.html.

   Sınıf adı `ae__capraz` KALDI (kimlik, testler ve kabarcıktaki kardeşi
   aynı adı taşıyor); değişen şey görünen işaret.

   Renk NÖTR, kırmızı DEĞİL, ve bu bir zevk meselesi değil: bu ekranda
   kırmızının bir işi var (siren, acil halkası) ve dinlemiyor olmak bir
   arıza değil bir durum. Okunurluğu ikonun kendi koyu gölgesi veriyor —
   orb hangi renge dönerse dönsün görünüyor. */
.ae__capraz {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ae-ease);
  /* Kalınlık tek yerden: ikon 270 px'de de 82 px'de de (terminal kipi)
     aynı çiziliyor, optik ayar bu değişkenle yapılır. */
  --ae-kal: 3.4;
}
.ae__capraz svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: rgba(233, 237, 245, .92);
  stroke-width: var(--ae-kal); stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(7, 9, 13, .95));
}
/* Eğik çizgi İKİ KEZ çiziliyor: önce zemin renginde kalın bir "kesik",
   sonra çizginin kendisi. Böylece çizgi mikrofonun ÜSTÜNDEN geçmiyor, onu
   KESİYOR — ikonun küçük boyda da okunması buradan geliyor. */
.ae__capraz .ae__kes { stroke: #090c12; stroke-width: calc(var(--ae-kal) * 2.8); }
.anaekran[data-cagri="0"] .ae__capraz,
.anaekran[data-sessiz="1"] .ae__capraz { opacity: 1; }
/* İşaretin yanında orb'un kendisi de sönüyor: tek bir çizgi "kapalı"yı
   söyleyebilir, ama nesnenin kendisi hâlâ pırıl pırılken söylediği şey
   inandırıcı olmuyor. */
.anaekran[data-cagri="0"] .ae__orbkutu .orb2,
.anaekran[data-sessiz="1"] .ae__orbkutu .orb2 { filter: saturate(.6) brightness(.82); }

.ae__soz {
  margin-top: 26px; min-height: 1.5em; max-width: min(680px, 86vw);
  text-align: center; font-size: 14.5px; color: var(--ae-dim);
  /* Video üstünde duran her yazının kendi zemini olmalı: parlak bir
     nebula karesi denk geldiğinde renk tek başına yetmiyor. */
  text-shadow: 0 1px 16px rgba(7, 9, 13, .85);
  transition: opacity .5s var(--ae-ease), color .9s var(--ae-ease);
}
.ae__soz b { color: var(--ae-fg); font-weight: 500; }
/* Duyulan cümle: orb'un altında, söylediği şeyin YAZISI. Konuşurken
   yazılanı görmek, "sözlerim doğru düzgün görünmüyor"un cevabı. */
/* ---- KONUŞMA AKIŞI ----------------------------------------------------
   Orb'un altındaki asıl yer. Durum yazıları ("dinliyorum", "düşünüyorum")
   buradan kaldırıldı: orb'un rengi zaten onu söylüyor ve o kelimeler tam bu
   satırın yerini işgal ediyordu.

   Mira, 7 Eyl: *"benim verdiğim prompt ne kadar uzunsa o kadar fazla aşağı
   doğru iniyor … yazı orb'un aşağısına doğru fade ve blur ile opacitesi
   gittikçe azalacak, belirli bir büyüklükte kalacak."*

   Kutu SABİT boyda: en üstte o an söylenen cümle, altında geçmiş, her satır
   bir öncekinden daha soluk ve daha bulanık. Uzun bir cümle kutuyu
   taşırdığında kutu sonuna kayıyor (`_akisKaydir`) — konuşurken görülmesi
   gereken şey cümlenin başı değil son sözcüğü. */
/* YÖN: en yeni ALTTA, eskiler yukarı. Mira, 8 Eyl: *"ben uzun bir prompt
   yazdığımda ekran aşağı doğru büyüyor ya, aşağı doğru büyümesi yerine yazı
   orb'un yukarısına doğru gidip yukarıda blur ve fade olacak. Bu bir chat
   değil."*

   Bunun iki sonucu var ve ikisi de burada:

   1. Kutu SABİT boyda (`.dolu`). Boyu içerikle büyüseydi altındaki her şey
      — şerit, terminal — her cümlede yerinden oynardı; şikâyetin kendisi o.
      Boşken sıfır: konuşulmamış bir ekranda boşluk tutmasının anlamı yok.
   2. İçerik ALTTAN hizalı (`margin-top: auto`), yani yeni satır geldikçe
      eskiler yukarı kayıyor. `align-content: end` DEĞİL: kaydırma kabında
      o hizalama taşan içeriği erişilemez yapabiliyor; `margin-top: auto`
      taşma anında kendiliğinden 0'a düşüyor.

   Maske de yön değiştirdi: yumuşama artık ÜSTTE — kesilen geçmişin bittiği
   yer orası, ve orb'a yaklaşan satırın silinerek gitmesi gereken yer. */
.ae__akis {
  margin-top: 10px; width: min(680px, 86vw);
  height: 0; transition: height .3s var(--ae-ease);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 100%);
}
.ae__akis.dolu { height: 15vh; }
.ae__akis::-webkit-scrollbar { width: 0; height: 0; }
.ae__akisic { flex: none; margin-top: auto; display: grid; gap: 7px; padding: 2px 0 6px; }
/* `--i` = kaçıncı eski satır. Soluklaşma ve bulanıklaşma birlikte gidiyor:
   yalnız opaklık düşürmek yazıyı "soluk ama okunur" bırakıyor, ve okunur
   olan şey dikkat çekiyor — geriye gitmesi gereken satır okunmamalı. */
.ae__akissat {
  text-align: center;
  font: 400 15px/1.55 ui-sans-serif, "Inter", system-ui, sans-serif;
  color: rgba(232, 236, 244, .82);
  text-shadow: 0 1px 16px rgba(7, 9, 13, .9), 0 0 30px rgba(7, 9, 13, .6);
  opacity: max(.06, calc(1 - var(--i, 0) * .3));
  filter: blur(calc(var(--i, 0) * .9px));
  transition: opacity .5s var(--ae-ease), filter .5s var(--ae-ease);
}
/* Kim konuşuyorsa rengi o söylüyor — etiket YOK ("Sen:" / "Jervis:"), çünkü
   iki kişilik bir konuşmada kimin konuştuğu zaten belli. */
.ae__akissat[data-kim="jervis"] { color: rgba(214, 226, 255, .9); }
.ae__akissat--canli { opacity: 1; filter: none; }
/* Kelime kelime beliren sözcük: bulanıktan netliğe. Mira: *"word by word
   fade ve blur ile appear olacak."* Animasyon KISA — uzun bir belirme,
   sesin söylediği kelimeyi geriden takip etmek demek. */
.ae__kelime {
  display: inline-block;
  animation: ae-kelime .36s var(--ae-ease) both;
}
@keyframes ae-kelime {
  from { opacity: 0; filter: blur(7px); transform: translateY(3px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}

/* ---- ÇALIŞAN İŞLER: yürüyen isim --------------------------------------
   Mira, 7 Eyl: *"yürüyen isim dizaynı çok daha güzel."* Kapalıyken orb'un
   altında TEK satır var ve o satır bir iş ADI söylüyor, birkaç saniyede bir
   sıradakine geçiyor. Eski hâli (her işe bir kapsül) reddedildi: *"oradaki
   UI çok slot duruyor"* — hepsi aynı ağırlıktaydı, cevap bekleyen işle
   sorunsuz süreni ayıran tek şey kenar rengiydi.

   Sayı yerine isim, çünkü "4 iş" bir soyutlama; "Instagram videosu, 50
   dakikadır" bir cevap. */
/* Tek sütun ve o sütun `minmax(0, 1fr)`: `auto` olsaydı sütun İÇERİĞE göre
   büyürdü ve uzun bir iş adı listeyi kabın dışına taşırdı — telefonda
   ölçüldü (kap 346px, liste 494px, süreler ekranın dışında). Grid
   çocuğunun kendiliğinden gelen `min-width: auto`su da aynı sebeple
   sıfırlanıyor. */
.ae__isler {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
  gap: 2px; margin-top: 20px; width: min(680px, 84vw);
}
.ae__isler[hidden] { display: none; }
.ae__seritsatir {
  display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
}
.ae__serit {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 5px 8px; border: 0; border-radius: 8px; background: none;
  cursor: pointer; color: inherit; font: inherit;
  transition: background .22s var(--ae-ease);
}
.ae__serit:hover { background: rgba(255, 255, 255, .05); }
.ae__seritad {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 13px/1.5 ui-sans-serif, system-ui, sans-serif; color: var(--ae-dim);
  text-shadow: 0 1px 14px rgba(7, 9, 13, .85);
  animation: ae-serit-gel .8s var(--ae-ease) both;
}
.ae__seritad.hot { color: rgba(224, 185, 60, .9); }
/* Susan iş: terminali STALL_AFTER_S'dir üretmiyor (21 Eyl). Kehribar değil,
   soluk — bir soru değil, bir şüphe. */
.ae__seritad.sessiz { color: var(--ae-dim3); }
/* Süre ESNEMEZ: dar ekranda kırpılacak şey ad olmalı, süre değil —
   tasarımın söylediği iki şeyden biri "ne kadardır". */
.ae__seritsure {
  flex: none; font: 500 10px/1 var(--ae-mono); letter-spacing: .06em;
  color: var(--ae-dim3); text-shadow: 0 1px 14px rgba(7, 9, 13, .85);
  animation: ae-serit-gel .8s var(--ae-ease) both;
}
.ae__seritsure.hot { color: rgba(224, 185, 60, .6); }
.ae__seritsure.sessiz { color: rgba(224, 120, 90, .6); }
/* Oku AYRI bir düğme: şeridin adına dokunmak terminali açıyor, listeyi açan
   şey bu. İki iş tek dokunuşa sığmıyor ve sık olan hangisiyse o doğrudan
   olmalı. */
.ae__seritok {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0;
  background: none; cursor: pointer; color: var(--ae-dim2); opacity: .5;
  position: relative;
  transition: opacity .22s var(--ae-ease);
}
.ae__seritok:hover { opacity: 1; }
.ae__seritok::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -4px 0 0 -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .35s var(--ae-ease);
}
.ae__isler.acik .ae__seritok::before { transform: rotate(-135deg) translateY(3px); }
@keyframes ae-serit-gel {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
/* Açılan liste: şeridin söylemediği her şey, tek seferde. */
.ae__isliste {
  display: grid; gap: 1px; width: 100%; min-width: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .42s var(--ae-ease), opacity .3s var(--ae-ease);
}
.ae__isler.acik .ae__isliste { max-height: 40vh; opacity: 1; overflow: auto; }
.ae__issat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  min-width: 0; padding: 8px 8px; border-top: 1px solid var(--ae-line);
  cursor: pointer; border-radius: 6px;
  transition: background .22s var(--ae-ease);
}
.ae__issat:hover { background: rgba(255, 255, 255, .05); }
.ae__issat-ad {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 12.5px/1.4 ui-sans-serif, system-ui, sans-serif; color: var(--ae-dim);
}
.ae__issat-sure {
  flex: none; font: 500 10px/1 var(--ae-mono); color: var(--ae-dim3);
  letter-spacing: .05em;
}
.ae__issat.hot .ae__issat-ad { color: rgba(224, 185, 60, .9); }
.ae__issat.hot .ae__issat-sure { color: rgba(224, 185, 60, .55); }
.ae__issat.sessiz .ae__issat-ad { color: var(--ae-dim3); }
.ae__issat.sessiz .ae__issat-sure { color: rgba(224, 120, 90, .55); }
@keyframes ae-nabiz { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes ae-gir { from { opacity: 0; transform: translateY(-7px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---- BİR İŞİN TERMİNALİ ------------------------------------------------
   Mira: *"tıkladığım zaman orb'un altında onun terminali direkt olarak
   görünsün. Yani ben terminalleri öyle kontrol edebileyim."*

   İçerideki şey xterm değil, PTY'nin işlenmiş görüntüsü (düz metin).
   Zemini yarı saydam ve bulanık: arkasındaki video görünmeye devam ediyor —
   pencere ekranı ele geçirmiyor, ekranın üstünde duruyor. */
.ae__terminal {
  position: relative; z-index: 4;
  margin-top: 16px; width: min(880px, 92vw);
  /* Sütun `minmax(0, 1fr)`: `auto` olsaydı sütun İÇERİĞE göre büyürdü ve
     `white-space: pre` olan bir terminal çıktısının min-content genişliği
     satırın tamamıdır — telefonda ölçüldü: pencere 387px, içindeki ekran
     558px, kapatma düğmesi ekranın 125px dışında kalıyordu. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto; gap: 0;
  border: 1px solid var(--ae-line2); border-radius: 12px; overflow: hidden;
  background: rgba(7, 9, 13, .72);
  backdrop-filter: blur(7px);
  animation: ae-gir .3s var(--ae-ease) both;
}
.ae__terminal[hidden] { display: none; }
.ae__terminal.hata { border-color: rgba(224, 185, 60, .4); }
.ae__termust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--ae-line);
}
.ae__termad {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 10.5px/1.3 var(--ae-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ae-dim2);
}
.ae__termkapa {
  flex: none; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--ae-dim2); font-size: 12px; line-height: 1;
  transition: background .22s var(--ae-ease), color .22s var(--ae-ease);
}
.ae__termkapa:hover { background: rgba(255, 255, 255, .07); color: var(--ae-fg); }
/* GERÇEK xterm buraya taşınıyor. Mira: *"agent network'te gördüğümüz
   terminal var ya, onun %100 aynısı olmak zorunda."* Aynısı olmasının tek
   yolu aynısı OLMASI: çalışma alanındaki `.shell-cell` olduğu gibi buraya
   giriyor, kapanınca yerine dönüyor (ana-ekran.js `_xtermAc`/`_xtermKapa`).
   Kopya yok, ikinci soket yok. */
.ae__termsahne {
  position: relative; min-height: min(46vh, 380px); max-height: min(56vh, 460px);
  /* FLEX, ve bu bir biçim tercihi DEĞİL. Izgara olduğu sürece ödünç alınan
     hücrenin pane ızgarasından gelen SATIR İÇİ yerleşimi (tabs.js:
     `cell.style.gridColumn = "3"`, `gridRow = "3"`) burada da geçerliydi:
     hücre olmayan üçüncü sütuna düşüyor, kendine yer açıyor ve pencerenin
     içinde kayıyordu. Ölçüldü (8 Eyl, gerçek tarayıcı): 1178×519 sahnede
     hücre 554×473 ve 624 px sağa, 46 px aşağı kaymış — Mira'nın gördüğü
     "birincisi terminale oturmuyor" tam olarak buydu. Bir sekmedeki İLK
     pane 1/1'de olduğu için doğru duruyor, ikinci ve üçüncüsü kayıyordu.
     Ajan ağının baloncuğu aynı hücreyi bir FLEX sahneye alıyor
     (`an-terminal-overlay__stage`) ve o yüzden hiç bu arızayı görmedi. */
  display: flex; overflow: hidden;
}
.ae__termsahne > .shell-cell {
  flex: 1; display: flex; min-width: 0; min-height: 0;
  /* HÜCRENİN KENDİ ÇERÇEVESİ BURADA YOK (13 Eyl). Mira: *"terminaller
     Jervis'in yeni UI'ında tüm terminal ekranını kaplamıyor; sağ alt ve sağ
     taraftan kesik değil direkt küçültülmüş gibi."*

     `.shell-cell` pane ızgarası için yazıldı: 8 px dolgu + 1 px kenarlık,
     komşu pane'lerden ayıran şey o. Burada ayıracak komşu yok — çerçeveyi
     `.ae__terminal` çiziyor (kenarlık + yuvarlatma + bulanık zemin), yani
     ödünç alınan hücrenin çerçevesi çerçevenin İÇİNDE ikinci bir çerçeve,
     ve her kenardan 9 px yiyor.

     Ve gözü asıl rahatsız eden şey 9 px değil, ASİMETRİ: sola/üste 9 px
     düşerken sağa 9 + kaydırma çubuğu, alta 9 + satır artığı düşüyor, yani
     terminal kutunun içinde sola yaslanmış küçük bir terminal gibi duruyor.

     ÖLÇÜLDÜ (13 Eyl, Mira'nın telefonu — Fold 6, 412×892, zoom %85, gerçek
     stiller + gerçek xterm, `assets/orb-terminal-olcu.html`):

       |            | sol/üst | sağ    | alt     | doluluk   | cols×rows |
       | eski       | 8,75 px | 34,9px | 35,3 px | %91 × %94 | 46×29     |
       | dolgu yok  | 0 px    | 11,7px | 16,8 px | %97 × %97 | 49×30     |

     Kalan sağdaki 11,7 px xterm'in GERÇEK kaydırma çubuğu (ölçüldü:
     viewport 335 → 325), alttaki 16,8 px bir satırdan küçük artık. İkisi de
     çalışma alanındaki pane'de de var; "pane'in %100 aynısı" olmanın bedeli
     onlar, bu dolgu değildi. */
  padding: 0; border: 0; border-radius: 0;
}
.ae__termsahne > .shell-cell > .shell-cell__host { flex: 1; height: 100%; }
.ae__termsahne:empty { display: none; }

/* Yedek görünüm: pane bu tarayıcıda açık değilse (başka makine, kapanmış
   sekme) ekranın FOTOĞRAFI. `pre` ve `overflow: auto`: satırlar KIRILMIYOR. Terminal çıktısının
   hizası bilgi taşıyor — sarılan bir tablo, tablo olmaktan çıkıyor. */
.ae__termekran {
  margin: 0; padding: 10px 12px; max-height: min(46vh, 380px);
  overflow: auto; overscroll-behavior: contain;
  font: 400 11.5px/1.45 var(--ae-mono); color: rgba(232, 236, 244, .8);
  white-space: pre; tab-size: 4;
  scrollbar-width: thin; scrollbar-color: var(--ae-line2) transparent;
}
.ae__termgiris {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; padding: 8px 8px 8px 12px; border-top: 1px solid var(--ae-line);
}
.ae__termgiris input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; color: var(--ae-fg);
  font: 400 12.5px/1.4 ui-sans-serif, system-ui, sans-serif; outline: none;
}
.ae__termgiris input::placeholder { color: var(--ae-dim3); }
/* `display: flex` UA'nın `[hidden] { display: none }` kuralını YENER, yani
   `hidden` özniteliği tek başına bu satırı gizlemiyordu: gerçek xterm
   açıkken (`_xtermAc` onu `hidden` yapıyor) "bu terminale yaz…" kutusu
   ekranda duruyordu — 8 Eyl'de ekran görüntüsünde görüldü. Aynı tuzak
   `.ae__isler`, `.ae__terminal` ve `.ae__sutun` için kapatılmıştı; bu
   satır atlanmış. */
.ae__termgiris[hidden] { display: none; }

/* ---- TERMİNAL AÇIKKEN: orb tepeye, terminal ortaya --------------------
   Mira, 8 Eyl: *"bir işe tıkladığım zaman aşağıda değil, bir nevi tam ekran
   gibi ama ekranın ortasında büyük bir şekilde dursun. Orb bu büyük bir
   şekilde dururken ekranın tepesine geçip küçülsün ki terminal büyük
   görünsün."*

   Yeni bir ekran DEĞİL, aynı ekranın ikinci hâli: `data-term="1"` merkez
   ızgarasına son satırı `1fr` yaptırıyor, orb küçülüp yukarı çekiliyor,
   terminal kalan her şeyi alıyor. Orb yerinde kalıyor ve tıklanabilir —
   terminale bakarken konuşmak hâlâ mümkün, ki zaten mesele o. */
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__merkez {
  /* Terminal SON satırda ve satır AÇIKÇA veriliyor (`grid-row: 5`), çünkü
     merkezdeki çocuk sayısı sabit değil: `soz` konuşurken gizleniyor,
     `isler` iş yokken gizleniyor. Sıraya güvenen bir ızgarada terminal o
     anlarda `1fr` satırına hiç girmiyordu — `auto` satırda kalıp
     içeriğinin boyuna küçülüyordu. Mira'nın gördüğü şey buydu, 8 Eyl:
     *"terminal inanılmaz ince kalıyor, okunabilecek düzeyde değil."*
     Ölçüldü (6 iş, liste açık, konuşurken): terminal 371 px = ekranın
     %41'i, gerçek terminal alanı %36 (18 satır). */
  grid-template-rows: repeat(4, auto) minmax(0, 1fr);
  align-content: stretch;
  padding: 4px 0 0;
  min-height: 0;
}
/* Terminal açıkken ÜST ve ALT şeritler de daralıyor: burada her piksel
   terminale gidiyor. */
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__ust { padding-top: 8px; padding-bottom: 8px; }
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__alt { padding-top: 6px; padding-bottom: 8px; }
/* Atölyenin cümlesi ("6 iş sürüyor") terminal açıkken susuyor: aynı şeyi
   şerit zaten iş ADIYLA söylüyor, ve o satır burada 30 px terminal
   demek. */
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__soz { display: none; }
/* Küçülme ANİMASYONLU: orb ekranın çapası, ve çapanın ışınlanması yer
   değiştirdiğini değil kaybolup yeniden doğduğunu anlatır. `--s` doğrudan
   `width`/`height` (orb-kit.css), o yüzden ikisi geçiyor. */
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__orbkutu {
  --ae-s: clamp(56px, 7vmin, 84px);
  /* Burada yazı yok, yalnız halkalar (~0,13 s taşıyor) — ve her piksel
     terminalin. Halka bir iki piksel komşuya değerse değsin. */
  margin-block: calc(var(--ae-s) * .1);
}
.ae__orbkutu .orb2 {
  transition: transform .06s linear,
              width .38s var(--ae-ease), height .38s var(--ae-ease),
              filter .3s var(--ae-ease);
}
@media (prefers-reduced-motion: reduce) {
  .ae__orbkutu .orb2 { transition: none; }
}
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__akis.dolu { height: 8vh; }
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__akis { margin-top: 4px; }
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__isler { margin-top: 4px; }
/* Liste terminalin ÜSTÜNDEN yer alıyor, o yüzden dar ve kendi içinde
   kayıyor. Zaten terminal açılırken kapanıyor (ana-ekran.js
   `_terminalAc`): liste bir SEÇİCİ, kalıcı bir pano değil. */
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__isler.acik .ae__isliste { max-height: 16vh; }

.anaekran[data-tahta="1"] .ae__tahta,
.anaekran[data-term="1"] .ae__terminal {
  grid-row: 5;                      /* kardeş sayısından BAĞIMSIZ */
  width: min(1180px, 94vw); height: 100%; min-height: 0;
  margin: 8px 0 2px;
}
.anaekran[data-term="1"] .ae__termsahne { min-height: 0; max-height: none; }
.anaekran[data-term="1"] .ae__termekran { max-height: none; min-height: 0; }

/* Biten işler sütunu terminalin YANINDA duramaz: sütun sağda 268px + 22px
   yer tutuyor, ortalanmış bir pencere oraya girdiği anda ya pencere daralıyor
   ya da ikisi üst üste biniyor. Terminal açıkken sütun kalkıyor; sayısı üst
   çizgide durmaya devam ediyor ("2 rapor"), ve pencere kapanınca sütun aynı
   anda geri geliyor. */
.anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__sutun { display: none; }

/* Pane'in kendi düğmeleri BURADA GÖRÜNMEZ. Mira: *"sol üst ile sağ üstte
   terminalin pane ekle, tam ekran ve çarpı butonları var ya, onlar burada
   görünmesin."* Üçü de çalışma alanının düğmesi ve ikisi burada tehlikeli:
   ✕ pane'i kapatır (ödünç aldığımız hücreyi), ⛶ pane'i çalışma alanının
   üstünde tam ekran yapar — yani orb ekranının arkasında, görünmeyen bir
   yerde. Gizleme YALNIZ burada; hücre yerine dönünce düğmeleri geri gelir,
   çünkü kural hücrenin kendisine değil bu sahneye yazılı.

   Üç sınıf seçici: `.shell-cell:hover .shell-cell__add-pane` da iki
   sınıflık, eşitlikte kaynak sırası karar verirdi. */
.anaekran .ae__termsahne .shell-cell__add-pane,
.anaekran .ae__termsahne .shell-cell__full-pane,
.anaekran .ae__termsahne .shell-cell__close-pane { display: none; }


/* ---- TAHTA: Jervis'in GÖSTERDİĞİ şey, orb'un altında (22 Eyl) -----------
   Mira: *"Jervis bir şey söylerken, atıyorum, bize bir tablo göstermesi
   gerekiyor. Bir analiz … kopyalamamız gereken bir link … Orb yukarıya
   doğru çıkacak, aşağıda boş bir alan çıkacak. Böyle gri. … dosya, text,
   resim, liste gösterebileceği bir alan … hepsi motion, blur efektiyle
   beraber olacak. Çok smooth ve çok blur'lu ve fade efektleriyle."*

   Terminal penceresiyle AYNI ikinci hâl (`data-tahta="1"`: orb tepeye,
   küçük; tahta 5. satırda kalan her şeyi alır). İçerik markdown (md.js:
   tablo, liste, çitli kod + Kopyala, bağ, resim) — ve her blok bulanıktan
   netliğe, sırayla beliriyor. Zemin gri ve arkasındaki video bulanık
   görünüyor: pencere ekranı ele geçirmiyor, üstünde duruyor. */
.ae__tahta {
  position: relative; z-index: 4;
  margin-top: 14px; width: min(940px, 92vw);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); gap: 0;
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(150, 156, 168, .17), rgba(112, 118, 130, .13));
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
          backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07);
  /* Giriş: bulanık + soluk + biraz aşağıdan. `.acik` yazılınca netleşiyor,
     `.gidiyor` ile aynı yoldan geri gidiyor. Geçişler uzun (.55 sn) çünkü
     istenen şey "smooth"; kelime animasyonu (.36) ondan kısa kalmalı. */
  opacity: 0; filter: blur(16px); transform: translateY(22px) scale(.982);
  transition: opacity .55s var(--ae-ease), filter .55s var(--ae-ease),
              transform .55s var(--ae-ease);
  will-change: opacity, filter, transform;
}
.ae__tahta[hidden] { display: none; }
.ae__tahta.acik { opacity: 1; filter: blur(0); transform: none; }
.ae__tahta.gidiyor { opacity: 0; filter: blur(12px); transform: translateY(-10px) scale(.99); }
.ae__tahtaust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 10px 12px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ae__tahtaad {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 11px/1.3 var(--ae-mono); letter-spacing: .08em;
  text-transform: uppercase; color: rgba(232, 236, 244, .62);
}
.ae__tahtadugmeler { display: flex; align-items: center; gap: 6px; flex: none; }
.ae__tahtakapa, .ae__tahtatam {
  flex: none; height: 26px; padding: 0 8px;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  color: rgba(232, 236, 244, .62); font: 500 11.5px/1 var(--ae-mono); letter-spacing: .04em;
  transition: background .22s var(--ae-ease), color .22s var(--ae-ease);
}
.ae__tahtakapa { width: 26px; padding: 0; font-size: 13px; }
.ae__tahtakapa:hover, .ae__tahtatam:hover { background: rgba(255, 255, 255, .09); color: var(--ae-fg); }
.ae__tahtagovde {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 18px 22px 24px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
  color: rgba(236, 239, 245, .92);
  font: 400 15px/1.6 ui-sans-serif, "Inter", system-ui, sans-serif;
}
/* Her üst düzey blok kendi sırasıyla beliriyor: bulanıktan netliğe,
   hafif yukarı. `--i` ana-ekran.js `_tahtaCiz` tarafından yazılıyor. */
.ae__tahtagovde .md > * {
  animation: ae-blok .62s var(--ae-ease) both;
  animation-delay: calc(min(var(--i, 0), 14) * 85ms + 120ms);
}
@keyframes ae-blok {
  from { opacity: 0; filter: blur(9px); transform: translateY(10px); }
  60%  { filter: blur(1.5px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
/* md.js'in koyu pencere paleti (master-orb.css) burada gri camın üstünde:
   yalnız yer/boşluk farkı. */
.ae__tahtagovde .md__h { margin: 14px 0 6px; font-weight: 600; color: rgba(240, 243, 248, .95); }
.ae__tahtagovde .md > .md__h:first-child { margin-top: 0; }
.ae__tahtagovde .md__p { margin: 0 0 10px; }
.ae__tahtagovde .md__table { border-collapse: collapse; width: 100%; margin: 6px 0 12px; font-size: 14px; }
.ae__tahtagovde .md__table th, .ae__tahtagovde .md__table td {
  padding: 7px 10px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ae__tahtagovde .md__table th { font-weight: 600; color: rgba(240, 243, 248, .9); background: rgba(255, 255, 255, .05); }
.ae__tahtagovde .md__list { margin: 0 0 10px; padding-left: 22px; }
.ae__tahtagovde .md__list li { margin: 3px 0; }
.ae__tahtagovde .md__quote { margin: 8px 0; padding: 4px 12px; border-left: 2px solid rgba(255, 255, 255, .2); color: rgba(232, 236, 244, .78); }
.ae__tahtagovde .md__block { position: relative; margin: 8px 0 12px; }
.ae__tahtagovde .md__pre {
  margin: 0; padding: 12px 88px 12px 14px; overflow: auto;
  border-radius: 10px; background: rgba(8, 10, 14, .55); border: 1px solid rgba(255, 255, 255, .08);
  font: 13px/1.5 var(--ae-mono); color: rgba(236, 239, 245, .92); white-space: pre;
}
.ae__tahtagovde .md__copy {
  position: absolute; top: 8px; right: 8px; padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, .09); color: rgba(236, 239, 245, .9);
  font: 500 11px/1.2 var(--ae-mono); letter-spacing: .03em;
}
.ae__tahtagovde .md__copy:hover { background: rgba(255, 255, 255, .16); }
.ae__tahtagovde code { font: 13px/1.4 var(--ae-mono); background: rgba(255, 255, 255, .08); padding: 1px 5px; border-radius: 5px; }
.ae__tahtagovde .md__pre code { background: none; padding: 0; }
.ae__tahtagovde a { color: #9ec3ff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(158, 195, 255, .45); }
.ae__tahtagovde a:hover { text-decoration-color: currentColor; }
/* Bağın yanındaki "kopyala" çipi: tıklamak açmak değildir, WhatsApp'a
   yapıştıracak kişi adresi açmak istemiyor. */
.ae__tahtagovde .ae__bagkop {
  margin-left: 6px; padding: 1px 7px; vertical-align: 1px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: rgba(236, 239, 245, .78);
  font: 500 10px/1.3 var(--ae-mono); letter-spacing: .04em;
}
.ae__tahtagovde .ae__bagkop:hover { background: rgba(255, 255, 255, .15); }
.ae__tahtagovde .md__fig { margin: 8px 0 12px; }
.ae__tahtagovde .md__fig img {
  display: block; max-width: 100%; max-height: 52vh; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .25);
}
.ae__tahtagovde .md__fig figcaption { margin-top: 5px; font-size: 12px; color: rgba(232, 236, 244, .6); }
.ae__tahtagovde .md__senden {
  margin: 0 0 14px; padding: 10px 14px 6px; border-radius: 12px;
  border: 1px solid rgba(240, 190, 90, .45); background: rgba(240, 190, 90, .07);
}
.ae__tahtagovde .md__senden-etiket {
  font: 600 10.5px/1.3 var(--ae-mono); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240, 200, 120, .95); margin-bottom: 6px;
}
.ae__tahtagovde .md__senden.is-bos { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
.ae__tahtagovde .md__senden.is-bos .md__senden-etiket { color: rgba(232, 236, 244, .5); }
.ae__tahtagovde .md__senden.is-bos .md__senden-govde { color: rgba(232, 236, 244, .55); }
.ae__tahtagovde hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 12px 0; }
/* Tahtada orb terminaldekinden biraz daha büyük kalıyor: tahtaya bakarken
   konuşuluyor, ve konuşulan şeyin ölçüsü 60 px'lik bir nokta olmamalı. */
.anaekran[data-tahta="1"] .ae__orbkutu { --ae-s: clamp(76px, 10vmin, 116px); }
.anaekran[data-tahta="1"] .ae__tahta { width: min(1080px, 94vw); height: 100%; min-height: 0; margin: 10px 0 2px; }

/* ---- TERMİNAL IZGARASI: hepsi birden, orb'un altında (22 Eyl) -----------
   Mira: *"Orb'un altında açılan UI var ya, hani [Jervis] kontrol edebiliyor
   bunu. Burayı isterse … terminaller açabilir. Bütün terminalleri oraya
   yığabilir … Terman'ın eski UI'ında terminals kısmında terminaller
   görünüyor ya, aynı şekilde burada da görünebilir şekilde yapabilsin
   Jervis. … hepsini de ben sağ üstten tıklayarak tam ekran yapabileyim. Ama
   tam ekran, bütün tam ekran olmasın; sadece o Jervis'in açtığı arkası
   transparent ve yeni yaptığımız UI … Terminalin sağ üstünde de çarpı
   olunca tekrardan aynı şekilde bütün terminaller geri gelsin. Bu olayların
   hepsi smooth motion blur ve fade efektleriyle olsun."*

   Pencere TAHTANIN kabuğunu giyiyor (aynı gri cam, aynı 5. satır, aynı
   giriş/çıkış geçişi) çünkü Mira'nın tarif ettiği yer o: *"yeni yaptığımız
   UI"*. Değişen şey içerik — markdown yerine gerçek terminaller. */
.ae__izgara {
  position: relative; z-index: 4;
  margin-top: 14px; width: min(940px, 92vw);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); gap: 0;
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(150, 156, 168, .17), rgba(112, 118, 130, .13));
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
          backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07);
  opacity: 0; filter: blur(16px); transform: translateY(22px) scale(.982);
  transition: opacity .55s var(--ae-ease), filter .55s var(--ae-ease),
              transform .55s var(--ae-ease);
  will-change: opacity, filter, transform;
}
.ae__izgara[hidden] { display: none; }
.ae__izgara.acik { opacity: 1; filter: blur(0); transform: none; }
.ae__izgara.gidiyor { opacity: 0; filter: blur(12px); transform: translateY(-10px) scale(.99); }
.ae__izust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 10px 12px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ae__izad {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 11px/1.3 var(--ae-mono); letter-spacing: .08em;
  text-transform: uppercase; color: rgba(232, 236, 244, .62);
}
.ae__izdugmeler { display: flex; align-items: center; gap: 8px; flex: none; }
.ae__izsay { font: 500 10.5px/1 var(--ae-mono); color: rgba(232, 236, 244, .4); letter-spacing: .05em; }
.ae__izkapa {
  flex: none; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  color: rgba(232, 236, 244, .62); font-size: 13px; line-height: 1;
  transition: background .22s var(--ae-ease), color .22s var(--ae-ease);
}
.ae__izkapa:hover { background: rgba(255, 255, 255, .09); color: var(--ae-fg); }

/* SAHNE: kutular buraya MUTLAK yerleşiyor, CSS ızgarasıyla değil.

   Sebep tek cümlede: tam ekran bir `grid-area` değişimi olsaydı geçiş
   OLMAZDI — ızgara yerleşimi geçişli (transition) bir özellik değil, yani
   kutu büyüyerek değil ışınlanarak tam ekran olurdu, ve Mira'nın istediği
   şey tam olarak o geçişin kendisi (*"smooth motion blur ve fade"*). Dört
   sayı (left/top/width/height) yüzdeyle verildiğinde aynı yerleşim
   KAYARAK kuruluyor; sayıları ana-ekran.js `izgaraYer()` yazıyor. */
.ae__izsahne {
  position: relative; min-height: 0; padding: 10px;
  /* KAYDIRMA (22 Eyl). Mira: *"çok fazla oldukları zaman telefonda … bir
     şey yaz yuvasının altında kalıyorlar … scroll ekle ki … gezinebilelim.
     Çok fazla terminal olduğu zaman bug'a girmesin."* Taşan şey PENCERENİN
     DIŞINA değil buraya taşıyor: alttaki yazı kutusu ve alt şerit yerinde
     kalıyor. Yatayda taşma YOK — sütunlar her zaman sığıyor, ve yatay bir
     çubuk telefonda dikey kaydırmayı yanlışlıkla yakalar. */
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Çubuk için yer HER ZAMAN ayrılıyor: çubuk çıkıp kaybolduğunda sahnenin
     genişliği değişiyor, genişlik sütun sayısını belirliyor (bkz.
     `IZ_TEK_SUTUN_PX`) ve sütun sayısı satır sayısını — yani çubuğun
     kendisi kendi varlığını tetikleyebilirdi. */
  scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
/* Kutuların TABANI. Yüzdeyle verilen yerleşim (ana-ekran.js `izgaraYer`)
   bu katın boyunu ölçü alıyor, o yüzden "kaydırılsın" demek tek bir satır:
   katı uzat (`_izYerlestir` → `style.height`), kutular kendiliğinden doğru
   yere düşer. Yerleşim matematiğinin ikinci bir kopyası yok. */
.ae__izic { position: relative; height: 100%; min-height: 100%; }
.ae__izbos {
  margin: 0; padding: 22px 6px; text-align: center;
  font: 400 13px/1.5 ui-sans-serif, system-ui, sans-serif; color: rgba(232, 236, 244, .45);
}

/* Bir terminal kutusu. Giriş kendi sırasıyla (bulanıktan netliğe), yer
   değiştirmesi geçişle, sönmesi fade + blur ile. */
.ae__izkart {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); gap: 0;
  min-width: 0; min-height: 0; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  background: rgba(7, 9, 13, .62);
  opacity: 1; filter: blur(0);
  /* Dört ölçü + opaklık + bulanıklık: "motion blur ve fade" bu satır.
     Yer değiştirme (.52) bulanıklıktan (.42) uzun tutuldu — kutu durduğu
     anda değil, durmadan HEMEN ÖNCE netleşsin. */
  transition: left .52s var(--ae-ease), top .52s var(--ae-ease),
              width .52s var(--ae-ease), height .52s var(--ae-ease),
              opacity .42s var(--ae-ease), filter .42s var(--ae-ease),
              border-color .3s var(--ae-ease);
  will-change: left, top, width, height, opacity, filter;
  /* GİRİŞ animasyonu `backwards`, `both` DEĞİL — ve bu fark ölçüldü
     (22 Eyl, headless Chrome, gerçek CSS). `both` fill-mode animasyon
     bittikten SONRA da son kareyi tutuyor, ve bir CSS animasyonu satır içi
     stili de sınıfı da EZER: `.solgun` yazılmış bir kutunun hesaplanan
     opaklığı 1, bulanıklığı 0 kalıyordu — yani hem sönme (fade) hem
     motion blur sessizce ölüydü. `backwards` yalnız BAŞLAMADAN önce
     geçerli; animasyon bitince kutu kendi sınıflarına dönüyor. */
  animation: ae-izgir .5s var(--ae-ease) backwards;
}
@keyframes ae-izgir {
  from { opacity: 0; filter: blur(10px); transform: scale(.975); }
  60%  { filter: blur(1.5px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
.ae__izkart.hot { border-color: rgba(224, 185, 60, .42); }
.ae__izkart.sessiz { border-color: rgba(224, 120, 90, .3); }
.ae__izkart.hata { border-color: rgba(224, 185, 60, .4); }
.ae__izkart.tam { z-index: 3; }

/* MOTION BLUR: sınıf sahnede ve YALNIZ geçiş sürerken duruyor
   (ana-ekran.js `_izYerlestir` → IZ_GECIS_MS). Hareket eden şey bulanık,
   duran şey net; bulanıklık kutunun kendi `filter` geçişiyle inip
   çıkıyor, yani ayrı bir keyframe'e gerek yok. */
.ae__izsahne.hareket .ae__izkart { filter: blur(5px); }
/* Tam ekrandaki kutunun DIŞINDAKİLER sönüyor — ama AĞAÇTA KALIYOR
   (`display:none` DEĞİL): görünmeyen bir kabın içindeki xterm ölçüsünü
   kaybeder ve geri dönüşte terminal 0×0 açılır. */
.ae__izkart.solgun { opacity: 0; filter: blur(14px); pointer-events: none; }
/* Dört sınıflık seçici gerekiyor: `.ae__izsahne.hareket .ae__izkart` üç
   sınıf, `.ae__izkart.solgun` iki — sönen kutu geçiş sırasında yanlışlıkla
   netleşirdi. */
.ae__izsahne.hareket .ae__izkart.solgun { filter: blur(16px); }

.ae__izkartust {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0; padding: 5px 5px 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ae__izkartad {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 9.5px/1.3 var(--ae-mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ae-dim2);
}
.ae__izkart.hot .ae__izkartad { color: rgba(224, 185, 60, .9); }
.ae__izkart.sessiz .ae__izkartad { color: var(--ae-dim3); }
/* SAĞ ÜST. Aynı düğme iki iş görüyor: ızgarada ⛶ (tam ekran yap), tam
   ekranda ✕ (bütün terminaller geri gelsin) — Mira ikisini de "sağ üstten"
   diye tarif etti, yani aynı yer. */
.ae__izkarttam {
  flex: none; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--ae-dim2); font-size: 11px; line-height: 1;
  transition: background .22s var(--ae-ease), color .22s var(--ae-ease);
}
.ae__izkarttam:hover { background: rgba(255, 255, 255, .1); color: var(--ae-fg); }
.ae__izkart.tam .ae__izkarttam { color: rgba(232, 236, 244, .8); }
/* YAZI BOYU (24 Eyl): A− / A+, ⛶'nin hemen solunda. Mira: *"sağ üst[te]
   küçük bir butonla … yazı büyüklüğünü ayarlayabil[eyim]."* ⛶ ile aynı
   ölçü ve aynı sessizlik — köşe bir araç çubuğu olmasın, üç küçük işaret
   olsun. Boy ana-ekran.js `_izYaziAdim`de; ızgara ve tam ekran ayrı. */
.ae__izkartdugmeler { display: flex; align-items: center; gap: 1px; flex: none; }
.ae__izkartyazi {
  flex: none; min-width: 22px; height: 22px; padding: 0 3px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--ae-dim2); font: 600 9.5px/1 var(--ae-mono); letter-spacing: .02em;
  transition: background .22s var(--ae-ease), color .22s var(--ae-ease),
              opacity .22s var(--ae-ease);
}
.ae__izkartyazi:hover { background: rgba(255, 255, 255, .1); color: var(--ae-fg); }
.ae__izkartyazi:disabled { opacity: .3; cursor: default; background: none; color: var(--ae-dim2); }
.ae__izkart.tam .ae__izkartyazi { min-width: 24px; height: 24px; font-size: 10.5px; color: rgba(232, 236, 244, .8); }

/* GERÇEK xterm buraya taşınıyor — terminal penceresiyle aynı teknik ve aynı
   gerekçe (`.ae__termsahne` notuna bak): ödünç alınan `.shell-cell` pane
   ızgarasından gelen SATIR İÇİ `grid-column`/`grid-row` stillerini yanında
   getiriyor, o yüzden sahne FLEX ve hücrenin kendi dolgusu/kenarlığı
   burada nötrleniyor (çerçeveyi kutu çiziyor). */
.ae__izkartsahne { position: relative; min-width: 0; min-height: 0; display: flex; overflow: hidden; }
.ae__izkartsahne > .shell-cell {
  flex: 1; display: flex; min-width: 0; min-height: 0;
  padding: 0; border: 0; border-radius: 0;
}
.ae__izkartsahne > .shell-cell > .shell-cell__host { flex: 1; height: 100%; }
.ae__izkartsahne:empty { display: none; }
/* Pane'in kendi düğmeleri BURADA GÖRÜNMEZ — terminal penceresindeki aynı
   kural, aynı iki tehlike: ✕ ödünç aldığımız pane'i kapatır, ⛶ onu orb
   ekranının ARKASINDA tam ekran yapar (yani görünmeyen bir yerde). Kural
   sahneye yazılı, hücrenin kendisine değil: hücre evine dönünce düğmeleri
   geri gelir. */
.anaekran .ae__izkartsahne .shell-cell__add-pane,
.anaekran .ae__izkartsahne .shell-cell__full-pane,
.anaekran .ae__izkartsahne .shell-cell__close-pane { display: none; }

/* Yedek görünüm: pane bu tarayıcıda açık değilse ekranın FOTOĞRAFI.
   Satırlar KIRILMIYOR — terminal çıktısının hizası bilgi taşıyor. */
.ae__izkartekran {
  margin: 0; padding: 8px 10px; min-height: 0;
  overflow: auto; overscroll-behavior: contain;
  font: 400 10px/1.4 var(--ae-mono); color: rgba(232, 236, 244, .78);
  white-space: pre; tab-size: 4;
  scrollbar-width: thin; scrollbar-color: var(--ae-line2) transparent;
}
.ae__izkartekran[hidden] { display: none; }
/* Tam ekranda yazı okunabilir boya çıkıyor: küçük kutuda 10 px bir
   "burada bir terminal var" işareti, tam ekranda okunacak metin. */
.ae__izkart.tam .ae__izkartekran { font-size: 11.5px; line-height: 1.45; padding: 10px 12px; }
.ae__izkart.tam .ae__izkartad { font-size: 10.5px; }
.ae__izkart.tam .ae__izkarttam { width: 24px; height: 24px; font-size: 12px; }

/* Izgara açıkken orb tahtadaki ölçüsünde: buraya bakarken de konuşuluyor. */
.anaekran[data-izgara="1"] .ae__orbkutu { --ae-s: clamp(76px, 10vmin, 116px); }
.anaekran[data-izgara="1"] .ae__izgara {
  grid-row: 5;                      /* kardeş sayısından BAĞIMSIZ */
  width: min(1180px, 94vw); height: 100%; min-height: 0; margin: 10px 0 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ae__izgara, .ae__izkart { transition: none; animation: none; }
  .ae__izsahne.hareket .ae__izkart { filter: blur(0); }
  .ae__izsahne.hareket .ae__izkart.solgun { filter: blur(0); }
}

/* ---- BİTEN İŞLER sütunu ------------------------------------------------ */
/* Bugünkü `usta-inbox`ın aynısı: BAŞLIK ve başka hiçbir şey. Kartın altına
   raporun ilk satırını koymak denendi ve geri alındı — birkaç kartta sütun
   ekranı ele geçiriyor (usta-panel.js, 6 Ağu). */
.ae__sutun {
  position: absolute; z-index: 6; top: 64px; right: 22px; width: 268px;
  display: grid; gap: 8px; align-content: start;
  max-height: calc(100dvh - 210px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--ae-line2) transparent;
}
.ae__sutun[hidden] { display: none; }
/* SÜRÜM ŞERİDİ — açık duran sayfaya "yenilen" demenin tek yolu (14 Eyl).
   Kehribar ve tıklanabilir: bu bir durum satırı değil, YAPILACAK bir şey.
   Üstte, orb'un önünde; kaçırılması bu şeridin var olma sebebini yok eder. */
.ae__surum {
  position: absolute; z-index: 9; top: 52px; left: 50%; transform: translateX(-50%);
  border: 1px solid rgba(224, 185, 60, .5); border-radius: 999px;
  background: rgba(30, 25, 12, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(224, 185, 60, .95); cursor: pointer;
  font: 500 11.5px/1 var(--ae-mono); letter-spacing: .04em;
  padding: 9px 15px; white-space: nowrap;
  animation: ae-gir .45s var(--ae-ease) both, ae-parla 1.6s var(--ae-ease) .3s 2;
}
.ae__surum:hover { background: rgba(40, 33, 15, .96); }
.ae__surum[hidden] { display: none; }
@media (max-width: 760px) {
  .ae__surum { top: 46px; font-size: 11px; padding: 8px 13px; }
}

.ae__sutunbas {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ae__sutunad {
  font: 500 9.5px/1 var(--ae-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ae-dim2); padding-left: 2px;
}
.ae__sutunad[hidden] { display: none; }

/* GEÇMİŞ — sütunun ✕'lenmiş hâline açılan kapı (14 Eyl).
   Çok soluk ve bilerek: bu bir eylem değil bir çıkış yolu, ve kartların
   yanında durduğunda onlarla yarışmamalı. Kart yokken sütunun ekranda
   kalan TEK parçası bu kelime — o yüzden o hâlde sağa değil, kenara
   yaslanıyor ve altında hiçbir şey yok. */
.ae__gecmis {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  font: 500 9.5px/1 var(--ae-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ae-dim2); opacity: .48; transition: opacity .18s, color .18s;
}
.ae__gecmis:hover { opacity: 1; color: var(--ae-dim); }
.ae__gecmis[hidden] { display: none; }
.ae__sutun--yalnizgecmis { gap: 0; }
.ae__sutun--yalnizgecmis .ae__sutunbas { justify-content: flex-end; }

/* Geçmiş listesi — rapor penceresinin kabuğu içinde. */
.ae-gecmis__govde { display: grid; gap: 6px; }
.ae-gecmis__bos {
  color: var(--ae-dim2); font-size: 13px; padding: 6px 2px;
}
.ae-gecmis__satir {
  display: grid; gap: 3px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--ae-line); border-radius: 8px;
  background: rgba(17, 21, 29, .5); color: inherit; font: inherit;
  transition: border-color .18s, background .18s;
}
.ae-gecmis__satir:hover { border-color: var(--ae-line2); background: rgba(17, 21, 29, .8); }
.ae-gecmis__meta {
  font: 500 9px/1 var(--ae-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ae-dim2);
}
.ae-gecmis__ad {
  font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Okunmuş satır SOLUK ama silik değil: bu listenin var olma sebebi tam da
   okunmuş olanı geri bulabilmek. */
.ae-gecmis__satir--okundu .ae-gecmis__ad { color: var(--ae-dim); }
.ae-gecmis__satir--hata { border-color: rgba(192, 85, 74, .45); }
.ae-gecmis__satir--hata .ae-gecmis__meta { color: #e08a7e; }
.ae__liste { display: grid; gap: 8px; }
.ae__kart {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; border: 1px solid var(--ae-line); border-radius: 9px;
  background: rgba(17, 21, 29, .82);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  color: inherit; font: inherit; font-size: 13px; line-height: 1.35;
  transition: border-color .18s, transform .18s var(--ae-ease), background .18s;
  animation: ae-gir .5s var(--ae-ease) both;
}
.ae__kart:hover { border-color: var(--ae-line2); transform: translateX(-2px); }
.ae__kartust {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
  font: 500 9px/1 var(--ae-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ae-dim2);
}
.ae__kartust i { width: 4px; height: 4px; border-radius: 50%; background: var(--ae-green); flex: none; }
.ae__kartad {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ae__kart--soru { border-color: rgba(224, 185, 60, .42); background: rgba(30, 25, 12, .74); }
.ae__kart--soru .ae__kartust { color: rgba(224, 185, 60, .85); }
.ae__kart--soru .ae__kartust i { background: var(--ae-amber); box-shadow: 0 0 6px rgba(224,185,60,.8); }
.ae__kart--acil { border-color: rgba(192, 85, 74, .6); background: rgba(36, 16, 14, .8); }
.ae__kart--acil .ae__kartust { color: #e08a7e; }
.ae__kart--acil .ae__kartust i { background: var(--ae-red); box-shadow: 0 0 7px rgba(192,85,74,.9); }
.ae__kart.yeni { animation: ae-gir .5s var(--ae-ease) both, ae-parla 1.5s var(--ae-ease) .2s 1; }
@keyframes ae-parla {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 185, 60, 0); }
  22%      { box-shadow: 0 0 0 1px rgba(224, 185, 60, .8), 0 0 22px rgba(224, 185, 60, .22); }
}

/* Orb'dan yeni karta inen ışın. Uçları JS'te ÖLÇÜLÜYOR — yerleşim
   değişince (telefonda sütun orb'un altına iner) sabit bir açı yanlış yeri
   gösterirdi. */
.ae__isin { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* DURAĞAN hâl GÖRÜNMEZ olmak zorunda, ve bu bir ayrıntı değil: animasyonun
   `fill-mode`u yok (bir kez çalışır ve biter), yani biter bitmez eleman bu
   kurala geri dönüyor. Eski hâli `stroke-dasharray: 1 1000` +
   `stroke-linecap: round` idi — yani yolun BAŞINDA, orb'un tam merkezinde,
   1 piksellik yuvarlak bir kehribar NOKTA. Işın bir kez attıktan sonra
   `d` yerinde kaldığı için o nokta ekranın ortasında asılı kalıyordu
   (Mira, 8 Eyl: *"ekranın tam ortasında böyle minicik bir nokta gibi bir
   şey var, efekt olmamasına rağmen"*). Animasyon kendi opaklığını zaten
   kendi yazıyor (0 → 1 → 0), o yüzden ışın bundan etkilenmiyor. */
.ae__isin path {
  fill: none; stroke: rgba(224, 185, 60, .75); stroke-width: 1.2;
  stroke-dasharray: 0 1000; stroke-linecap: round; opacity: 0;
}
.ae__isin.at path { animation: ae-aksin 1.05s cubic-bezier(.3, .1, .2, 1) 1; }
@keyframes ae-aksin {
  0%   { stroke-dasharray: 0 1000; stroke-dashoffset: 0;    opacity: 0; }
  16%  { opacity: 1; }
  60%  { stroke-dasharray: 130 1000; stroke-dashoffset: -60; opacity: .9; }
  100% { stroke-dasharray: 0 1000; stroke-dashoffset: -400;  opacity: 0; }
}

/* ---- giriş: SIVI CAM (23 Eyl) ------------------------------------------ */
/* Mikrofon zaten yol; bu, mikrofonun taşıyamadığı tek şey için: hata
   metni, yol, kimlik. Dikte etmek onları yavaşlatmıyor, BOZUYOR.

   Mira, 23 Eyl: *"olabildiğince böyle görünmez kılmak istiyorum o kısmı. Ta
   ki tıklanana kadar."* Beş tasarımdan "Sıvı cam"ı seçti
   (assets/orb-giris-designs.html#1): dinlenirken kutu renksiz, buğusuz bir
   mercek — görünen tek şey kenarda hafifçe bükülen yıldızlar ve üst kenarda
   saç teli kadar bir ışık; içerik YOK. Dokununca cam buzlanıyor, içerik
   blur'dan çıkıyor. Açık/kapalı `data-acik`, kararı ana-ekran.js
   `_girisKur` veriyor.

   KURAL: kutunun KENDİSİNE backdrop-filter / opacity / filter / clip-path /
   mask YAZMA. Her biri kutuyu "backdrop root" yapar ve içindeki cam
   katmanları arkadaki galaksi yerine boşluğu görür — saydam, ölü bir kutu.
   Cam ve buz kutunun doğrudan çocukları, geçişler onların KENDİSİNDE.
   (Tanrı sorgusunun sönmesi kutuya filter yazıyor — o 1,4 sn camın sönük
   görünmesi zararsız, zaten karanlığa gidiyor.) */
.ae__giris {
  position: relative; z-index: 5; justify-self: center;
  display: flex; align-items: center; gap: 8px;
  width: min(620px, 88vw); height: 46px; margin: 0 auto 14px;
  padding: 0 7px 0 8px;
  border-radius: 999px;
  --ae-cam-sag: 0px;
}
/* Çağrı sürerken Bitir camın SAĞINDA kendi dairesi; cam o kadar kısalıyor
   (46 px daire + 10 px aralık; açıkken 88 px kapsül + 10). Toplam en
   bugünküyle aynı, yani ikili ortada kalıyor. */
.anaekran[data-cagri="1"] .ae__giris { padding-right: 0; --ae-cam-sag: 56px; }
.anaekran[data-cagri="1"] .ae__giris[data-acik="1"] { --ae-cam-sag: 98px; }
.ae__cam, .ae__buz {
  position: absolute; top: 0; bottom: 0; left: 0; right: var(--ae-cam-sag);
  border-radius: inherit; pointer-events: none; z-index: 0;
}
/* A — kırılma. İlk iki satır Safari'nin (url() bükülmesini çizmeyen) düz
   camı; üçüncüsü Chromium'un merceği. Filtre ve harita ana-ekran.js +
   cam-kirilma.js. Değerler dinlenirken NEREDEYSE nötr: saydamlık istenen şey. */
.ae__cam {
  background: rgba(255, 255, 255, .006);
  backdrop-filter: blur(.3px) saturate(1.15) brightness(1.03);
  -webkit-backdrop-filter: blur(.3px) saturate(1.15) brightness(1.03);
  backdrop-filter: url(#ae-kirilma) blur(.3px) saturate(1.15) brightness(1.03);
  transition: right .45s var(--ae-ease), box-shadow .55s var(--ae-ease);
}
/* İnce kenar: üstte parlak, altta sönük — ışık yukarıdan, orb'dan. */
.ae__cam::after, .ae__bitircam::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(172deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .07) 34%,
                              rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5; transition: opacity .55s var(--ae-ease);
}
/* B — buz: açılınca gelen buzlanma. Opaklığı KENDİSİNDE geçiyor (A'nın
   üstünde duran ikinci bir cam; A'yı değiştirmek url() yüzünden geçişsiz
   olurdu — url()'li filtre listesi ara değer almaz). */
.ae__buz {
  background: rgba(22, 24, 40, .16);
  backdrop-filter: blur(16px) saturate(1.7) brightness(.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -8px 18px rgba(255, 255, 255, .025);
  opacity: 0;
  transition: opacity .55s var(--ae-ease), right .45s var(--ae-ease);
}
.ae__giris[data-acik="1"] .ae__buz { opacity: 1; }
.ae__giris[data-acik="1"] .ae__cam { box-shadow: 0 14px 44px rgba(0, 0, 0, .32); }
.ae__giris[data-acik="1"] :is(.ae__cam, .ae__bitircam)::after { opacity: 1; }
@media (hover: hover) {
  .ae__giris[data-acik="0"]:hover .ae__cam::after { opacity: .8; }
}
/* Dinlenirken bütün kutu TEK bir vuruş alanı: görünmeyen şeye nişan almak
   yok, kutunun olduğu yere dokunmak yeter. Bitir'in dairesini örtmez. */
.ae__girisvur {
  position: absolute; top: -12px; bottom: -12px; left: -6px;
  right: calc(var(--ae-cam-sag) - 6px); z-index: 3;
  -webkit-appearance: none; appearance: none; cursor: text;
  border: 0; border-radius: 999px; background: none; padding: 0;
}
.ae__giris[data-acik="1"] .ae__girisvur { display: none; }
.ae__camfiltre { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* İçerik camın ÜSTÜNDE. Model menüsü kendi (absolute) yerini tutuyor. */
.ae__giris > :not(.ae__cam):not(.ae__buz):not(.ae__girisvur):not(.ae__modelmenu) {
  position: relative; z-index: 1;
}
.ae__giris input {
  flex: 1; min-width: 0; align-self: stretch; border: 0; background: none; color: inherit;
  font: inherit; font-size: 14px; outline: none;
}
.ae__giris input::placeholder { color: var(--ae-dim3); }
.ae__dugme {
  flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ae-line); background: none; color: var(--ae-dim);
  display: grid; place-items: center; font-size: 13px;
  transition: border-color .15s, color .15s, background .15s;
}
.ae__dugme:hover { border-color: var(--ae-line3); color: var(--ae-fg); }
.ae__dugme--mik.acik {
  border-color: rgba(255,123,107,.7); color: #ff7b6b; background: rgba(255,123,107,.08);
}
/* Kutunun düğmeleri cam damla: çerçeve yok, içten ışık. */
.ae__giris .ae__dugme {
  border: 0; color: rgba(232, 236, 244, .8);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .25),
              0 2px 8px rgba(0, 0, 0, .2);
}
.ae__giris .ae__dugme:hover { background: rgba(255, 255, 255, .11); color: var(--ae-fg); }
.ae__giris .ae__dugme--mik.acik { color: #ff7b6b; background: rgba(255, 123, 107, .14); }

/* Açılış: içerik blur + fade ile, soldan sağa birer adım gecikmeyle; cam
   ÖNCE gelir (+120 ms). Kapanışta gecikme yok — hepsi birden söner.
   Gecikme yalnız görünme özelliklerine; hover rengi beklemesin. */
.ae__giris > :is(.ae__model, input, .ae__dugme), .ae__bitiryazi {
  --ae-gec: calc(var(--ae-i, 0) * 45ms + 120ms);
  transition: opacity .42s var(--ae-ease) var(--ae-gec), filter .42s var(--ae-ease) var(--ae-gec),
              transform .42s var(--ae-ease) var(--ae-gec),
              border-color .15s, color .15s, background .15s;
}
.ae__giris .ae__model { --ae-i: 0; }
.ae__giris input { --ae-i: 1; }
.ae__giris .ae__dugme--mik { --ae-i: 2; }
.ae__giris .ae__dugme--gonder { --ae-i: 3; }
.ae__bitiryazi { --ae-i: 2; }
.ae__giris[data-acik="0"] > :is(.ae__model, input, .ae__dugme),
.ae__giris[data-acik="0"] .ae__bitiryazi {
  --ae-gec: 0ms; opacity: 0; filter: blur(7px);
}
.ae__giris[data-acik="0"] > :is(.ae__model, .ae__dugme) { transform: scale(.86); }

/* Bitir: camın sağında ayrı bir cam daire. Dinlenirken saydam, ortasında
   küçük kırmızı bir nokta — "çağrı sürüyor" der, kırmızı bir düğme gibi
   bağırmaz. Dokununca "Bitir" yazan kırmızımsı cam kapsül. İlk dokunuş
   açar, ikincisi bitirir (EKRAN_AYAR.bitirIkiAdim). */
.ae__bitir {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  flex: none; margin-left: 9px;      /* 7 px kutu iç boşluğu + 10 px aralık − 8 px gap */
  display: grid; place-items: center;
  width: 88px; height: 46px; padding: 0; border: 0; border-radius: 999px; background: none;
  color: #e08a7e; font: inherit; font-size: 13.5px; letter-spacing: .01em;
  transition: width .45s var(--ae-ease);
}
.ae__giris[data-acik="0"] .ae__bitir { width: 46px; }
.ae__bitir[hidden] { display: none; }
.ae__bitircam {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(255, 255, 255, .006);
  backdrop-filter: blur(.4px) saturate(1.15) brightness(1.03);
  -webkit-backdrop-filter: blur(.4px) saturate(1.15) brightness(1.03);
  transition: background .5s var(--ae-ease), backdrop-filter .5s var(--ae-ease),
              -webkit-backdrop-filter .5s var(--ae-ease);
}
.ae__giris[data-acik="1"] .ae__bitircam {
  background: rgba(192, 85, 74, .13);
  backdrop-filter: blur(16px) saturate(1.6) brightness(.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.6) brightness(.86);
}
.ae__giris[data-acik="1"] .ae__bitir:hover .ae__bitircam { background: rgba(192, 85, 74, .22); }
.ae__bitirnokta {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(236, 128, 114, .85);
  box-shadow: 0 0 10px rgba(236, 110, 95, .6);
  transition: opacity .35s var(--ae-ease), transform .35s var(--ae-ease);
}
.ae__giris[data-acik="1"] .ae__bitirnokta { opacity: 0; transform: scale(.2); }
.ae__bitiryazi { position: relative; z-index: 1; white-space: nowrap; }
.ae__giris[data-acik="0"] .ae__bitiryazi { position: absolute; transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
  .ae__giris *, .ae__giris *::after {
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
}

/* ---- model seçici: yazı kutusunun SOLUNDAKİ logo (20 Eyl) --------------
   Mira: "bir şey yazan kısmının sol tarafında küçük bir ikon … kullandığımız
   yapay zekânın küçük bir logosu … tıklayarak Jervis'in altyapısını
   değiştirebilelim." Menü yukarı açılır — kutu ekranın dibinde. */
.ae__model {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--ae-dim);
  display: grid; place-items: center; padding: 0;
  transition: border-color .15s, background .15s, transform .15s;
}
.ae__model:hover, .ae__model[aria-expanded="true"] {
  border-color: var(--ae-line3); background: rgba(255,255,255,.04);
}
.ae__model:focus-visible { outline: 1px solid var(--ae-line3); outline-offset: 2px; }
.ae__model.is-mesgul { opacity: .5; transform: scale(.92); }
.ae-logo { width: 18px; height: 18px; display: block; }
.ae-logo--claude { color: #d97757; }
.ae-logo--codex  { color: #e8ecef; }
.ae-logo--gemini { color: #7aa7ff; }
.ae__modelmenu {
  position: absolute; left: 6px; bottom: calc(100% + 10px); z-index: 30;
  min-width: 240px; padding: 6px;
  border: 1px solid var(--ae-line2); border-radius: 14px;
  background: rgba(14, 18, 25, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  display: grid; gap: 2px;
  animation: ae-sol .18s var(--ae-ease, cubic-bezier(.2,.7,.2,1)) both;
}
.ae__modelmenu[hidden] { display: none; }
.ae__modelsat {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ae-fg);
  font: inherit;
  transition: background .12s;
}
.ae__modelsat:hover, .ae__modelsat:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.ae__modelsat.is-aktif { background: rgba(255,255,255,.04); }
.ae__modellogo { grid-row: 1 / span 2; display: grid; place-items: center; }
.ae__modelad { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.ae__modelalt { grid-column: 2; font: 500 10.5px/1.2 var(--ae-mono); color: var(--ae-dim3); letter-spacing: .02em; }
.ae__modelisaret { grid-row: 1 / span 2; grid-column: 3; font-size: 12px; color: var(--ae-dim); opacity: 0; }
.ae__modelsat.is-aktif .ae__modelisaret { opacity: 1; }

/* ---- alt şerit: konuşmanın durumu ------------------------------------- */
.ae__alt {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
  font: 500 11px/1 var(--ae-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ae-dim3);
}
/* Yükleme çubuğu (21 Eyl): alt satırın ALTINDA kendi satırı (flex-wrap ile
   %100 taban), ölçüleri MasterOrb kartındaki çubukla aynı (master-orb.css
   `.master-orb__upload*`) — aynı boru, ikinci yüz. Yüzde bilinmiyorsa
   gidip gelen şerit: "duruyor" demiyor, "yüzdesini bilmiyorum" diyor. */
.ae__yukleme {
  flex: 0 0 100%; display: flex; justify-content: center; height: 3px;
}
.ae__yukleme[hidden] { display: none; }
.ae__yukleme b {
  display: block; width: min(320px, 100%); height: 100%; border-radius: 2px;
  background: rgba(214, 222, 233, .14); overflow: hidden;
}
.ae__yukleme i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: #7fd1a8; transition: width .18s linear;
}
.ae__yukleme.is-bekliyor i {
  width: 34%; transition: none;
  animation: ae-yukleme-bekle 1.1s ease-in-out infinite;
}
@keyframes ae-yukleme-bekle {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(294%); }
}
.ae__yukleme.is-bitti i { background: #a9d6b8; }
.ae__yukleme.is-hata i { background: #c0554a; }
@media (prefers-reduced-motion: reduce) {
  .ae__yukleme i { transition: none; }
  .ae__yukleme.is-bekliyor i { width: 100%; opacity: .4; animation: none; transform: none; }
}
/* Açıklanabilir bir eksiklik (eski bir arka uç, kapalı bir uç). Kehribar
   çünkü bir hata değil bir DURUM: konuşma yine çalışıyor, eksik olan
   kartlar. Kırmızı olsaydı "her şey bozuk" derdi ve yalan olurdu. */
.ae__uyari { color: rgba(224, 185, 60, .8); text-transform: none; letter-spacing: .02em; }

/* ---- acil siren -------------------------------------------------------- */
/* `usta/acil`in ekrandaki karşılığı. Telefonda siren çalıyor; burada da
   sessiz kalmamalı — ama modal olmamalı: elini bir şeyden çekmen gerekiyor,
   ekranın kilitlenmesi değil. */
.ae__siren {
  position: absolute; inset: 0; z-index: 15; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 120px 12px rgba(192, 85, 74, .55);
  transition: opacity .4s var(--ae-ease);
}
.anaekran[data-acil="1"] .ae__siren { opacity: 1; animation: ae-sirenpuls 1.5s var(--ae-ease) infinite; }
@keyframes ae-sirenpuls { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }

/* ---- sürükle-bırak işareti (23 Eyl) ------------------------------------
   Dosya ekranın üstünde sürüklenirken (`data-birak="1"`, ana-ekran.js
   `_birakIsaret`): kenarda kesikli bir çerçeve + tepede tek satır, orb'un
   halkaları dinlerken attığı dalgayı atar. Çerçeve ekranın TAMAMINI
   sarıyor, çünkü bırakılan yer ekranın tamamı — yalnız orb değil.
   Tıklamayı hiç almaz; sürükleme bitince 800 ms içinde kendiliğinden iner. */
.ae__birak {
  position: absolute; inset: 12px; z-index: 16; pointer-events: none;
  border: 1px dashed rgba(214, 222, 233, .38); border-radius: 22px;
  background: rgba(214, 222, 233, .025);
  opacity: 0; transition: opacity .18s var(--ae-ease);
}
.ae__birak span {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 6px 14px; border: 1px solid var(--ae-line2); border-radius: 999px;
  background: var(--ae-ink); color: var(--ae-fg); white-space: nowrap;
  font: 500 10.5px/1 var(--ae-mono); letter-spacing: .14em; text-transform: uppercase;
}
.anaekran[data-birak="1"] .ae__birak { opacity: 1; }
.anaekran[data-birak="1"] .ae__halka { animation: ae-dalga 1.6s var(--ae-ease) infinite; }

/* =========================================================================
   PERDE — kart açılınca gelen pencere
   ====================================================================== */
.ae-perde {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(5, 7, 11, .62);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: grid; place-items: center; padding: 3vh 4vw;
  animation: ae-sol .3s var(--ae-ease, cubic-bezier(.2,.7,.2,1)) both;

  --ae-line:  rgba(214, 222, 233, .13);
  --ae-line2: rgba(214, 222, 233, .24);
  --ae-line3: rgba(214, 222, 233, .42);
  --ae-fg:    #e8ecf4;
  --ae-dim:   rgba(232, 236, 244, .58);
  --ae-dim2:  rgba(232, 236, 244, .34);
  --ae-dim3:  rgba(232, 236, 244, .18);
  --ae-amber: #e0b93c;
  --ae-green: #3fbf8f;
  --ae-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ae-ease:  cubic-bezier(.2, .7, .2, 1);
  color: var(--ae-fg);
  font: 15px/1.55 ui-sans-serif, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ae-perde[hidden] { display: none; }
.ae-perde *, .ae-perde *::before, .ae-perde *::after { box-sizing: border-box; }
@keyframes ae-sol { from { opacity: 0 } to { opacity: 1 } }

/* RAPOR AÇIKKEN PERDE KENDİ ZEMİNİNİ BIRAKIR.
   Mira, 9 Eyl: *"Biten işlere tıkladığımızda çıkan raporun eski UI ile %100
   aynı olmasını istiyorum."* Pencerenin kendisi artık eski UI'nin penceresi
   (`.usta-report`, styles/master-orb.css) ve o pencere KENDİ perdesini
   getiriyor (`.usta-report__backdrop`: rgba(8,10,14,.55) + blur(10px)). İki
   zemin üst üste binerse ortaya çıkan şey ne eskisi ne yenisi olur, o yüzden
   dıştaki perde burada saydamlaşıyor.

   `font` ve `color` da geri veriliyor: `.ae-perde` ekranın kendi yazı
   düzenini kuruyor (Inter 15px), eski pencere ise `body`nin düzeninden
   miras alıyordu (--font-ui 14/1.45) ve başlığın satır yüksekliği oradan
   geliyor — iki satırlık kırpma o ölçüye bağlı. Pencere yine perdenin
   İÇİNDE, çünkü rapordaki adresleri açan dinleyici perdenin üstünde. */
.ae-perde--rapor {
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  display: block; padding: 0; animation: none;
  font: 14px/1.45 var(--font-ui);
  color: var(--fg);
}

/* ---- 01 · SARKIT — ARTIK ÇİZİLMİYOR (9 Eyl) --------------------------
   Rapor penceresi eski UI'ye döndü (yukarıdaki `.ae-perde--rapor`), yani
   aşağıdaki kuralların hiçbirini bugün kimse giymiyor. Silinmedi: bu ağaç
   git altında değil ve "sarkıtı geri istiyorum" tek satırlık bir dönüş
   olmalı (`ana-ekran.js` → `_raporCiz`). Soru kâğıdı (`.ae-soru`) bundan
   ETKİLENMEDİ ve aşağıda kendi bölümünde duruyor.

   ---- eski gerekçe ---- ------------------------------
   Mira'nın seçtiği tasarım. Orb tavandaki lamba, ondan inen ışık ipi kâğıdı
   tutuyor: rapor ekranda bir yere düşmüş bir pencere değil, orb'un
   ucundaki şey. Kâğıt koyu uygulamanın içindeki tek AÇIK yüzey — farkı
   renk değil MALZEME. */
.ae-sarkit {
  display: flex; flex-direction: column; align-items: center;
  width: min(560px, 100%); max-height: 92dvh;
  animation: ae-kalk .34s var(--ae-ease) both;
}
@keyframes ae-kalk { from { opacity: 0; transform: translateY(12px) scale(.985) } to { opacity: 1; transform: none } }
.ae-sarkit__tavan { flex: none; display: grid; justify-items: center; }
.ae-sarkit__tavan .orb2 { --s: 92px; cursor: default; }
.ae-sarkit__ip {
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, rgba(190, 214, 245, .75), rgba(190, 214, 245, .05));
}
.ae-sarkit__kagit {
  flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column;
  background: #f3f0e7; color: #191917; border-radius: 3px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
}
.ae-sarkit__ust {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(25, 25, 23, .12);
}
.ae-sarkit__meta {
  font: 500 9px/1 var(--ae-mono); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(25, 25, 23, .42);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ae-sarkit__eylem { margin-left: auto; display: flex; gap: 5px; flex: none; }
/* − ve ✕ ayrı ayrı: biri "şimdi değil", diğeri bir KARAR. Karıştırılırsa
   okunmamış bir rapor sessizce listeden düşer. */
.ae-sarkit__b {
  width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(25, 25, 23, .2); background: none; color: rgba(25, 25, 23, .55);
  font: 400 14px/1 var(--ae-mono); display: grid; place-items: center;
  transition: border-color .15s, color .15s, background .15s;
}
.ae-sarkit__b:hover { border-color: rgba(25, 25, 23, .5); color: #191917; }
.ae-sarkit__b--ok:hover {
  border-color: rgba(63, 191, 143, .7); color: #17603f; background: rgba(63, 191, 143, .1);
}
.ae-sarkit__hukum {
  margin: 15px 17px 9px; font-size: 16px; line-height: 1.45; color: #191917; font-weight: 400;
}
.ae-sarkit__istek {
  margin: 0 17px 13px; padding-left: 10px; font-size: 12px; line-height: 1.5;
  color: rgba(25, 25, 23, .62); border-left: 2px solid rgba(186, 140, 40, .65);
}
.ae-sarkit__istek b {
  display: block; color: rgba(25, 25, 23, .5);
  font: 500 9px var(--ae-mono); letter-spacing: .12em; text-transform: uppercase;
}
.ae-sarkit__govde {
  flex: 1; min-height: 0; overflow: auto; padding: 0 17px 18px;
  font-size: 13.5px; line-height: 1.62; color: #33332e;
}
.ae-sarkit__govde p { margin: 0 0 11px; }
.ae-sarkit__govde b, .ae-sarkit__govde strong { color: #101010; }
.ae-sarkit__govde code {
  background: rgba(25, 25, 23, .07); color: #2f2f2a;
  padding: 1px 4px; border-radius: 3px; font: 12.5px var(--ae-mono);
}
.ae-sarkit__govde pre {
  background: rgba(25, 25, 23, .06); padding: 9px 11px; border-radius: 4px;
  overflow-x: auto; font: 12px/1.5 var(--ae-mono);
}
.ae-sarkit__govde h1, .ae-sarkit__govde h2, .ae-sarkit__govde h3 {
  color: #191917; font-size: 13.5px; margin: 16px 0 7px;
}
.ae-sarkit__govde table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font: 12.5px var(--ae-mono); }
.ae-sarkit__govde td, .ae-sarkit__govde th {
  padding: 5px 10px 5px 0; border-bottom: 1px solid rgba(25, 25, 23, .12); text-align: left;
}
.ae-sarkit__govde a { color: #2b5ea8; }

/* ---- teslimat: kopyalanacak şey kâğıdın ÜSTÜNDE, düğmesiyle -------------
   Mira, 8 Eyl: *"kopyalanması gereken mesajlar vesaire, kopyala çıkmıyor;
   raporun tamamını okuya bastığımda çıkıyor ancak."* Özetteki çitli blok
   artık md.js'in kendi "Kopyala" düğmesiyle geliyor — ama o düğmenin rengi
   koyu pencere için yazılmıştı; burada kâğıt AÇIK, o yüzden aynı düğme
   burada kâğıdın paletiyle çiziliyor. Kural aynı kalıyor: düğme hover'da
   değil HER ZAMAN görünür (dokunmatik ekranda hover yok). */
.ae-sarkit__govde .md__block { position: relative; margin: 0 0 12px; }
.ae-sarkit__govde .md__pre {
  /* Sağdaki boşluk düğmenin yeri: onsuz uzun bir satırın kuyruğu düğmenin
     ALTINDA kalır ve hiçbir kaydırmayla çıkmaz. */
  margin: 0; padding: 10px 86px 10px 12px; border-radius: 4px;
  background: rgba(25, 25, 23, .06); border: 1px solid rgba(25, 25, 23, .13);
  overflow-x: auto;
}
.ae-sarkit__govde .md__pre code {
  background: none; padding: 0; color: #2f2f2a;
  font: 12px/1.55 var(--ae-mono); white-space: pre-wrap; word-break: break-word;
}
.ae-sarkit__govde .md__copy {
  position: absolute; top: 6px; right: 6px;
  padding: 3px 9px; border-radius: 4px; cursor: pointer;
  font: 500 11px/1.5 var(--ae-mono); color: rgba(25, 25, 23, .62);
  background: #f3f0e7; border: 1px solid rgba(25, 25, 23, .2);
  transition: color .12s, border-color .12s, background .12s;
}
.ae-sarkit__govde .md__copy:hover, .ae-sarkit__govde .md__copy:focus-visible {
  color: #191917; border-color: rgba(25, 25, 23, .5);
}
.ae-sarkit__govde .md__copy[data-state="done"],
.ae-sarkit__kop[data-state="done"] {
  color: #17603f; border-color: rgba(63, 191, 143, .7); background: rgba(63, 191, 143, .1);
}
.ae-sarkit__govde .md__copy[data-state="fail"],
.ae-sarkit__kop[data-state="fail"] {
  color: #8c3b34; border-color: rgba(140, 59, 52, .5);
}
/* Adresin YANINDAKİ küçük düğme. Adres çitin içine giremez (orada
   tıklanamaz olurdu), ama tıklamak kopyalamak değil: linki bir yere
   yapıştırmak isteyen onu açmak istemiyor. */
.ae-sarkit__kop {
  display: inline-block; vertical-align: baseline; margin: 0 0 0 5px;
  padding: 1px 7px; border-radius: 4px; cursor: pointer;
  font: 500 10px/1.5 var(--ae-mono); letter-spacing: .02em;
  color: rgba(25, 25, 23, .55); background: rgba(25, 25, 23, .05);
  border: 1px solid rgba(25, 25, 23, .18);
  transition: color .12s, border-color .12s, background .12s;
}
.ae-sarkit__kop:hover, .ae-sarkit__kop:focus-visible {
  color: #191917; border-color: rgba(25, 25, 23, .45); background: rgba(25, 25, 23, .08);
}
/* Özet henüz yazılmadıysa: kâğıt boş kalmaz, ne beklendiği yazar. */
.ae-sarkit__bekle {
  display: flex; align-items: center; gap: 9px;
  margin: 15px 17px; font-size: 13px; color: rgba(25, 25, 23, .5);
}
.ae-sarkit__bekle i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(186, 140, 40, .8);
  animation: ae-nabiz 1.2s var(--ae-ease) infinite;
}
/* Raporun TAMAMI — özetin altında, katlı. Bir modelin okuması aslının
   silinmesi için sebep değil: özet yanlış bir şey söylediğinde kontrol
   edilecek yer burası. */
.ae-sarkit__tam { margin: 0 17px 16px; }
.ae-sarkit__tam > summary {
  cursor: pointer; list-style: none;
  font: 500 9px/1 var(--ae-mono); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(25, 25, 23, .45); padding: 8px 0; border-top: 1px solid rgba(25, 25, 23, .12);
}
.ae-sarkit__tam > summary::-webkit-details-marker { display: none; }
.ae-sarkit__tam > summary:hover { color: #191917; }
.ae-sarkit__tam pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font: 12px/1.55 var(--ae-mono); color: rgba(25, 25, 23, .78);
}

/* ---- soru penceresi ---------------------------------------------------- */
/* Cevabı SEN borçlusun, o yüzden kâğıt değil: soru koyu kalıyor ve
   kehribar. 13 Ağu'da bir işçi 23:06'da sordu, bir kez söylendi, ve o soru
   ekranda hiçbir yerde durmuyordu — terminal beklerken. */
.ae-soru {
  width: min(680px, 100%); max-height: 88dvh; display: flex; flex-direction: column;
  border: 1px solid var(--ae-line2); border-radius: 14px; overflow: hidden;
  background: rgba(13, 17, 24, .97);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: ae-kalk .34s var(--ae-ease) both;
}
.ae-soru__ust {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 13px 14px 12px; border-bottom: 1px solid var(--ae-line);
}
.ae-soru__etiket {
  display: flex; align-items: center; gap: 6px;
  font: 500 9.5px/1 var(--ae-mono); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(224, 185, 60, .9);
}
.ae-soru__etiket i { width: 5px; height: 5px; border-radius: 50%; background: var(--ae-amber); }
.ae-soru__meta {
  font: 500 9.5px/1 var(--ae-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ae-dim3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ae-soru__kapat { margin-left: auto; flex: none; }
.ae-soru__kapat .ae__dugme { width: 26px; height: 26px; border-radius: 5px; }
.ae-soru__govde { flex: 1; min-height: 0; overflow: auto; padding: 18px 18px 20px; }
.ae-soru__nere {
  margin: 0 0 16px; font-size: 12.5px; color: var(--ae-dim2);
  border-left: 2px solid rgba(224, 185, 60, .5); padding-left: 10px;
}
.ae-soru__baslik {
  font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0 0 16px;
  letter-spacing: -.15px;
}
.ae-sik {
  display: flex; gap: 11px; align-items: flex-start; text-align: left; width: 100%;
  padding: 10px 12px; margin-bottom: 6px; min-height: 38px;
  border: 1px solid var(--ae-line2); border-radius: 6px;
  background: none; color: inherit; font: inherit; font-size: 13.5px; line-height: 1.4;
  cursor: pointer; transition: border-color .15s, background .2s, opacity .25s;
}
.ae-sik b { flex: none; width: 14px; font: 600 12px/1.4 var(--ae-mono); color: var(--ae-dim2); }
.ae-sik:hover { border-color: var(--ae-line3); }
.ae-sik.secildi { border-color: rgba(224, 185, 60, .85); background: rgba(224, 185, 60, .07); }
.ae-sik.secildi b { color: var(--ae-amber); }
.ae-soru.cevaplandi .ae-sik:not(.secildi) { opacity: .32; }
.ae-soru__ipucu {
  font: 500 11px/1.5 var(--ae-mono); letter-spacing: .06em;
  color: var(--ae-dim3); margin: 10px 0 0;
}
/* Şıksız soru YAZILARAK cevaplanır. Dört şık çizip beşincisini beklemek,
   cevaplanamayan bir soru demek. */
.ae-soru__serbest { display: flex; gap: 8px; margin-top: 4px; }
.ae-soru__serbest input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--ae-line2); background: rgba(255,255,255,.02);
  color: inherit; font: inherit; font-size: 13.5px; outline: none;
}
.ae-soru__serbest input:focus { border-color: var(--ae-line3); }
.ae-soru__serbest button {
  flex: none; padding: 0 16px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(224, 185, 60, .55); background: none; color: var(--ae-amber);
  font: inherit; font-size: 13px;
}

/* =========================================================================
   ÇALIŞMA ALANINDAKİ DÖNÜŞ DÜĞMESİ
   ====================================================================== */
/* Mira: *"Eğer orb'a geri dönmek istersem, sol tarafta 'orb'a geri dön',
   şeffaf, orb'a geri dön butonu olacak."*

   Sol kenarın ortasında: üst sol kenar çubuğunun markasına, alt sol
   köşe ise durum satırına ait. Ortası, masaüstünde de telefonda da boş
   kalan tek yer. */
.yuva-orb {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 45;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 7px; border: 1px solid transparent; border-left: 0;
  border-radius: 0 10px 10px 0;
  background: rgba(10, 13, 19, .5); color: #e8ecf4;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: .16;
  transition: opacity .22s cubic-bezier(.2,.7,.2,1), border-color .22s, background .22s;
}
.yuva-orb:hover, .yuva-orb:focus-visible {
  opacity: .96; border-color: rgba(214, 222, 233, .18);
  background: rgba(10, 13, 19, .82); outline: none;
}
.yuva-orb[hidden] { display: none; }
.yuva-orb__nokta {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 32%, #d8e8fc, #7c8cff 58%, #22386e);
  box-shadow: 0 0 8px rgba(124, 140, 255, .55);
}
.yuva-orb__ad {
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em; text-transform: uppercase;
}
/* Cevap bekleyen bir şey varken şeffaflık düşer: "sol tarafta duran ama
   bakmadıkça görünmeyen" düğme, orb'un seni beklediği anda görünmelidir. */
.yuva-orb[data-bekliyor="1"] { opacity: .55; border-color: rgba(224, 185, 60, .35); }
.yuva-orb[data-bekliyor="1"] .yuva-orb__nokta {
  background: radial-gradient(circle at 35% 32%, #ffeeb4, #e0932c 58%, #5c3f0e);
  box-shadow: 0 0 9px rgba(224, 185, 60, .7);
}
@media (hover: none) { .yuva-orb { opacity: .42; } }

/* =========================================================================
   SİYAHLIK — iki ekran arasındaki geçiş
   ====================================================================== */
/* Mira: *"Ona bastığımızda da ekran siyahlaşıp eski yuvayı böyle
   siyahlıktan geri gelecek."*

   Perdenin ARKASINDA takas oluyor: iki ekran hiçbir karede birlikte
   görünmüyor. Kesme yerine karartma, çünkü bu iki ekran birbirinin
   sekmesi değil — biri kapanıp öteki açılıyor, ve sert kesme onları aynı
   şeyin iki hâli gibi gösterirdi. */
.gecis-perde {
  position: fixed; inset: 0; z-index: 90;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity var(--gecis-sure, 280ms) linear;
}
.gecis-perde.kapali { opacity: 1; pointer-events: auto; }
.gecis-perde[hidden] { display: none; }

/* ---- telefon ----------------------------------------------------------- */
@media (max-width: 760px) {
  /* Izgara değil AKIŞ. Sütun sağda duramaz (ekranın yarısı); sıra elle
     veriliyor: orb → biten işler → giriş → alt şerit. */
  .anaekran { display: flex; flex-direction: column; overflow: auto; }
  .ae__ust { order: 1; flex-wrap: wrap; row-gap: 3px; font-size: 9.5px; }
  .ae__merkez { order: 2; align-content: start; padding: 2vh 0 0; flex: none; }
  .ae__orbkutu { --ae-s: clamp(140px, 42vw, 220px); }
  .ae__soz { margin-top: 18px; font-size: 13.5px; padding: 0 18px; }
  .ae__isler { margin-top: 14px; padding: 0 12px; }
  .ae__seritad { font-size: 12px; }
  .ae__issat-ad { font-size: 11.5px; }
  /* İŞ LİSTESİ TELEFONDA KENDİ İÇİNDE KAYAR. Mira: *"çok fazla oldukları
     zaman telefonda … bir şey yaz yuvasının altında kalıyorlar … scroll
     ekle ki … gezinebilelim."* Liste açıldığında sayfayı aşağı itiyordu ve
     itilen şey yazı kutusuydu. Boy `dvh` ile veriliyor çünkü klavye
     açıkken `vh` gerçek yüksekliği söylemiyor — `min()` içinde DEĞİL, ayrı
     bir kuralda: desteklemeyen bir tarayıcıda `min()` bütün bildirimi
     düşürür, ayrı kural yalnız kendisi düşer. */
  .ae__isler.acik .ae__isliste { max-height: 34vh; overscroll-behavior: contain; }
  @supports (height: 1dvh) {
    .ae__isler.acik .ae__isliste { max-height: 34dvh; }
  }
  .ae__akis.dolu { height: 22vh; }
  .ae__akissat { font-size: 13.5px; padding: 0 16px; }
  .ae__terminal { width: 94vw; margin-top: 12px; }
  .ae__termekran { max-height: 38vh; font-size: 10.5px; }
  /* Telefonda ekran ızgara değil AKIŞ (yukarı bak), yani "kalan yeri al"
     diye bir satır yok: yükseklik doğrudan veriliyor. */
  .anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__orbkutu { --ae-s: clamp(76px, 20vw, 116px); }
  .anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__merkez { padding-top: 1vh; }
  .anaekran:is([data-term="1"], [data-tahta="1"], [data-izgara="1"]) .ae__akis.dolu { height: 10vh; }
  .anaekran[data-term="1"] .ae__terminal {
    /* Genişlik `vw` DEĞİL: telefonda ekran akış hâlinde ve dikey kaydırma
       çubuğu çıkabiliyor; `96vw` çubuğu saymadığı için pencere birkaç
       piksel sola kayıyordu (ölçüldü: 412px ekranda 5px). */
    width: calc(100% - 16px); height: 70vh; margin: 8px 0 4px;
  }
  .anaekran[data-term="1"] .ae__termekran { max-height: none; }
  .ae__tahta { width: calc(100% - 16px); margin-top: 12px; }
  .anaekran[data-tahta="1"] .ae__orbkutu { --ae-s: clamp(88px, 24vw, 130px); }
  .anaekran[data-tahta="1"] .ae__tahta { width: calc(100% - 16px); height: 66vh; margin: 8px 0 4px; }
  .ae__tahtagovde { padding: 14px 14px 18px; font-size: 14px; }
  /* Izgara telefonda TEK SÜTUN: dört terminali 412 px'e sığdırmak
     dördünü de okunamaz yapar, ve buradaki asıl iş ⛶ ile birini büyütmek.
     Sütun sayısını ana-ekran.js yazmıyor — kutular yüzdeyle yerleşiyor ve
     yüzdenin tabanı sahne, o yüzden burada yükseklik vermek yetiyor. */
  .ae__izgara { width: calc(100% - 16px); margin-top: 12px; }
  .anaekran[data-izgara="1"] .ae__orbkutu { --ae-s: clamp(88px, 24vw, 130px); }
  .anaekran[data-izgara="1"] .ae__izgara { width: calc(100% - 16px); height: 70vh; margin: 8px 0 4px; }
  .ae__izsahne { padding: 8px; }
  .ae__izkartekran { font-size: 9.5px; }
  .ae__sutun {
    order: 3; position: static; width: auto; max-height: none; overflow: visible;
    padding: 18px 14px 0; margin: 0;
  }
  .ae__liste {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .ae__liste::-webkit-scrollbar { display: none; }
  .ae__kart { min-width: 72vw; scroll-snap-align: start; }
  .ae__giris { order: 4; margin: auto auto 12px; }
  .ae__alt { order: 5; padding-bottom: 12px; }
  .ae-sarkit__hukum { font-size: 15px; margin: 13px 14px 8px; }
  .ae-sarkit__govde { padding: 0 14px 16px; }
  .ae-soru__baslik { font-size: 17px; }
  .ae-soru__govde { padding: 15px 14px 16px; }
  /* Telefonda sol kenar bir kaydırma alanı: dikey yazı yerine tek nokta. */
  .yuva-orb__ad { display: none; }
  .yuva-orb { padding: 12px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ae__halka, .ae__puf, .ae__isin.at path, .ae-sarkit__bekle i,
  .ae__seritad, .ae__seritsure, .ae__kelime,
  .ae__kudon, .ae__kusvg {
    animation: none !important;
  }
  .ae__kuyay, .ae__orbkutu { transition: none; }
  .ae__tahta { transition: none; filter: none; transform: none; }
  .ae__tahta:not(.acik) { opacity: 0; }
  .ae__tahtagovde .md > * { animation: none !important; }
  /* Video JS'te hiç indirilmiyor (bkz. ana-ekran.js `_azHareket`); burada
     kalan tek şey poster karesi, o da hareketsiz. */
  .ae__isliste { transition: none; }
  .gecis-perde { transition: none; }
}