/* ═══════════════════════════════════════════════════════════
   FitJeton — v5 interaction layer (scoped to body.v5)
   v4 foundation untouched. Adds: the token-protagonist journey
   coin, interactive system states, and an app-style recipe
   sheet. Motion teaches the system; nothing decorates.
   ═══════════════════════════════════════════════════════════ */

/* ───── The protagonist: journey coin ───── */
.journey-coin {
  position: fixed; left: 0; top: 0; z-index: 45;
  pointer-events: none; opacity: 0;
  will-change: transform, opacity;
  display: none;
  filter: drop-shadow(0 16px 22px rgba(8,20,12,0.4));
}
body.v5.journey-on .journey-coin { display: block; }
.jc-disc {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-pale) 0%, var(--gold) 65%, var(--gold-deep) 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.28), inset 0 2px 2px rgba(255,255,255,0.5);
  color: #6b5420;
  font-family: var(--font-display); font-weight: 800;
  position: relative; overflow: hidden;
  transform-style: preserve-3d;
}
.jc-disc::before {
  content: ""; position: absolute; inset: 9%;
  border-radius: 50%;
  border: 2px solid rgba(107,84,32,0.35);
}
.jc-sheen {
  position: absolute; inset: -12%;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.14) 54%, transparent 64%);
  transform: translateX(-130%);
  opacity: 0;
}
.journey-coin.glint .jc-sheen { animation: coinSheen 1.3s var(--ease-out) forwards; }
/* while the journey coin drives the story, the static stand-ins step back */
body.v5.journey-on .hero-coin { visibility: hidden; }
body.v5.journey-on .drop-coin { visibility: hidden; }
/* prevent hero-hand label from overlapping the journey coin at its first anchor */
body.v5.journey-on .hero-hand { top: -66px; }
/* Mobile/tablet (journey OFF below 1000px): keep the handwritten label clear of the
   static hero coin. Overlap is purely vertical (both pinned to the right edge), so a
   single top offset clears it at every width. */
@media (max-width: 999px) {
  /* Issue 2: label sits a touch closer to the (now higher) coin — still clears the trust line */
  body.v5 .hero-hand { top: -58px; }
  /* Issue 1: coin less dominant — ~12% smaller, nudged up and slightly toward the edge so more
     of the phone screen reads first. Scale folds into the parallax transform so it isn't overridden. */
  body.v5 .hero-coin { top: 14px; right: 1%; }
  body.v5 .hero-coin[data-parallax] { transform: translateY(var(--py, 0px)) rotate(12deg) scale(0.88); }
  /* Issue 3: tighten vertical rhythm so the phone appears sooner */
  body.v5 .hero-grid { gap: 34px; }
  body.v5 .hero-ctas { margin: 24px 0 16px; }
  body.v5 .hero-trust { margin: 14px 0 0; }
  /* Issue 4: optical-center the gold bullet against the text (align-items:center renders it ~1px high) */
  body.v5 .hero-trust .dot { position: relative; top: 1px; }
}
/* CTA handoff: the seat coin waits for the protagonist's arrival */
body.v5.journey-on .dl-ring.played .dl-coin { opacity: 0; transform: scale(0.4); transition: none; }
body.v5.journey-on .dl-ring.arrived .dl-coin {
  opacity: 1; transform: scale(1);
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}

/* ───── Jeton düştü: impact + cost feedback ───── */
.drop-spot { position: relative; }
.impact-ring {
  position: absolute; left: 50%; bottom: -2px;
  width: 104px; height: 30px; margin-left: -52px;
  border-radius: 50%;
  border: 1.5px solid rgba(230,199,122,0.65);
  opacity: 0; pointer-events: none;
}
.drop-sec.played .impact-ring { animation: impactRing 1s var(--ease-out) 0.78s forwards; }
@keyframes impactRing {
  0%   { opacity: 0.9; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.25); }
}
.drop-feedback {
  position: absolute; left: 50%; top: -8px;
  transform: translate(-50%, 0);
  font-size: 14px; font-weight: 600; color: var(--gold-light);
  white-space: nowrap; opacity: 0; pointer-events: none;
}
.drop-sec.played .drop-feedback { animation: dropFeedback 2.4s var(--ease-out) 1s forwards; }
@keyframes dropFeedback {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  22%  { opacity: 1; transform: translate(-50%, -16px); }
  72%  { opacity: 1; transform: translate(-50%, -26px); }
  100% { opacity: 0; transform: translate(-50%, -34px); }
}

/* ───── Nasıl çalışır: interactive cards ───── */
body.v5 .how-card {
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, background 0.35s;
}
body.v5 .how-card:hover { transform: translateY(-3px); border-color: rgba(230,199,122,0.35); }
body.v5 .how-card.active {
  border-color: rgba(230,199,122,0.6);
  background: rgba(230,199,122,0.07);
  transform: translateY(-3px);
}
body.v5 .how-card:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
body.v5 .hf-item .bubble { transition: transform 0.4s var(--ease-out), border-color 0.4s, background 0.4s; }
body.v5 .hf-item.lit .bubble {
  border-color: rgba(230,199,122,0.55);
  background: rgba(230,199,122,0.1);
  transform: scale(1.07);
}

/* ───── İlerleme: weekly day-status icons (additive, dark phone) ───── */
body.v5 .scr-dark .week-pill {
  display: flex; align-items: center; justify-content: center;
}
body.v5 .scr-dark .week-pill .wp-ico {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: rgba(255,255,255,0.92);
}
body.v5 .scr-dark .week-pill .wp-ico svg { display: block; }
/* water → cool blue-green tint */
body.v5 .scr-dark .week-pill.st-water {
  background: rgba(96,178,205,0.20); border-color: rgba(96,178,205,0.30);
}
body.v5 .scr-dark .week-pill.st-water .wp-ico { color: #8fd6e6; }
/* exercise → green tint */
body.v5 .scr-dark .week-pill.st-move {
  background: rgba(79,195,106,0.24); border-color: rgba(79,195,106,0.34);
}
body.v5 .scr-dark .week-pill.st-move .wp-ico { color: #9be8ab; }
/* cheat → warm amber tint */
body.v5 .scr-dark .week-pill.st-cheat {
  background: rgba(239,143,53,0.22); border-color: rgba(239,143,53,0.34);
}
body.v5 .scr-dark .week-pill.st-cheat .wp-ico { color: #f5b878; }
/* perfect day → strongest green, solid */
body.v5 .scr-dark .week-pill.st-perfect {
  background: linear-gradient(180deg, var(--green-bright), var(--action-deep));
  border-color: transparent;
}
body.v5 .scr-dark .week-pill.st-perfect .wp-ico { color: #fff; }

/* ───── Hareket: earn-action button + reward toast (additive) ───── */
body.v5 .earn-action {
  border: none; cursor: pointer; font: inherit;
  -webkit-appearance: none; appearance: none;
  letter-spacing: 0; gap: 8px; padding: 9px 16px 9px 9px;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, filter 0.2s;
}
body.v5 .earn-action .ep-label {
  color: #fff; font-family: var(--font-body); font-weight: 600;
  font-size: 13.5px; letter-spacing: -0.01em;
}
body.v5 .earn-action .ep-v {
  font-family: var(--font-num); font-weight: 700; font-size: 13px;
  color: var(--gold-light);
  padding-left: 9px; margin-left: 1px;
  border-left: 1px solid rgba(255,255,255,0.18);
}
body.v5 .earn-action:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 22px -8px rgba(15,42,28,0.55); }
body.v5 .earn-action:active { transform: scale(0.97); }
body.v5 .earn-action:focus-visible { outline: 2px solid var(--pine-600); outline-offset: 3px; }

body.v5 .earn-toast {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 10px 16px;
  background: var(--green-soft); border: 1px solid rgba(31,81,53,0.16);
  border-radius: 999px; box-shadow: var(--shadow-soft);
  font-size: 13.5px; font-weight: 600; color: var(--pine-800);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
body.v5 .earn-toast[hidden] { display: none; }
body.v5 .earn-toast.show { opacity: 1; transform: translateY(0); }
body.v5 .earn-toast .coin { width: 18px; height: 18px; font-size: 10px; }
body.v5 .earn-toast .et-v { font-family: var(--font-num); font-weight: 700; color: var(--pine-900); }
@media (prefers-reduced-motion: reduce) {
  body.v5 .earn-toast { transition: opacity 0.2s; transform: none; }
}

/* ───── Kaçamak: cheat selector ───── */
.cheat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.cheat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--hair-l);
  border-radius: 16px; padding: 12px 16px 10px; cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 1px 2px rgba(31,27,14,0.04);
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
  min-width: 84px;
}
.cheat:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.cheat img { width: 34px; height: 34px; object-fit: contain; }
.cheat .cn { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cheat .cc { font-size: 11px; font-weight: 600; color: #b05f10; }
.cheat.on {
  border-color: var(--pine-700);
  box-shadow: 0 0 0 1px var(--pine-700), var(--shadow-soft);
}
.cheat.on .cn { color: var(--pine-900); }
.cheat:focus-visible { outline: 2px solid var(--pine-700); outline-offset: 2px; }

/* Stable 2×2 grid on narrow screens (was 3 + 1 lonely card) */
@media (max-width: 560px) {
  .cheat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cheat { min-width: 0; padding: 14px 10px 12px; }
}

/* Telafi phone: keep header on one line so badge never overlaps the title */
.recover-stage .recover-head { gap: 8px; flex-wrap: nowrap; }
.recover-stage .recover-head h4 { white-space: nowrap; }
.recover-stage .recover-head .tag { flex-shrink: 0; white-space: nowrap; }

/* Light phone status bar: clear the 38px screen corner so the time isn't clipped */
.ph-status.ink { padding: 9px 22px 12px; }

/* Telafi plan: explicit day labels so badge "2 gün / 3 gün" maps 1:1 to the visible sequence */
body.v5 .recover-day .dk {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pine-600);
  margin: 1px 0 3px;
}
body.v5 .recover-day.final .dk { color: var(--gold-deep); }

/* difficulty row inside the phone */
.recover-diff {
  display: flex; align-items: center; gap: 8px;
  margin: -14px 0 18px;
}
.recover-diff .k { font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-3); }
.recover-diff .dots { display: flex; gap: 4px; }
.recover-diff .dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--hair-l);
  transition: background 0.3s, border-color 0.3s;
}
.recover-diff .dots i.f { background: var(--jeton); border-color: transparent; }
.recover-diff .lvl { font-size: 10.5px; font-weight: 600; color: var(--ink-2); }

/* ───── Ne yesem: live suggestions ───── */
.ny-meals {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--hair-l);
}
@media (min-width: 720px) { .ny-meals { grid-template-columns: repeat(3, 1fr); } }
.ny-meal {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--hair-l);
  border-radius: 15px; padding: 10px 12px;
}
.ny-meal img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.ny-meal .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.ny-meal .jeton-badge { margin-left: auto; }
body.v5 .ne-yesem .chip { cursor: pointer; }
body.v5 .ne-yesem .chip:focus-visible { outline: 2px solid var(--pine-700); outline-offset: 2px; }

/* ───── Tarifler: cards are openable ───── */
body.v5 .recipe-card { cursor: pointer; }
body.v5 .recipe-card:focus-visible { outline: 2px solid var(--pine-700); outline-offset: 2px; }

/* App-style recipe sheet */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-overlay[hidden] { display: none; }
@media (min-width: 720px) { .sheet-overlay { align-items: center; } }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(12,35,22,0.45);
  backdrop-filter: blur(6px);
}
.app-sheet {
  position: relative; width: 100%; max-width: 400px;
  max-height: 86vh; overflow: auto;
  background: var(--cream); color: var(--ink);
  border-radius: 28px 28px 0 0; padding: 18px 22px 22px;
  box-shadow: var(--shadow-lift);
  font-size: 14px; line-height: 1.5;
}
@media (min-width: 720px) { .app-sheet { border-radius: 28px; } }
.app-sheet .sh-title { margin: 2px 0 14px; }
.app-sheet .sh-x { border: none; cursor: pointer; font-family: inherit; }
.as-hero {
  position: relative;
  background: var(--surface-2); border: 1px solid var(--hair-l);
  border-radius: 18px; height: 124px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.as-hero img { width: 84px; height: 84px; object-fit: contain; }
.as-lock {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--gold-deep);
  background: linear-gradient(180deg, #fbf1d6, #f3e4b4);
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(139,109,42,0.18);
}
.as-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.as-kcal { font-size: 12px; color: var(--ink-3); }
.as-portion { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.as-desc { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }
.app-sheet .ph-label { margin: 0 0 8px; }
.as-ing { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.as-ing li {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--hair-l);
  border-radius: 11px; padding: 8px 12px;
  font-size: 12.5px; font-weight: 500;
}
.as-ing li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--gold-pale) 0%, var(--gold) 65%, var(--gold-deep) 100%);
}
.as-add { width: 100%; }
.app-sheet.locked .as-add { background: var(--surface-2); color: var(--ink-3); box-shadow: none; pointer-events: none; }

/* ───── Hareket: selectable activities ───── */
body.v5 .activity {
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s, color 0.3s;
}
body.v5 .activity:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
body.v5 .activity:focus-visible { outline: 2px solid var(--pine-700); outline-offset: 2px; }

/* ───── Takip: graph hover ───── */
.trend-wrap { position: relative; }
.trend-wrap .trend-svg { cursor: crosshair; }
.trend-wrap .tl { transition: stroke-width 0.25s, filter 0.25s; }
.trend-wrap.hot .tl { stroke-width: 3.5; filter: brightness(1.15); }
.trend-tip {
  position: absolute; z-index: 2;
  background: var(--pine-950); color: var(--mint);
  border: 1px solid rgba(230,199,122,0.35);
  border-radius: 10px; padding: 6px 10px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -130%);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5);
}
.trend-tip .d { display: block; font-size: 9px; font-weight: 500; color: var(--mint-dim); letter-spacing: 0.06em; }
.tip-dot { fill: #fff; stroke: #4fc36a; stroke-width: 2.5; pointer-events: none; }

/* ───── Premium: depth on hover ───── */
body.v5 .plan { transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s, background 0.3s; }
body.v5 .plan:hover {
  transform: translateY(-2px);
  border-color: rgba(230,199,122,0.45);
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.45);
}
body.v5 .plan.best:hover {
  border-color: rgba(230,199,122,0.8);
  background: rgba(230,199,122,0.1);
  box-shadow: 0 16px 36px -16px rgba(139,109,42,0.4);
}
body.v5 .premium-card { transition: border-color 0.4s; }
body.v5 .premium-card:hover { border-color: rgba(230,199,122,0.4); }

@media (prefers-reduced-motion: reduce) {
  body.v5 .journey-coin { display: none !important; }
  body.v5.journey-on .hero-coin, body.v5.journey-on .drop-coin { visibility: visible; }
  .drop-sec.played .impact-ring { animation: none; opacity: 0; }
  .drop-sec.played .drop-feedback { animation: none; opacity: 0; }
}

/* ───── Founder portrait — real photo treatment (additive) ───── */
body.v5 .diet-portrait {
  width: 232px; height: 290px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--hair-l);
  box-shadow: var(--shadow-soft);
  padding: 0; overflow: hidden;
  font-size: 0; /* hide any fallback text */
}
body.v5 .diet-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.v5 .diet-cta { margin-top: 24px; }
@media (min-width: 1000px) {
  body.v5 .diet-portrait { width: 280px; height: 350px; }
}

/* ───── İşletme iş birliği · CTA block ───── */
.biz-card {
  display: grid; gap: 30px; align-items: center;
  background: var(--surface); border: 1px solid var(--hair-l);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  padding: 34px 28px;
}
.biz-copy .h-split { font-size: clamp(28px, 3.8vw, 44px); margin-bottom: 14px; }
.biz-copy .lede { margin-bottom: 26px; }
.biz-aside { display: flex; flex-direction: column; gap: 11px; }
.biz-chip {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; font-weight: 600; color: var(--pine-900);
  background: var(--surface-2); border: 1px solid var(--hair-l);
  border-radius: 999px; padding: 12px 18px;
}
@media (min-width: 720px) {
  .biz-card { grid-template-columns: 1.35fr 1fr; padding: 44px 40px; gap: 40px; }
}

/* ───── Premium · 8-feature grid + pricing (additive, scoped) ───── */
body.v5 #premium .premium-feats {
  display: grid; grid-template-columns: 1fr; gap: 13px 26px; align-content: start;
}
@media (min-width: 720px) {
  body.v5 #premium .premium-feats { grid-template-columns: 1fr 1fr; }
}
body.v5 #premium .premium-feat { align-items: flex-start; font-size: 14px; line-height: 1.35; }
body.v5 #premium .premium-feat .coin { flex: 0 0 auto; margin-top: 1px; }
body.v5 #premium .plan .pp {
  margin-left: auto; font-family: var(--font-num);
  font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap;
}
body.v5 #premium .plan.best .pp { color: var(--gold-pale); }
body.v5 #premium .plan.best .tag { margin-left: 12px; }
body.v5 #premium .plan-fine {
  font-size: 11.5px; color: var(--mint-dim); text-align: center;
  margin: 14px 0 0; line-height: 1.5;
}