/* ---------------------------------------------------------------------------
   TANRI SORGUSU — orb ekranının karanlık yüzü (10 Eyl).

   Mira: *"Bu bahsettiğim şeyi tamamen smooth, fade ve blur animasyonlarıyla
   yapacaksın."* Buradaki HER geçiş iki şeyi birlikte yapıyor — bulanıklık ve
   solma — ve yönü simetrik: bir şey nasıl geldiyse öyle gider.

   Tek mekanizma: `.tq__parca` görünmez doğar (bulanık, saydam), `.gorun`
   sınıfı onu getirir, sınıfın kalkması götürür. Süreler JS'ten gelir
   (`tanri.js` → ZAMAN, `--tq-*` değişkenleri): sıra ve bekleme orada,
   geçişin kendisi burada. İkisi ayrışırsa bir parça daha görünmeden bir
   sonraki faza geçilir.

   Yazı tipi: "space gibi bir font" — Michroma (SIL OFL 1.1, lisansı
   /assets/fonts/Michroma-OFL.txt). Microgramma/Eurostile ailesinin geniş
   gövdesi; uzay çağının arayüz harfi. Türkçe harflerle alt kümelenip kutuya
   kondu (20 KB), çünkü sayfanın CSP'si dış font sunucusuna izin vermiyor
   (`font-src 'self' data:`).
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Michroma TR";
  src: url("/assets/fonts/michroma-tr.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- ORB EKRANI SÖNER --------------------------------------------------
   Orb, galaksi, "bir şey yaz", biten işler, üst ve alt şerit: hepsi
   `.anaekran`ın doğrudan çocukları ve hepsi AYNI ANDA bulanıp söner.
   Silinmiyorlar — çağrı sürüyor, yoklama sürüyor; iptal bu sönmeyi geri
   alıyor. Süre `tanri.js` ZAMAN.karar (1400) ve ZAMAN.donus (1300) ile
   aynı olmalı. `!important` şart: çocuklardan bazıları opaklığı kendi
   animasyonuyla yazıyor (siren, ışın) ve animasyon normal bildirimi yener,
   önemli bildirimi yenemez. */
.anaekran[data-tanri] > * {
  transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1),
              filter 1.4s cubic-bezier(.4, 0, .2, 1);
}
.anaekran[data-tanri="1"] > * {
  opacity: 0 !important;
  filter: blur(18px);
  pointer-events: none;
}
.anaekran[data-tanri="donus"] > * {
  transition-duration: 1.3s, 1.3s;
}
/* Çalışma alanından gelindiyse orb ekranı siyahın ARKASINDA kuruluyor —
   orada geçiş oynatılmaz, doğrudan sönmüş hâlde doğar. */
.anaekran.tanri-aninda > * { transition: none !important; }

/* ---- ÖRTÜ -------------------------------------------------------------- */
.tq {
  position: fixed; inset: 0;
  /* Gezen orb kabarcığının (9500) üstünde, acil alarmın (10000) altında:
     siren bu ekranda da görünmeli. */
  z-index: 9550;
  overflow: hidden;
  color: #e9edf5;
  font: 400 15px/1.6 ui-sans-serif, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;

  --tq-a: #e8c57a;                 /* A — sıcak altın */
  --tq-b: #8fb8ff;                 /* B — soğuk mavi */
  --tq-kirmizi: 255, 84, 84;
  --tq-fg: rgba(236, 240, 248, .92);
  --tq-dim: rgba(236, 240, 248, .5);
  --tq-ease: cubic-bezier(.2, .7, .2, 1);
  --tq-uzay: "Michroma TR", "Eurostile Extended", "Microgramma", ui-sans-serif, sans-serif;
}
.tq *, .tq *::before, .tq *::after { box-sizing: border-box; }

/* Siyah. Giderken yavaş başlıyor (ease-in): önce orb'un bulandığı görünsün,
   sonra karanlık otursun — ikisi aynı eğride gitseydi bulanıklık siyahın
   altında kaybolurdu. */
.tq__zemin {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity var(--tq-karar, 1.4s) cubic-bezier(.55, 0, .75, .35);
}
.tq:not([data-faz="hazir"]) .tq__zemin { opacity: 1; }
.tq.tq--acilis .tq__zemin {
  opacity: 0;
  transition: opacity var(--tq-donus, 1.3s) cubic-bezier(.2, .6, .3, 1);
}

/* ---- ORTAK: gel/git ----------------------------------------------------- */
.tq__parca {
  opacity: 0;
  filter: blur(16px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--tq-sure, 1s) var(--tq-ease),
              filter var(--tq-sure, 1s) var(--tq-ease),
              visibility 0s linear var(--tq-sure, 1s);
}
.tq__parca.gorun {
  opacity: 1;
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--tq-sure, 1s) var(--tq-ease),
              filter var(--tq-sure, 1s) var(--tq-ease),
              visibility 0s;
}
/* İptal: ekrandaki her şey aynı anda bulanıp gider, sonra siyah açılır. */
.tq[data-faz="donus"] .tq__parca.gorun {
  opacity: 0;
  filter: blur(16px);
  --tq-sure: calc(var(--tq-donus, 1.3s) * .45);
}

/* ---- "SORUNU SOR" ------------------------------------------------------
   Mira: *"harfleri birbirinden bir nevi bayağı uzun ayrıklarla … space gibi
   bir font."* Gelirken harfler hafifçe açılıyor, giderken toplanıyor. */
.tq__davet {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0 6vw;
  text-align: center;
  --tq-sure: var(--tq-davet-cik, 1.2s);
}
.tq__davet.gorun { --tq-sure: var(--tq-davet-gir, 1.4s); }
.tq__davet span {
  font-family: var(--tq-uzay);
  font-size: clamp(15px, 2.5vw, 30px);
  text-transform: uppercase;
  letter-spacing: .5em;
  /* Son harfin arkasındaki boşluk yazıyı sola kaydırmasın. */
  margin-right: -.5em;
  color: #eef1f8;
  text-shadow: 0 0 24px rgba(190, 210, 255, .2);
  white-space: nowrap;
  transition: letter-spacing var(--tq-sure, 1.2s) var(--tq-ease),
              margin var(--tq-sure, 1.2s) var(--tq-ease);
}
.tq__davet.gorun span { letter-spacing: .66em; margin-right: -.66em; }

/* ---- SORU: yanıp sönen çizgi + mikrofon -------------------------------- */
.tq__soru {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 6vw;
  --tq-sure: var(--tq-gidis, 1.1s);
}
.tq__soru.gorun { --tq-sure: var(--tq-soru, .9s); }
.tq__alan {
  position: relative;
  width: min(760px, 88vw);
  display: flex; justify-content: center;
  cursor: text;
}
.tq__yazi {
  display: block;
  width: 100%;
  min-height: 1.35em;
  max-height: 38vh;
  margin: 0; padding: 0;
  border: 0; outline: 0; resize: none;
  overflow-y: auto;
  background: transparent;
  color: #f1f4fa;
  font: 300 clamp(21px, 3.2vw, 34px)/1.35 ui-sans-serif, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
  caret-color: #f5f7fb;
  text-shadow: 0 0 18px rgba(200, 215, 255, .1);
  scrollbar-width: none;
}
.tq__yazi::-webkit-scrollbar { display: none; }
/* Boşken gerçek imleç saydam: yanıp sönen çizgiyi aşağıdaki sahte imleç
   çiziyor, ki telefonda klavye açılmadan da görünsün. İkisi aynı anda
   görünürse ortada iki çizgi olur. */
.tq__alan.bos .tq__yazi { caret-color: transparent; }
.tq__imlec {
  position: absolute; left: 50%; top: 50%;
  width: 2px;
  height: clamp(25px, 3.8vw, 40px);
  transform: translate(-50%, -50%);
  border-radius: 1px;
  background: #f5f7fb;
  box-shadow: 0 0 10px rgba(220, 230, 255, .35);
  opacity: 0;
  pointer-events: none;
}
.tq__alan.bos .tq__imlec { animation: tq-imlec 1.06s linear infinite; }
@keyframes tq-imlec {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.tq__araclar {
  margin-top: clamp(30px, 8vh, 72px);
  display: grid;
  grid-template-columns: 48px 62px 48px;
  gap: 18px;
  align-items: center; justify-items: center;
}
.tq__mik {
  position: relative;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(235, 240, 250, .2);
  background: rgba(255, 255, 255, .015);
  color: rgba(235, 240, 250, .62);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .35s, background .35s, color .35s, box-shadow .35s;
}
.tq__mik svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Sesin halkası: mikrofon açıkken sesin yüksekliğiyle büyüyor. Duyulduğunu
   görmenin tek yolu bu — dikte ara metni ancak kelime bitince geliyor. */
.tq__mik::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(220, 232, 255, .55);
  opacity: 0;
  transform: scale(1);
  transition: transform .12s linear, opacity .35s;
}
.tq__mik:hover { border-color: rgba(235, 240, 250, .4); color: rgba(235, 240, 250, .85); }
.tq__mik[data-durum="acik"] {
  border-color: rgba(245, 248, 255, .75);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  box-shadow: 0 0 26px rgba(210, 225, 255, .18);
}
.tq__mik[data-durum="acik"]::before {
  opacity: .6;
  transform: scale(calc(1.1 + var(--tq-seviye, 0) * .55));
}
.tq__mik[data-durum="baglaniyor"] { animation: tq-nabiz 1.1s ease-in-out infinite; }
.tq__mik[data-durum="hata"] {
  border-color: rgba(var(--tq-kirmizi), .45);
  color: rgba(var(--tq-kirmizi), .85);
}
@keyframes tq-nabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 232, 255, .0); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 232, 255, .08); }
}
/* `.tq` öneki şart: sayfanın genel `button:disabled { opacity: .55 }`
   kuralı tek sınıfı yeniyor ve gizli gönder düğmesi mikrofonun yanında
   bulanık bir leke olarak kalıyordu (başsız Chrome'da görüldü, 10 Eyl). */
.tq .tq__gonder {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(235, 240, 250, .24);
  background: none;
  color: rgba(235, 240, 250, .88);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0; filter: blur(6px); transform: translateX(-6px);
  pointer-events: none;
  transition: opacity .45s var(--tq-ease), filter .45s var(--tq-ease),
              transform .45s var(--tq-ease), border-color .25s, background .25s;
}
.tq .tq__gonder.gorun { opacity: 1; filter: blur(0); transform: none; pointer-events: auto; }
.tq__gonder:hover { border-color: rgba(235, 240, 250, .55); background: rgba(255, 255, 255, .05); }
.tq__gonder svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tq__not {
  min-height: 1.6em;
  margin-top: 16px;
  font-size: 12.5px;
  color: rgba(255, 170, 150, .72);
  text-align: center;
}

/* ---- SOHBET ------------------------------------------------------------ */
.tq__sohbet {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: max(24px, env(safe-area-inset-top)) 0 max(58px, calc(env(safe-area-inset-bottom) + 42px));
  --tq-sure: var(--tq-sohbet, 1.2s);
}
.tq__baslik, .tq__akis {
  transition: opacity .9s var(--tq-ease), filter .9s var(--tq-ease);
}
/* Sonuç öndeyken sohbet arkada, soluk ve bulanık — silinmiyor. */
.tq__sohbet.soluk .tq__baslik,
.tq__sohbet.soluk .tq__akis,
.tq__sohbet.soluk .tq__yuzde,
.tq__sohbet.soluk .tq__durum { opacity: .14; filter: blur(3px); }

.tq__baslik { padding: 0 7vw 12px; text-align: center; }
.tq__soruyazi {
  max-width: 900px; margin: 0 auto;
  font-family: var(--tq-uzay);
  font-size: clamp(10px, 1.15vw, 13px);
  line-height: 2;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(236, 240, 248, .62);
}
.tq__taraflar {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 12.5px;
  opacity: 0;
  transition: opacity 1s var(--tq-ease);
}
.tq--tezli .tq__taraflar { opacity: 1; }
.tq__taraf[data-kim="a"] { color: var(--tq-a); }
.tq__taraf[data-kim="b"] { color: var(--tq-b); }
.tq__taraf::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  vertical-align: 1px;
}
.tq__vs { width: 24px; height: 1px; background: rgba(255, 255, 255, .18); }

.tq__akis {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Üst boşluk maskeden UZUN olmalı: ilk mesajın ilk satırı kaydırılmadan
     solmuş görünüyordu (başsız Chrome'da görüldü, 10 Eyl — maske 70 px,
     boşluk 26 px idi). */
  padding: 40px max(5vw, 16px) 28px;
  /* Yukarı çıkan satır silinerek gidiyor; dipte keskin. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 18px), transparent 100%);
  scrollbar-width: none;
}
.tq__akis::-webkit-scrollbar { display: none; }
.tq__akisic {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 24px;
}
.tq__mesaj {
  max-width: min(80%, 640px);
  padding: 2px 0 2px 16px;
  border-left: 1px solid rgba(232, 197, 122, .42);
  animation: tq-gel .95s var(--tq-ease) both;
  transition: opacity 1.2s var(--tq-ease);
}
.tq__mesaj[data-kim="a"] { align-self: flex-start; }
.tq__mesaj[data-kim="b"] {
  align-self: flex-end;
  padding: 2px 16px 2px 0;
  border-left: 0;
  border-right: 1px solid rgba(143, 184, 255, .42);
}
/* Eskiler geriye doğru hafifçe soluyor — ama OKUNUR kalıyor: bu ekranın
   işi tam olarak o yazışmayı okutmak. */
.tq__mesaj:not(:nth-last-child(-n+2)) { opacity: .68; }
.tq__metin {
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  line-height: 1.7;
  color: var(--tq-fg);
  overflow-wrap: anywhere;
}
.tq__k {
  display: inline-block;
  animation: tq-kelime .5s var(--tq-ease) both;
}
.tq__k--sessiz { animation: none; }
.tq__satir { display: block; height: 0; }
.tq__paragraf { display: block; height: .75em; }
.tq__mesaj--kesik .tq__metin::after { content: " —"; opacity: .45; }
@keyframes tq-kelime {
  from { opacity: 0; filter: blur(6px); transform: translateY(3px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
@keyframes tq-gel {
  from { opacity: 0; filter: blur(10px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}

.tq__yaziyor {
  max-width: 820px;
  margin: 18px auto 0;
  padding: 0 16px;
  display: flex; gap: 6px;
}
.tq__yaziyor[hidden] { display: none; }
.tq__yaziyor[data-kim="b"] { justify-content: flex-end; }
.tq__yaziyor i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tq-a);
  opacity: .2;
  animation: tq-nokta 1.25s ease-in-out infinite;
}
.tq__yaziyor[data-kim="b"] i { background: var(--tq-b); }
.tq__yaziyor i:nth-child(2) { animation-delay: .18s; }
.tq__yaziyor i:nth-child(3) { animation-delay: .36s; }
@keyframes tq-nokta {
  0%, 100% { opacity: .18; transform: translateY(0); }
  40%      { opacity: .9;  transform: translateY(-3px); }
}

/* ---- YÜZDE (18 Eyl) ---------------------------------------------------
   Hakemin her turda verdiği haklılık oranı: sohbetin ALTINDA iki renkli
   çubuk (A altın soldan, B mavi sağdan), üstünde iki sayı ve tur, altında
   tur tur tablo. Çubuk yerinde güncelleniyor; genişlik geçişi burada. */
.tq__yuzde {
  /* Genişlik AÇIK yazılı: ızgara hücresinde `margin: auto` + `width: auto`
     içeriğe büzülüyor (ölçüldü, 412 px telefonda çubuk 112 px kalmıştı). */
  width: min(720px, 100%);
  margin: 6px auto 0;
  padding: 0 7vw;
  box-sizing: border-box;
  transition: opacity .9s var(--tq-ease), filter .9s var(--tq-ease);
}
/* Giriş animasyonu yalnız sohbet öndeyken: `both` dolgulu bir animasyon
   `.soluk`un opaklığını ezer ve çubuk sonucun altında keskin kalırdı (ölçüldü). */
.tq__sohbet:not(.soluk) .tq__yuzde { animation: tq-gel 1.2s var(--tq-ease) both; }
.tq__yuzde[hidden] { display: none; }
.tq__yuzdeust {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px;
  font-family: var(--tq-uzay);
  font-size: 13px;
  letter-spacing: .14em;
}
.tq__yuzdesayi { font-variant-numeric: tabular-nums; transition: opacity .6s; }
.tq__yuzdesayi[data-kim="a"] { color: var(--tq-a); text-shadow: 0 0 14px rgba(232, 197, 122, .35); }
.tq__yuzdesayi[data-kim="b"] { color: var(--tq-b); text-shadow: 0 0 14px rgba(143, 184, 255, .35); }
.tq__yuzdetur {
  font-size: 9px; letter-spacing: .38em; text-transform: uppercase;
  color: rgba(236, 240, 248, .32);
}
.tq__cubuk {
  position: relative;
  display: flex;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.tq__cubukpay {
  display: block; height: 100%;
  width: 50%;
  transition: width 1.4s var(--tq-ease);
}
.tq__cubukpay[data-kim="a"] {
  background: linear-gradient(90deg, var(--tq-a), rgba(232, 197, 122, .55));
  box-shadow: 0 0 12px rgba(232, 197, 122, .45);
}
.tq__cubukpay[data-kim="b"] {
  background: linear-gradient(90deg, rgba(143, 184, 255, .55), var(--tq-b));
  box-shadow: 0 0 12px rgba(143, 184, 255, .45);
}
/* Orta çizgi: %50'nin yeri, önde olan hangi tarafa taşmış görünsün. */
.tq__cubuk::after {
  content: "";
  position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: rgba(255, 255, 255, .35);
}
.tq__yuzdetablo {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 12px;
  margin-top: 8px;
  min-height: 1.4em;
  font-family: var(--tq-uzay);
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(236, 240, 248, .26);
  font-variant-numeric: tabular-nums;
}
.tq__yuzdehucre::before {
  content: attr(data-tur) "·";
  margin-right: 3px;
  opacity: .6;
}
/* Kararlılık penceresindeki turlar (son N) belirgin: "5 turda kaldı mı" */
.tq__yuzdehucre--pencere { color: rgba(236, 240, 248, .62); }

.tq__durum {
  min-height: 2.2em;
  padding: 10px 7vw 0;
  text-align: center;
  font-family: var(--tq-uzay);
  font-size: 9.5px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(236, 240, 248, .32);
}
.tq__durum.uyari {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255, 176, 156, .8);
}
.tq__sonucdon {
  position: absolute;
  top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(235, 240, 250, .16);
  background: none;
  color: rgba(235, 240, 250, .55);
  font-family: var(--tq-uzay);
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  cursor: pointer;
  animation: tq-gel .8s var(--tq-ease) both;
}
.tq__sonucdon[hidden] { display: none; }

/* ---- SONUÇ ------------------------------------------------------------- */
.tq__sonuc {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 8vw 7vh;
  text-align: center;
  --tq-sure: 1.3s;
}
.tq__sonuc.gorun > * { animation: tq-gel 1.3s var(--tq-ease) both; }
.tq__sonuc.gorun > :nth-child(2) { animation-delay: .3s; }
.tq__sonuc.gorun > :nth-child(3) { animation-delay: .6s; }
.tq__sonuc.gorun > :nth-child(4) { animation-delay: .85s; }
.tq__sonuc.gorun > :nth-child(5) { animation-delay: 1.1s; }
.tq__sonuc.gorun > :nth-child(6) { animation-delay: 1.3s; }
.tq__sonucust {
  font-family: var(--tq-uzay);
  font-size: 11px;
  letter-spacing: .6em; margin-right: -.6em;
  text-transform: uppercase;
  color: rgba(236, 240, 248, .5);
}
.tq__sonuccevap {
  max-width: 900px;
  margin-top: 26px;
  font-weight: 300;
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.18;
  color: #f4f6fb;
}
.tq__sonuccevap[data-kim="a"] { text-shadow: 0 0 44px rgba(232, 197, 122, .38); }
.tq__sonuccevap[data-kim="b"] { text-shadow: 0 0 44px rgba(143, 184, 255, .38); }
/* Yüzde olarak sonuç (18 Eyl): büyük sayı önde olanın renginde. */
.tq__sonuccevap--yuzde {
  font-family: var(--tq-uzay);
  font-weight: 400;
  font-size: clamp(54px, 11vw, 120px);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.tq__sonuccevap--yuzde[data-kim="a"] { color: var(--tq-a); }
.tq__sonuccevap--yuzde[data-kim="b"] { color: var(--tq-b); }
.tq__sonucdagilim {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 28px;
  margin-top: 16px;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 300;
  color: rgba(236, 240, 248, .72);
}
.tq__sonucdagilim[hidden] { display: none; }
.tq__dagilimpay { font-variant-numeric: tabular-nums; }
.tq__dagilimpay[data-kim="a"] { color: var(--tq-a); }
.tq__dagilimpay[data-kim="b"] { color: var(--tq-b); }
.tq__sonucdagilim[data-onde="a"] .tq__dagilimpay[data-kim="b"],
.tq__sonucdagilim[data-onde="b"] .tq__dagilimpay[data-kim="a"] { opacity: .55; }
.tq__sonucnasil {
  margin-top: 18px;
  font-family: var(--tq-uzay);
  font-size: 9.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(236, 240, 248, .42);
}
.tq__gerekce {
  max-width: 580px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(236, 240, 248, .66);
}
.tq__gerekce[hidden] { display: none; }
.tq__sohbetbak {
  margin-top: 30px;
  padding: 6px 10px;
  border: 0; background: none;
  color: rgba(236, 240, 248, .42);
  font-size: 12px; letter-spacing: .12em;
  text-decoration: underline;
  text-decoration-color: rgba(236, 240, 248, .18);
  text-underline-offset: 5px;
  cursor: pointer;
}
.tq__sohbetbak:hover { color: rgba(236, 240, 248, .75); }

/* ---- İPTAL: sağ altta, çok şeffaf, kırmızı ------------------------------
   Mira: *"Sağ altta iptal butonu olsun. Ama bu çok şeffaf ve çok görünmez
   bir nevi olsun. Kırmızı olsun bu da."* Her fazda duruyor; üstüne gelince
   (ya da klavyeyle odaklanınca) netleşiyor. */
.tq__iptal {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 3;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--tq-kirmizi), .1);
  background: transparent;
  color: rgba(var(--tq-kirmizi), .27);
  font-family: var(--tq-uzay);
  font-size: 9.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .9s .25s, color .25s, border-color .25s, background .25s;
}
.tq:not([data-faz="hazir"]) .tq__iptal { opacity: 1; }
.tq[data-faz="donus"] .tq__iptal { opacity: 0; pointer-events: none; transition: opacity .4s; }
.tq__iptal:hover, .tq__iptal:focus-visible {
  outline: none;
  color: rgba(var(--tq-kirmizi), .88);
  border-color: rgba(var(--tq-kirmizi), .45);
  background: rgba(var(--tq-kirmizi), .06);
}

/* ---- HOPARLÖR: sol altta, iptalin aynası --------------------------------
   Mira (11 Eyl): *"hoparlör tuşu olsun, eğer açıksa her şey sesli okunsun."*
   Karanlık açılışı (karar → bos → davet) bozmasın diye soru fazında gelir.
   Kapalıyken çok şeffaf ve üstü çizili; açıkken beyaz, okurken dalgalar
   nabız atar. `kilitli`: tarayıcı sesi bir dokunuş olmadan açmadı — düğme
   dokunulmak istiyor. `hata`: ses üretilemedi, yanında sebebi yazar. */
.tq__hoparlor {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(12px, calc(env(safe-area-inset-bottom) - 4px));
  z-index: 3;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(235, 240, 250, .1);
  background: transparent;
  color: rgba(235, 240, 250, .32);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s .25s, color .25s, border-color .25s, background .25s;
}
.tq:is([data-faz="soru"], [data-faz="gidis"], [data-faz="sohbet"], [data-faz="sonuc"]) .tq__hoparlor {
  opacity: 1;
  pointer-events: auto;
}
.tq__hoparlor svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.tq__hop-dalga { opacity: 0; transition: opacity .3s; }
.tq__hop-kes { transition: opacity .3s; }
.tq__hoparlor:hover, .tq__hoparlor:focus-visible {
  outline: none;
  color: rgba(235, 240, 250, .8);
  border-color: rgba(235, 240, 250, .35);
}
.tq__hoparlor:is([data-durum="acik"], [data-durum="caliyor"], [data-durum="kilitli"]) {
  color: rgba(244, 246, 251, .88);
  border-color: rgba(235, 240, 250, .3);
  background: rgba(235, 240, 250, .05);
}
.tq__hoparlor:is([data-durum="acik"], [data-durum="caliyor"], [data-durum="kilitli"]) .tq__hop-dalga { opacity: .9; }
.tq__hoparlor:is([data-durum="acik"], [data-durum="caliyor"], [data-durum="kilitli"]) .tq__hop-kes { opacity: 0; }
.tq__hoparlor[data-durum="caliyor"] .tq__hop-dalga { animation: tq-dalga 1.4s ease-in-out infinite; }
.tq__hoparlor[data-durum="caliyor"] .tq__hop-dalga--dis { animation-delay: .22s; }
.tq__hoparlor[data-durum="kilitli"] { animation: tq-nabiz 1.1s ease-in-out infinite; }
.tq__hoparlor[data-durum="hata"] {
  color: rgba(var(--tq-kirmizi), .7);
  border-color: rgba(var(--tq-kirmizi), .3);
}
@keyframes tq-dalga {
  0%, 100% { opacity: .25; }
  45%      { opacity: 1; }
}
.tq__hopnot {
  position: absolute;
  left: calc(max(18px, env(safe-area-inset-left)) + 50px);
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px));
  z-index: 3;
  max-width: min(46vw, 360px);
  font-size: 11.5px; line-height: 1.35;
  color: rgba(255, 176, 156, .75);
  pointer-events: none;
}
.tq__hopnot:empty { display: none; }
.tq[data-faz="donus"] .tq__hoparlor, .tq[data-faz="donus"] .tq__hopnot {
  opacity: 0; pointer-events: none; transition: opacity .4s;
}

/* Sesin okuduğu mesaj: ses yazının gerisinde kalınca nerede olduğu görünsün.
   Soluklaşmış eski mesaj da okunurken netleşir. */
.tq__mesaj--okunuyor { opacity: 1 !important; }
.tq__mesaj--okunuyor[data-kim="a"] { border-left-color: rgba(232, 197, 122, .95); }
.tq__mesaj--okunuyor[data-kim="b"] { border-right-color: rgba(143, 184, 255, .95); }

/* ---- telefon ----------------------------------------------------------- */
@media (pointer: coarse) {
  .tq__iptal { padding: 11px 16px; }
  .tq__hoparlor { width: 46px; height: 46px; }
}
@media (max-width: 760px) {
  .tq__mesaj { max-width: 90%; }
  .tq__akis { padding: 40px 16px 24px; }
  .tq__metin { font-size: 15px; }
  .tq__baslik { padding: 0 18px 10px; }
  .tq__soruyazi { letter-spacing: .24em; }
  .tq__yuzde { padding: 0 18px; }
  .tq__yuzdetablo { gap: 3px 9px; }
}
/* Klavye açıkken soru yukarıda dursun: ortadaki bir kutuyu klavye örter. */
.tq--klavye .tq__soru { justify-content: flex-start; padding-top: 16vh; }

/* ---- hareket istemeyene ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .tq *, .tq__zemin,
  .anaekran[data-tanri] > * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .tq__parca, .anaekran[data-tanri="1"] > * { filter: none !important; }
  .tq__alan.bos .tq__imlec { animation: none; opacity: 1; }
}