/* Münazara Arenası: düz siyah zemin, tek yazı ailesi (Geist), beyaz birincil eylem, takım renkleri mavi/turuncu.
   Renk yalnız iki yerden gelir: takım renkleri ve salon havasıyla değişen alacakaranlık göğü. */
:root {
  --zemin: #000000;
  --kart: #181818;
  --kart2: #1f1f1f;
  --kart3: #272727;
  --cizgi: #272727;
  --cizgi2: #313131;
  --metin: #ededed;
  --beyaz: #ffffff;
  --soluk: #a1a1a1;
  --sonuk: #7a7a7a;
  --hukumet: #5b9dff;
  --hukumet-zemin: #1f2a3d;
  --muhalefet: #ff8a4c;
  --muhalefet-zemin: #3a2418;
  --iyi: #4ade80;
  --uyari: #fbbf24;
  --hata: #f87171;
  --r: 24px;
  --mono: "Geist Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--zemin); color: var(--metin); font: 16px/24px Geist, system-ui, sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
h1 { font-size: 36px; line-height: 40px; margin: 0 0 8px; }
h2 { font-size: 24px; line-height: 32px; margin: 0 0 8px; }
h3 { font-size: 18px; line-height: 28px; margin: 0 0 8px; }
h4 { font-size: 14px; line-height: 20px; margin: 24px 0 8px; color: var(--soluk); }
p { text-wrap: pretty; }
a { color: var(--beyaz); }
a:hover { color: #d4d4d4; }
i, em { font-style: normal; }
code { font-family: var(--mono); font-size: 14px; background: var(--kart3); padding: 1px 6px; border-radius: 6px; }
.kucuk { font-size: 14px; line-height: 20px; color: var(--soluk); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.uyari-yazi { color: var(--uyari); }
.parlak-baslik { background: linear-gradient(90deg, #ffffff, #9b9b9b); -webkit-background-clip: text; background-clip: text; color: transparent; }
:focus-visible { outline: 2px solid var(--beyaz); outline-offset: 2px; }
.nokta { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: var(--soluk); flex: none; }
.nokta.hukumet { background: var(--hukumet); } .nokta.muhalefet { background: var(--muhalefet); }
.nokta.iyi { background: var(--iyi); } .nokta.uyari { background: var(--uyari); }

/* Üst çubuk: ortada yüzen menü */
.ust-kap { position: sticky; top: 0; z-index: 20; display: flex; justify-content: center; padding: 16px 16px 0; pointer-events: none; }
.ust { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 8px 8px 8px 16px; border: 1px solid var(--cizgi); border-radius: 16px; background: rgba(24, 24, 24, .8); backdrop-filter: blur(12px); max-width: 100%; }
.marka { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.ust-menu { display: flex; gap: 4px; overflow-x: auto; }
.ust-menu button { background: none; border: 0; color: var(--soluk); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ust-menu button:hover { color: var(--beyaz); }
.ust-menu button.aktif { color: var(--beyaz); background: var(--kart3); }
.ust-sag { display: flex; gap: 8px; align-items: center; }
.ust-unvan { display: flex; gap: 8px; align-items: center; font-size: 12px; line-height: 16px; color: var(--soluk); white-space: nowrap; }
.xp-mini { width: 48px; height: 4px; background: var(--kart3); border-radius: 9999px; overflow: hidden; display: inline-block; }
.xp-mini i { display: block; height: 100%; background: var(--beyaz); }
.etiket { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 8px; background: var(--kart2); font-size: 12px; line-height: 16px; color: var(--soluk); white-space: nowrap; }
.etiket::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--soluk); }
.etiket.iyi::before { background: var(--iyi); }
.etiket.uyari::before { background: var(--uyari); }

main { max-width: 1120px; margin: 0 auto; padding: 48px 24px 96px; display: flex; flex-direction: column; gap: 24px; }
main.genis { max-width: 1280px; padding-top: 24px; }

/* Kartlar ve ızgaralar */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 24px; min-width: 0; }
.izgara { display: grid; gap: 24px; }
.izgara.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bolum { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.satir.sag { justify-content: flex-end; }
.satir.kaydir { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.satir > label { color: var(--soluk); font-size: 14px; min-width: 80px; margin: 0; }
label { display: block; margin: 12px 0 4px; font-size: 14px; color: var(--soluk); }
label input, label select { display: block; width: 100%; margin-top: 4px; }
.gizli-etiket { position: absolute; left: -9999px; }

input, select, textarea { background: var(--zemin); color: var(--metin); border: 1px solid var(--cizgi2); border-radius: 12px; padding: 12px; font: inherit; min-height: 48px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--beyaz); outline-offset: 2px; }
.satir input { flex: 1; min-width: 180px; }
textarea { width: 100%; resize: vertical; }
input[type="range"] { padding: 0; min-height: 0; accent-color: var(--beyaz); }
.onay-kutu { display: flex; gap: 8px; align-items: center; color: var(--metin); }
.onay-kutu input { width: auto; min-height: 0; margin: 0; accent-color: var(--beyaz); }

/* Düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; background: var(--kart3); color: var(--beyaz); border: 1px solid transparent; border-radius: 12px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, transform .08s; }
.btn:hover:not(:disabled) { background: var(--cizgi2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.birincil { background: var(--beyaz); color: #000; }
.btn.birincil:hover:not(:disabled) { background: #e5e5e5; }
.btn.cizgili { background: transparent; border-color: var(--cizgi2); color: var(--metin); }
.btn.cizgili:hover:not(:disabled) { background: var(--kart2); }
.btn.buyuk { min-height: 48px; padding: 8px 24px; font-size: 16px; }
.btn.ince { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn.tehlike { color: var(--hata); }
.btn svg { flex: none; }
.kisayol { padding: 2px 6px; border-radius: 4px; background: #ededed; color: #4a4a4a; font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500; }
.hap { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; background: var(--kart2); color: var(--soluk); border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hap:hover:not(:disabled) { color: var(--beyaz); }
.hap.secili { color: var(--beyaz); background: var(--cizgi2); border-color: #4a4a4a; }
.hap:disabled { opacity: .4; cursor: not-allowed; }
.segment { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--kart2); }
.segment .hap { background: transparent; min-height: 40px; }
.segment .hap.secili { background: var(--cizgi2); border-color: transparent; }

/* Gök katmanı */
.gok-kap { position: relative; overflow: hidden; isolation: isolate; }
.gok-tuval { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.gok-kap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, var(--karart, .35)); pointer-events: none; }
.gok-yedek { background: var(--gok-resim) center / cover; }
.cam { background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); }

/* Lobi */
.lobi { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.lobi-sol { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.lobi-sag { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.kahraman { border-radius: var(--r); border: 1px solid var(--cizgi2); background: var(--kart); padding: 40px; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; }
.kahraman .ust-yazi { font-size: 14px; line-height: 20px; color: #e5e5e5; margin-bottom: 16px; }
.kahraman h1 { color: var(--beyaz); max-width: 680px; margin: 0 0 24px; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.cip { padding: 4px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.kahraman .btn.cizgili { border-color: rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .35); color: var(--beyaz); }
.kaldigin { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 24px 32px; }
.kaldigin > div { flex: 1 1 320px; min-width: 0; }
.kaldigin p { margin: 4px 0 0; color: var(--soluk); }
.kaldigin p b { color: var(--beyaz); font-weight: 500; }
.karsilama h2 { margin-top: 0; }
.patron { display: block; text-align: left; font: inherit; color: var(--metin); cursor: pointer; background: var(--kart); border: 1px solid var(--cizgi2); border-radius: 16px; padding: 24px; transition: background .15s; }
.patron:hover:not(:disabled) { background: var(--kart2); }
.patron-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.patron-ad { font-size: 18px; line-height: 28px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rozet-etiket { padding: 2px 8px; border-radius: 6px; background: var(--beyaz); color: #000; font-size: 12px; line-height: 16px; font-weight: 600; }
.rozet-etiket.iyi { background: var(--iyi); }
.patron p { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--soluk); }
.patron.kilitli { background: #131209; border-color: var(--kart2); color: var(--sonuk); cursor: not-allowed; }
.patron.kilitli .kucuk { color: #8a8a8a; }
.unvan-kart .buyuk-ad { font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: 16px; }
.cubuk { display: block; height: 8px; border-radius: 9999px; background: var(--kart3); overflow: hidden; }
.cubuk i { display: block; height: 100%; background: var(--metin); border-radius: 9999px; transition: width .6s; }
.cubuk.zayif i { background: var(--muhalefet); }
.yetenekler { display: flex; flex-direction: column; gap: 12px; }
.yetenek { display: grid; grid-template-columns: 72px minmax(0, 1fr) 32px; gap: 12px; align-items: center; font-size: 14px; line-height: 20px; }
.yetenek.zayif .y-ad { color: var(--muhalefet); font-weight: 600; }
.y-sev { text-align: right; font-family: var(--mono); color: var(--soluk); }
.ipucu { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--kart2); font-size: 14px; line-height: 20px; color: #d4d4d4; }
.ipucu b { color: var(--muhalefet); }
.mini-tablo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
.mini-tablo li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--kart2); }
.mini-tablo li span:last-child { font-family: var(--mono); color: var(--soluk); }
.mini-tablo li.sen { background: var(--kart3); color: var(--beyaz); font-weight: 600; }
.mini-tablo li.sen span:last-child { color: var(--beyaz); }
.rozetler { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.rozet { text-align: center; padding: 12px 8px; border-radius: 16px; background: var(--kart2); opacity: .4; filter: grayscale(1); }
.rozet span { font-size: 24px; line-height: 32px; display: block; }
.rozet small { font-size: 12px; line-height: 16px; display: block; }
.rozet em { display: block; font-size: 12px; line-height: 16px; color: var(--soluk); margin-top: 4px; }
.rozet.var { opacity: 1; filter: none; background: var(--kart3); }
.rozet.yeni { animation: parla 1.2s ease-in-out 3; }
@keyframes parla { 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); } }

/* Kurulum */
.adim-baslik { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.adim-baslik h3 { margin: 0; }
.adim { width: 28px; height: 28px; border-radius: 9999px; background: var(--beyaz); color: #000; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; font-family: var(--mono); }
.secenekler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.secenek { text-align: left; background: var(--kart2); border: 1px solid transparent; color: var(--metin); border-radius: 16px; padding: 16px; cursor: pointer; font: inherit; }
.secenek small { display: block; color: var(--soluk); margin-top: 4px; font-size: 14px; line-height: 20px; }
.secenek.secili { border-color: var(--beyaz); background: var(--kart3); }
.secenek:disabled { cursor: default; }
.secili-onerge { background: var(--kart2); border-radius: 16px; padding: 16px; }
.bilgi { background: var(--hukumet-zemin); color: #cfe0ff; border-radius: 12px; padding: 8px 12px; font-size: 14px; line-height: 20px; }
.onerge-liste { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.onerge { text-align: left; background: var(--kart2); color: var(--metin); border: 1px solid transparent; border-radius: 12px; padding: 12px; font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; display: flex; gap: 12px; }
.onerge:hover { border-color: var(--cizgi2); }
.zorluk { display: inline-flex; gap: 3px; padding-top: 6px; min-width: 28px; }
.zorluk i { width: 6px; height: 6px; border-radius: 9999px; background: var(--kart3); }
.zorluk i.dolu { background: var(--soluk); }
.pozisyonlar, .salon-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.takim-kutu { border-radius: 16px; padding: 12px; background: var(--kart2); }
.takim-ad { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.takim-ad::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--hukumet); }
.takim-kutu.muhalefet .takim-ad::before { background: var(--muhalefet); }
.pozisyon { display: flex; justify-content: space-between; width: 100%; text-align: left; background: var(--kart); color: var(--metin); border: 1px solid var(--cizgi); border-radius: 12px; padding: 8px 12px; margin-top: 8px; font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; align-items: center; }
.pozisyon small { color: var(--soluk); }
.pozisyon.secili { border-color: var(--beyaz); background: var(--kart3); }
.kisilik-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.alt-cubuk { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.patron-bant { background: var(--muhalefet-zemin); color: #ffd2b8; border-radius: 12px; padding: 8px 12px; font-size: 14px; }

/* Hazırlık */
.hazirlik-ust { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.sayac-buyuk { font-family: var(--mono); font-size: 48px; line-height: 1; font-weight: 600; color: var(--beyaz); font-variant-numeric: tabular-nums; }
.sohbet { height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.mesaj { padding: 8px 12px; border-radius: 16px; max-width: 88%; font-size: 14px; line-height: 20px; white-space: pre-wrap; }
.mesaj.o { background: var(--kart2); align-self: flex-start; }
.mesaj.ben { background: var(--kart3); color: var(--beyaz); align-self: flex-end; }

/* Maç: üstte gök şeridi, solda konuşma sırası, ortada kürsü, altta eylem çubuğu */
.mac-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 24px 32px; border-radius: var(--r); border: 1px solid var(--cizgi); --karart: .4; }
.mac-ust .onerge-baslik { flex: 1 1 420px; min-width: 0; }
.mac-ust .onerge-baslik .kucuk { color: #d4d4d4; font-size: 12px; line-height: 16px; }
.mac-ust .onerge-baslik div:last-child { color: var(--beyaz); font-weight: 500; }
.hava { flex: 0 1 288px; min-width: 224px; }
.hava-uclar { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: #d4d4d4; }
.hava-cubuk { position: relative; height: 8px; margin-top: 8px; border-radius: 9999px; background: rgba(39, 39, 39, .8); }
.hava-cubuk::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 8px; background: #4a4a4a; }
.hava-cubuk b { position: absolute; top: 0; height: 8px; border-radius: 9999px; background: var(--hava-renk, var(--soluk)); transition: left 1.2s ease, width 1.2s ease; }
.hava-cubuk i { position: absolute; top: -4px; left: var(--hava); width: 16px; height: 16px; margin-left: -8px; border-radius: 9999px; background: var(--beyaz); border: 2px solid #000; transition: left 1.2s ease; }
.mac { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sira-panel { flex: 1 1 224px; max-width: 272px; min-width: 0; position: sticky; top: 96px; }
.konusma-sira { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.konusma-sira li { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1px solid transparent; }
.konusma-sira li .ad { flex: 1; min-width: 0; }
.konusma-sira li small { font-size: 12px; line-height: 16px; color: var(--soluk); }
.konusma-sira li.simdi { background: var(--kart2); border-color: var(--cizgi2); color: var(--beyaz); font-weight: 600; }
.konusma-sira li.bitti { color: var(--sonuk); }
.konusma-sira li.bitti small { display: none; }
.konusma-sira li.bitti::after { content: ""; width: 12px; height: 7px; border: solid var(--iyi); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -2px); }
.konusma-sira .cevap-nokta { background: transparent; border: 2px solid var(--hukumet); }
.konusma-sira .cevap-nokta.muhalefet { border-color: var(--muhalefet); }
.kursu { flex: 999 1 600px; min-width: 0; }
.kursu-kart { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.kursu-ust { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.kimlik { width: 48px; height: 48px; border-radius: 9999px; display: grid; place-items: center; font-weight: 600; font-size: 18px; flex: none; background: var(--hukumet-zemin); color: #9cc3ff; }
.kimlik.muhalefet { background: var(--muhalefet-zemin); color: #ffb48a; }
.kimlik.sen { background: var(--beyaz); color: #000; }
.kursu-ust .kim { flex: 1 1 200px; min-width: 0; }
.kursu-ust .kim .taraf { font-size: 12px; line-height: 16px; color: #9cc3ff; }
.kursu-ust .kim .taraf.muhalefet { color: #ffb48a; }
.kursu-ust .kim h2 { margin: 0; }
.sayac { font-family: var(--mono); font-size: 36px; line-height: 40px; font-weight: 600; color: var(--beyaz); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sayac small { display: block; font-size: 14px; line-height: 20px; color: var(--soluk); font-weight: 500; }
.sayac.buyuk { font-size: 48px; line-height: 48px; }
.sayac.asim { color: var(--hata); animation: nabiz 1s infinite; }
@keyframes nabiz { 50% { opacity: .55; } }
.zaman-cubuk { position: relative; height: 4px; border-radius: 9999px; background: var(--kart3); }
.zaman-cubuk i { display: block; height: 100%; width: 0; border-radius: 9999px; background: var(--beyaz); transition: width .3s linear; }
.zaman-cubuk b { position: absolute; top: -4px; width: 2px; height: 12px; background: #4a4a4a; }
.akis { font-size: 20px; line-height: 32px; max-width: 68ch; max-height: 56vh; min-height: 200px; overflow-y: auto; white-space: pre-wrap; padding: 4px 0; }
.imlec { display: inline-block; width: 8px; height: 24px; background: var(--beyaz); vertical-align: text-bottom; animation: nabiz .9s infinite; margin-left: 4px; }
.tepki { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; padding: 2px 8px; border-radius: 6px; background: var(--kart3); color: #d4d4d4; font-size: 12px; line-height: 16px; vertical-align: middle; white-space: nowrap; animation: belir .4s; }
@keyframes belir { from { opacity: 0; transform: translateY(4px); } }
.poi-kutu { padding: 16px; border-radius: 16px; background: var(--kart2); border: 1px solid var(--cizgi2); animation: belir .3s; }
.poi-kutu.gelen { background: var(--muhalefet-zemin); border-color: rgba(255, 138, 76, .4); }
.poi-kutu.gelen.hukumet { background: var(--hukumet-zemin); border-color: rgba(91, 157, 255, .4); }
.poi-kutu.ret { opacity: .7; }
.poi-blok { font-size: 15px; line-height: 24px; background: var(--kart2); border-radius: 12px; padding: 12px 16px; margin: 12px 0; white-space: normal; }
.poi-blok.ret { color: var(--soluk); }
.basla-alan { text-align: center; padding: 24px 8px; }
.notlar-goster { text-align: left; margin: 12px 0 24px; }
.notlar-goster pre, pre.metin { white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 22px; background: var(--kart2); padding: 12px 16px; border-radius: 12px; }
.mik-durum { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.kayit-nokta { width: 12px; height: 12px; border-radius: 50%; background: var(--hata); animation: nabiz 1s infinite; }
.seviye { flex: 1; height: 6px; background: var(--kart3); border-radius: 9999px; overflow: hidden; max-width: 240px; }
.seviye i { display: block; height: 100%; width: 0; background: var(--iyi); transition: width .08s; }
.canli-dokum { min-height: 220px; max-height: 46vh; overflow-y: auto; font-size: 18px; line-height: 30px; background: var(--kart2); border-radius: 16px; padding: 16px; }
.canli-dokum .parca small { font-family: var(--mono); color: var(--sonuk); font-size: 12px; margin-right: 4px; }
.canli-dokum .ara { color: var(--soluk); }
.kayit-gorsel { text-align: center; padding: 32px 0; }
.dalga { --s: 0; width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 12px; background: radial-gradient(circle, var(--hata) 0 30%, transparent 31%); box-shadow: 0 0 0 calc(var(--s) * 40px) rgba(248, 113, 113, .25); transition: box-shadow .1s; }
.eylem-cubugu { position: sticky; bottom: 0; z-index: 15; margin: 0 -24px -96px; border-top: 1px solid var(--kart2); background: rgba(0, 0, 0, .85); backdrop-filter: blur(12px); }
.eylem-ic { max-width: 1232px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.eylem-ic .siradaki { flex: 1 1 200px; text-align: right; font-size: 14px; line-height: 20px; color: var(--soluk); }
.eylem-ic .siradaki b { color: var(--metin); font-weight: 500; }
.poi-btn.korumali { opacity: .55; }

/* Ölçümler */
.ozet-metrik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.ozet-metrik.iki-sutun { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ozet-metrik div { background: var(--kart2); border-radius: 16px; padding: 16px; }
.ozet-metrik b { display: block; font-family: var(--mono); font-size: 24px; line-height: 32px; font-weight: 600; color: var(--beyaz); font-variant-numeric: tabular-nums; }
.ozet-metrik small { color: var(--soluk); font-size: 12px; line-height: 16px; }
.yukleniyor { padding: 40px; text-align: center; color: var(--soluk); }
.juri-bekle { text-align: center; padding: 56px 24px; }
.tokmak { display: inline-block; animation: tokmak 1.4s ease-in-out infinite; transform-origin: 70% 80%; color: var(--beyaz); }
@keyframes tokmak { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(-22deg); } 88% { transform: rotate(4deg); } }
.yukleniyor-cubuk { height: 4px; max-width: 320px; margin: 24px auto 0; background: var(--kart3); border-radius: 9999px; overflow: hidden; }
.yukleniyor-cubuk i { display: block; width: 35%; height: 100%; background: var(--beyaz); animation: kay 1.6s ease-in-out infinite; }
@keyframes kay { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* Kararı tahmin et */
.tahmin { max-width: 560px; margin: 32px auto 0; padding: 24px; border-radius: 16px; background: var(--kart2); text-align: left; }
.tahmin .satir > label { min-width: 120px; }
.kiyas-kutu { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--kart2); }
.kiyas-kutu .nokta { margin-top: 8px; }

/* Döküm düzelt */
.dokum-ust { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.dokum-ust h1 { font-size: 30px; line-height: 36px; margin: 4px 0 8px; }
.dokum-ust p { margin: 0; max-width: 680px; color: var(--soluk); }
.dokum-duzen { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.dokum-liste { flex: 999 1 600px; min-width: 0; padding: 8px; }
.dokum-yan { flex: 1 1 288px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dokum-satir { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 12px; align-items: start; padding: 12px 16px; border-radius: 16px; }
.dokum-satir:focus-within { background: var(--kart2); }
.dokum-satir .zaman { font-family: var(--mono); font-size: 14px; line-height: 24px; color: var(--sonuk); padding-top: 12px; }
.dokum-satir:focus-within .zaman { color: var(--beyaz); }
.dokum-satir textarea { min-height: 0; background: transparent; border-color: transparent; padding: 11px 12px; resize: none; overflow: hidden; }
.dokum-satir textarea:hover { border-color: var(--cizgi2); }
.dokum-satir textarea:focus { background: var(--zemin); border-color: #4a4a4a; }
.dokum-satir .dinle { width: 40px; height: 40px; margin-top: 4px; border-radius: 12px; border: 0; background: var(--kart2); color: var(--soluk); display: grid; place-items: center; cursor: pointer; }
.dokum-satir .dinle:hover { background: var(--beyaz); color: #000; }
.dokum-satir.poi-satir .zaman::after { content: "POI"; display: block; font-size: 10px; line-height: 12px; color: var(--hukumet); }
.tahmini { font-size: 12px; line-height: 16px; color: var(--sonuk); }

/* Rapor */
.sonuc-bant { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; border-radius: var(--r); border: 1px solid var(--cizgi2); padding: 48px 32px; min-height: 280px; --karart: .3; }
.sonuc-bant .sol { flex: 1 1 380px; min-width: 0; }
.sonuc-bant .ust-yazi { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: #e5e5e5; }
.sonuc-bant h1 { font-size: 48px; line-height: 1; margin: 8px 0; color: var(--beyaz); text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.sonuc-bant p { margin: 0; max-width: 680px; color: #e5e5e5; }
.cam-kutular { display: flex; gap: 8px; flex-wrap: wrap; }
.cam-kutu { min-width: 112px; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(10px); text-align: center; }
.cam-kutu b { display: block; font-family: var(--mono); font-size: 30px; line-height: 36px; font-weight: 600; color: var(--beyaz); font-variant-numeric: tabular-nums; }
.cam-kutu small { font-size: 12px; line-height: 16px; color: #d4d4d4; }
.sekmeler { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--kart); align-self: flex-start; }
.sekmeler button { min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 0; background: transparent; color: var(--soluk); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sekmeler button[aria-selected="true"] { background: var(--cizgi2); color: var(--beyaz); }
.sekme-panel { display: flex; flex-direction: column; gap: 24px; }
.sekme-panel[hidden] { display: none; }
.karar { color: #d4d4d4; max-width: 72ch; }
.siralama { display: flex; flex-direction: column; gap: 8px; }
.sira-satir { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 16px; background: var(--kart2); }
.sira-satir.sen { background: var(--kart3); outline: 1px solid #4a4a4a; }
.sira-no { width: 32px; height: 32px; flex: none; border-radius: 9999px; display: grid; place-items: center; background: var(--kart3); font-family: var(--mono); font-weight: 600; color: var(--beyaz); }
.sira-satir.sen .sira-no { background: var(--beyaz); color: #000; }
.baslik-nokta { display: flex; align-items: center; gap: 8px; }
.liste { padding-left: 24px; margin: 0; display: flex; flex-direction: column; gap: 12px; color: #d4d4d4; }
.zaman-serit { position: relative; height: 32px; }
.zaman-serit .ray { position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 9999px; background: var(--kart3); }
.zaman-serit .dolu { position: absolute; left: 0; top: 14px; height: 4px; border-radius: 9999px; background: #4a4a4a; }
.zaman-serit button { position: absolute; top: 8px; width: 16px; height: 16px; margin-left: -8px; padding: 0; border-radius: 9999px; border: 2px solid var(--kart); background: var(--soluk); cursor: pointer; }
.zaman-serit button.iyi { background: var(--iyi); } .zaman-serit button.hata { background: var(--muhalefet); } .zaman-serit button.kacan { background: var(--metin); border-radius: 4px; }
.zaman-serit-alt { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--sonuk); }
.lejant { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; line-height: 16px; color: var(--soluk); margin: 16px 0; }
.lejant span { display: inline-flex; align-items: center; gap: 8px; }
.anlar { display: flex; flex-direction: column; gap: 4px; }
.an { display: grid; grid-template-columns: 16px 56px minmax(0, 1fr); gap: 12px; align-items: baseline; text-align: left; background: transparent; color: #d4d4d4; border: 0; border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 15px; cursor: pointer; }
.an:hover { background: var(--kart2); }
.an .nokta { transform: translateY(-1px); }
.an.iyi .nokta { background: var(--iyi); } .an.hata .nokta { background: var(--muhalefet); } .an.kacan .nokta { background: var(--metin); border-radius: 2px; }
.an-zaman { font-family: var(--mono); color: var(--beyaz); }
audio { width: 100%; margin: 8px 0 12px; }
blockquote { margin: 0; padding: 16px 20px; background: var(--kart2); border-radius: 16px; font-size: 18px; line-height: 28px; color: var(--beyaz); }
.sonraki { padding: 16px; border-radius: 16px; background: var(--kart2); color: #d4d4d4; }
.sonraki b { color: var(--beyaz); }
.puanlar { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.puan-satir { display: grid; grid-template-columns: 1fr 56px; gap: 2px 12px; padding: 12px 16px; border-radius: 12px; background: var(--kart2); }
.puan-satir small { grid-column: 1 / -1; color: var(--soluk); font-size: 14px; line-height: 20px; }
.puan-satir span small { display: inline; }
.puan-satir b { text-align: right; font-family: var(--mono); color: var(--beyaz); font-size: 18px; }
.puan-satir.sen { background: var(--kart3); outline: 1px solid #4a4a4a; }
.xp-kalemler { display: flex; flex-direction: column; gap: 4px; max-width: 420px; font-size: 14px; }
.xp-kalemler div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--kart3); }
.xp-kalemler b { font-family: var(--mono); }
.xp-kalemler .carpan b { color: var(--uyari); }
.xp-kalemler .toplam { font-weight: 600; border-bottom: 0; font-size: 16px; color: var(--beyaz); }
.seviye-atla { margin-top: 16px; font-size: 18px; padding: 16px; text-align: center; border-radius: 16px; background: var(--kart3); animation: parla 1.2s 3; }
.maliyet { font-size: 12px; line-height: 16px; color: var(--sonuk); font-family: var(--mono); }
details summary { cursor: pointer; color: var(--soluk); margin-top: 8px; font-size: 14px; font-weight: 600; }
details summary:hover { color: var(--beyaz); }
.uyari-bant { background: #3a1616; border-color: rgba(248, 113, 113, .4); color: #fecaca; }
.deneme-bant { background: #2a2108; border-color: rgba(251, 191, 36, .35); color: #fde68a; }

/* Ayarlar: roller ve sağlayıcılar */
.roller { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 8px; }
.rol-satir { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px) minmax(220px, 1.4fr); gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--kart2); }
.rol-ad { display: flex; gap: 12px; align-items: flex-start; }
.rol-ad .nokta { margin-top: 8px; }
.model-alan { display: flex; gap: 8px; align-items: center; min-width: 0; }
.model-alan input { flex: 1; min-width: 0; }
.uclar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.uc-kart { padding: 16px; border-radius: 16px; background: var(--kart2); min-width: 0; }
.uc-kart label input { margin-top: 4px; }
.uc-kart details summary { font-weight: 500; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 820px) { .rol-satir { grid-template-columns: 1fr; } }

/* Profil, geçmiş, kulüp */
.profil-kart { display: flex; gap: 24px; align-items: center; }
.profil-kart > div:last-child { flex: 1; min-width: 0; }
.unvan-buyuk { font-size: 40px; width: 80px; height: 80px; display: grid; place-items: center; border-radius: 9999px; background: var(--kart2); flex: none; }
.xp-cubuk { height: 8px; border-radius: 9999px; background: var(--kart3); overflow: hidden; margin: 8px 0; }
.xp-cubuk i { display: block; height: 100%; background: var(--beyaz); transition: width .6s; }
.unvan-yolu { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.unvan-yolu div { text-align: center; padding: 12px 4px; border-radius: 16px; background: var(--kart2); opacity: .4; }
.unvan-yolu div.acik { opacity: 1; background: var(--kart3); }
.unvan-yolu span { font-size: 24px; display: block; }
.unvan-yolu b { display: block; font-size: 14px; }
.unvan-yolu small { color: var(--soluk); font-size: 12px; font-family: var(--mono); }
.gecmis { display: flex; flex-direction: column; gap: 8px; }
.gecmis-satir { text-align: left; display: flex; flex-direction: column; gap: 2px; background: var(--kart2); color: var(--metin); border: 1px solid transparent; border-radius: 16px; padding: 12px 16px; font: inherit; cursor: pointer; }
.gecmis-satir:hover { border-color: var(--cizgi2); }
.gecmis-satir span:last-child { color: var(--soluk); font-size: 14px; }
.kulup-tablo { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.kulup-tablo li { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--kart2); }
.kulup-tablo li.sen { background: var(--kart3); outline: 1px solid #4a4a4a; }
.kulup-tablo small { color: var(--soluk); }
.kulup-tablo span:last-child { font-family: var(--mono); }

/* Bildirimler */
#bildirimler { position: fixed; right: 16px; bottom: 96px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(360px, calc(100vw - 32px)); }
.bildirim { display: flex; gap: 12px; align-items: flex-start; background: var(--kart2); border: 1px solid var(--cizgi2); padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 20px; animation: belir .3s; transition: opacity .5s, transform .5s; }
.bildirim::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 9999px; background: var(--beyaz); flex: none; }
.bildirim.hata::before { background: var(--hata); }
.bildirim.iyi::before { background: var(--iyi); }
.bildirim.gidiyor { opacity: 0; transform: translateX(20px); }

/* Bekleme göstergesi */
.noktalar { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 4px; }
.noktalar i { width: 6px; height: 6px; border-radius: 50%; background: var(--beyaz); animation: zipla 1s infinite ease-in-out; }
.noktalar i:nth-child(2) { animation-delay: .15s; }
.noktalar i:nth-child(3) { animation-delay: .3s; }
@keyframes zipla { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.mesaj.yaziyor { color: var(--soluk); }
.mesaj .sure { margin-left: 4px; }

/* Mobil */
@media (max-width: 820px) {
  .ust-kap { padding: 8px 8px 0; }
  .ust { gap: 8px; padding: 8px; border-radius: 14px; }
  .ust-menu { order: 3; flex-basis: 100%; }
  .ust-sag { margin-left: auto; }
  main { padding: 24px 16px 96px; }
  .izgara.iki, .izgara.uc, .secenekler { grid-template-columns: 1fr; }
  .sira-panel { position: static; max-width: none; flex-basis: 100%; }
  .konusma-sira { flex-direction: row; overflow-x: auto; }
  .konusma-sira li { min-width: 150px; }
  .ozet-metrik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unvan-yolu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hazirlik-ust { flex-direction: column; align-items: stretch; }
  .kahraman { padding: 24px; min-height: 320px; }
  h1, .kahraman h1 { font-size: 28px; line-height: 34px; }
  .sonuc-bant { padding: 32px 20px; }
  .sonuc-bant h1 { font-size: 36px; }
  .mac-ust { padding: 16px 20px; }
  .kursu-kart { padding: 20px; }
  .akis { font-size: 18px; line-height: 30px; }
  .eylem-cubugu { margin: 0 -16px -96px; }
  .eylem-ic { padding: 12px 16px; }
  .eylem-ic .siradaki { display: none; }
  .kisayol { display: none; }
  .dokum-satir { grid-template-columns: 44px minmax(0, 1fr) 40px; padding: 8px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }