/* vınn akışı: 1 Söyle (sarı) -> 2 Liste -> 3 Kıyasla (açık, referans) */
#flow-stage {
  --f-navy: #0a1330;
  --f-navy2: #0d1a40;
  --f-teal: #124e56;
  --f-petrol: #0e4d5c;
  --f-yellow: #ecfc13;
  --f-bg: #f8f8f6;
  --f-card: #ffffff;
  --f-line: #e6e9ec;
  --f-muted: #6b7f86;
  --f-chip: #e9edf2;
  --f-tip: #f8fac8;
  font-family: 'Quicksand', 'Sora', system-ui, sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 12px 20px;
  gap: 14px;
  align-content: center;
}
#flow-stage button { font-family: inherit; }
#flow-stage button:focus-visible,
#flow-stage a:focus-visible { outline: 3px solid var(--f-yellow); outline-offset: 2px; }
.fl-screen.light button:focus-visible { outline-color: var(--f-teal); }

.fl-phone {
  position: relative;
  width: 372px;
  height: 820px;
  border-radius: 42px;
  overflow: hidden;
  background: var(--f-bg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 7px #0a1026;
}
.fl-screens { position: absolute; inset: 0; }

.fl-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  transition: transform .5s cubic-bezier(.65, .05, .25, 1), opacity .35s;
  will-change: transform;
}
.fl-screen.is-before { transform: translateX(-100%); opacity: .6; }
.fl-screen.is-after { transform: translateX(100%); opacity: .6; }
.fl-screen.dark { background: linear-gradient(180deg, var(--f-navy) 0%, var(--f-navy2) 100%); color: #eaf4f6; }
.fl-screen.light { background: var(--f-bg); color: var(--f-teal); }
.fl-screen.dark::before {
  content: ''; position: absolute; top: -130px; right: -110px; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(14, 77, 92, .8), transparent 70%); pointer-events: none;
}
.fl-screen > * { position: relative; }

/* Durum çubuğu */
.fl-status {
  flex: none; height: 46px; padding: 16px 28px 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.fl-screen.light .fl-status { color: var(--f-navy); }
.fl-sys { display: inline-flex; align-items: center; gap: 6px; padding-top: 2px; }

/* Üst bar */
.fl-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 4px; height: 54px; }
.fl-brand { display: inline-flex; align-items: center; gap: 8px; }
.fl-word { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.fl-screen.dark .fl-word { color: #fff; }
.fl-screen.light .fl-word { color: var(--f-teal); }
.fl-loc {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--f-chip); color: var(--f-teal);
  font-size: 14px; font-weight: 700; padding: 9px 12px; border-radius: 999px;
}

.fl-pad { padding: 0 22px; }
.fl-hero h1 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.fl-hero p { margin-top: 6px; color: #8fb0b8; font-size: 16px; font-weight: 600; }
.fl-hero { margin-top: 14px; }

/* Sayfa 1 · sarı kahraman alan (dinamik) */
.fl-screen.s1 { background: var(--f-bg); }
.fl-hero1 {
  flex: none; position: relative; height: 448px; z-index: 2;
  background: var(--f-yellow); border-radius: 0 0 40px 40px; color: var(--f-navy);
}
.fl-art { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fl-art svg { display: block; width: 100%; height: 100%; }
.fl-hero1 > .fl-status, .fl-hero1 > .fl-top, .fl-titles { position: relative; z-index: 1; }
.fl-hero1 .fl-status { color: var(--f-navy); }
.fl-pill {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--f-navy);
  font-size: 14.5px; font-weight: 700; padding: 10px 15px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(10, 19, 48, .12);
}
.fl-brand.hero { gap: 9px; }
.fl-brand img { display: block; height: auto; }
.fl-bicon { width: 40px; height: 40px; }
.fl-bword { width: 86px; }
.fl-brand:not(.hero) img { width: 104px; }
.fl-titles { margin-top: 56px; padding: 0 22px; }
.fl-titles h1 { font-size: 50px; font-weight: 700; line-height: 1.02; letter-spacing: -.025em; color: var(--f-navy); }
.fl-w { display: inline-block; animation: flrise .5s var(--d, 0s) ease-out both; }
.fl-sub { margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--f-teal); animation: flrise .5s .2s ease-out both; }

.fl-mic-wrap { position: absolute; left: 50%; bottom: -52px; width: 160px; height: 160px; margin-left: -80px; z-index: 3; }
.fl-mic {
  position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; border: 8px solid #fff; cursor: pointer; background: var(--f-teal); color: var(--f-yellow);
  box-shadow: 0 16px 34px rgba(18, 78, 86, .38); transition: transform .18s;
}
.fl-mic:active { transform: scale(.94); }
.fl-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--f-teal); opacity: 0; animation: flpulse 4.5s ease-out infinite; }
.fl-ring.r2, .fl-ring.r3 { display: none; }
.fl-ring.r2 { animation-delay: 1.07s; }
.fl-ring.r3 { animation-delay: 2.14s; }
@keyframes flpulse { 0% { transform: scale(1); opacity: .22; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes flbreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }


/* Arka plandaki daireler */
.a-spin { transform-origin: 342px 62px; }
.a-float { }
@keyframes flspin { to { transform: rotate(360deg); } }
@keyframes flfloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -14px); } }
@keyframes flrise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes flpop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* Alt beyaz alan */
.fl-sheet1 { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 82px 20px 22px; }
.fl-heard {
  margin: 0; padding: 14px 18px; border-radius: 20px; min-height: 76px;
  background: #e9f1f2; color: var(--f-navy); font-size: 16.5px; font-weight: 600; line-height: 1.45;
  max-height: 112px; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere;
}
.fl-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--f-teal); opacity: 0; }
.s1.is-listening .fl-caret { opacity: 1; animation: flblink .8s steps(2) infinite; }
@keyframes flblink { 50% { opacity: 0; } }
.fl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.fl-chip {
  font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1.5px solid #d9e1e5; color: var(--f-muted);
  transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.fl-chip b { color: var(--f-navy); font-weight: 700; margin-right: 5px; }
.fl-chips.is-hidden .fl-chip { opacity: 0; transform: scale(.6) translateY(8px); }
.fl-chips .fl-chip { transition-delay: calc(var(--k) * .12s); }
.fl-sheet1 .fl-cta { margin-top: auto; }

/* Ortak buton */
.fl-cta {
  width: 100%; height: 58px; padding: 0 12px 0 24px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--f-yellow); color: var(--f-navy);
  border-radius: 18px; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 10px 26px rgba(236, 252, 19, .28);
  transition: transform .15s;
}
.fl-cta:active { transform: scale(.985); }
.fl-cta .go { width: 36px; height: 36px; display: grid; place-items: center; }

/* Kaydırılan alan */
.fl-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 10px; scrollbar-width: none; }
.fl-scroll::-webkit-scrollbar { display: none; }
.fl-hero2 { margin: 12px 0 14px; }
.s3 .fl-hero2 { margin: 8px 0 12px; }
.s3 .fl-hero2 p { margin-top: 0; font-size: 16px; color: var(--f-teal); }
.fl-hero2 h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--f-teal); }
.fl-hero2 p { margin-top: 5px; font-size: 15px; font-weight: 600; color: var(--f-muted); }


.fl-search {
  margin-top: 12px; height: 50px; padding: 0 14px; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--f-line); border-radius: 16px; color: var(--f-muted);
  font-size: 15px; font-weight: 600;
}
.fl-search span { flex: 1; }
.fl-vsep { width: 1px; height: 24px; background: var(--f-line); }
.fl-search svg:last-child { color: var(--f-navy); }

.fl-lhead { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 2px 10px; }
.fl-lhead h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--f-teal); }
.fl-lhead span { font-size: 14px; font-weight: 600; color: var(--f-muted); }

.fl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fl-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 12px 7px 7px;
  background: #fff; border-radius: 16px; border: 1px solid var(--f-line);
  box-shadow: 0 2px 8px rgba(10, 19, 48, .04);
}
.fl-pic { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #f3f4f2; display: grid; place-items: center; }
.fl-rname { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fl-rname b { font-size: 16.5px; font-weight: 700; color: var(--f-teal); }
.fl-rname small { font-size: 13px; font-weight: 600; color: var(--f-muted); }
.fl-stepper { display: inline-flex; align-items: center; gap: 8px; }
.fl-step {
  width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--f-chip); color: var(--f-navy); display: grid; place-items: center;
}
.fl-step:active { transform: scale(.92); }
.fl-step:disabled { opacity: .4; cursor: default; }
.fl-qv { min-width: 22px; text-align: center; font-size: 16px; font-weight: 700; color: var(--f-navy); font-variant-numeric: tabular-nums; }

.fl-foot { flex: none; padding: 8px 20px 12px; }
.fl-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--f-muted); }
.fl-tabs {
  flex: none; height: 68px; padding: 0 12px 6px; display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; border-top: 1px solid var(--f-line);
}
.fl-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--f-muted); }
.fl-tab.on { color: var(--f-teal); }
.fl-tab.on::after { content: ''; position: absolute; bottom: 5px; width: 36px; height: 4px; border-radius: 4px; background: var(--f-yellow); box-shadow: 0 0 0 1px rgba(18, 78, 86, .08); }

/* Sayfa 3 · kıyas */
.fl-top3 { flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 20px 6px; height: 58px; }
.fl-back { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--f-navy); display: grid; place-items: center; border-radius: 12px; }
.fl-t3 { display: flex; flex-direction: column; line-height: 1.2; }
.fl-t3 b { font-size: 19px; font-weight: 700; color: var(--f-teal); letter-spacing: -.01em; }
.fl-t3 small { font-size: 13px; font-weight: 600; color: var(--f-muted); }

.fl-markets { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.fl-mk {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  background: #fff; color: var(--f-teal); border: 2px solid transparent; border-radius: 20px;
  padding: 14px 14px; box-shadow: 0 4px 14px rgba(10, 19, 48, .06), 0 0 0 1px var(--f-line);
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.fl-mk:active { transform: scale(.99); }
.fl-mk-row { display: flex; align-items: center; gap: 10px; }
.fl-mk-ini { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #d7dfea; color: var(--f-teal); font-size: 20px; font-weight: 700; }
.fl-mk-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-mk-name { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.fl-mk-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; font-weight: 600; color: var(--f-muted); }
.fl-mk-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; align-self: flex-start; }
.fl-mk-total { font-size: 24px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-mk-total i { font-style: normal; }
.fl-diff { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--f-chip); color: var(--f-teal); }

.fl-mk.is-sel { background: var(--f-teal); color: #fff; border-color: var(--f-yellow); box-shadow: 0 10px 26px rgba(18, 78, 86, .28); }
.fl-mk.is-sel .fl-mk-line { color: #cfe3e6; }
.fl-mk.is-sel .fl-mk-ini { background: #e4ebf2; }
.fl-mk.is-sel .fl-diff { background: rgba(255, 255, 255, .16); color: #fff; }
.fl-best-tag {
  position: absolute; top: -13px; left: 14px; z-index: 1;
  background: var(--f-yellow); color: var(--f-navy);
  font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.fl-best-tag[hidden] { display: none; }
.fl-diff[hidden] { display: none; }

.fl-save {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 14px 16px;
  background: var(--f-tip); border-radius: 16px; color: var(--f-navy);
  font-size: 15px; font-weight: 600;
}
.fl-save b { font-weight: 700; font-size: 17px; }
.fl-more {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 0; background: none; cursor: pointer; padding: 14px 4px; color: var(--f-teal);
  font-size: 15px; font-weight: 700;
}
.fl-more svg { transition: transform .25s; }
.fl-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.fl-detail { margin-bottom: 8px; background: #fff; border-radius: 16px; border: 1px solid var(--f-line); padding: 8px 10px; }
.fl-detail[hidden] { display: none; }
.fl-dt { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; align-items: center; padding: 6px 0; font-size: 13.5px; font-weight: 600; color: var(--f-muted); }
.fl-dt.h { font-size: 12px; font-weight: 700; color: var(--f-teal); }
.fl-dt span { text-align: center; padding: 4px 0; border-radius: 999px; }
.fl-dt span:first-child { text-align: left; color: var(--f-teal); font-weight: 700; padding-left: 4px; }
.fl-dt .min { background: var(--f-yellow); color: var(--f-navy); font-weight: 700; }

.fl-sheet {
  flex: none; background: #fff; border-radius: 24px 24px 0 0; padding: 16px 20px 18px;
  box-shadow: 0 -10px 30px rgba(10, 19, 48, .08);
}
.fl-total-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--f-teal); }
.fl-total-row b { font-size: 26px; font-weight: 700; color: var(--f-navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fl-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--f-muted); }

/* Bildirim */
.fl-toast {
  position: absolute; left: 50%; bottom: 120px; transform: translate(-50%, 12px);
  max-width: 300px; padding: 11px 16px; border-radius: 14px; text-align: center;
  background: var(--f-navy); color: var(--f-yellow); font-size: 13.5px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 5;
}
.fl-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Sayfa noktaları (inceleme için) */
.fl-dots { display: flex; gap: 10px; }
.fl-dots a {
  min-width: 44px; padding: 8px 14px; text-align: center; text-decoration: none; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #8fb0b8; border: 1px solid rgba(80, 200, 220, .22);
}
.fl-dots a.on { background: var(--f-yellow, #ecfc13); color: #0a1330; border-color: #ecfc13; }

@media (max-width: 440px) {
  #flow-stage { padding: 0; gap: 0; align-content: start; }
  .fl-phone { width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; }
  .fl-dots { display: none; }
}
/* Sayfa 2 · sarı efektler: akış (girişte bir kez), başlık vurgusu, miktar parlaması */
.fl-screen > .fl-flow {
  position: absolute; left: 0; right: 0; top: 0; height: 46px; z-index: 0; pointer-events: none;
  background: var(--f-yellow); border-radius: 0 0 24px 24px;
}
.s2.is-enter .fl-flow { animation: flflow .95s .2s cubic-bezier(.65, .05, .25, 1) both; }
@keyframes flflow { from { height: 100%; border-radius: 0; } to { height: 46px; border-radius: 0 0 24px 24px; } }

.fl-lhead h2 {
  padding: 0 4px; margin-left: -4px;
  background: linear-gradient(transparent 60%, var(--f-yellow) 60%, var(--f-yellow) 92%, transparent 92%) no-repeat left / 100% 100%;
}
.s2.is-enter .fl-lhead h2 { animation: flmark .6s 1s ease-out both; }
@keyframes flmark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

.fl-qv { position: relative; z-index: 0; }
.fl-qv::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: var(--f-yellow); z-index: -1; opacity: 0;
}
.fl-row.bump { animation: flrowglow .7s ease-out; }
.fl-row.bump .fl-qv::before { animation: flqv .6s ease-out; }
@keyframes flqv { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes flrowglow {
  0% { box-shadow: 0 0 0 3px rgba(236, 252, 19, .95), 0 2px 8px rgba(10, 19, 48, .04); border-color: var(--f-yellow); }
  100% { box-shadow: 0 0 0 3px rgba(236, 252, 19, 0), 0 2px 8px rgba(10, 19, 48, .04); border-color: var(--f-line); }
}

/* Kısa ekranlar: sayfa 3 alt paneli sıkıştır */
@media (max-width: 440px) and (max-height: 790px) {
  .s3 .fl-hero2 { margin: 4px 0 8px; }
  .s3 .fl-sheet { padding: 12px 20px 12px; }
  .s3 .fl-total-row { margin-bottom: 8px; }
  .s3 .fl-total-row b { font-size: 23px; }
  .s3 .fl-cta { height: 52px; }
  .s3 .fl-note { margin-top: 6px; font-size: 12px; }
}
/* Sayfa 2 · yazarak ekleme + dinamik liste */
.fl-search { padding: 0 6px 0 14px; color: var(--f-teal); }
.fl-search:focus-within { border-color: var(--f-teal); box-shadow: 0 0 0 3px rgba(236, 252, 19, .55); }
.fl-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15.5px; font-weight: 600; color: var(--f-navy);
}
.fl-search input::placeholder { color: var(--f-muted); opacity: 1; }
.fl-add {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--f-yellow); color: var(--f-navy); display: grid; place-items: center;
}
.fl-add:active { transform: scale(.92); }
.fl-search svg:last-child { color: inherit; }
.fl-pic { font-size: 19px; font-weight: 700; color: var(--f-teal); background: var(--f-yellow); border-radius: 50%; }
.fl-rname small.fl-pm { font-size: 12px; font-weight: 600; color: var(--f-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-row.st-loading .fl-pm { color: var(--f-teal); opacity: .7; }
.fl-row.st-none .fl-pm, .fl-row.st-error .fl-pm { color: #8a5a00; }
.fl-del {
  flex: none; width: 24px; height: 24px; margin-left: -2px; border: 0; border-radius: 50%; cursor: pointer;
  background: none; color: var(--f-muted); display: grid; place-items: center;
}
.fl-del:hover, .fl-del:focus-visible { background: var(--f-chip); color: var(--f-navy); }
.fl-empty { margin: 18px 4px; text-align: center; font-size: 14px; font-weight: 600; color: var(--f-muted); }
.fl-empty[hidden] { display: none; }
.fl-row.new { animation: flrowglow .7s ease-out; }
.fl-dt .na { color: #a7b0bb; font-weight: 600; }

/* Ses kutusu: örnek / duyulan */
.fl-heard.is-sample { color: var(--f-muted); }
.fl-chip.more { background: var(--f-yellow); border-color: transparent; font-weight: 700; color: var(--f-navy); }

/* Satır adı artık düğme: ürün seçimini açar */
.fl-rname { border: 0; background: none; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; border-radius: 10px; }
.fl-rname:focus-visible { outline: 2px solid var(--f-teal); outline-offset: 3px; }
.fl-rname small.fl-pm { text-decoration: underline; text-decoration-color: rgba(18, 78, 86, .25); text-underline-offset: 2px; }

/* Ürün seçimi paneli ("hangisini istersin?") */
.fl-pick[hidden] { display: none; }
.fl-pick { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: flex-end; }
.fl-pick-bd { position: absolute; inset: 0; background: rgba(10, 19, 48, .42); }
.fl-pick-sheet {
  position: relative; max-height: 74%; display: flex; flex-direction: column;
  background: #fff; border-radius: 26px 26px 0 0; padding: 14px 18px 18px;
  border-top: 4px solid var(--f-yellow); box-shadow: 0 -12px 34px rgba(10, 19, 48, .18);
}
.fl-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fl-pick-head h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--f-teal); }
.fl-pick-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--f-chip); color: var(--f-navy); cursor: pointer; display: grid; place-items: center; transform: rotate(-90deg); }
.fl-pick-s { margin: 4px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--f-muted); }
.fl-pick-list { list-style: none; margin: 0; padding: 0 0 4px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.fl-opt {
  width: 100%; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px; border-radius: 16px; background: #fff; color: var(--f-navy);
  border: 2px solid var(--f-line); font: inherit;
}
.fl-opt b { font-size: 15px; font-weight: 700; color: var(--f-teal); }
.fl-opt small { font-size: 12.5px; font-weight: 600; color: var(--f-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fl-opt small .na { color: #a7b0bb; }
.fl-opt.on { border-color: var(--f-yellow); background: #fbfde0; }
.fl-opt:active { transform: scale(.99); }
.fl-pick-msg { padding: 18px 6px; text-align: center; font-size: 14px; font-weight: 600; color: var(--f-muted); }

/* Sayfa 3 · sarı vurgular */
.s3.is-enter .fl-flow { animation: flflow .95s .2s cubic-bezier(.65, .05, .25, 1) both; }
.fl-top3, .s3 .fl-status { position: relative; z-index: 1; }
.fl-t3 b {
  align-self: flex-start; padding: 0 4px; margin-left: -4px;
  background: linear-gradient(transparent 60%, var(--f-yellow) 60%, var(--f-yellow) 92%, transparent 92%) no-repeat left / 100% 100%;
}
.s3.is-enter .fl-t3 b { animation: flmark .6s 1s ease-out both; }
.fl-mk:not(.is-sel) .fl-mk-ini { background: var(--f-yellow); }
.fl-mk.is-sel .fl-mk-ini { background: var(--f-yellow); }
.fl-mk.is-best:not(.is-sel) { border-color: var(--f-yellow); box-shadow: 0 6px 18px rgba(197, 214, 10, .35), 0 0 0 1px var(--f-line); }
.fl-save { background: #e6e9ed; }
.fl-save-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.fl-detail .fl-dt.h span:not(:first-child) { background: var(--f-tip); }
.s3 .fl-sheet { border-top: 4px solid var(--f-yellow); }
.s3 .fl-total-row b {
  padding: 0 8px; border-radius: 999px; background: var(--f-yellow);
}

/* Kısa telefon ekranları (örn. 360x740): sayfa 1 ölçülerini sıkıştır */
@media (max-width: 440px) and (max-height: 790px) {
  .fl-hero1 { height: 372px; }
  .fl-titles { margin-top: 34px; }
  .fl-titles h1 { font-size: 46px; }
  .fl-mic-wrap { width: 138px; height: 138px; margin-left: -69px; bottom: -44px; }
  .fl-mic svg { width: 50px; height: 50px; }
  .fl-sheet1 { padding-top: 68px; padding-bottom: 16px; }
  .fl-heard { font-size: 15.5px; min-height: 70px; max-height: 92px; padding: 12px 16px; }
  .fl-chips { margin-top: 10px; gap: 7px; }
  .fl-chip { padding: 7px 12px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-screen { transition: none; }
  .fl-ring, .fl-wave i, .fl-mic, .a-spin, .a-float, .fl-w, .fl-sub, .fl-pill, .fl-brand.hero,
  .s2 .fl-flow, .s3 .fl-flow, .s3 .fl-t3 b, .s2 .fl-lhead h2, .fl-row, .fl-qv::before { animation: none !important; }
}

/* Konuşurken canlı çipler: son çip henüz bitmemiş olabilir */
.fl-chips.is-live { min-height: 40px; }
.fl-chips.is-live .fl-chip { opacity: 1; transform: none; transition: none; }
.fl-chips.is-live .fl-chip.pending { border-style: dashed; border-color: var(--f-teal); background: #f4f9fa; }
.s1.is-listening .fl-heard { max-height: 64px; min-height: 0; font-size: 14px; color: var(--f-muted); }