/* LTLearner · Odak Programı (odak.js): tur şeridi, hareket molası, "Bugünlük yeter", ısınma kapısı, haftanın görevi, veli "Bu hafta".
   Yaş bandı belirteçleri (yasbandi.css: --yb-*) kullanılır; veli ekranlarında bant yoktur, :root değerleri geçerli olur. Renk/ölçü yeni değer icat etmez. */

/* ---------- ana ekran şeridi ---------- */
.od-serit { display: grid; gap: var(--yb-bosluk, 10px); width: min(100%, 680px); margin: 0 auto 18px; }
.od-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.od-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--r-hap); background: color-mix(in srgb, var(--isik) 14%, var(--yuzey)); border: 1px solid color-mix(in srgb, var(--isik) 32%, transparent); color: var(--metin); font-weight: 600; font-size: var(--yb-kucuk, 14px); }
.od-sure { display: inline-flex; align-items: center; gap: 8px; color: var(--metin-yumusak); font-size: var(--yb-kucuk, 14px); }
.od-sure svg { width: 18px; height: 18px; color: var(--soluk); }
.od-sure b { font-weight: 600; font-variant-numeric: tabular-nums; }
.od-bar { height: 8px; border-radius: var(--r-hap); background: var(--yuzey-3); overflow: hidden; }
.od-bar i { display: block; height: 100%; width: var(--oran, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--isik-koyu), var(--isik)); transition: width calc(var(--yb-gecis, 250ms) * 2) var(--ease); }
.od-kart { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: var(--yb-kart-ic, 16px); border-radius: var(--yb-yaricap, 16px); background: var(--yuzey-2); border: 1px solid var(--kenar-2); }
.od-kart > div { display: grid; gap: 2px; min-width: 0; }
.od-kart b { font-family: var(--display); font-size: calc(1.15rem * var(--yb-baslik-olcek, 1)); letter-spacing: -0.02em; }
.od-kart span { color: var(--metin-yumusak); font-size: var(--yb-kucuk, 14px); }
.od-mola-kart { border-color: color-mix(in srgb, var(--isik) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--isik) 11%, var(--yuzey-2)), var(--yuzey-2)); }
.od-yeter-kart { border-color: color-mix(in srgb, var(--kum) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--kum) 9%, var(--yuzey-2)), var(--yuzey-2)); }
.od-kart .dugme, .od-kart .dugme-ikincil { flex: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* haftanın görevi kartı */
.od-gorev { display: flex; align-items: center; gap: 12px; padding: 12px var(--yb-kart-ic, 16px); border-radius: var(--yb-yaricap, 16px); background: var(--yuzey); border: 1px dashed var(--kenar-3); color: var(--metin); text-decoration: none; min-height: var(--yb-hedef, 48px); }
.od-gorev:hover { border-color: color-mix(in srgb, var(--iyi) 55%, transparent); }
.od-gorev-ikon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--iyi) 16%, var(--yuzey-2)); color: var(--iyi); }
.od-gorev-ikon svg { width: 22px; height: 22px; }
.od-gorev-metin { display: grid; gap: 1px; min-width: 0; flex: 1; }
.od-gorev-metin small { color: var(--soluk); font-size: var(--yb-kucuk, 14px); }
.od-gorev-metin b { font-weight: 600; overflow-wrap: anywhere; }
.od-dk { flex: none; color: var(--soluk); font-size: var(--yb-kucuk, 14px); }
.od-yapildi { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--iyi); font-weight: 600; font-size: var(--yb-kucuk, 14px); }
.od-yapildi svg { width: 18px; height: 18px; }
.od-yapildi.od-buyuk { font-size: var(--yb-govde, 17px); padding: 0 6px; min-height: var(--yb-hedef, 48px); }

/* ---------- mola / bugünlük yeter ---------- */
.od-mola { display: grid; gap: calc(var(--yb-bosluk, 10px) * 2); width: min(100%, 620px); margin: 0 auto; padding-block: 8px 24px; }
.od-mola-ust { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.od-mola-ust h1 { font-size: calc(clamp(1.7rem, 5vw, 2.4rem) * var(--yb-baslik-olcek, 1)); }
.od-alt { margin-top: 8px; color: var(--metin-yumusak); max-width: var(--yb-olcu, 50ch); }
.od-hazir { min-height: 1.4em; margin-top: 4px; }
.od-sayac, .od-ay { display: grid; place-items: center; width: var(--yb-ikon-halka, 72px); height: var(--yb-ikon-halka, 72px); flex: none; color: var(--isik); }
.od-ay svg { width: 40px; height: 40px; }
.od-halka { width: 100%; height: 100%; transform: rotate(-90deg); }
.od-halka-iz { fill: none; stroke: var(--yuzey-3); stroke-width: 6; }
.od-halka-ilerle { fill: none; stroke: var(--isik); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.od-mola:not(.hazir) .od-halka-ilerle { animation: od-doldur var(--od-sn, 60s) linear forwards; }
.od-mola.hazir .od-halka-ilerle { stroke-dashoffset: 0; stroke: var(--iyi); }
@keyframes od-doldur { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .od-mola:not(.hazir) .od-halka-ilerle { animation: none; stroke-dashoffset: 40; } .od-bar i { transition: none; } }
.od-hareket { padding: var(--yb-kart-ic, 18px) calc(var(--yb-kart-ic, 18px) + 4px); border-radius: var(--yb-yaricap, 16px); background: var(--yuzey-2); border: 1px solid var(--kenar-2); display: grid; gap: 8px; }
.od-hareket p { font-family: var(--display); font-size: calc(1.3rem * var(--yb-baslik-olcek, 1)); line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.od-disi { display: grid; gap: 10px; }
.od-disi ul { display: flex; flex-wrap: wrap; gap: 10px; }
.od-disi li { display: inline-flex; align-items: center; gap: 8px; min-height: var(--yb-hedef, 48px); padding: 0 16px 0 10px; border-radius: var(--r-hap); background: var(--yuzey); border: 1px solid var(--kenar-2); }
.od-disi-ikon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--isik) 14%, var(--yuzey-2)); color: var(--isik); }
.od-disi-ikon svg { width: 18px; height: 18px; }
.od-disi b { font-weight: 600; }
.od-eylem { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.od-eylem .dugme, .od-eylem .dugme-ikincil { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.od-dinle { justify-self: end; }

/* ---------- ısınma kapısı ---------- */
.od-isinma { display: grid; justify-items: center; gap: 14px; text-align: center; }
.od-isinma .od-eylem { justify-content: center; }
.od-isinma h2 { font-size: calc(clamp(1.5rem, 4.4vw, 2rem) * var(--yb-baslik-olcek, 1)); }

/* ---------- haftanın görevi (çocuk) ---------- */
.od-gorev-ekran { display: grid; gap: calc(var(--yb-bosluk, 10px) * 1.4); width: min(100%, 620px); margin: 0 auto; padding-block: 8px 24px; }
.od-govde { font-size: calc(var(--yb-govde, 17px) * 1.12); max-width: var(--yb-olcu, 50ch); }
.od-bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 0; }
.od-bilgi > div { padding: 12px 14px; border-radius: var(--yb-yaricap, 14px); background: var(--yuzey); border: 1px solid var(--kenar); display: grid; gap: 2px; }
.od-bilgi dt { color: var(--soluk); font-size: var(--yb-kucuk, 14px); }
.od-bilgi dd { margin: 0; font-weight: 600; }
.od-usta { text-align: center; color: var(--iyi); font-weight: 600; margin: 4px 0 10px; }

/* ---------- veli: "Bu hafta" ---------- */
.od-v { display: grid; gap: 14px; }
.od-v-ozet { color: var(--metin-yumusak); }
.od-v-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.od-v-blok { padding: 14px 16px; border-radius: var(--r-kart); background: var(--yuzey); border: 1px solid var(--kenar); display: grid; gap: 8px; align-content: start; }
.od-v-blok h3 { font-size: 1rem; letter-spacing: -0.01em; color: var(--metin-yumusak); }
.od-v-blok ul { display: grid; gap: 8px; }
.od-v-blok li { display: grid; gap: 2px; }
.od-v-blok li small { color: var(--soluk); }
.od-v-oneri { background: color-mix(in srgb, var(--isik) 7%, var(--yuzey)); border-color: color-mix(in srgb, var(--isik) 24%, transparent); }
.od-v-gorev { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 14px 16px; border-radius: var(--r-kart); border: 1px dashed var(--kenar-3); }
.od-v-gorev > div { display: grid; gap: 6px; }
.od-v-gorev h3 { font-size: 1.1rem; }
.od-v-gorev button { justify-self: end; }
@media (max-width: 560px) { .od-v-gorev { grid-template-columns: 1fr; } .od-v-gorev button { justify-self: start; } .od-mola-ust { grid-template-columns: auto 1fr; } .od-dinle { grid-column: 1 / -1; justify-self: start; } .od-kart { flex-direction: column; align-items: stretch; } .od-kart .dugme, .od-kart .dugme-ikincil { width: 100%; } }

.od-isinma .od-dinle, .od-mola .od-dinle { width: auto; border-radius: var(--r-hap); min-height: var(--yb-hedef, 48px); padding-inline: 18px; aspect-ratio: auto; }