/* Gym
   Bu ekran 2,5-3 metre öteden, hareketin ortasında okunuyor. Telefon arayüzü
   gibi değil, ölçü aleti gibi kurulmuştur: büyük rakam, sert kontrast, kenardan
   yakalanan uyarı. Tipografi kuralı: Archivo kelimeler, Plex Mono ölçülen
   değerler. Ölçülen bir sayı hiçbir yerde Archivo ile yazılmaz. */

:root {
  --kagit: #f7f6f2;
  --murekkep: #111110;
  --kursun: #6e6c66;
  --cizgi: #e2e0d9;
  --isik: #ffffff;
  --pad: 22px;

  --soz: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --olcu: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }

html, body {
  height: 100%;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--soz);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body { overflow: hidden; }

:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 2px; }
.stage :focus-visible { outline-color: var(--isik); }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 30px; }

/* ---------------------------------------------------------------- ortak */
.label {
  font-family: var(--olcu);
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--kursun);
}
.label.light { color: rgba(255, 255, 255, .68); }

.note {
  font-size: 12.5px; line-height: 1.55; color: var(--kursun);
  margin-top: 10px;
}
.note:empty { display: none; }

.block { padding: 26px var(--pad) 0; }

/* ---------------------------------------------------------------- başlık */
.masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top) + 24px) var(--pad) 18px;
  border-bottom: 1px solid var(--murekkep);
}
.mark {
  font-size: 15px; font-weight: 600; letter-spacing: .26em;
  font-variation-settings: 'wdth' 112;
}
.mark-sub {
  font-family: var(--olcu); font-size: 11px; color: var(--kursun);
  letter-spacing: .04em; text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------- plan */
.plan { padding: 22px var(--pad) 24px; border-bottom: 1px solid var(--cizgi); }
.rail { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.tag {
  font-family: var(--olcu); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--murekkep); padding: 3px 6px; color: var(--murekkep);
}
.rail-title { font-size: 14.5px; font-weight: 500; }

/* Antrenman gerçekten sıralı bir dizi, numaralandırma bilgi taşıyor */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: h; }
.chips li { counter-increment: h; }
.chips button {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--soz); font-size: 12.5px; padding: 7px 11px;
  background: transparent; border: 1px solid var(--cizgi); color: var(--murekkep); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.chips button::before {
  content: counter(h, decimal-leading-zero);
  font-family: var(--olcu); font-size: 9.5px; color: var(--kursun); letter-spacing: .06em;
}
.chips button:hover { border-color: var(--murekkep); }
.chips button.on { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.chips button.on::before { color: rgba(247, 246, 242, .6); }
.chips button.off { border-style: dashed; color: var(--kursun); cursor: default; }
.chips button.off:hover { border-color: var(--cizgi); }

/* ---------------------------------------------------------------- seçim */
.seg { display: inline-flex; border: 1px solid var(--murekkep); }
.seg.wide-seg { display: flex; }
.seg button {
  flex: 1; padding: 11px 14px; font-family: var(--soz); font-size: 13px;
  background: transparent; border: 0; color: var(--murekkep); cursor: pointer;
  white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--murekkep); }
.seg button.on { background: var(--murekkep); color: var(--kagit); }

/* ---------------------------------------------------------------- hareketler */
.group { margin-top: 30px; }
.group > .label { padding: 0 var(--pad) 9px; display: block; }
.ex {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px var(--pad); background: transparent; border: 0;
  border-top: 1px solid var(--cizgi); font-family: var(--soz); color: var(--murekkep); cursor: pointer;
}
.ex:last-child { border-bottom: 1px solid var(--cizgi); }
.ex.on { background: var(--murekkep); color: var(--kagit); }
.ex.on .ex-view, .ex.on .ex-note { color: rgba(247, 246, 242, .62); }
.ex-body { flex: 1; min-width: 0; }
.ex-name { font-size: 15.5px; font-weight: 500; }
.ex-view, .ex-note { font-size: 11.5px; line-height: 1.45; color: var(--kursun); margin-top: 3px; }
.ex-tag {
  font-family: var(--olcu); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 2px 5px; opacity: .5; white-space: nowrap;
}

/* ---------------------------------------------------------------- ayarlar */
.settings .row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--cizgi);
}
.settings .label { display: block; padding-bottom: 4px; }
.settings .row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.settings .row:last-of-type { border-bottom: 1px solid var(--cizgi); }
.row-name { font-size: 14px; }
.voice { display: flex; gap: 8px; }
.voice select {
  flex: 1; min-width: 0; padding: 11px 10px; font-family: var(--soz); font-size: 13px;
  background: transparent; color: var(--murekkep); border: 1px solid var(--murekkep);
  -webkit-appearance: none; appearance: none;
}
.voice button {
  padding: 11px 18px; font-family: var(--soz); font-size: 12.5px; cursor: pointer;
  background: transparent; color: var(--murekkep); border: 1px solid var(--murekkep);
}

.colophon {
  margin: 30px var(--pad) 0; padding-top: 16px; border-top: 1px solid var(--cizgi);
  font-size: 11.5px; line-height: 1.6; color: var(--kursun);
}

/* ---------------------------------------------------------------- dock */
.dock {
  display: flex; gap: 10px;
  padding: 14px var(--pad) calc(env(safe-area-inset-bottom) + 14px);
  border-top: 1px solid var(--murekkep); background: var(--kagit);
}
button.solid, button.outline {
  flex: 1; padding: 17px; font-family: var(--soz); font-size: 14px; cursor: pointer;
  letter-spacing: .03em; font-weight: 500;
}
button.solid { background: var(--murekkep); color: var(--kagit); border: 1px solid var(--murekkep); }
button.outline { background: transparent; color: var(--murekkep); border: 1px solid var(--murekkep); }
button.solid:disabled { opacity: .35; cursor: default; }

/* ================================================================ ölçüm */
.stage { position: relative; flex: 1; background: #000; overflow: hidden; }
#video, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
/* contain, cover değil: kadrajın tamamı görünmeli. Vücudun bir kısmı ekran
   dışında kalırsa hem ölçüm bozulur hem de kullanıcı bunu fark edemez. */
#video { object-fit: contain; }
#overlay { pointer-events: none; }

/* Formun bozulduğunu göz ucuyla yakalayabilmek için çerçeve kalınlaşır.
   3 metreden 1px çizgi görünmez. Kalınlık cetveli örtmeyecek kadar ölçülü. */
.frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border: 2px solid rgba(255, 255, 255, .32);
  transition: border-width .11s ease-out, border-color .11s ease-out;
}
.stage.alarm .frame { border-width: 6px; border-color: rgba(255, 255, 255, .92); }

.rail.top, .rail.bottom {
  position: absolute; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.rail.top {
  top: 0; padding: calc(env(safe-area-inset-top) + 18px) 20px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent);
}
.now { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.now-line { display: flex; align-items: baseline; gap: 9px; }
.now-name { color: var(--isik); font-size: 16px; font-weight: 500; white-space: nowrap; }
.now-view {
  font-family: var(--olcu); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
/* Vurgulanan bölgenin kas adı: görüntüde bölge parlıyor, adı burada yazıyor */
.now-muscle {
  font-family: var(--olcu); font-size: 10px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
}
.rail-actions { display: flex; gap: 8px; flex: none; }
.chip-btn {
  background: rgba(0, 0, 0, .45); color: var(--isik); border: 1px solid rgba(255, 255, 255, .45);
  padding: 8px 13px; font-family: var(--soz); font-size: 12px; cursor: pointer;
}

.rail.bottom {
  bottom: 0; align-items: flex-end;
  padding: 54px 22px calc(env(safe-area-inset-bottom) + 20px);
  background: linear-gradient(0deg, rgba(0, 0, 0, .66), transparent);
}
.readout { color: var(--isik); }
.readout.right { text-align: right; }

/* Odanın öbür ucundan okunacak tek şey bu sayı: en geniş kesim, en büyük punto */
.count {
  font-family: var(--soz);
  font-variation-settings: 'wdth' 125, 'wght' 500;
  font-size: clamp(64px, 21vw, 128px);
  line-height: .82; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.score {
  font-family: var(--olcu); font-weight: 400;
  font-size: clamp(30px, 9vw, 52px); line-height: .9;
  font-variant-numeric: tabular-nums;
}
.readout .label { margin-top: 9px; }

/* Derinlik cetveli: dolgu hedef çizgisine değmeli. Cetvel gibi taksimatlı. */
/* Derinlik cetveli. Uyarı çerçevesinin altında kalmasın diye kenardan içeride. */
.gauge {
  position: absolute; z-index: 3; right: 16px; top: 19%; bottom: 26%; width: 14px;
}
.gauge::before {
  content: ''; position: absolute; inset: 0; right: 0; width: 14px;
  background:
    linear-gradient(to right, transparent 0 12px, rgba(255,255,255,.35) 12px 14px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 1px, transparent 1px 10%);
}
/* Dolu bar yerine kayan imleç: cetvel gibi okunur, ekranı domine etmez */
.gauge-fill {
  position: absolute; right: -3px; bottom: 0; width: 20px; height: 5px;
  background: var(--isik);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
  transition: bottom .06s linear;
}
.gauge-target {
  position: absolute; right: -4px; width: 22px; height: 2px; bottom: 78%;
  background: var(--isik);
}
.gauge-target::after {
  content: 'hedef';
  position: absolute; right: 26px; top: -6px;
  font-family: var(--olcu); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85); white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

/* Uyarı alt raya yazılır: uzaktan okunacak kadar büyük, kağıt üstünde mürekkep */
/* Sayı görünür kalmalı: uyarı alt raydan yukarıda durur, onu örtmez */
.cue {
  position: absolute; z-index: 5; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 168px);
  background: var(--kagit); color: var(--murekkep);
  padding: 18px 22px;
  font-size: clamp(20px, 6vw, 31px); font-weight: 500; line-height: 1.15;
  letter-spacing: -.01em;
  border-top: 2px solid var(--murekkep); border-bottom: 2px solid var(--murekkep);
}
.cue[hidden] { display: none; }

.countdown {
  position: absolute; z-index: 6; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--isik);
  font-variation-settings: 'wdth' 125, 'wght' 300;
  font-size: clamp(120px, 40vw, 240px); line-height: 1;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .55);
  animation: nabiz .9s ease-out;
}
.countdown[hidden] { display: none; }
@keyframes nabiz { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }

.waiting {
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .9); font-size: 14px; text-align: center;
  padding: 0 34px; line-height: 1.6; max-width: 100%;
}
.waiting[hidden] { display: none; }

/* ---------------------------------------------------------------- yerleşim */
.sheet {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0;
  background: var(--kagit); border-top: 2px solid var(--murekkep);
  padding: 20px 22px calc(env(safe-area-inset-bottom) + 18px);
}
.sheet[hidden] { display: none; }
.sheet .label { display: block; margin-bottom: 14px; }
.check { display: flex; align-items: flex-start; gap: 13px; padding: 8px 0; }
.check-box {
  width: 12px; height: 12px; margin-top: 4px; flex: none;
  border: 1px solid var(--murekkep); background: transparent;
  transition: background .12s;
}
.check.ok .check-box { background: var(--murekkep); }
.check-text { font-size: 14px; line-height: 1.45; color: var(--kursun); }
.check.ok .check-text { color: var(--murekkep); }
.sheet button.outline { width: 100%; margin-top: 16px; padding: 14px; font-size: 13px; }

/* ================================================================ rapor */
.figures { display: flex; border-bottom: 1px solid var(--murekkep); }
.figure { flex: 1; padding: 30px var(--pad) 26px; }
.figure + .figure { border-left: 1px solid var(--cizgi); }
.figure-num {
  font-family: var(--olcu); font-weight: 400;
  font-size: clamp(42px, 13vw, 60px); line-height: .95; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.figure .label { margin-top: 12px; display: block; }

/* Tekrar şeridi: her çubuk bir tekrarın ulaştığı derinlik, kesik çizgi hedef */
.strip {
  position: relative; display: flex; align-items: flex-end; gap: 4px;
  height: 108px; margin-top: 14px;
  border-bottom: 1px solid var(--murekkep);
}
.strip::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 72px; height: 0;
  border-top: 1px dashed var(--murekkep); opacity: .55;
}
.bar { flex: 1; min-width: 5px; background: var(--murekkep); position: relative; }
.bar.short { background: repeating-linear-gradient(
  135deg, var(--murekkep) 0 2px, transparent 2px 5px); border: 1px solid var(--murekkep); }

.finding {
  display: flex; align-items: baseline; gap: 15px;
  padding: 17px var(--pad); border-bottom: 1px solid var(--cizgi);
}
.finding:first-child { border-top: 1px solid var(--cizgi); }
.finding-n {
  font-family: var(--olcu); font-size: 13px; color: var(--kursun);
  min-width: 32px; font-variant-numeric: tabular-nums;
}
.finding-name { font-size: 15px; font-weight: 500; }
.finding-cue { font-size: 12.5px; line-height: 1.45; color: var(--kursun); margin-top: 3px; }
.clean { padding: 28px var(--pad); font-size: 14.5px; line-height: 1.5; border-bottom: 1px solid var(--cizgi); }
.caveat {
  margin: 24px var(--pad) 0; padding: 15px; border: 1px solid var(--murekkep);
  font-size: 12px; line-height: 1.6; color: var(--kursun);
}
.caveat strong { color: var(--murekkep); font-weight: 500; }

/* ---------------------------------------------------------------- uyum */
@media (min-width: 760px) {
  #setup, #summary { max-width: 580px; margin: 0 auto; border-left: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}