/* FitKoç web sitesi — telefonların içinde HTML ile çizilen uygulama ekranları (bkz. ui.js).
   Ölçüler em cinsindendir; yazı boyutu telefonun genişliğine bağlıdır, böylece her boyutta aynı görünür. */
.ui { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; container-type: inline-size; }
.phone > .ui { border-radius: 11.4% / 5.9%; }
.ui-in { position: absolute; inset: 0; padding: 0 1.3em 7em; display: flex; flex-direction: column; gap: 0.95em; font-size: 11.5px; font-size: 3.7cqw; line-height: 1.3; color: #fff; font-family: var(--body); --u-card: #1C1C1E; --u-chip: #2C2C2E; --u-sub: #8E8E93; --u-line: #2C2C2E; user-select: none; -webkit-user-select: none; }
.ui svg { width: 1.4em; height: 1.4em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui h4, .ui h5 { font-family: var(--body); letter-spacing: -0.02em; }
.ui i, .ui em { font-style: normal; }
.ui .is-blue { color: #00AAFF; }
.ui .is-green { color: #19C37D; }
.ui .is-orange { color: var(--orange); }
.ui .is-amber { color: var(--amber); }

.u-head { display: flex; align-items: center; justify-content: space-between; padding: 1.5em 0.4em 0.1em; }
.u-head small { display: block; font-size: 0.76em; font-weight: 700; letter-spacing: 0.04em; color: var(--u-sub); }
.u-head h4 { font-size: 1.7em; font-weight: 800; line-height: 1.15; }
.u-av { width: 2.9em; height: 2.9em; border-radius: 50%; background: var(--u-chip); display: grid; place-items: center; font-weight: 800; }
.u-band { margin: 0 -1.3em; padding: 1.5em 1.7em 0.9em; background: var(--u-card); border-bottom: 1px solid var(--u-line); }
.u-nav h4 { font-size: 1.25em; }
.u-nav > span:last-child { width: 2.9em; }
.u-pill { padding: 0.55em 1em; border-radius: 2em; background: var(--u-chip); font-weight: 800; font-size: 0.86em; }
.u-card { background: var(--u-card); border-radius: 1.6em; padding: 1.2em 1.3em; }
.u-eyebrow { display: flex; align-items: center; gap: 0.4em; font-size: 0.72em; font-weight: 800; letter-spacing: 0.08em; color: var(--u-sub); }
.u-eyebrow svg { width: 1.3em; height: 1.3em; }
.u-track { display: block; height: 0.55em; border-radius: 1em; background: var(--u-chip); overflow: hidden; }
.u-track u { display: block; height: 100%; border-radius: inherit; background: var(--orange); }
.u-track u.is-flame { background: var(--flame); }
.u-label { font-size: 0.72em; font-weight: 800; letter-spacing: 0.1em; color: var(--u-sub); padding-left: 0.4em; margin-bottom: -0.4em; }
.u-sub { display: block; color: var(--u-sub); font-size: 0.88em; }
.u-title { display: block; font-size: 1.08em; font-weight: 800; margin-bottom: 0.3em; }

/* Bugün — gradient kalori kartı, dairesel halka, durum çipleri, renkli şeritli yapılacaklar */
.u-hero { border-radius: 1.8em; padding: 1.3em 1.2em 1.2em; background: linear-gradient(140deg, #FF8A4C, #FF5A1F); display: flex; flex-direction: column; align-items: center; box-shadow: 0 0.8em 1.8em -0.6em rgba(255, 90, 31, 0.6); }
.u-ring2 { position: relative; width: 8.2em; height: 8.2em; }
.u-ring2 svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.u-ring2 circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.u-ring2-bg { stroke: rgba(255, 255, 255, 0.28); }
.u-ring2-fill { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: 54; }
.u-ring2-c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.u-ring2-c b { font-size: 2.1em; font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.u-ring2-c small { font-size: 0.78em; font-weight: 700; color: rgba(255, 255, 255, 0.9); margin-top: 0.2em; }
.u-hero-meta { display: flex; align-items: center; justify-content: space-between; align-self: stretch; margin-top: 1em; }
.u-hero-meta > div { flex: 1; text-align: center; }
.u-hero-meta b { display: block; font-weight: 800; color: #fff; font-size: 1em; }
.u-hero-meta small { font-size: 0.68em; font-weight: 700; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.02em; }
.u-hero-meta > span { width: 1px; height: 1.8em; background: rgba(255, 255, 255, 0.28); }

.u-stats2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
.u-stat { display: flex; align-items: center; gap: 0.55em; background: var(--u-card); border-radius: 1.1em; padding: 0.7em; }
.u-stat i { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.u-stat i svg { width: 1.1em; height: 1.1em; }
.u-stat b { display: block; font-size: 0.98em; font-weight: 800; letter-spacing: -0.02em; }
.u-stat b em { font-size: 0.7em; font-weight: 700; color: var(--u-sub); }
.u-stat small { color: var(--u-sub); font-size: 0.68em; font-weight: 700; }

.u-todo { padding-bottom: 0.6em; }
.u-todo-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9em; margin-bottom: 0.5em; }
.u-todo-head b { font-size: 1.12em; font-weight: 800; }
.u-todo-head i { font-size: 0.9em; font-weight: 800; color: var(--u-sub); }
.u-trow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75em; padding: 0.6em 0.7em; margin-top: 0.5em; border-radius: 0.85em; border-left: 0.25em solid var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); }
.u-trow.is-done { border-left-color: transparent; background: var(--u-chip); }
.u-tile { width: 2.1em; height: 2.1em; border-radius: 0.6em; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.u-trow.is-done .u-tile { background: #10B981; color: #fff; }
.u-tile svg { width: 1.1em; height: 1.1em; }
.u-trow.is-done .u-tile svg { stroke-width: 3; }
.u-trow-t { font-weight: 700; font-size: 0.96em; }
.u-trow.is-done .u-trow-t { color: var(--u-sub); text-decoration: line-through; }
.u-pill2 { background: var(--c); color: #fff; font-weight: 800; font-size: 0.82em; padding: 0.5em 0.85em; border-radius: 0.8em; white-space: nowrap; }

.u-quick { display: grid; grid-template-columns: repeat(4, 1fr); }
.u-quick span { display: grid; justify-items: center; gap: 0.45em; font-size: 0.8em; font-weight: 700; white-space: nowrap; }
.u-quick i { width: 3.4em; height: 3.4em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
[data-ui="today"] .ui-in { justify-content: space-between; gap: 0.8em; }
[data-ui="progress"] .ui-in { justify-content: space-between; }

/* Beslenme */
.u-add { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.7em; }
.u-add span { display: flex; align-items: center; justify-content: center; gap: 0.5em; background: var(--u-card); border-radius: 1.1em; padding: 0.9em; font-weight: 800; font-size: 0.93em; }
.u-add .is-primary { background: var(--orange); }
.u-day { display: flex; justify-content: space-between; align-items: center; margin: 0.4em 0 0.6em; }
.u-day b { display: block; font-size: 2.6em; font-weight: 900; line-height: 1; }
.u-day small { color: var(--u-sub); font-weight: 600; font-size: 0.9em; }
.u-ring { position: relative; width: 5.6em; height: 5.6em; }
.u-ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); stroke-width: 5; }
.u-ring circle { stroke: var(--u-chip); }
.u-ring .u-ring-fill { stroke: var(--orange); stroke-dasharray: 100; stroke-dashoffset: 54; }
.u-ring i { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; font-weight: 800; font-size: 0.8em; color: #fff; }
.u-ring i svg { width: 1.5em; height: 1.5em; color: var(--orange); }
.u-macro { display: grid; grid-template-columns: 1fr auto; gap: 0.25em 0.6em; font-size: 0.84em; font-weight: 700; margin-top: 0.6em; }
.u-macro .u-track { grid-column: 1 / -1; height: 0.42em; }
.u-macro .u-track u { background: var(--c); }
.u-gap { display: flex; align-items: center; justify-content: center; gap: 0.5em; margin-top: 1em; padding: 0.8em; border-radius: 1em; background: rgba(0, 170, 255, 0.1); border: 1px solid rgba(0, 170, 255, 0.3); color: #00AAFF; font-weight: 800; font-size: 0.84em; }
.u-gap svg { width: 1.2em; height: 1.2em; }
.u-meal { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6em; padding: 0.55em 0; border-top: 1px solid var(--u-line); }
.u-meal:first-of-type { border-top: 0; }
.u-meal span { grid-column: 1 / -1; font-size: 0.68em; font-weight: 800; color: var(--u-sub); letter-spacing: 0.06em; text-transform: uppercase; }
.u-meal b { font-size: 0.92em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-meal i { font-weight: 800; font-size: 0.9em; }
.u-meal small { grid-column: 1 / -1; color: var(--u-sub); font-size: 0.76em; }

/* Antrenman */
.ui h5 { font-size: 1.55em; font-weight: 800; margin-top: 0.3em; }
.u-ex h5 { margin-top: 0; }
.u-start { display: flex; align-items: center; justify-content: center; gap: 0.5em; margin-top: 0.9em; padding: 0.95em; border-radius: 1.1em; background: #00AAFF; font-weight: 800; font-size: 1.02em; }
.u-coach { margin: 0.8em 0 0.3em; padding: 0.75em 0.9em; border-radius: 1em; border: 1px solid rgba(255, 176, 32, 0.5); background: rgba(255, 176, 32, 0.08); }
.u-coach b { display: flex; align-items: center; gap: 0.4em; color: var(--amber); font-size: 0.78em; font-weight: 800; letter-spacing: 0.03em; }
.u-coach b svg { width: 1.2em; height: 1.2em; }
.u-coach span { display: block; color: var(--u-sub); font-size: 0.8em; margin-top: 0.3em; }
.u-set { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8em; padding: 0.6em 0.9em; margin-top: 0.5em; border-radius: 1em; background: var(--u-chip); border: 1px solid transparent; }
.u-set span { color: var(--u-sub); font-weight: 700; font-size: 0.9em; }
.u-set b { text-align: right; font-weight: 800; }
.u-set i { width: 2.2em; height: 2.2em; border-radius: 50%; background: #3A3A3C; color: #8E8E93; display: grid; place-items: center; }
.u-set i svg { width: 1.2em; height: 1.2em; stroke-width: 3; }
.u-set.is-done { background: rgba(16, 185, 129, 0.14); }
.u-set.is-done i { background: #10B981; color: #fff; }
.u-set.is-next { border-color: rgba(255, 107, 53, 0.6); }
.u-set.is-next i { background: var(--orange); color: #fff; }
.u-rest { position: absolute; left: 1.3em; right: 1.3em; bottom: 6.6em; display: grid; grid-template-columns: auto 1fr auto; gap: 0.8em; align-items: center; padding: 0.8em 1em; border-radius: 1.3em; background: #10243A; border: 1px solid rgba(0, 170, 255, 0.4); box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.55); }
.u-rest svg { width: 2.8em; height: 2.8em; transform: rotate(-90deg); stroke-width: 4; }
.u-rest circle { stroke: rgba(255, 255, 255, 0.12); }
.u-rest .u-rest-arc { stroke: #00AAFF; stroke-dasharray: 100; stroke-dashoffset: 30; }
.u-rest b { display: block; font-weight: 800; }
.u-rest small { color: #8FB8D6; font-size: 0.76em; }
.u-rest > span { background: #00AAFF; font-weight: 800; padding: 0.6em 0.9em; border-radius: 0.9em; font-size: 0.88em; }

/* Güç Analizi */
.u-level { border-top: 0.25em solid #00AAFF; }
.u-level > b { display: block; font-size: 2em; font-weight: 900; color: #00AAFF; line-height: 1.1; margin-top: 0.2em; }
.u-level > small { color: var(--u-sub); font-size: 0.84em; }
.u-level p { color: #D8D8DC; font-size: 0.84em; margin-top: 0.7em; }
.u-scale { position: relative; height: 0.5em; border-radius: 1em; margin-top: 0.9em; background: linear-gradient(90deg, #8E8E93 0 20%, #00AAFF 20% 40%, #10B981 40% 60%, #A855F7 60% 80%, #FFB020 80% 100%); }
.u-scale i { position: absolute; top: 0; bottom: 0; right: 0; left: 34%; background: rgba(28, 28, 30, 0.82); border-radius: 0 1em 1em 0; }
.u-scale span { position: absolute; top: 50%; left: 34%; width: 1.2em; height: 1.2em; margin: -0.6em 0 0 -0.6em; border-radius: 50%; background: #fff; border: 0.3em solid #00AAFF; }
.u-lift { display: grid; grid-template-columns: 1fr auto auto; gap: 0.8em; align-items: center; padding: 0.85em 1.2em; }
.u-lift b { font-weight: 800; font-size: 0.96em; }
.u-lift small { display: block; font-size: 0.74em; font-weight: 700; }
.u-lift em { display: inline-block; padding: 0.15em 0.55em; border-radius: 0.5em; background: rgba(255, 255, 255, 0.07); }
.u-lift-v { text-align: right; }
.ui .u-spark { width: 5.4em; height: 1.8em; stroke: var(--amber); stroke-width: 2.4; overflow: visible; }
.ui .u-spark.is-up { stroke: #19C37D; }

/* Profil */
.u-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0.5em 0 0.9em; }
.u-stats b { display: block; font-size: 1.5em; font-weight: 900; }
.u-stats small { color: var(--u-sub); font-size: 0.74em; font-weight: 600; }
.u-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5em; height: 4.2em; align-items: end; }
.u-bars i { position: relative; height: 100%; border-radius: 0.5em; background: var(--u-chip); overflow: hidden; }
.u-bars i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: inherit; background: #00AAFF; }
.u-bars i.is-today { outline: 1px solid rgba(255, 107, 53, 0.7); }
.u-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5em; margin-top: 0.4em; text-align: center; font-size: 0.66em; font-weight: 700; color: var(--u-sub); }
.u-links { padding-top: 0.4em; padding-bottom: 0.4em; }
.u-link { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9em; align-items: center; padding: 0.7em 0; border-top: 1px solid var(--u-line); }
.u-link:first-child { border-top: 0; }
.u-link-ic { width: 2.6em; height: 2.6em; border-radius: 0.9em; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.u-link b { display: block; font-weight: 800; font-size: 0.96em; }
.u-link small { color: var(--u-sub); font-size: 0.78em; }
.u-link > i { color: var(--u-sub); font-size: 1.4em; }
.u-badges-head { display: flex; justify-content: space-between; align-items: center; }
.u-badges-head b { font-weight: 800; font-size: 1.05em; }
.u-badges-head i { color: var(--u-sub); font-weight: 700; font-size: 0.9em; }
.u-badge-row { display: flex; justify-content: space-between; margin: 0.7em 0 0.6em; }
.u-badge { width: 3.8em; aspect-ratio: 1 / 1.1; display: grid; place-items: center; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); }
.u-badge svg { width: 1.6em; height: 1.6em; }
.u-badge.locked { background: #2C2C2E; color: #6B6B70; }
.u-badges > small { color: var(--u-sub); font-size: 0.8em; }
.u-badges > small b { color: #fff; }
.u-badges .u-track { margin-top: 0.5em; }

/* Alt sekme çubuğu çizilmeyen yerlerde (dar ekrandaki adım telefonları, Güç Analizi sayfası) alt boşluk küçülür */
.step-shot .ui-in, [data-ui="strength"] .ui-in { padding-bottom: 1.5em; }
.step-shot [data-ui] .ui-in { justify-content: space-between; }
[data-ui="strength"] .u-lift em:not([class]), [data-ui="strength"] .u-lift em[class=""] { color: var(--u-sub); }
[data-ui="strength"] .u-lift small:not([class]), [data-ui="strength"] .u-lift small[class=""] { color: var(--u-sub); }

/* Tur telefonunda ekranlar ust uste durur */
.tour-screen.ui { position: absolute; inset: 0; }