/* ═══════════════════════════════════════════════════════════════════════
   The first eight seconds.

   The screen this replaces was a centred modal carousel: seventeen beats of
   text, each with a portrait, a name, a role, a paragraph, a tip and a Devam
   button. It looked like a slide deck because it was one.

   This is a dock, not a modal. It sits at the bottom, leaves the actual
   product visible behind it, and points at a real element on the page. The
   difference matters: a modal says "read this before you may continue", a dock
   says "here, look at this" — and only one of those is how a person shows
   another person around.
   ═══════════════════════════════════════════════════════════════════════ */

.qq-fm {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;              /* the page stays usable underneath */
}

/* Just enough dim to lift the dock off the page. Not a blackout — the player
   should be able to see the thing being pointed at. */
.qq-fm-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 70% at 50% 110%, rgba(4,6,12,.86), rgba(4,6,12,.38) 60%, transparent);
  opacity: 0;
  animation: fmScrimIn .5s var(--qq-ease) forwards;
}
@keyframes fmScrimIn { to { opacity: 1; } }

/* ── the dock ────────────────────────────────────────────────────────── */
.qq-fm-dock {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 46px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(660px, calc(100vw - 32px));
  padding: 14px 16px 14px 14px;
  border-radius: var(--qq-r-xl);
  background: linear-gradient(180deg, rgba(23,34,54,.97), rgba(11,17,29,.97));
  border: 1px solid var(--qq-border-hover);
  box-shadow: var(--qq-e-4), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: auto;
  animation: fmDockIn .62s var(--qq-spring) both;
}
@keyframes fmDockIn {
  from { opacity: 0; transform: translateX(-50%) translateY(34px) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.qq-fm-guide { width: 62px; height: 62px; flex: 0 0 62px; }
.qq-fm-guide svg { width: 100%; height: 100%; }

.qq-fm-copy { flex: 1 1 auto; min-width: 0; }

.qq-fm-name {
  font-family: var(--qq-font-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--qq-accent-bright);
  margin-bottom: 3px;
}

.qq-fm-line {
  font-family: var(--qq-font-display);
  font-size: clamp(15px, 2.1vw, 18px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--qq-text-1);
  margin: 0;
  min-height: 1.35em;                /* no layout jump while typing */
}
/* Caret while the line is being typed. */
.qq-fm-line::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -.14em;
  background: var(--qq-accent-bright);
  animation: fmCaret 1s steps(2) infinite;
}
.qq-fm.is-ready .qq-fm-line::after { display: none; }
@keyframes fmCaret { 50% { opacity: 0; } }

/* The CTA stays quiet until the sentence has landed, so there is exactly one
   thing to attend to at a time. */
.qq-fm-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 20px;
  border-radius: var(--qq-r-md);
  border: 1px solid rgba(108,199,245,.34);
  background: linear-gradient(180deg, var(--qq-accent), var(--qq-accent-deep));
  color: #f6fbff;
  font-family: var(--qq-font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  opacity: .35;
  transform: scale(.96);
  transition: opacity var(--qq-t-base) var(--qq-ease), transform var(--qq-t-base) var(--qq-spring);
}
.qq-fm.is-ready .qq-fm-go { opacity: 1; transform: scale(1); }
.qq-fm-go i { width: 16px; height: 16px; }

.qq-fm-skip {
  position: absolute;
  right: clamp(14px, 3vw, 26px);
  top: clamp(14px, 3vw, 22px);
  padding: 7px 14px;
  border-radius: var(--qq-r-full);
  border: 1px solid var(--qq-border);
  background: rgba(11,17,29,.7);
  color: var(--qq-text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  transition: color var(--qq-t-fast), border-color var(--qq-t-fast);
}
.qq-fm-skip:hover { color: var(--qq-text-1); border-color: var(--qq-border-hover); }

.qq-fm.is-leaving .qq-fm-dock { animation: fmDockOut .3s var(--qq-ease-in) both; }
.qq-fm.is-leaving .qq-fm-scrim { animation: fmScrimOut .3s var(--qq-ease-in) both; }
@keyframes fmDockOut { to { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.97); } }
@keyframes fmScrimOut { to { opacity: 0; } }

/* ── the pointing ring ───────────────────────────────────────────────── */
/* Drawn as a separate element tracking the real target, so the target's own
   styles are untouched and the ring can sit above everything. */
.qq-fm-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 94;
  border-radius: var(--qq-r-lg);
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 2px var(--qq-accent), 0 0 0 9px rgba(59,163,224,.16), 0 0 46px rgba(59,163,224,.3);
  transition: opacity var(--qq-t-base) var(--qq-ease);
}
.qq-fm-ring.is-on { opacity: 1; animation: fmRingPulse 2.1s var(--qq-ease) infinite; }
@keyframes fmRingPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--qq-accent), 0 0 0 8px rgba(59,163,224,.14), 0 0 38px rgba(59,163,224,.24); }
  50%      { box-shadow: 0 0 0 2px var(--qq-accent-bright), 0 0 0 13px rgba(59,163,224,.07), 0 0 60px rgba(59,163,224,.36); }
}

.qq-fm-target { position: relative; z-index: 93; }

/* ── what this screen is for ─────────────────────────────────────────── */
/* Replaces a floating one-line toast that removed itself after seven seconds
   and counted itself read the instant it appeared. This sits above the screen
   it describes, says what you do here and how it relates to the other two
   tabs, and only goes away when the player says it can. */
.qq-tab-intro {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 18px);
  margin: 0 0 16px;
  padding: clamp(14px, 1.8vw, 20px) clamp(15px, 2vw, 22px);
  border-radius: var(--qq-r-lg);
  background: linear-gradient(135deg, rgba(20,32,50,.92), rgba(9,14,24,.92));
  border: 1px solid var(--qq-border-hover);
  box-shadow: var(--qq-e-2);
}
.qq-tab-intro-face { width: 52px; height: 52px; flex: 0 0 52px; }
.qq-tab-intro-face svg { width: 100%; height: 100%; }
.qq-tab-intro-body { flex: 1 1 auto; min-width: 0; }
.qq-tab-intro-kicker {
  font-family: var(--qq-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--qq-accent);
  margin-bottom: 4px;
}
.qq-tab-intro-title {
  margin: 0 0 8px;
  font-family: var(--qq-font-display);
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--qq-text-1);
}
/* The guide's one-sentence self-introduction: who this face is and what they
   do for you. Styled as speech, not as another bullet. */
.qq-tab-intro-cast {
  margin: 0 0 10px;
  padding-left: 11px;
  border-left: 2px solid rgba(108,199,245,.45);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--qq-text-3);
}
.qq-tab-intro-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.qq-tab-intro-points li {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--qq-text-2);
}
/* A tick rather than a bullet: these are things that are true, not options. */
.qq-tab-intro-points li::before {
  content: "";
  position: absolute;
  left: 1px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--qq-accent);
  opacity: .65;
}
.qq-tab-intro-close {
  flex: 0 0 auto;
  align-self: center;
  padding: 9px 16px;
  border-radius: var(--qq-r-md);
  border: 1px solid var(--qq-border-hover);
  background: rgba(4,6,12,.5);
  color: var(--qq-text-2);
  font-family: var(--qq-font-display);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color .16s var(--qq-ease), border-color .16s var(--qq-ease), background .16s var(--qq-ease);
}
.qq-tab-intro-close:hover {
  color: var(--qq-text-1);
  border-color: var(--qq-border-strong);
  background: rgba(125,160,200,.09);
}
.qq-tab-intro.is-leaving { animation: fmHintOut .26s var(--qq-ease-in) both; }
@keyframes fmHintOut { to { opacity: 0; transform: translateY(-10px); } }

@media (max-width: 720px) {
  .qq-tab-intro { flex-wrap: wrap; }
  .qq-tab-intro-face { width: 40px; height: 40px; flex: 0 0 40px; }
  .qq-tab-intro-close { width: 100%; }
}

/* ── phones ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .qq-fm-dock {
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px;
  }
  .qq-fm-guide { width: 48px; height: 48px; flex: 0 0 48px; }
  .qq-fm-go { width: 100%; justify-content: center; min-height: 46px; }
  .qq-fm-line { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .qq-fm-dock, .qq-fm-scrim, .qq-fm-ring.is-on, .qq-tab-intro { animation: none; }
  .qq-fm-line::after { display: none; }
  .qq-fm-go { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   The experience-level question.

   Was: five mascots as aria-hidden decoration above three cards, each card
   carrying a title, a "Kim için:" line and a release-notes line reading
   "Açılır: Ünite 2 · Atlanır: Ünite 1 (tekrar açılabilir)". Nobody reads a
   spec sheet on the second screen of a product.

   Now: one guide asks one question, and each answer is something a person
   would actually say about themselves.
   ═══════════════════════════════════════════════════════════════════════ */

.qq-onboard-ask {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}
.qq-onboard-guide { width: 64px; height: 64px; flex: 0 0 64px; }
.qq-onboard-guide svg { width: 100%; height: 100%; }

.qq-onboard-ask .qq-onboard-brand {
  margin: 0 0 2px;
  font-family: var(--qq-font-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--qq-accent-bright);
}
.qq-onboard-ask .qq-onboard-title {
  margin: 0;
  font-family: var(--qq-font-display);
  font-size: clamp(21px, 3.4vw, 31px);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.08;
  color: var(--qq-text-1);
}

/* The card grid lost its "01/02/03" index column, so the template has to
   lose it too or every card keeps a phantom gutter. */
.qq-path {
  grid-template-columns: auto 1fr auto;
  padding: 20px 18px;
  border-radius: var(--qq-r-lg);
}
.qq-path-title {
  font-family: var(--qq-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--qq-text-1);
}
.qq-path-desc {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--qq-text-3);
}
/* The chevron leans toward the card the pointer is on — a small physical cue
   that the row is a door, not a checkbox. */
.qq-path-chevron { transition: transform var(--qq-t-base) var(--qq-spring); color: var(--qq-text-4); }
.qq-path:hover .qq-path-chevron,
.qq-path:focus-visible .qq-path-chevron { transform: translateX(5px); color: var(--qq-accent-bright); }

.qq-path-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--qq-r-md);
  background: var(--path-tint);
  border: 1px solid var(--path-accent);
  color: var(--qq-text-1);
  transition: transform var(--qq-t-base) var(--qq-spring);
}
.qq-path:hover .qq-path-icon { transform: scale(1.06) rotate(-3deg); }

.qq-onboard-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--qq-text-4);
}

@media (max-width: 560px) {
  .qq-onboard-ask { gap: 12px; }
  .qq-onboard-guide { width: 50px; height: 50px; flex: 0 0 50px; }
  .qq-path { padding: 16px 14px; gap: 12px; }
  .qq-path-icon { width: 38px; height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   The verdict, and the reason to come back.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── cold-open verdict ───────────────────────────────────────────────── */
.consequence-verdict-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: var(--qq-r-full);
  background: rgba(227,179,65,.12);
  border: 1px solid rgba(227,179,65,.34);
  color: var(--qq-gold-bright);
  font-family: var(--qq-font-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.consequence-verdict-title {
  font-family: var(--qq-font-display);
  font-size: clamp(18px, 2.6vw, 23px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--qq-text-1);
  margin-bottom: 9px;
}
.consequence-verdict-body {
  font-family: var(--qq-font-text);
  font-size: 14px;
  line-height: 1.65;
  color: var(--qq-text-2);
  max-width: 56ch;
}

/* ── session close ───────────────────────────────────────────────────── */
.aca-digest-metrics {
  display: flex;
  gap: 26px;
  margin: 18px 0 6px;
}
.aca-digest-metric { display: flex; flex-direction: column; gap: 1px; }
.aca-digest-metric .qq-num {
  font-family: var(--qq-font-display);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--qq-text-1);
}
.aca-digest-metric em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--qq-text-4);
}

/* A streak motivates only when the thing at risk is visible. */
.aca-digest-streak { margin: 16px 0 20px; }
.qq-streak-strip { display: flex; gap: 5px; margin-bottom: 8px; }
.qq-streak-cell {
  width: 26px; height: 7px;
  border-radius: var(--qq-r-full);
  background: rgba(125,160,200,.12);
  transition: background var(--qq-t-base) var(--qq-ease);
}
.qq-streak-cell.is-on { background: linear-gradient(90deg, var(--qq-gold), var(--qq-gold-bright)); }
/* The next cell is the one at stake, so it is the only thing that moves. */
.qq-streak-cell.is-next {
  background: rgba(227,179,65,.24);
  animation: streakNext 1.9s var(--qq-ease) infinite;
}
@keyframes streakNext {
  0%, 100% { background: rgba(227,179,65,.20); }
  50%      { background: rgba(227,179,65,.42); }
}
.qq-streak-risk { font-size: 12px; font-weight: 600; color: var(--qq-gold); }
.qq-streak-risk.is-quiet { color: var(--qq-text-4); font-weight: 500; }
.qq-streak-best { display: block; margin-top: 3px; font-size: 11.5px; color: var(--qq-text-4); }

/* The open loop: a named character with unfinished business, not a counter. */
.aca-digest-hook {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px;
  border-radius: var(--qq-r-lg);
  background: linear-gradient(180deg, rgba(23,34,54,.8), rgba(11,17,29,.8));
  border: 1px solid var(--qq-border);
  border-left: 2px solid var(--qq-accent);
  margin-bottom: 20px;
  animation: qqRise var(--qq-t-slow) var(--qq-ease) .35s both;
}
.aca-digest-hook-face { width: 46px; height: 46px; flex: 0 0 46px; }
.aca-digest-hook-face svg { width: 100%; height: 100%; }
.aca-digest-hook-name {
  font-family: var(--qq-font-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--qq-accent-bright);
  margin-bottom: 4px;
}
.aca-digest-hook-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--qq-text-2);
}

@media (max-width: 560px) {
  .aca-digest-metrics { gap: 20px; }
  .aca-digest-hook { padding: 13px; gap: 11px; }
  .qq-streak-cell { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .qq-streak-cell.is-next, .aca-digest-hook { animation: none; }
}