/* Ölçüler ekran.js'te plan() ile hesaplanıp :root'a yazılır (--u --f --lh --etk --n --w --pay --hdr --inner --gx).
   Buradakiler JS gelmeden önceki ilk boyama içindir. */
:root {
  --zemin: #0a0c10;
  --metin: #f4f5f7;
  --soluk: #c3cad6;
  --cizgi: rgba(255, 255, 255, 0.11);
  --tr: #ff7a66;
  --en: #6aa8ff;
  --de: #f7c04a;

  --u: min(11vh, 6.2vw);
  --f: min(8.6vh, 4.5vw);
  --lh: calc(var(--f) * 1.28);
  --etk: calc(var(--f) * 0.72);
  --n: 3;
  --pay: 4.5vmin;
  --w: calc(100vw - 2 * var(--pay));
  --hdr: calc(var(--u) * 0.5);
  --inner: calc(var(--u) * 0.3);
  --gx: 0px;

  --y1: 0.72; /* şeritte ikinci en yeni cümlenin opaklığı */
  --y2: 0.5; /* daha eskiler */
}

body[data-tema="acik"] {
  --zemin: #f6f4ef;
  --metin: #14171c;
  --soluk: #454c59;
  --cizgi: rgba(0, 0, 0, 0.14);
  --tr: #b32a1e;
  --en: #1a55bd;
  --de: #8a5500;
  --y1: 0.8; /* açık zeminde soluk metin daha çabuk okunmaz olur */
  --y2: 0.6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--zemin);
  color: var(--metin);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none; /* çift tıkla tam ekrana geçerken sözcük seçilip ekranda mavi vurgu kalmasın */
}

body {
  display: flex;
  flex-direction: column;
  padding: var(--pay);
}
body.imlecsiz { cursor: none; }

/* --- üst şerit ------------------------------------------------------------- */

.ust {
  flex: none;
  height: var(--hdr);
  display: flex;
  align-items: center;
  gap: 1.2em;
  font-size: calc(var(--u) * 0.3);
  color: var(--soluk);
  transition: opacity 0.25s;
}

.baslik {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.konusan {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: calc(var(--u) * 0.36);
  font-weight: 600;
  color: var(--renk, var(--soluk));
  transition: opacity 0.25s;
}
.konusan[hidden] { display: none; }

.konusan .nokta {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
  animation: nabiz 1.6s ease-in-out infinite;
}

@keyframes nabiz {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* --- şeritler -------------------------------------------------------------- */

.seritler {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-inline: calc(var(--gx) / -2);
  transition: opacity 0.25s;
}
body[data-akis="yan"] .seritler { flex-direction: row; }

.serit {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--inner) / 2) calc(var(--gx) / 2);
  overflow: hidden;
  transition: flex-grow 0.55s ease, opacity 0.4s ease, padding 0.55s ease;
}

.serit:not(.kapali) ~ .serit:not(.kapali) { border-top: 1px solid var(--cizgi); }
body[data-akis="yan"] .serit:not(.kapali) ~ .serit:not(.kapali) { border-top: 0; border-left: 1px solid var(--cizgi); }

/* Konuşanın kendi dili: iki şeritli yerleşimde gizlenir (gerçek düğüm kalır, yerleşim çökmez) */
.serit.kapali {
  flex-grow: 0;
  padding-block: 0;
  padding-inline: 0;
  opacity: 0;
  pointer-events: none;
}

.etiket {
  flex: none;
  height: var(--etk);
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: calc(var(--f) * 0.4);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--renk);
}
.etiket::before {
  content: "";
  flex: none;
  width: 1.6em;
  height: 0.22em;
  margin-top: 0.5em;
  border-radius: 1em;
  background: var(--renk);
}
.etiket .ozgun {
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--soluk);
}

/* Kutu yüksekliği tam N satır: üstte yarım kesik satır olmaz. Metin alttan sabit, yeni satır eklenince eskiler yukarı kayar. */
.metin {
  flex: none;
  position: relative;
  overflow: hidden;
  width: var(--w);
  height: calc(var(--n) * var(--lh));
  font-size: var(--f);
  line-height: var(--lh);
  font-weight: 500;
  overflow-wrap: break-word;
}

.akis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.akis p { margin: 0; }

/* Vurgu: şeridin en yeni cümlesi tam parlak, öncekiler kademeli soluk; taslak biraz daha soluk */
.metin span {
  --yas: 1;
  --durum: 1;
  opacity: calc(var(--yas) * var(--durum));
  transition: opacity 0.5s ease;
}
.metin span[data-yas="1"] { --yas: var(--y1); }
.metin span[data-yas="2"] { --yas: var(--y2); }
.metin span[data-durum="taslak"] { --durum: 0.9; }

.metin span.y { animation: giris 0.4s ease-out; }
@keyframes giris { from { opacity: 0; } }

/* Çeviri henüz gelmedi */
.metin span[data-durum="bekliyor"]::before,
.metin span[data-durum="hata"]::before {
  content: "···";
  color: var(--soluk);
  letter-spacing: 0.15em;
}

/* Şu an akan cümlenin sonunda imleç. Atomik (inline-block) olmasın: satır sonunda tek başına yeni satıra
   düşüp bütün şeridi bir satır kaydırırdı. Boş satır-içi öğe + dolgu + arka plan çizgisi sözcükle aynı satırda kalır. */
.metin span.aktif[data-durum="taslak"]::after {
  content: "";
  padding-left: 0.22em;
  background: linear-gradient(var(--renk), var(--renk)) no-repeat right center / 0.07em 0.8em;
  animation: imlec 1s ease-in-out infinite;
}
@keyframes imlec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* --- bekleme ekranı ---------------------------------------------------------- */

.bekleme {
  position: fixed;
  inset: 0;
  padding: var(--pay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.5);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.bekleme-baslik {
  max-width: 90%;
  font-size: calc(var(--u) * 0.9);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.bekleme-baslik:empty { display: none; }
.bekleme-diller {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 0.36);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bekleme-diller span { color: var(--renk); }

body[data-durum="bekleme"] .bekleme { opacity: 1; transition-duration: 1.2s; }
body[data-durum="bekleme"] .seritler,
body[data-durum="bekleme"] .konusan,
body[data-durum="bekleme"] .baslik { opacity: 0; transition-duration: 1.2s; }

/* --- bağlantı bandı, ipucu ---------------------------------------------------- */

.bant {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(var(--u) * 0.22) var(--pay);
  text-align: center;
  font-size: calc(var(--u) * 0.3);
  font-weight: 600;
  background: #b3261e;
  color: #fff;
  transform: translateY(calc(100% + 2px)); /* kesirli yükseklikte alt piksel satırına sızmasın */
  transition: transform 0.3s, visibility 0s 0.3s;
  visibility: hidden;
}
body.kopuk .bant { transform: none; visibility: visible; transition: transform 0.3s; }
body.kopuk:not([data-durum="bekleme"]) .seritler { opacity: 0.35; }

.ipucu {
  position: fixed;
  left: 50%;
  top: 1vh;
  transform: translateX(-50%);
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.22);
  color: var(--soluk);
  font-size: max(14px, calc(var(--u) * 0.2));
  transition: opacity 0.6s;
  pointer-events: none;
}
.ipucu.gizli { opacity: 0; }

/* İlk boyamada hiçbir geçiş çalışmasın (ekran.js ilk çizimden sonra .anim ekler) */
body:not(.anim) * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01s !important; }
}