/* ==========================================================================
   Etki Seninle Basar — UI tasarim sistemi
   Kaynak: musteri prototipi Etki_Seninle_Baslar_v16.html (renkler, bilesenler, olculer)
   + hero gorselindeki hikaye renkleri + skor ekrani icin ayni paletin koyu temasi.
   Bu dosya kodlamada sitenin (wwwroot) ve skor ekraninin ORTAK CSS'i olur: tek kaynak.
   ========================================================================== */

/* ---------- Token'lar ---------- */
:root {
  /* Zemin (prototip: #f5f0df, gradient #fffaf0 -> #e6f1dc) */
  --c-ground: #f5f0df;
  --c-ground-warm: #fffaf0;
  --c-ground-mint: #e6f1dc;
  --c-panel: #fffdf5;
  --c-surface: #ffffff;

  /* Murekkep (prototip: #173b32 ana metin, #203e34 cevap metni, #285b4b ikincil buton) */
  --c-ink: #173b32;
  --c-ink-2: #203e34;
  --c-ink-3: #285b4b;
  --c-muted: #55706a;      /* prototip #597267 -> 4.5:1 icin bir ton koyu */
  --c-muted-soft: #6c7c70;

  /* Cizgi ve kenar */
  --c-line: #eee1ce;
  --c-line-2: #e7ddc9;
  --c-line-3: #d9e0d2;
  --c-line-green: #b7d2b9;

  /* Trendyol turuncusu (prototip: #ff681a; metin olarak acik zeminde #c84d0c) */
  --c-orange: #ff681a;
  --c-orange-ink: #c84d0c;
  --c-orange-soft: #fff6ed;
  --c-orange-shadow: rgba(198, 108, 48, .21);

  /* Etki eksenleri (prototip barlari) */
  --c-env: #50a971;
  --c-soc: #e69e43;
  --c-eco: #548ec2;
  --c-track: #e5e6db;

  /* Durum */
  --c-danger: #c43819;
  --c-danger-soft: #fff0e8;
  --c-notice: #f9eedc;
  --c-notice-ink: #795126;
  --c-pill: #e3f1dc;

  /* Hikaye renkleri (hero gorselindeki kartlardan olculdu; Sakarya Hatay'dan ayrissin diye zeytin yesili) */
  --s-adana: #c60f4b;
  --s-hatay: #1f5d42;
  --s-izmir: #106096;
  --s-diyarbakir: #722779;
  --s-sakarya: #4e7a22;
  /* Hikaye kart gorsel zeminleri (prototip .story-art gradientleri) */
  --s-adana-art: linear-gradient(145deg, #fce3dc, #fff3c8);
  --s-hatay-art: linear-gradient(145deg, #d7eada, #e9f4e5);
  --s-izmir-art: linear-gradient(145deg, #d9edf0, #f8ead4);
  --s-diyarbakir-art: linear-gradient(145deg, #e8e0f3, #f7eed8);
  --s-sakarya-art: linear-gradient(145deg, #d8ebd5, #f4edc9);

  /* Skor ekrani (koyu tema: ayni murekkep yesilinden) */
  --tv-bg: #0d241e;
  --tv-bg-2: #12312a;
  --tv-panel: #173b32;
  --tv-line: #26574a;
  --tv-text: #fffaf0;
  --tv-muted: #a8c4b6;
  --tv-gold: #ff8a3d;
  --tv-silver: #e9dcc0;
  --tv-bronze: #d9a46b;

  /* Tipografi: prototipin agir, yuvarlak karakteri -> Nunito (Turkce harf tam) */
  --f-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-body: 650;
  --fw-strong: 800;
  --fw-heavy: 900;

  /* Olcu */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;
  --sh-btn: 0 8px 22px var(--c-orange-shadow);
  --sh-panel: 0 14px 45px rgba(54, 88, 45, .09);
  --sh-card: 0 6px 18px rgba(54, 88, 45, .08);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--f-ui);
  font-weight: var(--fw-body);
  color: var(--c-ink);
  background: var(--c-ground);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Sahne (tasarim onizlemesi: cihaz olcusu sabit, pencereye sigar) ---------- */
.stage-host { min-height: 100vh; display: grid; place-items: center; background: #2b2f2d; padding: 24px 16px; }
.stage { position: relative; overflow: hidden; transform-origin: top left; }
.stage[data-device="ipad"] { width: 1180px; height: 820px; border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.stage[data-device="tv"] { width: 1920px; height: 1080px; }
.stage-label { position: fixed; left: 16px; top: 12px; color: #d8dcd9; font: 600 13px/1 var(--f-ui); letter-spacing: .04em; z-index: 10; }
.stage-label a { color: #ffb184; }

/* ---------- Quiz ekrani ---------- */
.app { width: 100%; height: 100%; background: linear-gradient(140deg, var(--c-ground-warm), var(--c-ground-mint)); }
.screen { width: 100%; height: 100%; padding: 28px 56px; display: flex; flex-direction: column; gap: 20px; }
.screen.center { align-items: center; justify-content: center; }

.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logos { height: 64px; width: auto; display: block; mix-blend-mode: multiply; }
.logos.sm { height: 44px; }

.langs { display: inline-flex; background: var(--c-panel); border-radius: var(--r-pill); padding: 5px; gap: 4px; box-shadow: var(--sh-card); }
.langs button { border: 0; background: transparent; padding: 10px 20px; border-radius: var(--r-pill); font-weight: var(--fw-strong); color: #46554b; min-height: 44px; }
.langs .selected { background: var(--c-orange); color: #fff; }

.eyebrow { font-weight: var(--fw-strong); letter-spacing: .13em; color: var(--c-orange-ink); font-size: 15px; }
.display { font-size: 104px; line-height: .93; letter-spacing: -.05em; font-weight: var(--fw-heavy); margin: 0; color: var(--c-ink); }
.display-sub { font-size: 40px; font-weight: var(--fw-strong); color: var(--c-orange-ink); }
.lead { font-size: 23px; line-height: 1.5; max-width: 560px; margin: 0; }
.h1 { font-size: 46px; line-height: 1.12; margin: 0; font-weight: var(--fw-heavy); }
.h2 { font-size: 32px; line-height: 1.2; margin: 0; font-weight: var(--fw-heavy); }
.body-lg { font-size: 24px; line-height: 1.5; margin: 0; }
.small { color: var(--c-muted); font-size: 16px; }

/* Buton */
.btn { border: 0; border-radius: var(--r-lg); padding: 18px 30px; min-height: 60px; background: var(--c-orange); color: #fff; font-weight: var(--fw-strong); font-size: 22px; box-shadow: var(--sh-btn); display: inline-flex; align-items: center; justify-content: center; gap: 12px; transition: transform .15s var(--ease), box-shadow .15s; }
.btn:active { transform: translateY(2px) scale(.99); box-shadow: 0 4px 10px var(--c-orange-shadow); }
.btn:disabled { background: #c9c9c1; color: #fff; box-shadow: none; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--c-ink-3); border: 2px solid var(--c-line-green); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--c-ink-3); box-shadow: none; padding-inline: 18px; }
.btn.lg { font-size: 26px; padding: 22px 40px; min-height: 72px; }
.btn .chev { font-size: 1.1em; line-height: 1; }

/* Panel */
.panel { background: rgba(255, 253, 245, .93); border: 1px solid #f3e8d5; border-radius: var(--r-xl); padding: 40px; box-shadow: var(--sh-panel); }

/* Hero (karsilama) */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background: url("assets/hero.jpg") right center / auto 100% no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,250,240,1) 0%, rgba(255,250,240,.96) 38%, rgba(255,250,240,.55) 52%, rgba(255,250,240,0) 66%); }
.hero > * { position: relative; z-index: 1; }

/* Hikaye kartlari (hero gorselindeki renkli kart dili) */
.story-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.story-card { --s: var(--c-ink); --art: var(--s-hatay-art); border: 0; padding: 0; text-align: left; border-radius: 22px; overflow: hidden; background: var(--s); color: #fff; display: flex; flex-direction: column; box-shadow: var(--sh-card); transition: transform .18s var(--ease), box-shadow .18s; }
.story-card:active { transform: scale(.98); }
.story-card .art { height: 190px; background: var(--art); display: flex; align-items: center; justify-content: center; }
.story-card .art img { width: 62%; height: 80%; object-fit: contain; filter: drop-shadow(0 8px 5px rgba(45,70,45,.12)); }
.story-card .copy { position: relative; padding: 16px 52px 18px 18px; display: flex; flex-direction: column; gap: 4px; min-height: 112px; }
.story-card .copy strong { font-size: 25px; font-weight: var(--fw-heavy); line-height: 1.1; }
.story-card .copy span { font-size: 16px; line-height: 1.3; opacity: .92; }
.story-card .go { position: absolute; right: 14px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--s); display: grid; place-items: center; font-weight: var(--fw-heavy); }
.s-adana { --s: var(--s-adana); --art: var(--s-adana-art); }
.s-hatay { --s: var(--s-hatay); --art: var(--s-hatay-art); }
.s-izmir { --s: var(--s-izmir); --art: var(--s-izmir-art); }
.s-diyarbakir { --s: var(--s-diyarbakir); --art: var(--s-diyarbakir-art); }
.s-sakarya { --s: var(--s-sakarya); --art: var(--s-sakarya-art); }

/* Ust bar (oyun ici) */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.story-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--s, var(--c-ink)); color: #fff; border-radius: var(--r-pill); padding: 8px 18px 8px 8px; font-weight: var(--fw-strong); font-size: 17px; }
.story-chip img { width: 34px; height: 34px; background: #fff; border-radius: 50%; padding: 3px; }
.metrics { display: flex; gap: 12px; }
.metric { background: #fff; padding: 10px 18px; border-radius: var(--r-md); font-weight: var(--fw-heavy); min-width: 120px; text-align: center; font-size: 26px; font-variant-numeric: tabular-nums; box-shadow: var(--sh-card); }
.metric small { display: block; color: var(--c-muted); font-size: 12px; font-weight: var(--fw-strong); letter-spacing: .06em; }
.metric.time.low { background: var(--c-danger-soft); color: var(--c-danger); animation: pulse 1s ease-in-out infinite; }

/* Karar adim gostergesi */
.steps { display: flex; gap: 8px; align-items: center; }
.steps i { width: 34px; height: 8px; border-radius: 8px; background: var(--c-line-2); display: block; }
.steps i.done { background: var(--c-ink-3); }
.steps i.now { background: var(--c-orange); width: 54px; }
.steps span { margin-left: 8px; font-weight: var(--fw-strong); color: var(--c-muted); font-size: 15px; }

/* Soru ve cevaplar */
.slot { font-weight: var(--fw-strong); color: var(--c-orange-ink); letter-spacing: .1em; font-size: 15px; }
.question { font-size: 48px; line-height: 1.15; margin: 6px 0 0; font-weight: var(--fw-heavy); }
.answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.answer { position: relative; border: 2px solid var(--c-line-2); border-radius: var(--r-lg); background: #fff; text-align: left; padding: 26px; min-height: 290px; color: var(--c-ink-2); font-size: 22px; font-weight: 750; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.answer:hover:not(:disabled) { border-color: var(--c-orange); background: var(--c-orange-soft); }
.answer.selected { border-color: var(--c-orange); background: var(--c-orange-soft); box-shadow: 0 0 0 4px rgba(255,104,26,.18); }
.answer:disabled { opacity: .5; cursor: not-allowed; }
.answer .letter { color: var(--c-orange); font-size: 34px; font-weight: var(--fw-heavy); line-height: 1; }
.answer .cost { display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: var(--c-muted); font-weight: var(--fw-strong); }
.answer .cost b { font-size: 20px; color: var(--c-ink); }
.answer.locked { background: repeating-linear-gradient(135deg, #fbf7ee 0 12px, #f5efe2 12px 24px); border-style: dashed; opacity: 1; }
.lock-note { font-size: 15px; color: var(--c-danger); font-weight: var(--fw-strong); display: flex; gap: 8px; align-items: center; }
.poor-note { font-size: 15px; color: var(--c-muted); font-weight: var(--fw-strong); }

/* Geri bildirim */
.feedback { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: start; }
.feedback .badge { width: 120px; height: 120px; border-radius: 32px; background: var(--c-orange); color: #fff; display: grid; place-items: center; font-size: 64px; font-weight: var(--fw-heavy); box-shadow: var(--sh-btn); }
.credit-delta { display: inline-flex; gap: 10px; align-items: center; background: var(--c-notice); color: var(--c-notice-ink); border-radius: var(--r-pill); padding: 8px 16px; font-weight: var(--fw-strong); font-size: 17px; }

/* Etki barlari */
.bars { display: grid; gap: 16px; }
.barline { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; align-items: center; gap: 16px; font-weight: var(--fw-strong); font-size: 20px; }
.barline b { text-align: right; font-variant-numeric: tabular-nums; }
.track { height: 18px; border-radius: 40px; background: var(--c-track); overflow: hidden; }
.fill { height: 100%; border-radius: 40px; transition: width .6s var(--ease); }
.fill.env { background: var(--c-env); } .fill.soc { background: var(--c-soc); } .fill.eco { background: var(--c-eco); }

/* Sonuc */
.score { font-size: 150px; font-weight: var(--fw-heavy); color: var(--c-orange); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.score small { font-size: 40px; color: var(--c-muted); letter-spacing: 0; }
.review-title { font-size: 34px; font-weight: var(--fw-heavy); margin: 0 0 10px; }
.notice { background: var(--c-notice); border-radius: var(--r-md); padding: 16px 20px; color: var(--c-notice-ink); font-weight: var(--fw-strong); }
.pill { background: var(--c-pill); border-radius: var(--r-pill); padding: 8px 16px; font-weight: var(--fw-strong); display: inline-block; font-size: 16px; }

/* Form */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: var(--fw-strong); font-size: 17px; color: var(--c-ink-3); }
.input { width: 100%; padding: 18px 20px; border-radius: var(--r-md); border: 2px solid var(--c-line-3); font-size: 24px; background: #fff; color: var(--c-ink); min-height: 64px; }
.input:focus { border-color: var(--c-orange); outline: none; box-shadow: 0 0 0 4px rgba(255,104,26,.15); }
.input.error { border-color: var(--c-danger); }
.field-error { color: var(--c-danger); font-weight: var(--fw-strong); font-size: 16px; }

/* Siralama tablosu (quiz son ekrani) */
.leader { width: 100%; border-collapse: collapse; font-size: 20px; }
.leader th, .leader td { padding: 12px 14px; border-bottom: 1px solid #e4e9da; text-align: left; }
.leader th { color: var(--c-muted); font-size: 14px; letter-spacing: .08em; }
.leader td.num { text-align: right; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.leader tr.me td { background: var(--c-orange-soft); font-weight: var(--fw-strong); }
.rank-dot { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-pill); font-weight: var(--fw-heavy); font-size: 16px; }

.row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Skor ekrani (TV) ---------- */
.tv { width: 1920px; height: 1080px; position: relative; overflow: hidden; color: var(--tv-text); font-family: var(--f-ui);
  background: radial-gradient(1200px 700px at 50% 18%, #1c4a3e 0%, var(--tv-bg) 62%); }
.tv-hills { position: absolute; inset: auto -10% -30px -10%; height: 320px; opacity: .55; pointer-events: none; }
.tv-hills i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 50% 50% 0 0; display: block; }
.tv-hills i:nth-child(1) { height: 220px; background: #143a31; animation: drift 38s ease-in-out infinite alternate; }
.tv-hills i:nth-child(2) { height: 150px; background: #18443a; left: -20%; animation: drift 26s ease-in-out infinite alternate-reverse; }
.tv-hills i:nth-child(3) { height: 90px; background: #1d4f43; animation: drift 44s ease-in-out infinite alternate; }
.tv-leaf { position: absolute; width: 18px; height: 30px; border-radius: 0 100% 0 100%; background: var(--c-env); opacity: .35; animation: float 14s linear infinite; }
.tv-inner { position: relative; z-index: 1; height: 100%; padding: 36px 96px 0; display: flex; flex-direction: column; gap: 20px; }
.tv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.tv-logos { height: 58px; background: var(--c-panel); border-radius: var(--r-md); padding: 6px 14px; justify-self: start; }
.tv-title { text-align: center; }
.tv-title h1 { margin: 0; font-size: 60px; font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1; }
.tv-title p { margin: 8px 0 0; font-size: 22px; color: var(--tv-muted); font-weight: var(--fw-strong); letter-spacing: .14em; }
.tv-live { justify-self: end; display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--tv-muted); font-weight: var(--fw-strong); }
.tv-live i { width: 12px; height: 12px; border-radius: 50%; background: var(--c-env); box-shadow: 0 0 0 0 rgba(80,169,113,.6); animation: live 1.8s infinite; display: block; }

.podium { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: 40px; padding: 0 160px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pod .avatar { width: 104px; height: 104px; border-radius: 50%; background: var(--s-art, #fff); border: 5px solid var(--medal); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(255,255,255,.06); }
.pod .avatar img { width: 72%; height: 72%; object-fit: contain; }
.pod .name { font-size: 30px; font-weight: var(--fw-heavy); text-align: center; line-height: 1.1; }
.pod .city { font-size: 19px; color: var(--tv-muted); font-weight: var(--fw-strong); display: flex; align-items: center; gap: 8px; }
.pod .city i { width: 12px; height: 12px; border-radius: 50%; background: var(--s); display: block; }
.pod .pts { font-size: 44px; font-weight: var(--fw-heavy); color: var(--medal); font-variant-numeric: tabular-nums; line-height: 1; }
.pod .block { width: 100%; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 55%, var(--tv-panel)), var(--tv-panel)); display: grid; place-items: start center; padding-top: 10px; font-size: 54px; font-weight: var(--fw-heavy); color: var(--tv-bg); }
.pod.first { --medal: var(--tv-gold); animation: breathe 4.5s ease-in-out infinite; }
.pod.first .avatar { width: 136px; height: 136px; }
.pod.first .name { font-size: 38px; }
.pod.first .pts { font-size: 58px; }
.pod.first .block { height: 132px; font-size: 72px; }
.pod.second { --medal: var(--tv-silver); } .pod.second .block { height: 100px; }
.pod.third { --medal: var(--tv-bronze); } .pod.third .block { height: 80px; }

.tv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 12px 36px; }
.tv-row { display: grid; grid-template-columns: 64px 14px minmax(0, 1fr) auto 120px; align-items: center; gap: 16px; padding: 10px 22px; border-radius: var(--r-md); background: rgba(23, 59, 50, .78); border: 1px solid var(--tv-line); animation: shimmer 8s ease-in-out infinite; }
.tv-row .r { font-size: 30px; font-weight: var(--fw-heavy); color: var(--tv-muted); font-variant-numeric: tabular-nums; }
.tv-row .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--s); }
.tv-row .n { font-size: 27px; font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-row .c { font-size: 18px; color: var(--tv-muted); font-weight: var(--fw-strong); }
.tv-row .p { font-size: 32px; font-weight: var(--fw-heavy); text-align: right; font-variant-numeric: tabular-nums; }
.tv-row.fresh { background: var(--c-orange); border-color: #ffb184; color: #fff; box-shadow: 0 0 60px rgba(255,104,26,.45); animation: none; }
.tv-row.fresh .r, .tv-row.fresh .c { color: #fff; }

.ticker { margin-top: auto; height: 64px; display: flex; align-items: center; gap: 22px; border-top: 1px solid var(--tv-line); overflow: hidden; white-space: nowrap; font-size: 20px; color: var(--tv-muted); font-weight: var(--fw-strong); }
.ticker b { color: var(--c-orange); letter-spacing: .12em; font-size: 16px; flex: none; }
.ticker .lane { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.ticker .track-x { display: flex; gap: 48px; width: max-content; animation: marquee 40s linear infinite; }
.ticker .track-x span i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--s); margin-right: 8px; }

/* Skor ekrani — acik tema varyanti (tabletle ayni zemin; karsilastirma icin) */
.tv.light { --tv-text: var(--c-ink); --tv-muted: var(--c-muted); --tv-line: var(--c-line-2); --tv-panel: #fffdf5; --tv-bg: var(--c-ink);
  --tv-gold: var(--c-orange); --tv-silver: #6f8a7e; --tv-bronze: #b0702f;
  background: radial-gradient(1200px 700px at 50% 18%, #fffdf5 0%, var(--c-ground-warm) 45%, var(--c-ground-mint) 100%); }
.tv.light .tv-hills i:nth-child(1) { background: #d6e8cc; }
.tv.light .tv-hills i:nth-child(2) { background: #c7dfbb; }
.tv.light .tv-hills i:nth-child(3) { background: #b7d2b9; }
.tv.light .tv-leaf { opacity: .5; }
.tv.light .tv-logos { mix-blend-mode: multiply; background: transparent; }
.tv.light .tv-row { background: #ffffff; border-color: var(--c-line); box-shadow: var(--sh-card); animation-name: shimmer-light; }
.tv.light .tv-row.fresh { background: var(--c-orange); color: #fff; border-color: var(--c-orange); animation: none; }
.tv.light .pod .avatar { box-shadow: 0 10px 30px rgba(54,88,45,.16); }
.tv.light .pod .block { color: #fff; background: linear-gradient(180deg, var(--medal), color-mix(in srgb, var(--medal) 70%, #fff)); box-shadow: var(--sh-panel); }
.tv.light .pod.first .pts { color: var(--c-orange-ink); }
.tv.light .ticker { border-top-color: var(--c-line-2); }
.tv.light .spot-card { background: radial-gradient(600px 300px at 50% 0%, #fff6ed, var(--c-panel)); border-color: var(--c-line-2); }
.tv.light .spot-card .placed { background: var(--c-orange); color: #fff; }
@keyframes shimmer-light { 0%, 84%, 100% { background: #ffffff; } 90% { background: #fff1e6; } }

/* Yeni skor sahnesi */
.spot { position: absolute; inset: 0; z-index: 5; background: rgba(4, 12, 10, .9); display: grid; place-items: center; animation: fade-in .6s ease-out both; }
.spot-card { width: 980px; border-radius: 40px; padding: 56px 64px; background: radial-gradient(600px 300px at 50% 0%, #22594b, var(--tv-panel)); border: 2px solid var(--tv-line); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: pop 1.1s var(--ease) both .2s; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.spot-card .tag { font-size: 22px; letter-spacing: .3em; color: var(--c-orange); font-weight: var(--fw-heavy); }
.spot-card .avatar { width: 170px; height: 170px; border-radius: 50%; background: var(--s-art, #fff); border: 6px solid var(--c-orange); display: grid; place-items: center; }
.spot-card .avatar img { width: 72%; height: 72%; object-fit: contain; }
.spot-card .who { font-size: 72px; font-weight: var(--fw-heavy); line-height: 1; }
.spot-card .story { font-size: 26px; color: var(--tv-muted); font-weight: var(--fw-strong); }
.spot-card .big { font-size: 160px; font-weight: var(--fw-heavy); line-height: .9; color: var(--c-orange); font-variant-numeric: tabular-nums; }
.spot-card .axes { display: flex; gap: 36px; font-size: 24px; font-weight: var(--fw-strong); color: var(--tv-muted); }
.spot-card .axes b { color: var(--tv-text); }
.spot-card .placed { margin-top: 6px; padding: 14px 32px; border-radius: var(--r-pill); background: var(--tv-text); color: var(--tv-bg); font-size: 34px; font-weight: var(--fw-heavy); }
.flying { position: absolute; z-index: 6; border-radius: var(--r-md); background: var(--c-orange); color: #fff; padding: 18px 26px; font-size: 30px; font-weight: var(--fw-heavy); box-shadow: 0 30px 80px rgba(0,0,0,.5); display: flex; gap: 24px; align-items: center; }

/* ---------- Yonetim (web) ---------- */
.admin { min-height: 100vh; background: var(--c-ground); padding: 32px 16px 64px; }
.admin-wrap { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.admin-head h1 { margin: 0; font-size: 32px; font-weight: var(--fw-heavy); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat { background: #fff; border-radius: var(--r-md); padding: 16px 20px; box-shadow: var(--sh-card); }
.stat small { display: block; color: var(--c-muted); font-weight: var(--fw-strong); font-size: 14px; }
.stat b { font-size: 34px; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.card { background: #fff; border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-card); min-width: 0; }
.card h2 { margin: 0; font-size: 22px; font-weight: var(--fw-heavy); }
.seg { display: inline-flex; gap: 4px; background: var(--c-ground); border-radius: var(--r-pill); padding: 4px; }
.seg button { border: 0; background: transparent; border-radius: var(--r-pill); padding: 8px 16px; font-weight: var(--fw-strong); color: var(--c-ink-3); min-height: 40px; }
.seg .on { background: var(--c-ink); color: #fff; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 17px; }
.table th { text-align: left; color: var(--c-muted); font-size: 13px; letter-spacing: .08em; padding: 10px 12px; border-bottom: 2px solid var(--c-line); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.table td.num { font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 5px 12px; font-size: 14px; font-weight: var(--fw-strong); }
.tag.top { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.tag.out { background: var(--c-ground); color: var(--c-muted); }
.tag.test { background: #e8e4f3; color: #4f3a7a; }
.tag.time { background: var(--c-danger-soft); color: var(--c-danger); }
.tag.hidden { background: #ecece6; color: #5b5f58; }
.btn-sm { border: 2px solid var(--c-line-green); background: #fff; color: var(--c-ink-3); border-radius: var(--r-sm); padding: 8px 14px; font-weight: var(--fw-strong); font-size: 15px; min-height: 40px; }
.btn-sm.dark { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.theme-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.theme-opt { border: 2px solid var(--c-line); border-radius: var(--r-md); background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 10px; text-align: left; font-weight: var(--fw-strong); color: var(--c-ink); }
.theme-opt.on { border-color: var(--c-orange); box-shadow: 0 0 0 4px rgba(255,104,26,.15); }
.theme-opt .mini { height: 90px; border-radius: 10px; display: grid; grid-template-rows: 1fr auto; padding: 10px; gap: 6px; }
.theme-opt .mini.dark { background: radial-gradient(160px 80px at 50% 20%, #1c4a3e, var(--tv-bg)); }
.theme-opt .mini.light { background: linear-gradient(140deg, var(--c-ground-warm), var(--c-ground-mint)); border: 1px solid var(--c-line); }
.theme-opt .mini i { display: block; height: 10px; border-radius: 4px; }
.theme-opt .mini.dark i { background: rgba(255,255,255,.18); }
.theme-opt .mini.light i { background: #fff; box-shadow: var(--sh-card); }
.theme-opt .mini b { width: 40%; height: 26px; justify-self: center; border-radius: 6px 6px 0 0; background: var(--c-orange); display: block; }
.danger-zone { border: 2px solid #f1c7b6; background: #fffaf6; }
.conn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: var(--r-pill); padding: 8px 16px; font-weight: var(--fw-strong); box-shadow: var(--sh-card); }
.conn i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-env); display: block; }

/* ---------- Hareket ---------- */
@keyframes pulse { 50% { transform: scale(1.05); } }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(255,138,61,0)); } 50% { transform: translateY(-6px) scale(1.02); filter: drop-shadow(0 0 28px rgba(255,138,61,.35)); } }
@keyframes shimmer { 0%, 84%, 100% { background: rgba(23,59,50,.78); } 90% { background: rgba(38,87,74,.95); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(6%); } }
@keyframes float { from { transform: translateY(1120px) rotate(0); } to { transform: translateY(-80px) rotate(320deg); } }
@keyframes live { 70% { box-shadow: 0 0 0 12px rgba(80,169,113,0); } 100% { box-shadow: 0 0 0 0 rgba(80,169,113,0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@keyframes count { from { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Tasarim onizlemesi: cihaz cercevesi olmayan (web) sayfalarda gezinme cubugu akista durur */
body:not(.stage-host) .stage-label { position: static; display: block; padding: 10px 16px; background: var(--c-ink); color: #e8efe9; }
.stage-label a { color: #ffb184; }