/* ==========================================================================
   MoodMusic — Foundry editoryal sistem
   Kâğıt · mürekkep · sinyal kırmızısı
   ========================================================================== */

:root {
  color-scheme: light;

  --paper: #f2eee5;
  --paper-2: #ede7dc;
  --paper-3: #f7f3eb;
  --ink: #17110e;
  --ink-soft: #403a35;
  --muted: #68615b;

  /* Üç state, aynı spektrumun ayırt edilebilir durakları. */
  --cyan: #8aa6a7;
  --cyan-ink: #365e60;
  --blue: #53636d;
  --blue-ink: #34444e;
  --rose: #bd3027;
  --rose-ink: #a92820;
  --violet: #7c4a43;
  --ice: #c8d7d3;
  --pink-light: #f06ca4;
  --sky-light: #60c6ed;
  --violet-light: #8779ef;
  --mood-gradient: linear-gradient(102deg, var(--pink-light) 0%, var(--violet-light) 54%, var(--sky-light) 100%);

  --rule: rgba(23, 17, 14, .34);
  --rule-soft: rgba(23, 17, 14, .14);
  --cell: var(--paper);

  --shell: 112rem;
  --gutter: clamp(.65rem, 1vw, 1rem);
  --band-space: clamp(.36rem, .64vw, .76rem);
  --marker-col: 4rem;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, "Helvetica Neue", Arial, sans-serif;

  font-family: var(--sans);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

html.immersive-root {
  scroll-padding-top: 3.7rem;
  scroll-snap-type: none;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 12%, rgba(240, 108, 164, .11), transparent 25rem),
    radial-gradient(circle at 96% 20%, rgba(96, 198, 237, .13), transparent 28rem),
    var(--paper);
  font-size: clamp(.97rem, .94rem + .14vw, 1.02rem);
  line-height: 1.54;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }

/* Uzun teknik kimlikler 320 px'te satırı taşırmaz. */
code {
  padding: .1em .35em;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  font-size: .88em;
  overflow-wrap: anywhere;
}
.band--tint code { background: var(--paper-3); }

a { color: var(--blue-ink); text-underline-offset: .22em; }
a:hover { color: var(--rose-ink); }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

::selection { background: rgba(169, 121, 229, .24); }

.skip-link {
  position: fixed;
  z-index: 200;
  top: .6rem;
  left: .8rem;
  padding: .6rem 1rem;
  color: var(--paper);
  background: var(--ink);
  font-size: .8rem;
  letter-spacing: .04em;
  transform: translateY(-180%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Tipografi — kompakt editoryal ölçek
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.07;
  text-wrap: balance;
}

h1 { font-size: clamp(1.8rem, 1.05rem + 2.9vw, 3.25rem); }
h2 { font-size: clamp(1.45rem, 1.08rem + 1.55vw, 2.2rem); }
h3 { font-size: clamp(1.08rem, 1rem + .38vw, 1.28rem); line-height: 1.22; }
h4 { font-size: 1rem; line-height: 1.3; }

p { margin: 0 0 .18em; }
p:last-child { margin-bottom: 0; }

.em {
  font-style: italic;
  color: var(--rose-ink);
}

.chromatic-line {
  color: var(--rose-ink);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .chromatic-line,
  .brand > span {
    background: var(--mood-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.signal-explainer { display: inline; }
.signal-copy {
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0 .03em .04em;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 760;
  line-height: inherit;
  cursor: help;
  text-align: inherit;
}
.signal-copy--body { color: var(--cyan-ink); }
.signal-copy--energy { color: var(--blue-ink); }
.signal-copy--emotion { color: var(--rose-ink); }

.hero-lead { position: relative; }
.signal-popover {
  --signal-color: var(--blue-ink);
  --signal-wash: rgba(113, 137, 238, .12);
  position: absolute;
  z-index: 30;
  top: calc(100% + .55rem);
  left: 0;
  width: min(100%, 34rem);
  padding: .78rem .86rem .82rem;
  border: 1px solid color-mix(in srgb, var(--signal-color) 24%, transparent);
  border-radius: 1.05rem;
  color: var(--ink-soft);
  background:
    linear-gradient(135deg, var(--signal-wash), rgba(255,255,255,.94) 48%),
    var(--paper);
  box-shadow: 0 18px 45px rgba(38, 45, 77, .14), 0 2px 8px rgba(38, 45, 77, .08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-.35rem) scale(.985);
  transform-origin: top left;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.signal-explainer--body .signal-popover { --signal-color: var(--cyan-ink); --signal-wash: rgba(105, 200, 243, .18); }
.signal-explainer--energy .signal-popover { --signal-color: var(--blue-ink); --signal-wash: rgba(113, 137, 238, .15); }
.signal-explainer--emotion .signal-popover { --signal-color: var(--rose-ink); --signal-wash: rgba(237, 111, 158, .16); }
.signal-explainer:hover .signal-popover,
.signal-explainer:focus-within .signal-popover,
.signal-explainer.is-open .signal-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.signal-popover::before {
  content: "";
  position: absolute;
  top: -.28rem;
  left: 1.4rem;
  width: .56rem;
  height: .56rem;
  border-top: 1px solid color-mix(in srgb, var(--signal-color) 24%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--signal-color) 24%, transparent);
  background: color-mix(in srgb, var(--signal-wash) 45%, white);
  transform: rotate(45deg);
}
.signal-popover__tag {
  display: block;
  margin-bottom: .18rem;
  color: var(--signal-color);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.signal-popover strong {
  display: block;
  color: var(--ink);
  font-size: .93rem;
  font-weight: 760;
  line-height: 1.28;
}
.signal-popover small {
  display: block;
  margin-top: .38rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.42;
}
.signal-popover__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin-top: .48rem;
}
.signal-popover__flow i {
  padding: .2rem .42rem;
  border: 1px solid color-mix(in srgb, var(--signal-color) 18%, transparent);
  border-radius: 999px;
  color: var(--signal-color);
  background: rgba(255,255,255,.62);
  font-size: .66rem;
  font-style: normal;
  font-weight: 730;
  line-height: 1.2;
}
.signal-popover__flow b { color: var(--signal-color); font-size: .65rem; }

@supports not (color: color-mix(in srgb, red, blue)) {
  .signal-popover { border-color: var(--rule); }
  .signal-popover::before { border-color: var(--rule); background: var(--paper); }
  .signal-popover__flow i { border-color: var(--rule); }
}

.eyebrow {
  margin: 0 0 .12rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .665rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-top: .08rem;
  background: var(--mood-gradient);
}

.lead {
  max-width: 36em;
  color: var(--ink-soft);
  font-size: clamp(1rem, .97rem + .26vw, 1.14rem);
  line-height: 1.43;
}
.lead strong { color: var(--ink); font-weight: 720; }
.band--ink .lead strong { color: #f7f5ff; }

.tag {
  display: block;
  margin: 0 0 .14rem;
  color: var(--muted);
  font-size: .635rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.marker {
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.fine { font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Kabuk ve bantlar
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--band-space);
  border-top: 1px solid var(--rule);
}

.band--tint {
  --cell: rgba(251, 250, 253, .5);
  background: linear-gradient(112deg, var(--paper-2) 0%, #f3f2fb 48%, var(--paper-3) 100%);
}

.band--ink {
  --cell: #1b1d30;
  --rule: rgba(202, 221, 250, .22);
  --rule-soft: rgba(202, 221, 250, .13);
  color: #f7f5ff;
  background:
    radial-gradient(circle at 12% 20%, rgba(237, 111, 158, .14), transparent 26rem),
    radial-gradient(circle at 88% 75%, rgba(105, 200, 243, .13), transparent 28rem),
    #1b1d30;
}
.band--ink .eyebrow,
.band--ink .tag,
.band--ink .marker,
.band--ink .fine { color: rgba(247, 245, 255, .68); }
.band--ink .lead { color: rgba(247, 245, 255, .86); }
.band--ink a { color: var(--ice); }
.band--ink a:hover { color: #f4a5c2; }
.band--ink .cell { background: #1b1d30; }
.band--ink :focus-visible { outline-color: #f7f5ff; }

.band-head {
  display: grid;
  gap: .1rem clamp(.24rem, .45vw, .4rem);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(.16rem, .22vw, .22rem);
}

.band-head .marker { padding-top: .25rem; }

@media (min-width: 52em) {
  .band-head { grid-template-columns: var(--marker-col) minmax(0, 1fr); }
}

.band-title h2 { max-width: 20ch; }
.band-title .lead { margin-top: .14rem; }
.band-title--wide h2 { max-width: 28ch; }

/* Hairline ızgara: kart yığını yok, cetvel var. */
.cells {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.cells--2,
.cells--3 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 44em) {
  .cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
  .cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cell {
  padding: clamp(.48rem, .72vw, .65rem) clamp(.58rem, .8vw, .72rem) clamp(.55rem, .82vw, .75rem);
  background: var(--cell);
}
.cell h3 { margin-bottom: .24rem; }
.cell p { color: var(--ink-soft); font-size: .92rem; }
.band--ink .cell p { color: rgba(247, 245, 255, .84); }
.cell > .icon-line { margin-bottom: .4rem; }

.cell--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease;
}
.cell--link:hover { background: var(--paper-3); color: inherit; }

.cta-line {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  margin-top: .45rem;
  color: var(--blue-ink);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.cell--link:hover .cta-line { color: var(--rose-ink); }

.icon-line { color: var(--ink-soft); }
.icon-line svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Başlık ve menü
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(100deg, #fff8fb 0%, #fbf8ff 48%, #f1f9fe 100%);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 4.35rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.34rem;
  font-family: var(--sans);
  font-weight: 750;
  letter-spacing: -.01em;
}
.brand img { width: 34px; height: 34px; border-radius: 10px; }
.site-header .brand img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  box-shadow: 0 9px 24px rgba(237, 111, 158, .2), 0 4px 14px rgba(105, 200, 243, .14);
}
.site-footer .brand { font-size: 1.05rem; }
.site-footer .brand img { width: 30px; height: 30px; border-radius: 9px; }
.brand:hover { color: var(--rose-ink); }

.menu-button {
  padding: .45rem .8rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  font: inherit;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-button:hover { background: var(--paper-2); }

.site-nav {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  width: 100%;
  padding-bottom: .85rem;
}
/* [hidden] must still win over the class selector on small screens. */
.site-nav[hidden] { display: none; }
.site-nav a {
  padding: .55rem 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .93rem;
  border-bottom: 1px solid var(--rule-soft);
}
.site-nav a:hover { color: var(--rose-ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

@media (min-width: 60em) {
  .menu-button { display: none; }
  .site-nav,
  .site-nav[hidden] {
    display: flex;
    flex-direction: row;
    gap: clamp(1.1rem, 2.1vw, 1.9rem);
    width: auto;
    padding-bottom: 0;
  }
  .site-nav a {
    padding: 0;
    border-bottom: 0;
    font-size: .755rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--rose); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(.32rem, .65vw, .55rem) clamp(.58rem, 1vw, .85rem);
}

.hero-grid {
  display: grid;
  gap: clamp(.2rem, .3vw, .3rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62em) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: start;
  }
}

.hero h1 { max-width: 16ch; }
.hero h1 .line-2 { display: block; margin-top: .14em; }
.hero .lead { margin-top: .16rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28rem;
  margin-top: .17rem;
}

.link-underline {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  color: var(--ink);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  padding-bottom: .18rem;
  border-bottom: 1px solid var(--ink);
}
.link-underline:hover { color: var(--rose-ink); border-bottom-color: var(--rose); }

.link-quiet {
  color: var(--muted);
  text-decoration: none;
  font-size: .86rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .18rem;
}
.link-quiet:hover { color: var(--rose-ink); border-bottom-color: var(--rose); }

.store-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .46rem;
  width: min(100%, 27rem);
  margin-top: .58rem;
}

.store-link {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-height: 4.15rem;
  padding: .68rem .95rem;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--rule));
  border-radius: 1.05rem;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .94), rgba(240, 247, 255, .84)),
    var(--paper);
  box-shadow: 0 .7rem 1.7rem rgba(64, 93, 146, .09);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.beta-invite-note {
  margin: .45rem 0 0;
  color: #605870;
  font-size: .78rem;
}

.beta-dialog {
  width: min(46rem, calc(100% - 1rem));
  max-height: calc(100svh - 1rem);
  margin: auto;
  padding: 0;
  border: 1px solid rgba(93, 100, 158, .25);
  border-radius: 1.35rem;
  background: rgba(252, 250, 255, .98);
  color: #241e31;
  box-shadow: 0 2rem 7rem rgba(43, 35, 80, .28);
}

.beta-dialog::backdrop {
  background: rgba(24, 20, 43, .48);
}

.beta-dialog__surface { display: grid; max-height: calc(100svh - 1rem); }
.beta-dialog__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem .82rem;
  border-bottom: 1px solid rgba(93, 100, 158, .16);
  background: rgba(252, 250, 255, .96);
}
.beta-dialog__header h2 { margin: .1rem 0 0; font-size: clamp(1.55rem, 4vw, 2.35rem); }
.beta-dialog__close {
  flex: 0 0 auto;
  padding: .55rem .72rem;
  border: 1px solid rgba(93, 100, 158, .22);
  border-radius: 999px;
  background: white;
  color: inherit;
  font: 700 .78rem/1 var(--sans);
  cursor: pointer;
}
.beta-dialog__scroll { padding: 1rem 1.1rem 1.2rem; overflow: auto; overscroll-behavior: contain; }
.beta-dialog__lead { margin: 0 0 .9rem; color: #615b6f; }
.beta-form { display: grid; gap: .9rem; }
.beta-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.beta-form label:not(.beta-check, .beta-choice, .beta-honeypot),
.beta-form fieldset { display: grid; gap: .28rem; margin: 0; padding: 0; border: 0; font-size: .78rem; font-weight: 720; }
.beta-form label span { color: #837c91; font-weight: 500; }
.beta-form input:not([type="checkbox"], [type="radio"]),
.beta-form select {
  width: 100%;
  min-height: 2.7rem;
  padding: .62rem .7rem;
  border: 1px solid rgba(93, 100, 158, .24);
  border-radius: .72rem;
  background: rgba(255, 255, 255, .9);
  color: inherit;
  font: 500 .92rem/1.2 var(--sans);
}
.music-export {
  padding: .9rem;
  border: 1px solid rgba(133, 105, 215, .17);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 227, 239, .62), rgba(226, 241, 255, .68));
}
.music-export h3 { margin: .12rem 0 .25rem; font-size: 1.12rem; }
.music-export p { margin: .28rem 0; color: #615b6f; font-size: .84rem; }
.music-export__links { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0; }
.music-export__links a { padding: .48rem .62rem; border-radius: 999px; background: rgba(255,255,255,.82); font-size: .76rem; font-weight: 720; text-decoration: none; }
.beta-choice, .beta-check { display: flex; align-items: flex-start; gap: .48rem; color: #514b60; font-size: .79rem; font-weight: 540; }
.beta-choice + .beta-choice { margin-top: .35rem; }
.beta-choice input, .beta-check input { flex: 0 0 auto; margin-top: .16rem; accent-color: #8a65df; }
.beta-form__message { min-height: 1.1em; margin: 0; color: #b52c50; font-size: .8rem; font-weight: 650; }
.beta-form__submit {
  min-height: 3rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ed6f9e, #8a65df, #57c7ea);
  color: white;
  font: 760 .92rem/1 var(--sans);
  cursor: pointer;
}
.beta-form__submit:disabled { opacity: .58; cursor: wait; }
.beta-success { padding: 2.4rem .4rem 3rem; text-align: center; }
.beta-success h3 { margin: .1rem 0; font-size: 2rem; }
.beta-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }

@media (max-width: 38em) {
  .beta-dialog { width: calc(100% - .5rem); max-height: calc(100svh - .5rem); border-radius: 1rem; }
  .beta-dialog__surface { max-height: calc(100svh - .5rem); }
  .beta-dialog__header, .beta-dialog__scroll { padding-inline: .8rem; }
  .beta-form__grid { grid-template-columns: 1fr; }
}

.store-link:hover {
  color: var(--ink);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rose) 48%, var(--cyan));
  box-shadow: 0 .9rem 2.1rem rgba(64, 93, 146, .14);
}

.store-link svg {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.55rem;
  fill: currentColor;
}

.store-link span { display: grid; gap: .04rem; }
.store-link small {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}
.store-link strong {
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.store-link--apple svg { color: #1b1d30; }
.store-link--google svg { width: 2.5rem; }
.store-link--google .play-cyan { fill: #57c7ea; }
.store-link--google .play-blue { fill: #7288ff; }
.store-link--google .play-rose { fill: #ed6f9e; }
.store-link--google .play-gold { fill: #f0b35f; }

@supports not (color: color-mix(in srgb, red, blue)) {
  .store-link { border-color: var(--rule); }
  .store-link:hover { border-color: var(--rose); }
}

@media (min-width: 34em) {
  .store-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero-note {
  display: flex;
  gap: .22rem;
  margin-top: .17rem;
  padding-top: .13rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.48;
  max-width: 34em;
}
.hero-note svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: .2rem;
  stroke: var(--cyan-ink);
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   Yaşayan durum imzası — nefes alan zarf + dönen yörüngeler
   -------------------------------------------------------------------------- */

.signal-visual {
  display: grid;
  gap: .12rem;
  justify-items: center;
}

.signature {
  position: relative;
  width: 100%;
  max-width: 24.75rem;
  margin: 0;
}
.signature svg { width: 100%; height: auto; }

/* Zarf: üç state'in birleştiği dış sınır */
.sig-ring { fill: none; stroke-linecap: round; transform-origin: 50% 50%; }
.sig-ring--cyan { stroke: var(--cyan); stroke-width: 1.55; opacity: .92; }
.sig-ring--blue { stroke: var(--blue); stroke-width: 1.55; opacity: .9; }
.sig-ring--rose { stroke: var(--rose); stroke-width: 1.55; opacity: .86; }

/* Yörüngeler: büyüyüp küçülen eliptik hatlar */
.orbit { transform-origin: 50% 50%; }
.orbit-ring { fill: none; stroke-width: 1.15; opacity: .56; }
.orbit-dot { stroke: none; }
.orbit--cyan .orbit-ring { stroke: var(--cyan); }
.orbit--cyan .orbit-dot { fill: var(--cyan); }
.orbit--blue .orbit-ring { stroke: var(--blue); }
.orbit--blue .orbit-dot { fill: var(--blue); }
.orbit--rose .orbit-ring { stroke: var(--rose); }
.orbit--rose .orbit-dot { fill: var(--rose); }

.sig-hair { fill: none; stroke: var(--rule); stroke-width: .8; }
.sig-core { fill: var(--paper); stroke: var(--ink); stroke-width: .9; }
.sig-tick { stroke: var(--rule); stroke-width: 1; }
.sig-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  fill: var(--muted);
}

.signature figcaption {
  margin-top: .07rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

.sig-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  max-width: 26.5rem;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.sig-legend div {
  padding: .5rem .45rem .62rem;
  background: var(--cell);
}

@media (min-width: 62em) {
  .signal-visual {
    align-self: start;
    margin-top: -.45rem;
  }
}
.sig-legend span {
  display: block;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .115em;
  text-transform: uppercase;
  color: var(--ink);
}
.sig-legend b {
  display: block;
  margin-top: .22rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.05;
}
.sig-legend div:nth-child(1) b { color: var(--cyan-ink); }
.sig-legend div:nth-child(2) b { color: var(--blue-ink); }
.sig-legend div:nth-child(3) b { color: var(--rose-ink); }

.state-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
  background: var(--cell);
}
.state-glyph {
  display: block;
  width: min(100%, 6.6rem);
  height: 5.25rem;
  margin: -.12rem auto .22rem;
  overflow: visible;
}

/* Beden: Watch'taki gibi yorgunluk yükü silüetin içine aşağıdan dolar. */
.body-outline { fill: rgba(105, 200, 243, .08); stroke: var(--cyan-ink); stroke-width: 1.45; stroke-linejoin: round; }
.body-outline circle { fill: var(--paper); }
.body-state-fill {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: translateY(62%);
}
.body-state-fill { animation: body-state-rise 1.8s cubic-bezier(.18,.82,.3,1) infinite alternate; }
.body-state-wave { transform-box: fill-box; transform-origin: center; opacity: .38; }
.body-state-wave { animation: body-wave-drift 1.8s ease-in-out infinite alternate; }
.body-pulse { fill: none; stroke: var(--cyan); stroke-width: 1.15; stroke-linecap: round; opacity: .12; }
.body-pulse path { fill: none; transform-box: fill-box; transform-origin: center; }
.body-pulse path { animation: body-pulse 1.25s ease-out infinite; }
.body-pulse path:nth-child(2) { animation-delay: .18s; }

/* Enerji: Watch'taki beş bolt, 110 ms gecikmeyle tek tek vurur. */
.energy-flash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.energy-bolt {
  opacity: .1;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 3px 3px rgba(70,104,220,.16));
}
.energy-flash { animation: energy-flash 1.25s ease-out infinite; }
.energy-bolt { animation: energy-strike 1.25s cubic-bezier(.2,.84,.26,1) infinite; }
.energy-bolt--two { animation-delay: .11s; }
.energy-bolt--three { animation-delay: .22s; }
.energy-bolt--four { animation-delay: .33s; }
.energy-bolt--five { animation-delay: .44s; }

/* Ruh hâli: Watch yüzünün yumuşak yüzeyi, canlı gözleri ve tek çizgilik ağzı. */
.mood-face { overflow: visible; }
.mood-halo { transform-box: fill-box; transform-origin: center; opacity: .28; }
.mood-surface { stroke-width: 1.45; filter: drop-shadow(0 6px 7px rgba(193,63,115,.12)); }
.mood-eye { transform-box: fill-box; transform-origin: center; }
.mood-mouth { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.mood-spark { fill: none; stroke-linecap: round; stroke-width: 1.35; transform-box: fill-box; transform-origin: center; opacity: .2; }
.mood-halo { animation: mood-halo-breathe 1.8s ease-in-out infinite alternate; }
.mood-surface { animation: mood-surface-breathe 1.8s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.mood-eye { animation: mood-eye-blink 3.4s ease-in-out infinite; }
.mood-spark--one { animation: mood-spark 1.7s ease-in-out infinite; }
.mood-spark--two { animation: mood-spark 1.7s .52s ease-in-out infinite; }

@keyframes body-state-rise {
  0% { transform: translateY(68%); opacity: .36; }
  72%, 100% { transform: translateY(14%); opacity: .96; }
}
@keyframes body-wave-drift {
  from { transform: translate(-5px, 24px) scaleX(1.06); }
  to { transform: translate(5px, -3px) scaleX(.96); }
}
@keyframes body-pulse {
  0% { transform: scaleX(.72); opacity: 0; }
  34% { opacity: .38; }
  100% { transform: scaleX(1.1); opacity: 0; }
}
@keyframes energy-strike {
  0%, 16% { transform: translateY(-12px) scale(.22); opacity: 0; }
  25% { transform: translateY(2px) scale(1.16); opacity: 1; filter: drop-shadow(0 0 9px rgba(242,189,69,.9)); }
  38% { transform: translateY(0) scale(.94); opacity: .72; }
  58%, 100% { transform: translateY(5px) scale(.72); opacity: .08; filter: drop-shadow(0 2px 3px rgba(70,104,220,.12)); }
}
@keyframes energy-flash {
  0%, 18%, 100% { transform: scale(.72); opacity: 0; }
  27% { transform: scale(1.06); opacity: .66; }
  44% { transform: scale(1.18); opacity: 0; }
}
@keyframes mood-halo-breathe {
  from { transform: scale(.86); opacity: .12; }
  to { transform: scale(1.18); opacity: .46; }
}
@keyframes mood-surface-breathe {
  from { transform: scale(.97) rotate(-1deg); }
  to { transform: scale(1.025) rotate(1deg); }
}
@keyframes mood-eye-blink {
  0%, 42%, 50%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(.12); }
}
@keyframes mood-spark {
  0%, 100% { transform: rotate(-10deg) scale(.62); opacity: .08; }
  50% { transform: rotate(8deg) scale(1.12); opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  .body-state-fill,
  .body-state-wave,
  .body-pulse path,
  .energy-bolt,
  .energy-flash,
  .mood-halo,
  .mood-surface,
  .mood-eye,
  .mood-spark { animation: none !important; }
  .body-state-fill { transform: translateY(14%); }
  .energy-bolt { transform: none; opacity: .82; }
}

@media (max-width: 25em) {
  .state-glyph { height: 4.55rem; }
  .sig-legend div { padding-inline: .3rem; }
  .sig-legend b { font-size: .88rem; }
}

/* --------------------------------------------------------------------------
   Diyagramlar — etiketler HTML, ölçekle küçülüp okunmaz olmaz
   -------------------------------------------------------------------------- */

.diagram { margin: 0; }
.diagram svg { display: block; width: 100%; height: auto; }

.diagram-keys {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.2rem;
  margin: 0 0 .8rem;
  padding: 0;
  list-style: none;
}
.diagram-keys li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.diagram-keys i {
  display: block;
  width: 20px;
  border-top: 2px solid currentColor;
}
.diagram-keys .key-full { color: var(--blue-ink); }
.diagram-keys .key-partial { color: var(--cyan-ink); }
.diagram-keys .key-partial i { border-top-style: dashed; }
.diagram-keys .key-manual { color: var(--rose-ink); }
.diagram-keys .key-manual i { border-top-style: dotted; }

.diagram-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 1rem;
  margin-top: .6rem;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.diagram-foot span:only-child { margin-inline: auto 0; }

/* --------------------------------------------------------------------------
   Problem: eski döngü / MoodMusic döngüsü
   -------------------------------------------------------------------------- */

.pull-quote {
  margin: 0 0 clamp(1.4rem, 2.6vw, 2.1rem);
  padding-left: clamp(.85rem, 2vw, 1.5rem);
  border-left: 2px solid var(--rose);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + .85vw, 1.6rem);
  line-height: 1.3;
  max-width: 28ch;
}

.loop-compare {
  display: grid;
  gap: clamp(.55rem, 1vw, .9rem);
  background: transparent;
  border: 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48em) {
  .loop-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.loop-side {
  --loop-accent: var(--rose);
  --loop-accent-2: var(--cyan);
  position: relative;
  overflow: hidden;
  padding: clamp(.48rem, .72vw, .65rem) clamp(.58rem, .8vw, .72rem) clamp(.55rem, .82vw, .75rem);
  border: 1px solid color-mix(in srgb, var(--loop-accent) 54%, white);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--loop-accent) 24%, transparent), transparent 48%),
    radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--loop-accent-2) 20%, transparent), transparent 46%),
    rgba(255,255,255,.9);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--loop-accent) 13%, transparent);
}
.loop-side::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--loop-accent), var(--loop-accent-2));
}
.loop-side--old {
  --loop-accent: #ff5f7f;
  --loop-accent-2: #ffb349;
}
.loop-side--new {
  --loop-accent: #4fc5ef;
  --loop-accent-2: #a979e5;
}
.loop-side h3 { margin-bottom: .25rem; }
.loop-side p { color: var(--ink-soft); font-size: .92rem; max-width: 36ch; }
.loop-side .tag { color: var(--loop-accent); font-weight: 850; }
.loop-side h3 { color: color-mix(in srgb, var(--loop-accent) 76%, var(--ink)); }
.loop-side .diagram {
  margin-top: .38rem;
  padding: .22rem .32rem .12rem;
  border: 1px solid color-mix(in srgb, var(--loop-accent) 20%, transparent);
  border-radius: .9rem;
  background: rgba(255,255,255,.52);
}
.loop-side .diagram-foot { color: color-mix(in srgb, var(--loop-accent) 72%, var(--ink)); }

.loop-path { fill: none; stroke-width: 1.3; stroke-linecap: round; }
.loop-path--old { stroke: #ff5f7f; filter: drop-shadow(0 2px 3px rgba(255,95,127,.22)); animation: loop-old-pulse 2.5s ease-in-out infinite alternate; }
.loop-path--fade { stroke: #ffb349; opacity: .82; stroke-dasharray: 4 5; animation: loop-fade-travel 2.2s linear infinite; }
.loop-path--cyan { stroke: var(--cyan); }
.loop-path--blue { stroke: var(--blue); }
.loop-path--rose { stroke: var(--rose); }
.loop-side--new .loop-path { stroke-width: 1.55; stroke-dasharray: 260 24; animation: loop-live-flow 4.8s linear infinite; }
.loop-side--new .loop-path--blue { animation-delay: -1.4s; }
.loop-side--new .loop-path--rose { animation-delay: -2.7s; }
.loop-dot { fill: #ff5f7f; }
.loop-side--old .loop-dot:nth-of-type(2) { fill: #ff8b63; }
.loop-side--old .loop-dot:nth-of-type(3),
.loop-side--old .loop-dot:nth-of-type(4) { fill: #ffb349; }
.loop-dot--live { fill: var(--rose); animation: loop-endpoint-pulse 1.4s ease-in-out infinite alternate; }
.loop-side--new .loop-dot--live:nth-of-type(2) { fill: var(--blue); animation-delay: -.4s; }
.loop-side--new .loop-dot--live:nth-of-type(3) { fill: var(--cyan); animation-delay: -.8s; }

@keyframes loop-old-pulse {
  from { transform: scale(.96); transform-origin: 50px 48px; opacity: .68; }
  to { transform: scale(1.05); transform-origin: 50px 48px; opacity: 1; }
}
@keyframes loop-fade-travel { to { stroke-dashoffset: -36; } }
@keyframes loop-live-flow { to { stroke-dashoffset: -284; } }
@keyframes loop-endpoint-pulse {
  from { transform: scale(.74); transform-origin: center; opacity: .55; }
  to { transform: scale(1.2); transform-origin: center; opacity: 1; }
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .loop-side { border-color: var(--loop-accent); box-shadow: 0 14px 34px rgba(113,137,238,.12); }
  .loop-side h3, .loop-side .diagram-foot { color: var(--ink); }
  .loop-side .diagram { border-color: var(--loop-accent); }
}

/* --------------------------------------------------------------------------
   Cihaz derinliği — birleşen akış
   -------------------------------------------------------------------------- */

.converge { margin-bottom: clamp(.48rem, .8vw, .72rem); }
.cv-lane { fill: none; stroke-linecap: round; }
.cv-lane--full { stroke: var(--blue); stroke-width: 2.2; }
.cv-lane--partial { stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 13 7; }
.cv-lane--manual { stroke: var(--rose); stroke-width: 1.1; stroke-dasharray: 4 6; }
.cv-out { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.cv-hub { fill: var(--cell); stroke: var(--ink); stroke-width: 1; }

.depth-scale {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .42rem;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.depth-scale i {
  display: block;
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, currentColor var(--depth, 50%), var(--rule-soft) var(--depth, 50%));
}
.depth-scale--full { color: var(--blue-ink); }
.depth-scale--partial { color: var(--cyan-ink); }
.depth-scale--manual { color: var(--rose-ink); }

.status-note {
  display: grid;
  gap: .35rem 1.1rem;
  margin-top: clamp(.45rem, .75vw, .68rem);
  padding-top: .42rem;
  border-top: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52em) {
  .status-note { grid-template-columns: var(--marker-col) minmax(0, 1fr); }
}
.status-note p { color: var(--muted); font-size: .84rem; max-width: 68ch; }
.status-note strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Üç state
   -------------------------------------------------------------------------- */

.state-stack { border-top: 1px solid var(--rule); }

.state-layer {
  display: grid;
  gap: .35rem 1.2rem;
  align-items: start;
  padding: clamp(.38rem, .58vw, .52rem) 0;
  border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56em) {
  .state-layer {
    grid-template-columns: var(--marker-col) minmax(0, 13rem) minmax(0, 1fr) 8.5rem;
    align-items: center;
  }
}

.state-layer h3 { margin-bottom: .15rem; }
.state-layer p { color: var(--ink-soft); font-size: .9rem; margin: 0; max-width: 48ch; }

.state-range {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.state-range i {
  position: relative;
  display: block;
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.state-range i::after {
  content: "";
  position: absolute;
  top: -3px;
  left: var(--level, 50%);
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--dot, var(--ink));
}
.layer-body { --dot: var(--cyan-ink); }
.layer-energy { --dot: var(--blue-ink); }
.layer-emotion { --dot: var(--rose-ink); }
.layer-body h3 { color: var(--cyan-ink); }
.layer-energy h3 { color: var(--blue-ink); }
.layer-emotion h3 { color: var(--rose-ink); }
.layer-body h3 { color: var(--cyan-ink); }
.layer-energy h3 { color: var(--blue-ink); }
.layer-emotion h3 { color: var(--rose-ink); }

.state-merge { margin-top: clamp(.48rem, .8vw, .72rem); }
.merge-path { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.merge-path--cyan { stroke: var(--cyan); }
.merge-path--blue { stroke: var(--blue); }
.merge-path--rose { stroke: var(--rose); }
.merge-out { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }

/* --------------------------------------------------------------------------
   Yaşayan müzik hafızası
   -------------------------------------------------------------------------- */

.archive-flow { border-top: 1px solid var(--rule); }

.archive-step {
  display: grid;
  gap: .25rem 1.2rem;
  padding: clamp(.36rem, .55vw, .5rem) 0;
  border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56em) {
  .archive-step { grid-template-columns: var(--marker-col) minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}
.archive-step h3 { margin: 0; }
.archive-step p { margin: 0; color: var(--ink-soft); font-size: .9rem; max-width: 50ch; }
.archive-step--final h3 { color: var(--rose-ink); }

.archive-surface {
  margin-top: clamp(.48rem, .8vw, .72rem);
  padding-top: .42rem;
  border-top: 1px solid var(--rule);
}
.archive-surface .tag { margin-bottom: .36rem; }
.archive-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, .7vw, 6px);
  height: clamp(64px, 9vw, 92px);
}
.archive-bars i {
  display: block;
  flex: 1;
  min-width: 2px;
  height: var(--h, 30%);
  background: var(--rule);
}
.archive-bars i.is-kept { background: var(--cyan); }
.archive-bars i.is-surfacing { background: var(--rose); }
.archive-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .38rem;
  font-size: .73rem;
  color: var(--muted);
}
.archive-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.archive-legend b { display: block; width: 9px; height: 9px; }
.archive-legend .k-drop { background: var(--rule); }
.archive-legend .k-keep { background: var(--cyan); }
.archive-legend .k-back { background: var(--rose); }

/* --------------------------------------------------------------------------
   25 şarkı — dizilim defteri
   -------------------------------------------------------------------------- */

.flow-grid {
  display: grid;
  gap: clamp(.62rem, 1.15vw, 1rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62em) {
  .flow-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

.playlist-preview { border-top: 1px solid var(--rule); }

.playlist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1rem;
  padding: .38rem 0 .32rem;
  border-bottom: 1px solid var(--rule);
}
.playlist-head strong {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
}
.playlist-head span {
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.playlist-rows { position: relative; }

.playlist-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: .3rem .85rem;
  padding: .28rem 0;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--cell);
  transition: transform .5s cubic-bezier(.22, .72, .2, 1);
}
.playlist-row .idx {
  font-family: var(--serif);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.playlist-row .desc { min-width: 0; }
.playlist-row .desc b { display: block; font-weight: 600; font-size: .91rem; }
.playlist-row .desc small {
  display: block;
  margin-top: .05rem;
  color: var(--muted);
  font-size: .765rem;
  line-height: 1.38;
}
.playlist-row .fit {
  text-align: right;
  font-family: var(--serif);
  font-size: .96rem;
  font-variant-numeric: tabular-nums;
  color: var(--blue-ink);
}
.playlist-row.is-back .desc b { color: var(--rose-ink); }
.playlist-row.is-back .fit { color: var(--rose-ink); }

.playlist-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1rem;
  padding-top: .34rem;
  color: var(--muted);
  font-size: .77rem;
}

.flow-facts { border-top: 1px solid var(--rule); }
.flow-facts > div {
  padding: .34rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.flow-facts strong { display: block; font-weight: 600; font-size: .92rem; }
.flow-facts p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .87rem; max-width: 54ch; }

/* --------------------------------------------------------------------------
   İki yön
   -------------------------------------------------------------------------- */

.direction-figure { margin-top: .48rem; }
.dir-path { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.dir-path--match { stroke: var(--rose); }
.dir-path--stab { stroke: var(--blue); }
.dir-guide { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.dir-dot { fill: var(--ink); }

/* --------------------------------------------------------------------------
   Güven bandı
   -------------------------------------------------------------------------- */

.trust-grid {
  display: grid;
  gap: clamp(.58rem, 1vw, .9rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56em) {
  .trust-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}
.trust-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.trust-list li {
  padding: .32rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .92rem;
  color: rgba(247, 245, 255, .9);
}
.trust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: .52rem;
}
.band--ink .link-underline { color: #f7f5ff; border-bottom-color: #f7f5ff; }
.band--ink .link-underline:hover { color: #f4a5c2; border-bottom-color: #f4a5c2; }
.band--ink .link-quiet { color: rgba(247, 245, 255, .72); border-bottom-color: rgba(202, 221, 250, .28); }
.band--ink .link-quiet:hover { color: #f4a5c2; }

/* --------------------------------------------------------------------------
   İç sayfalar
   -------------------------------------------------------------------------- */

.page-hero { padding-block: clamp(.48rem, .8vw, .72rem) clamp(.42rem, .7vw, .62rem); }
.page-hero h1 { max-width: 18ch; font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3rem); }
.page-hero .lead { margin-top: .42rem; }

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin: 1.4rem 0 0;
  padding: .8rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.toc a {
  color: var(--muted);
  text-decoration: none;
  font-size: .695rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.toc a:hover { color: var(--rose-ink); }

.prose { max-width: 46rem; }
.prose h2 { margin-bottom: .8rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ol, .prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .45rem; }

.check-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.check-list li {
  position: relative;
  margin: 0;
  padding: .65rem 0 .65rem 1.6rem;
  border-bottom: 1px solid var(--rule-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: .7rem;
  height: 1px;
  background: var(--rose);
}

.def-list { margin: 0; }
.def-list > div {
  display: grid;
  gap: .15rem 1.2rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--rule-soft);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40em) {
  .def-list > div { grid-template-columns: 9rem minmax(0, 1fr); }
}
.def-list dt {
  color: var(--muted);
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: .2rem;
}
.def-list dd { margin: 0; }

.note {
  padding: clamp(.95rem, 1.8vw, 1.35rem);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--blue);
  background: var(--cell);
  font-size: .92rem;
  color: var(--ink-soft);
}
.note strong { color: var(--ink); }
.note--warn { border-left-color: var(--rose); }
.note + .note { margin-top: .85rem; }

details { border-bottom: 1px solid var(--rule-soft); }
details summary {
  position: relative;
  padding: .75rem 2rem .75rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  position: absolute;
  right: .35rem;
  top: .68rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.15rem;
}
details[open] summary::after { content: "\2013"; }
details > *:not(summary) { padding-bottom: .9rem; color: var(--ink-soft); font-size: .92rem; }
.faq-set { border-top: 1px solid var(--rule); }

.table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.table-hint {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (min-width: 56em) {
  .table-hint { display: none; }
}

.data-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: .845rem;
}
.data-table th,
.data-table td {
  padding: .7rem 1.05rem .7rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
.data-table th {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td { color: var(--ink-soft); }
.data-table td strong { color: var(--ink); }

.step-number {
  display: block;
  margin-bottom: .6rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1rem;
}

.status-404 {
  display: grid;
  place-items: center;
  min-height: 54vh;
  padding-block: clamp(2.2rem, 5vw, 4rem);
  text-align: center;
}
.status-404 h1 { font-size: clamp(3.6rem, 12vw, 7rem); line-height: 1; color: var(--rose-ink); }
.status-404 h2 { margin-top: .8rem; font-size: clamp(1.3rem, 3.4vw, 1.8rem); }
.status-404 .lead { margin: .8rem auto 0; }
.status-404 .hero-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(.65rem, 1.05vw, .9rem) .62rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.footer-grid {
  display: grid;
  gap: .72rem clamp(.7rem, 1.5vw, 1.35rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 44em) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.footer-grid p { max-width: 26em; color: var(--muted); font-size: .85rem; }
.footer-grid h2 {
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .7rem;
}
.footer-grid ul { margin: 0; padding: 0; list-style: none; }
.footer-grid li { margin-bottom: .45rem; }
.footer-grid a { color: var(--ink-soft); text-decoration: none; font-size: .89rem; }
.footer-grid a:hover { color: var(--rose-ink); }
.footer-grid .brand { margin-bottom: .7rem; }
.fine-print {
  margin: clamp(1.4rem, 2.6vw, 2.1rem) 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .755rem;
}

/* --------------------------------------------------------------------------
   Foundry yönü — mürekkep, kâğıt ve yaşayan sinyal
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  top: auto;
  background: rgba(242, 238, 229, .96);
  border-bottom: 0;
}

.site-header::after {
  content: "";
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  height: 4px;
  border-block: 1px solid var(--ink);
  pointer-events: none;
}

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  min-height: 3.7rem;
  gap: .45rem;
}

.header-kicker {
  margin: 0;
  justify-self: start;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .19em;
  line-height: 1;
  text-transform: uppercase;
}

.brand {
  gap: 0;
  margin: 0;
  color: var(--violet-light);
  font-family: var(--sans);
  font-size: 1.65rem;
  font-weight: 820;
  letter-spacing: -.045em;
}

.brand > span,
.brand:hover > span {
  color: var(--violet-light);
  background: var(--mood-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand img { display: none; }
.site-nav { justify-self: end; }
.site-nav a { color: var(--ink-soft); }
.site-nav a[aria-current="page"] { color: var(--rose-ink); }

.hero {
  min-height: 0;
  padding-block: clamp(.64rem, 1.4vh, 1.28rem) clamp(.52rem, 1vh, .96rem);
  border-bottom: 4px double var(--ink);
  background:
    radial-gradient(circle at 18% 30%, rgba(240, 108, 164, .12), transparent 29rem),
    radial-gradient(circle at 82% 42%, rgba(96, 198, 237, .14), transparent 31rem),
    linear-gradient(112deg, rgba(255, 250, 248, .72), rgba(246, 240, 255, .44) 52%, rgba(238, 249, 253, .7));
}

.hero-grid {
  gap: clamp(.4rem, .8vw, 1.2rem);
  align-items: center;
}

.hero h1 {
  max-width: 11ch;
  font-size: clamp(3.6rem, 6.5vw, 7.7rem);
  line-height: .88;
  letter-spacing: -.052em;
}

.hero h1 .line-2 { margin-top: .12em; }
.chromatic-line { color: var(--rose-ink); }
.hero .eyebrow { margin-bottom: clamp(.4rem, .8vw, .9rem); }
.eyebrow { color: var(--rose-ink); letter-spacing: .21em; }
.eyebrow::after { display: none; }

.hero .lead {
  max-width: 37rem;
  margin-top: clamp(.3rem, .6vw, .56rem);
  font-size: clamp(1rem, .9rem + .32vw, 1.28rem);
}

.hero-actions { margin-top: .3rem; gap: .4rem; }
.hero-note {
  margin-top: .25rem;
  padding-top: .16rem;
  border-color: var(--ink);
}

.store-links {
  width: min(100%, 34rem);
  margin-top: .3rem;
  gap: 0;
  border-block: 1px solid var(--ink);
}

.store-link {
  min-height: 4.85rem;
  padding: .8rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.store-link + .store-link { border-top: 1px solid var(--rule); }
.store-link:hover {
  color: var(--ink);
  background: rgba(189, 48, 39, .05);
  border-color: var(--ink);
  box-shadow: none;
  transform: none;
}
.store-link strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.store-link small { color: var(--rose-ink); }

.signal-visual {
  align-self: start;
  justify-self: end;
  width: 100%;
  margin-top: -.45rem;
}
.signature { max-width: 33rem; }
.signature svg {
  margin-bottom: -2.2rem;
  transform: translateY(-2.2rem);
}
.sig-hair,
.sig-tick { display: none; }
.signature figcaption { color: var(--ink-soft); }
.sig-core { fill: var(--paper); }
.sig-legend {
  max-width: 33rem;
  background: var(--ink);
  border-color: var(--ink);
}
.sig-legend div { background: var(--paper); }

.band,
.band--tint {
  border-top: 1px solid var(--ink);
}
.band {
  background: linear-gradient(112deg, rgba(255, 250, 248, .96), rgba(241, 249, 252, .78));
}
.band--tint {
  background: linear-gradient(112deg, rgba(252, 236, 244, .76), rgba(247, 242, 255, .72) 51%, rgba(238, 248, 253, .82));
}
.band-head { margin-bottom: clamp(.4rem, .8vw, .9rem); }
.band-head .marker { color: var(--rose-ink); }
.band-title h2 { font-size: clamp(2.5rem, 4.6vw, 5.6rem); line-height: .94; letter-spacing: -.045em; }
.band-title .lead { margin-top: .25rem; max-width: 50rem; }

.cells,
.loop-compare,
.trust-grid {
  background: transparent;
  border-color: var(--ink);
}
.cell,
.loop-side,
.playlist-preview,
.state-card { background: transparent; }
.cell { padding: clamp(.3rem, .48vw, .52rem); }
.cell--link:hover { background: rgba(189, 48, 39, .04); }

.band--ink {
  --cell: #17110e;
  color: #f2eee5;
  background: #17110e;
  border-top-color: #17110e;
}
.band--ink .cell { background: transparent; }

.site-footer { background: var(--paper); border-top: 4px double var(--ink); }
.footer-grid { padding-top: .24rem; }
.footer-grid .brand { font-size: 1.35rem; }

@media (min-width: 34em) {
  .store-link + .store-link { border-top: 0; border-left: 1px solid var(--ink); }
}

@media (min-width: 60em) {
  .header-inner { grid-template-columns: 1fr auto 1fr; }
  .brand { grid-column: 2; justify-self: center; }
  .site-nav { grid-column: 3; }
}

@media (min-width: 62em) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(28rem, .92fr); }
  .signal-visual { margin-top: -.45rem; }
}

@media (max-width: 59.99em) {
  .header-inner { grid-template-columns: 1fr auto; }
  .header-kicker { grid-column: 1; grid-row: 1; }
  .brand { grid-column: 2; grid-row: 1; }
  .menu-button { grid-column: 2; grid-row: 2; justify-self: end; }
  .site-nav { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; }
}

@media (max-width: 61.99em) {
  .hero { min-height: 0; padding-top: .8rem; }
  .hero h1 { max-width: 12ch; }
  .signal-visual { justify-self: center; margin-top: 0; }
  .signature svg { margin-bottom: -1.2rem; transform: translateY(-1.2rem); }
}

@media (max-width: 32em) {
  .header-kicker { font-size: .58rem; letter-spacing: .13em; }
  .brand { font-size: 1.35rem; }
  .hero h1 { font-size: clamp(3rem, 16vw, 4.6rem); }
}

/* --------------------------------------------------------------------------
   Hareket — düşük yoğunluk, anlam taşır
   -------------------------------------------------------------------------- */

.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(7px);
}
.has-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .72, .2, 1);
}

/* Zarf yavaşça nefes alır */
.has-motion .sig-ring {
  animation: sigBreathe var(--dur, 8s) ease-in-out infinite alternate;
}
.has-motion .sig-ring--blue { --dur: 10s; animation-direction: alternate-reverse; }
.has-motion .sig-ring--rose { --dur: 12s; }

@keyframes sigBreathe {
  from { transform: rotate(-3deg) scale(.978); }
  to { transform: rotate(4deg) scale(1.02); }
}

/* Yörüngeler büyür, küçülür ve hafifçe savrulur */
.has-motion .orbit {
  animation: orbitBreathe var(--dur, 6s) ease-in-out infinite alternate;
}

@keyframes orbitBreathe {
  from { transform: rotate(-6deg) scale(.88); }
  to { transform: rotate(7deg) scale(1.1); }
}

/* Yörüngede dönen küçük daireler */
.orbit-dot { offset-rotate: 0deg; }

@supports (offset-path: path("M 0 0 L 1 1")) {
  .orbit-dot { cx: 0; cy: 0; offset-distance: 0%; }
  .orbit--cyan .orbit-dot { offset-path: path("M 78 230 A 152 66 0 1 1 382 230 A 152 66 0 1 1 78 230"); }
  .orbit--blue .orbit-dot { offset-path: path("M 96 230 A 134 58 0 1 1 364 230 A 134 58 0 1 1 96 230"); }
  .orbit--rose .orbit-dot { offset-path: path("M 112 230 A 118 48 0 1 1 348 230 A 118 48 0 1 1 112 230"); }
  .has-motion .orbit-dot {
    animation: orbitRun var(--spin, 7s) linear infinite;
    animation-delay: var(--phase, 0s);
  }
}

@keyframes orbitRun {
  to { offset-distance: 100%; }
}

.has-motion .archive-bars i { transition: height .5s cubic-bezier(.22, .72, .2, 1), background-color .5s ease; }

.has-motion .draw {
  stroke-dasharray: var(--len, 700);
  stroke-dashoffset: var(--len, 700);
}
.has-motion .is-visible .draw { animation: drawIn 1.05s cubic-bezier(.3, .7, .25, 1) forwards; }
.has-motion .is-visible .draw--2 { animation-delay: .12s; }
.has-motion .is-visible .draw--3 { animation-delay: .24s; }

@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .playlist-row { transition: none; }
  .has-motion [data-reveal],
  .has-motion .sig-ring,
  .has-motion .orbit,
  .has-motion .orbit-dot,
  .has-motion .draw,
  .has-motion .archive-bars i,
  .loop-path,
  .loop-dot {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

@media print {
  .site-header,
  .skip-link { display: none; }
  body { background: var(--paper); }
}

/* Immersive three-scene homepage
   İki gerçek görsel sahne + ortada yaşayan MoodMusic imzası. */
.immersive-home {
  --header-height: 3.7rem;
  background: #fbfaff;
}

.immersive-home .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 250, 255, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.immersive-home .site-header::after {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, rgba(240, 108, 164, .38), rgba(135, 121, 239, .4), rgba(96, 198, 237, .4));
}

.visual-page {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-height));
  scroll-margin-top: var(--header-height);
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  overflow: hidden;
  border-bottom: 1px solid rgba(83, 99, 109, .16);
  background-position: center;
  background-size: cover;
}

.visual-page__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center right;
  user-select: none;
  pointer-events: none;
}

.visual-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.visual-page--wave::after {
  background: linear-gradient(90deg, rgba(253, 252, 255, .98) 0%, rgba(253, 252, 255, .9) 28%, rgba(253, 252, 255, .2) 58%, rgba(253, 252, 255, 0) 78%);
}

.visual-page--fingerprint::after {
  background: linear-gradient(90deg, rgba(255, 253, 252, .99) 0%, rgba(255, 253, 252, .9) 34%, rgba(255, 253, 252, .25) 60%, rgba(255, 253, 252, 0) 82%);
}

.visual-page--plain {
  background:
    radial-gradient(circle at 78% 48%, rgba(96, 198, 237, .16), transparent 25rem),
    radial-gradient(circle at 63% 38%, rgba(240, 108, 164, .13), transparent 22rem),
    linear-gradient(118deg, #fffafc 0%, #f8f4ff 48%, #edfaff 100%);
}

.visual-page--plain::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, .32), transparent 55%);
}

.visual-page__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: inherit;
  padding-block: clamp(1.4rem, 4vh, 4rem);
}

.visual-page__inner--left {
  grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
}

.visual-page__inner--split {
  grid-template-columns: minmax(0, .88fr) minmax(24rem, 1.12fr);
  gap: clamp(1rem, 4vw, 5rem);
}

.visual-page__copy {
  min-width: 0;
  width: 100%;
  max-width: 39rem;
}

.visual-page__copy .eyebrow {
  margin-bottom: clamp(.5rem, 1.2vw, 1rem);
  color: #8154cd;
}

.visual-page h1,
.visual-page h2 {
  max-width: 9.5ch;
  font-size: clamp(4.1rem, 7.6vw, 9.1rem);
  line-height: .84;
  letter-spacing: -.058em;
}

.visual-page h1 .chromatic-line,
.visual-page h2 .chromatic-line {
  display: block;
  margin-top: .1em;
}

.visual-lead {
  max-width: 35rem;
  margin-top: clamp(.8rem, 1.8vw, 1.5rem);
  color: #383245;
  font-size: clamp(1rem, .9rem + .4vw, 1.35rem);
  line-height: 1.45;
}

.immersive-home .store-links {
  width: min(100%, 31rem);
  margin-top: clamp(.8rem, 1.6vw, 1.35rem);
  border-color: rgba(44, 37, 61, .28);
}

.immersive-home .store-link {
  min-height: 4.25rem;
  padding: .65rem .8rem;
  color: #241e31;
}

.immersive-home .store-link strong {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 760;
}

.immersive-home .store-link small {
  color: #7651be;
}

.mode-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 31rem);
  margin-top: clamp(1rem, 2vw, 1.8rem);
  border-block: 1px solid rgba(83, 99, 109, .28);
}

.mode-pair a {
  display: grid;
  gap: .2rem;
  padding: .9rem .3rem;
  color: #231d30;
  text-decoration: none;
}

.mode-pair a + a {
  padding-left: 1rem;
  border-left: 1px solid rgba(83, 99, 109, .28);
}

.mode-pair strong {
  color: #8154cd;
  font-size: .92rem;
}

.mode-pair span {
  color: #5f586a;
  font-size: .78rem;
}

.signature--hero {
  justify-self: end;
  width: min(46rem, 100%);
  max-width: none;
}

.signature--hero svg {
  margin: 0;
  transform: none;
  filter: drop-shadow(0 20px 50px rgba(105, 126, 196, .1));
}

.signature--hero .sig-hair--visible {
  display: block;
  fill: none;
  stroke: rgba(83, 99, 109, .35);
  stroke-width: 1;
}

.signature--hero .sig-core {
  fill: rgba(255, 255, 255, .86);
  stroke: #2d2732;
}

.signature--hero figcaption {
  margin-top: -.85rem;
  color: #5d5667;
  text-align: center;
}

.scene-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: clamp(1rem, 2vw, 1.7rem);
  padding-bottom: .25rem;
  border-bottom: 1px solid #7664c9;
  color: #352967;
  font-weight: 760;
  text-decoration: none;
}

.scene-link:hover {
  color: #be4f8a;
  border-color: #be4f8a;
}

.scene-trust {
  margin-top: .9rem;
  color: #6f6878;
  font-size: .78rem;
}

@media (max-width: 61.99em) {
  .visual-page__inner--left,
  .visual-page__inner--split {
    grid-template-columns: 1fr;
  }

  .visual-page__inner--split {
    align-content: center;
    gap: .25rem;
  }

  .visual-page h1,
  .visual-page h2 {
    max-width: 10.5ch;
    font-size: clamp(3.6rem, 12vw, 7rem);
  }

  .signature--hero {
    position: absolute;
    z-index: -1;
    right: -8rem;
    bottom: -11rem;
    width: min(35rem, 82vw);
    opacity: .44;
  }

  .visual-page--plain::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .15));
  }
}

@media (max-width: 40em) {
  .immersive-home { --header-height: 3.4rem; }

  .immersive-home .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--header-height);
    gap: .55rem;
  }

  .immersive-home .header-kicker {
    display: none;
  }

  .immersive-home .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    font-size: 1.08rem;
  }

  .immersive-home .menu-button {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: .35rem .48rem;
    font-size: .58rem;
  }

  .immersive-home .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .visual-page {
    min-height: calc(100svh - var(--header-height));
  }

  .visual-page__image {
    object-position: 64% center;
  }

  .visual-page--wave::after,
  .visual-page--fingerprint::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .86) 62%, rgba(255, 255, 255, .25) 100%);
  }

  .visual-page__inner {
    align-items: center;
    padding-block: 1rem;
  }

  .visual-page h1,
  .visual-page h2 {
    max-width: 100%;
    font-size: clamp(3.2rem, 14.8vw, 4.65rem);
    overflow-wrap: normal;
  }

  .visual-lead {
    max-width: 28rem;
    font-size: 1rem;
  }

  .immersive-home .store-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .immersive-home .store-link {
    min-width: 0;
    padding: .55rem .35rem;
  }

  .immersive-home .store-link + .store-link {
    border-top: 0;
    border-left: 1px solid rgba(44, 37, 61, .24);
  }

  .immersive-home .store-link svg { width: 1.7rem; }
  .immersive-home .store-link small { font-size: .58rem; }
  .immersive-home .store-link strong { font-size: .85rem; }

  .mode-pair {
    grid-template-columns: 1fr;
  }

  .mode-pair a + a {
    padding-left: .3rem;
    border-top: 1px solid rgba(83, 99, 109, .2);
    border-left: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  html.immersive-root { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   2026-09-01 — üç sahneli yaşayan durum akışı
   -------------------------------------------------------------------------- */

.immersive-home .header-inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(.8rem, 2vw, 2rem);
}

.immersive-home .header-kicker { display: none; }

.immersive-home .brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  gap: .65rem;
}

.immersive-home .brand img {
  display: block;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: .82rem;
  box-shadow: 0 .45rem 1rem rgba(109, 87, 171, .14);
}

.immersive-home .site-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.header-beta {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-height: 2.7rem;
  padding: .55rem 1.25rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--mood-gradient);
  box-shadow: 0 .55rem 1.25rem rgba(112, 83, 187, .2);
  font: 760 .82rem/1 var(--sans);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.header-beta:hover {
  box-shadow: 0 .8rem 1.55rem rgba(112, 83, 187, .28);
  transform: translateY(-2px);
}

.header-beta:active { transform: translateY(0) scale(.98); }

.state-ribbon {
  position: relative;
  justify-self: end;
  width: min(43rem, 100%);
  margin: 0;
  padding: clamp(1.4rem, 3vw, 3rem);
  isolation: isolate;
}

.state-ribbon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(240, 108, 164, .2), transparent 36%),
    radial-gradient(circle at 68% 66%, rgba(96, 198, 237, .22), transparent 38%);
  filter: blur(1.4rem);
}

.state-ribbon__stage {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  transform: translateZ(0);
}

.state-ribbon__layer {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  filter: saturate(1.06) drop-shadow(0 1.6rem 2.8rem rgba(97, 85, 172, .16));
}

.state-ribbon__layer--body {
  z-index: 2;
  transform-origin: 50% 50%;
  animation: stateRibbonBody 6.2s linear infinite;
}

.state-ribbon__layer--energy {
  z-index: 1;
  transform-origin: 50% 50%;
  animation: stateRibbonEnergy 4.4s linear infinite;
}

.state-ribbon__layer--emotion {
  z-index: 3;
  transform-origin: 50% 50%;
  animation: stateRibbonEmotion 5.2s linear infinite;
}

@keyframes stateRibbonBody {
  0%, 100% { opacity: .86; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1.035); }
}

@keyframes stateRibbonEnergy {
  0%, 100% { opacity: .8; transform: scale(.965); }
  50% { opacity: 1; transform: scale(1.045); }
}

@keyframes stateRibbonEmotion {
  0%, 100% { opacity: .84; transform: scale(.975); }
  50% { opacity: 1; transform: scale(1.025); }
}

.state-ribbon__label {
  --label-color: #8154cd;
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--label-color);
  font-size: clamp(.72rem, .64rem + .28vw, .9rem);
  font-weight: 820;
  letter-spacing: -.01em;
}

.state-ribbon__label::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--label-color);
  box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--label-color) 10%, transparent);
}

.state-ribbon__label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.2rem, 3vw, 2.6rem);
  height: 1px;
  background: color-mix(in srgb, var(--label-color) 58%, transparent);
}

.state-ribbon__label--body {
  --label-color: #eb5e9f;
  top: 13%;
  right: 2%;
}

.state-ribbon__label--body::after,
.state-ribbon__label--energy::after { right: 100%; }

.state-ribbon__label--energy {
  --label-color: #8667ed;
  top: 43%;
  right: -1%;
}

.state-ribbon__label--emotion {
  --label-color: #279fda;
  bottom: 16%;
  left: 0;
  flex-direction: row-reverse;
}

.state-ribbon__label--emotion::after { left: 100%; }

.state-ribbon figcaption {
  margin-top: -.35rem;
  color: #5d5667;
  font-size: .7rem;
  font-weight: 760;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.visual-page--paths {
  background:
    radial-gradient(circle at 18% 12%, rgba(240, 108, 164, .09), transparent 24rem),
    radial-gradient(circle at 82% 17%, rgba(96, 198, 237, .12), transparent 28rem),
    linear-gradient(145deg, #fff 0%, #fbfaff 54%, #f4fbff 100%);
}

.visual-page__inner--paths {
  align-content: center;
  gap: clamp(.85rem, 1.8vw, 1.5rem);
  padding-block: clamp(1.2rem, 2.5vh, 2.4rem);
}

.paths-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .2rem 2rem;
}

.paths-heading .eyebrow { grid-column: 1 / -1; }

.visual-page .paths-heading h2 {
  max-width: none;
  font-family: var(--sans);
  font-size: clamp(2rem, 1.55rem + 2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}

.visual-page .paths-heading h2 .chromatic-line {
  display: inline;
  margin: 0;
}

.paths-heading > p:last-child {
  max-width: 28rem;
  color: #69627a;
  font-size: clamp(.88rem, .82rem + .18vw, 1rem);
  text-align: right;
}

.watch-path-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.8rem, 1.7vw, 1.5rem);
}

.watch-path {
  display: grid;
  grid-template-columns: minmax(9rem, .72fr) minmax(0, 1.28fr);
  grid-template-rows: auto auto 1fr;
  gap: .65rem clamp(.9rem, 1.7vw, 1.35rem);
  min-width: 0;
  padding: clamp(.85rem, 1.5vw, 1.25rem);
  border: 1px solid rgba(84, 76, 118, .15);
  border-radius: clamp(1.25rem, 2vw, 2rem);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1rem 2.6rem rgba(75, 65, 122, .09);
}

.watch-path__preview {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  min-height: clamp(12rem, 20vw, 19rem);
  margin: 0;
  overflow: hidden;
  border-radius: clamp(.85rem, 1.5vw, 1.35rem);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .98), transparent 42%),
    linear-gradient(145deg, rgba(244, 239, 255, .95), rgba(233, 247, 255, .92));
}

.watch-path__preview img {
  width: auto;
  max-width: 86%;
  height: clamp(9.5rem, 15vw, 15rem);
  object-fit: contain;
  filter: drop-shadow(0 1rem 1.35rem rgba(36, 31, 59, .16));
}

.watch-path__preview--phone img {
  height: clamp(16rem, 25vw, 23rem);
  transform: translateY(18%);
}

.watch-path__preview figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.watch-path > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(84, 76, 118, .13);
}

.watch-path h3 {
  color: #171326;
  font-family: var(--sans);
  font-size: clamp(1.15rem, .98rem + .55vw, 1.55rem);
  font-weight: 820;
  letter-spacing: -.035em;
}

.watch-path > header span {
  color: #1d8ebf;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.watch-path--manual > header span { color: #db4d91; }

.watch-path ul {
  display: grid;
  align-content: center;
  gap: .58rem;
  margin: 0;
  padding: 0;
  color: #575064;
  font-size: clamp(.76rem, .72rem + .12vw, .84rem);
  line-height: 1.38;
  list-style: none;
}

.watch-path li {
  position: relative;
  padding-left: 1.35rem;
}

.watch-path li::before {
  content: "✓";
  position: absolute;
  top: -.05em;
  left: 0;
  color: #239bc9;
  font-weight: 900;
}

.watch-path--manual li::before { color: #eb599c; }

.watch-path > p {
  align-self: end;
  margin: 0;
  padding-top: .55rem;
  border-top: 1px solid rgba(84, 76, 118, .13);
  color: #797285;
  font-size: .7rem;
  line-height: 1.42;
}

.paths-link {
  justify-self: center;
  margin-top: 0;
  font-size: .82rem;
}

@media (max-width: 74em) {
  .watch-path {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .watch-path__preview img { height: 10rem; }
  .watch-path__preview--phone img { height: 16rem; }
}

@media (max-width: 61.99em) {
  .immersive-home .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .state-ribbon {
    position: absolute;
    z-index: -1;
    right: -5rem;
    bottom: -5rem;
    width: min(36rem, 78vw);
    opacity: .48;
  }

  .state-ribbon__label,
  .state-ribbon figcaption { display: none; }

  .paths-heading {
    grid-template-columns: 1fr;
  }

  .paths-heading > p:last-child { text-align: left; }

  .watch-path {
    grid-template-columns: 7rem minmax(0, 1fr);
  }
}

@media (max-width: 48em) {
  .watch-path-comparison { grid-template-columns: 1fr; }

  .visual-page__inner--paths {
    align-content: start;
    padding-block: 1.1rem 1.5rem;
  }

  .watch-path {
    grid-template-columns: minmax(6.4rem, .45fr) minmax(0, 1.55fr);
  }

  .watch-path__preview { min-height: 11.5rem; }
  .watch-path__preview img { height: 9rem; }
  .watch-path__preview--phone img { height: 15rem; }
}

@media (max-width: 34em) {
  .visual-page .paths-heading h2 {
    font-size: clamp(1.75rem, 8.2vw, 2.45rem);
  }

  .watch-path {
    grid-template-columns: 5.9rem minmax(0, 1fr);
    padding: .72rem;
  }

  .watch-path__preview { min-height: 10.75rem; }
  .watch-path__preview img { height: 8rem; }
  .watch-path__preview--phone img { height: 13.5rem; }
  .watch-path > header { align-items: flex-start; flex-direction: column; gap: .1rem; }
  .watch-path ul { gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .state-ribbon__layer {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature--hero { filter: none; }
}

/* Immersive secondary-page heroes
   Ana sayfadaki pembe / buz mavisi görsel dilini uzun bilgi sayfalarına taşır. */
.page-hero--immersive {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  max-width: none;
  min-height: min(76svh, 47rem);
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(83, 99, 109, .18);
  background: #fbfaff;
}

.page-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center right;
  pointer-events: none;
  user-select: none;
}

.page-hero--immersive::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 253, 255, .99) 0%, rgba(255, 253, 255, .92) 31%, rgba(255, 253, 255, .42) 57%, rgba(255, 253, 255, .04) 82%);
  pointer-events: none;
}

.page-hero__content {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: inherit;
  padding-block: clamp(2rem, 6vh, 5rem);
}

.page-hero--immersive h1 {
  max-width: 10.5ch;
  font-size: clamp(3.5rem, 6.4vw, 7.6rem);
  line-height: .86;
  letter-spacing: -.052em;
}

.page-hero--immersive .lead {
  max-width: 39rem;
  margin-top: clamp(.8rem, 1.6vw, 1.3rem);
  color: #403849;
  font-size: clamp(1rem, .92rem + .34vw, 1.25rem);
  line-height: 1.5;
}

.page-hero--immersive .toc {
  max-width: 40rem;
  margin-top: clamp(.8rem, 1.7vw, 1.4rem);
  border-color: rgba(83, 99, 109, .26);
}

.page-hero--flow .page-hero__image { object-position: 62% center; }
.page-hero--privacy .page-hero__image { object-position: 66% center; }
.page-hero--support .page-hero__image { object-position: 64% center; }

.page-hero--privacy::after {
  background: linear-gradient(90deg, rgba(255, 253, 255, .99) 0%, rgba(255, 253, 255, .91) 34%, rgba(255, 253, 255, .35) 62%, rgba(255, 253, 255, .03) 86%);
}

.page-hero--support::after {
  background: linear-gradient(90deg, rgba(255, 253, 255, .99) 0%, rgba(255, 253, 255, .9) 32%, rgba(255, 253, 255, .34) 60%, rgba(255, 253, 255, .02) 84%);
}

.page-hero--immersive.status-404 {
  min-height: min(74svh, 45rem);
  text-align: left;
}

.page-hero--immersive.status-404 .page-hero__content {
  justify-items: start;
}

.page-hero--immersive.status-404 h1 {
  color: #8154cd;
  font-size: clamp(5rem, 12vw, 10rem);
}

.page-hero--immersive.status-404 .lead { margin-inline: 0; }
.page-hero--immersive.status-404 .hero-actions { justify-content: flex-start; }

@media (max-width: 61.99em) {
  .page-hero--immersive {
    min-height: min(72svh, 42rem);
  }

  .page-hero--immersive h1 {
    max-width: 11ch;
    font-size: clamp(3.4rem, 10vw, 6.2rem);
  }
}

/* Product-first hero + compact beta form (2026-08-28) */
.visual-page__inner--devices {
  grid-template-columns: minmax(0, 36rem) minmax(21rem, 1fr);
  gap: clamp(1rem, 3vw, 4rem);
}

.visual-page--wave h1 {
  font-size: clamp(3.9rem, 6.35vw, 7.5rem);
  line-height: .72;
}

.visual-page--wave h1 .chromatic-line {
  margin-top: .04em;
}

.hero-motto {
  width: fit-content;
  margin: clamp(.7rem, 1.25vw, 1rem) 0 0;
  color: #2c2452;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + .75vw, 1.8rem);
  font-style: italic;
  line-height: 1.15;
  background: linear-gradient(90deg, #d93479 0%, #8266e8 52%, #209fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-vitals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  width: min(100%, 31rem);
  margin-top: clamp(.7rem, 1.25vw, 1rem);
}

.hero-vital {
  --vital-color: #e45b9b;
  --vital-breathe-duration: 3.7s;
  --vital-breathe-delay: 0s;
  display: grid;
  grid-template-columns: 3.55rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 0;
  padding: .42rem .5rem;
  border: 1px solid color-mix(in srgb, var(--vital-color) 24%, transparent);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 .45rem 1.15rem rgba(66, 54, 101, .08);
  backdrop-filter: blur(.45rem);
}

.hero-vital--energy { --vital-color: #7658df; }
.hero-vital--energy { --vital-breathe-duration: 4.45s; --vital-breathe-delay: -1.25s; }
.hero-vital--mood { --vital-color: #239ed4; --vital-breathe-duration: 3.15s; --vital-breathe-delay: -2.05s; }

.hero-vital > strong,
.hero-vital > small {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero-vital > strong {
  align-self: end;
  color: #241d30;
  font: 800 .72rem/1.1 var(--sans);
}

.hero-vital > small {
  align-self: start;
  margin-top: .18rem;
  color: #746c7f;
  font: 650 .58rem/1.18 var(--sans);
}

.hero-vital__orb {
  position: relative;
  grid-row: 1 / 3;
  display: grid;
  width: 3.15rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--vital-color);
}

.hero-vital__orb::before,
.hero-vital__orb::after {
  content: "";
  position: absolute;
  inset: .08rem;
  border: 1.5px solid color-mix(in srgb, currentColor 52%, transparent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: heroVitalPulse var(--vital-breathe-duration) ease-in-out var(--vital-breathe-delay) infinite;
}

.hero-vital__orb::after {
  inset: .38rem;
  border-right-color: currentColor;
  border-left-color: transparent;
  opacity: .5;
  animation-duration: calc(var(--vital-breathe-duration) * .72);
  animation-delay: calc(var(--vital-breathe-delay) - .55s);
}

.hero-body-figure {
  position: relative;
  width: 1.35rem;
  height: 2.2rem;
  animation: heroBodyWeight 3.6s ease-in-out infinite;
}

.hero-body-figure__head {
  position: absolute;
  top: 0;
  left: 50%;
  width: .62rem;
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, white);
  transform: translateX(-50%);
}

.hero-body-figure__torso {
  position: absolute;
  inset: .72rem .12rem 0;
  overflow: hidden;
  border: 1.5px solid currentColor;
  border-radius: .7rem .7rem .35rem .35rem;
  background: color-mix(in srgb, currentColor 8%, white);
}

.hero-body-figure__torso b {
  position: absolute;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(to top, currentColor, color-mix(in srgb, currentColor 42%, transparent));
  animation: heroBodyFill 3.6s ease-in-out infinite;
}

.hero-lightning-field {
  position: relative;
  width: 2rem;
  aspect-ratio: 1;
}

.hero-lightning {
  position: absolute;
  width: .65rem;
  height: .95rem;
  background: currentColor;
  clip-path: polygon(48% 0, 100% 0, 65% 40%, 100% 40%, 26% 100%, 43% 56%, 8% 56%);
  filter: drop-shadow(0 0 .28rem currentColor);
  opacity: .36;
  animation: heroLightning 1.3s steps(2, end) infinite;
}

.hero-lightning:nth-child(1) { top: 0; left: .68rem; }
.hero-lightning:nth-child(2) { right: 0; bottom: .12rem; animation-delay: .4s; }
.hero-lightning:nth-child(3) { bottom: 0; left: .05rem; animation-delay: .75s; }

.hero-mood-face {
  position: relative;
  width: 2rem;
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 9%, white);
  animation: heroMoodGlow 4s ease-in-out infinite;
}

.hero-mood-face__eye {
  position: absolute;
  top: 35%;
  width: .2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation: heroMoodEyes 4s ease-in-out infinite;
}

.hero-mood-face__eye:first-child { left: 27%; }
.hero-mood-face__eye:nth-child(2) { right: 27%; }

.hero-mood-face__mouth {
  position: absolute;
  bottom: 24%;
  left: 50%;
  width: .82rem;
  height: 1px;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(-50%);
  animation: heroMoodSmile 4s ease-in-out infinite;
}

@keyframes heroVitalPulse {
  0%, 100% { transform: scale(.88); opacity: .42; }
  50% { transform: scale(1.1); opacity: .9; }
}

@keyframes heroBodyFill {
  0%, 100% { height: 30%; }
  50% { height: 74%; }
}

@keyframes heroBodyWeight {
  0%, 100% { transform: scaleY(.96); }
  50% { transform: scaleY(1.04); }
}

@keyframes heroLightning {
  0%, 35%, 100% { opacity: .36; transform: scale(.88); }
  38%, 54% { opacity: 1; transform: scale(1.18); }
}

@keyframes heroMoodGlow {
  0%, 100% { background: color-mix(in srgb, currentColor 9%, white); }
  55% { background: color-mix(in srgb, currentColor 24%, white); }
}

@keyframes heroMoodEyes {
  0%, 25%, 100% { transform: scaleY(1); }
  58%, 72% { transform: scaleY(.35); }
}

@keyframes heroMoodSmile {
  0%, 24%, 100% { height: 1px; border-radius: 0; }
  55%, 74% { height: .42rem; border-radius: 0 0 1rem 1rem; }
}

.device-showcase {
  position: relative;
  justify-self: end;
  width: min(100%, 27rem);
  height: min(34rem, calc(100svh - var(--header-height) - 2.25rem));
  min-height: 25rem;
  margin: 0;
  pointer-events: none;
}

.device-phone,
.device-watch {
  position: absolute;
  display: block;
  user-select: none;
}

.device-phone {
  top: 50%;
  right: clamp(.25rem, 2vw, 2rem);
  width: min(18.1rem, 57%);
  aspect-ratio: 77.6 / 159.9;
  padding: .38rem;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: clamp(2.55rem, 3.25vw, 3.2rem);
  background:
    linear-gradient(108deg, #8f8b83 0%, #d8d3c9 8%, #837f78 20%, #d8d3ca 46%, #706d68 72%, #b9b4aa 92%, #6f6b65 100%);
  box-shadow:
    0 2.6rem 5.5rem rgba(43, 37, 72, .34),
    0 .75rem 1.7rem rgba(32, 27, 48, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 0 0 .22rem rgba(30, 29, 31, .55);
  transform: translateY(-50%);
}

.device-phone__bezel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: .34rem solid #09090b;
  border-radius: inherit;
  background: #09090b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.device-phone__screen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(clamp(2.55rem, 3.25vw, 3.2rem) - .72rem);
  object-fit: cover;
  object-position: center top;
}

.device-phone__dynamic-island {
  position: absolute;
  z-index: 3;
  top: .72rem;
  left: 50%;
  width: 31%;
  height: 1.18rem;
  border-radius: 99rem;
  background: #020203;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 3px rgba(0, 0, 0, .22);
  transform: translateX(-50%);
}

.device-phone__dynamic-island::after {
  content: "";
  position: absolute;
  top: .31rem;
  right: .38rem;
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #1d2b51, #05060a 66%);
}

.device-phone__reflection {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.14), transparent 18%, transparent 78%, rgba(255,255,255,.08));
  pointer-events: none;
}

.device-phone__action,
.device-phone__volume {
  position: absolute;
  left: -.32rem;
  width: .24rem;
  border-radius: .2rem 0 0 .2rem;
  background: linear-gradient(90deg, #5b5853, #cbc5bb);
  box-shadow: -1px 0 1px rgba(24, 22, 21, .38);
}

.device-phone__action { top: 18%; height: 5%; }
.device-phone__volume { height: 8.5%; }
.device-phone__volume--up { top: 27%; }
.device-phone__volume--down { top: 37%; }

.device-watch {
  z-index: 4;
  left: 0;
  bottom: 9%;
  width: min(16.7rem, 49%);
  aspect-ratio: 44 / 49;
  padding: .64rem;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 25% / 22%;
  background:
    linear-gradient(145deg, #f4f1ea 0%, #a6a198 15%, #e8e4db 31%, #77736c 50%, #d8d3c9 72%, #8d8981 90%, #f0ece3 100%);
  box-shadow:
    0 2.2rem 3.6rem rgba(43, 37, 72, .32),
    0 .55rem 1.25rem rgba(29, 25, 43, .25),
    inset 0 0 0 .15rem rgba(255, 255, 255, .6),
    inset 0 0 0 .28rem rgba(67, 65, 62, .4);
}

.device-watch::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.3rem .8rem;
  border-radius: 24%;
  border-block: .2rem solid rgba(95, 91, 84, .78);
  opacity: .75;
}

.device-watch__action {
  position: absolute;
  z-index: 5;
  top: 35%;
  left: -.38rem;
  width: .42rem;
  height: 22%;
  border: 1px solid rgba(126, 57, 13, .72);
  border-radius: .3rem 0 0 .3rem;
  background: linear-gradient(90deg, #a84410, #ff7a1a 58%, #cf4c0a);
  box-shadow: -.15rem .12rem .3rem rgba(75, 40, 19, .28);
}

.device-watch__screen {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: .34rem solid #08090b;
  border-radius: 21% / 19%;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.95), transparent 31%),
    radial-gradient(circle at 78% 76%, rgba(76,183,231,.18), transparent 36%),
    linear-gradient(145deg, #f1fbff, #dff4ff 52%, #cfeaff);
  box-shadow: inset 0 0 1.7rem rgba(48, 150, 205, .12), inset 0 0 0 1px rgba(255,255,255,.64);
}

.watch-status {
  position: absolute;
  z-index: 5;
  top: 5.8%;
  left: 10%;
  right: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #18222a;
  font-family: var(--sans);
  font-size: clamp(.42rem, .78vw, .68rem);
  line-height: 1;
}

.watch-status b { font-weight: 820; }
.watch-status i { font-size: .54em; font-style: normal; letter-spacing: .08em; }

.watch-mood-signature {
  position: absolute;
  top: 22%;
  left: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.watch-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 45%;
  border: clamp(1px, .11vw, 2px) solid rgba(29, 157, 219, .55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: watchOrbit 7s ease-in-out infinite alternate;
}

.watch-orbit--one { transform: translate(-50%, -50%) rotate(18deg); }
.watch-orbit--two { transform: translate(-50%, -50%) rotate(66deg); animation-delay: -1.6s; }
.watch-orbit--three { transform: translate(-50%, -50%) rotate(112deg); animation-delay: -3.2s; }
.watch-orbit--four { transform: translate(-50%, -50%) rotate(156deg); animation-delay: -4.8s; }

@keyframes watchOrbit {
  to { border-color: rgba(92, 106, 232, .55); border-radius: 44% 56% 48% 52%; }
}

.watch-moon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 29%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #238fd5;
  box-shadow: 0 0 1rem rgba(35, 143, 213, .3);
  transform: translate(-50%, -50%);
}

.watch-moon::after {
  content: "";
  position: absolute;
  top: -8%;
  left: 31%;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e6f7ff;
}

.watch-measure-copy {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 11%;
  left: 8%;
  color: #53626c;
  font-family: var(--sans);
  font-size: clamp(.42rem, .78vw, .66rem);
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
}

.data-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.3rem;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.data-service {
  position: relative;
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.7rem);
  background: rgba(255, 255, 255, .93);
}

.data-service::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .22rem;
  background: var(--service-color, var(--blue));
}

.data-service--spotify { --service-color: #29b86d; }
.data-service--apple { --service-color: #ef557e; }
.data-service--youtube { --service-color: #f0444f; }
.data-service__index { margin: 0 0 .7rem; color: var(--service-color); font-size: .7rem; font-weight: 850; letter-spacing: .16em; }
.data-service h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 2rem); }
.data-service > p:not(.data-service__index) { min-height: 4.4em; margin: .55rem 0 0; color: #5d5667; font-size: .88rem; }

.data-service__actions {
  display: grid;
  gap: .45rem;
  margin-top: 1rem;
}

.data-service__actions a,
.data-service__actions span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.85rem;
  padding: .65rem .8rem;
  border: 1px solid color-mix(in srgb, var(--service-color) 45%, white);
  border-radius: .75rem;
  font-size: .78rem;
  font-weight: 760;
}

.data-service__actions a {
  color: #241d30;
  background: color-mix(in srgb, var(--service-color) 10%, white);
  text-decoration: none;
}

.data-service__actions a:hover { transform: translateY(-1px); }
.data-service__actions span { color: #706979; border-style: dashed; background: #fff; }

.data-flow-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .8rem;
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-block: 1px solid var(--rule);
  color: #554e5f;
  font-size: .82rem;
}

.data-flow-note strong { color: #241d30; }
.data-flow-note i { color: #8154cd; font-style: normal; }

@media (max-width: 48em) {
  .data-service-grid { grid-template-columns: 1fr; }
  .data-service > p:not(.data-service__index) { min-height: 0; }
}

.immersive-home .store-links {
  gap: .7rem;
  border: 0;
}

.immersive-home .store-link {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(73, 57, 109, .28);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(245, 241, 255, .88));
  box-shadow: 0 .65rem 1.45rem rgba(84, 61, 128, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.immersive-home .store-link::after {
  content: "→";
  margin-left: auto;
  color: #805dcc;
  font-size: 1.15rem;
  font-weight: 800;
}

.immersive-home .store-link + .store-link {
  border: 1px solid rgba(73, 57, 109, .28);
}

.immersive-home .store-link:hover {
  border-color: rgba(190, 79, 138, .72);
  box-shadow: 0 1rem 2rem rgba(84, 61, 128, .22), inset 0 1px 0 #fff;
  transform: translateY(-3px);
}

.immersive-home .store-link:active {
  box-shadow: 0 .35rem .8rem rgba(84, 61, 128, .14);
  transform: translateY(1px) scale(.985);
}

.immersive-home .store-link:focus-visible {
  outline: 3px solid rgba(41, 159, 216, .5);
  outline-offset: 3px;
}

.beta-dialog {
  width: min(34rem, calc(100% - 1rem));
}

.beta-form__grid {
  grid-template-columns: 1fr;
}

.beta-form input:not([type="checkbox"], [type="radio"]),
.beta-form select {
  min-height: 3.45rem;
  border-color: rgba(94, 74, 135, .28);
  background: rgba(255, 255, 255, .92);
}

@media (max-width: 61.99em) {
  .visual-page__inner--devices {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, .7fr);
    gap: .5rem;
  }

  .visual-page--wave h1 {
    font-size: clamp(3.45rem, 8.4vw, 6.2rem);
  }

  .device-showcase {
    width: min(23rem, 100%);
    height: 27rem;
    min-height: 0;
  }
}

@media (max-width: 48em) {
  .visual-page__inner--devices {
    grid-template-columns: minmax(0, 1fr) 10rem;
    gap: .25rem;
  }

  .device-showcase {
    width: 12rem;
    height: 24rem;
  }

  .device-phone {
    right: -2.8rem;
    width: 11rem;
    border-radius: 2rem;
    opacity: .84;
  }

  .device-watch {
    left: -2.2rem;
    bottom: 15%;
    width: 8.5rem;
  }

  .device-phone__screen {
    border-radius: 1.35rem;
  }
}

@media (max-width: 40em) {
  /* Mobilde bölümler parmak kaydırmasına bırakılır; zorunlu snap hissi yok. */
  html.immersive-root {
    scroll-behavior: auto;
    scroll-padding-top: 3.4rem;
    scroll-snap-type: none;
  }

  .immersive-home .visual-page {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .visual-page__inner--split {
    align-content: start;
    padding-block: 2.2rem 5.5rem;
  }

  .visual-page__inner--devices {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    align-items: start;
    padding-block: clamp(2rem, 7vh, 3.4rem) 5rem;
  }

  .visual-page__copy {
    width: calc(100vw - (2 * var(--gutter)));
    max-width: calc(100vw - (2 * var(--gutter)));
    min-width: 0;
    overflow: hidden;
  }

  .visual-page__copy .visual-lead {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero-motto {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .visual-page--wave h1 {
    max-width: 8.7ch;
    font-size: clamp(3rem, 13.2vw, 4.15rem);
    line-height: .78;
  }

  .hero-vitals {
    width: 100%;
    max-width: 100%;
    gap: .35rem;
  }

  .hero-vital {
    grid-template-columns: 1fr;
    grid-template-rows: 2.85rem auto auto;
    justify-items: center;
    padding: .3rem .12rem;
    text-align: center;
  }

  .hero-vital__orb {
    grid-row: 1;
    width: 2.7rem;
  }

  .hero-vital > strong { font-size: .68rem; }
  .hero-vital > small { font-size: .52rem; }

  .hero-vital > strong,
  .hero-vital > small {
    overflow-wrap: anywhere;
  }

  .device-showcase {
    position: absolute;
    z-index: -1;
    right: -1rem;
    bottom: -9rem;
    width: 12rem;
    height: 19rem;
    opacity: .16;
  }

  .device-phone {
    right: 0;
    width: 8rem;
  }

  .device-watch {
    left: -.5rem;
    width: 6.2rem;
  }

  .visual-page__inner--split .visual-page__copy {
    position: relative;
    z-index: 1;
  }

  .visual-page__inner--split .state-ribbon {
    right: -2rem;
    bottom: -2rem;
    z-index: 0;
    width: min(26rem, 88vw);
    opacity: .25;
  }

  .hero-motto,
  .visual-lead,
  .hero-vitals,
  .immersive-home .store-links,
  .beta-invite-note {
    position: relative;
    z-index: 1;
  }

  .immersive-home .store-link {
    min-height: 3.85rem;
    padding-inline: .65rem;
  }

  .immersive-home .store-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .immersive-home .store-link + .store-link {
    border-left: 1px solid rgba(73, 57, 109, .28);
  }

  .immersive-home .store-link::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-vital__orb::before,
  .hero-vital__orb::after,
  .hero-body-figure,
  .hero-body-figure__torso b,
  .hero-lightning,
  .hero-mood-face,
  .hero-mood-face__eye,
  .hero-mood-face__mouth {
    animation: none;
  }
}

@media (max-width: 40em) {
  .page-hero--immersive {
    min-height: calc(100svh - 3.4rem);
  }

  .page-hero__image {
    object-position: 61% center;
  }

  .page-hero--immersive::after,
  .page-hero--privacy::after,
  .page-hero--support::after {
    background: linear-gradient(90deg, rgba(255, 253, 255, .98) 0%, rgba(255, 253, 255, .88) 64%, rgba(255, 253, 255, .3) 100%);
  }

  .page-hero__content {
    padding-block: 1.25rem 1.6rem;
  }

  .page-hero--immersive h1 {
    max-width: 100%;
    font-size: clamp(3rem, 14vw, 4.4rem);
  }

  .page-hero--immersive .lead {
    max-width: 29rem;
    font-size: .98rem;
  }

  .page-hero--immersive .toc {
    gap: .35rem .9rem;
    margin-top: .8rem;
    padding-top: .65rem;
  }
}

@media (max-width: 40em) {
  .immersive-home .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
  }

  .immersive-home .brand {
    grid-column: 1;
    grid-row: 1;
    gap: .45rem;
  }

  .immersive-home .brand img {
    width: 2rem;
    height: 2rem;
    border-radius: .62rem;
  }

  .immersive-home .menu-button {
    grid-column: 2;
    grid-row: 1;
  }

  .immersive-home .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .header-beta { display: none; }
}
/* ================================================================
   Current app information pages · 2026-09-03
   App-native editorial layout using authentic product screens.
   ================================================================ */
.info-page {
  --info-ink: #15141d;
  --info-muted: #676677;
  --info-line: rgba(21, 20, 29, .11);
  --info-pink: #dd62b6;
  --info-violet: #7769f4;
  --info-blue: #50b8ef;
  background: #f8f8fd;
  color: var(--info-ink);
}
.info-page main { overflow: hidden; }
.info-shell { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.info-kicker { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; margin: 0 0 1.15rem; color: #665bd7; font-size: .79rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.info-lead { max-width: 780px; margin: 0; color: var(--info-muted); font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.62; }
.info-page .site-header { background: rgba(250, 250, 255, .84); backdrop-filter: blur(24px); border-color: rgba(21, 20, 29, .08); }
.info-page .site-nav .nav-cta { padding: .82rem 1.25rem; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(105deg, var(--info-pink), var(--info-violet) 54%, var(--info-blue)); box-shadow: 0 10px 28px rgba(112, 99, 238, .18); }
.info-page .site-nav .nav-cta::after { display: none; }

.info-hero { position: relative; isolation: isolate; min-height: 760px; padding: clamp(4.5rem, 8vw, 8rem) 0 3.5rem; background: radial-gradient(circle at 86% 18%, rgba(95, 190, 242, .26), transparent 28%), radial-gradient(circle at 66% 76%, rgba(222, 91, 184, .2), transparent 35%), linear-gradient(135deg, #fff 0%, #f4f1ff 55%, #edf9ff 100%); }
.info-hero::before { content: ""; position: absolute; z-index: -1; width: 440px; height: 440px; left: -210px; bottom: -190px; border: 1px solid rgba(118, 105, 244, .15); border-radius: 50%; box-shadow: 0 0 0 62px rgba(118, 105, 244, .035), 0 0 0 126px rgba(221, 98, 182, .028); }
.info-hero__grid { display: grid; grid-template-columns: minmax(0, .98fr) minmax(430px, .82fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); }
.info-hero__copy h1 { max-width: 820px; margin: 0 0 1.6rem; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3.35rem, 6.35vw, 6.75rem); font-weight: 500; letter-spacing: -.065em; line-height: .89; }
.info-hero__copy h1 em { display: block; color: transparent; font-style: italic; background: linear-gradient(100deg, #d852ab 5%, #7769f4 48%, #3aa9e8 90%); background-clip: text; -webkit-background-clip: text; }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 720px; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--info-line); }
.hero-proof span { display: flex; gap: .55rem; align-items: center; color: #4f4d5d; font-size: .88rem; font-weight: 700; }
.hero-proof b { color: #9b8fed; font-size: .72rem; letter-spacing: .08em; }

.phone-stage { position: relative; min-height: 680px; }
.app-shot { position: absolute; overflow: hidden; margin: 0; border: 9px solid #17171d; border-radius: 48px; background: #fff; box-shadow: 0 42px 90px rgba(48, 43, 91, .25), 0 0 0 1px rgba(255,255,255,.75); }
.app-shot img { display: block; width: 100%; height: auto; }
.app-shot--main { z-index: 2; width: min(318px, 58%); right: 8%; top: 0; transform: rotate(2.2deg); }
.app-shot--rear { z-index: 1; width: min(270px, 49%); left: 0; top: 88px; transform: rotate(-6deg); filter: saturate(.92); }
.screen-note { position: absolute; z-index: 3; padding: .78rem 1rem; border: 1px solid rgba(255,255,255,.72); border-radius: 16px; color: #373342; background: rgba(255,255,255,.76); box-shadow: 0 18px 35px rgba(42, 38, 81, .12); backdrop-filter: blur(15px); font-size: .78rem; font-weight: 800; }
.screen-note--one { right: 0; top: 16%; }
.screen-note--two { left: 3%; bottom: 12%; }

.info-section { padding: clamp(5rem, 9vw, 8.5rem) 0; background: #fff; }
.info-section--soft { background: linear-gradient(180deg, #f5f2ff 0%, #f7fbff 100%); }
.info-section--ink { color: #fff; background: #171620; }
.section-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .6fr); align-items: end; gap: 2rem 5rem; margin-bottom: 3rem; }
.section-intro .info-kicker { grid-column: 1 / -1; margin-bottom: -.5rem; }
.section-intro h2, .split-story h2, .harmony-copy h2, .data-story h2, .info-cta h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 4.6vw, 5.2rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.section-intro > p:last-child { margin: 0; color: var(--info-muted); font-size: 1.05rem; line-height: 1.65; }
.section-intro--compact { display: block; max-width: 760px; }

.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.signal-card { position: relative; min-height: 410px; padding: 2rem; overflow: hidden; border: 1px solid var(--info-line); border-radius: 30px; background: #fafafe; }
.signal-card::after { content: ""; position: absolute; right: -28%; bottom: -28%; width: 230px; aspect-ratio: 1; border-radius: 50%; background: var(--signal-glow); filter: blur(5px); opacity: .22; }
.signal-card--mood { --signal: #dc5eb3; --signal-glow: #f082ca; }
.signal-card--energy { --signal: #7669f4; --signal-glow: #8a7efa; }
.signal-card--body { --signal: #48afe9; --signal-glow: #69caf7; }
.signal-index { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); border-radius: 50%; color: var(--signal); font-size: .72rem; font-weight: 900; }
.signal-label { margin: 3.7rem 0 .55rem; color: var(--signal); font-size: .78rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.signal-card h3 { max-width: 360px; margin: 0 0 1rem; font-size: clamp(1.55rem, 2vw, 2.25rem); letter-spacing: -.035em; line-height: 1.08; }
.signal-card > p:not(.signal-label) { position: relative; z-index: 1; margin: 0; color: var(--info-muted); line-height: 1.62; }
.signal-scale { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; display: grid; grid-template-columns: 1fr 1.25fr .72fr; gap: .38rem; align-items: end; height: 44px; }
.signal-scale span { border-radius: 999px; background: color-mix(in srgb, var(--signal) 82%, white); }
.signal-scale span:nth-child(1) { height: 28%; opacity: .4; }
.signal-scale span:nth-child(2) { height: 100%; opacity: .9; }
.signal-scale span:nth-child(3) { height: 58%; opacity: .62; }

.split-story { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.watch-stage { position: relative; min-height: 570px; display: grid; place-items: center; }
.watch-stage::before { content: ""; position: absolute; width: 420px; max-width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.28), rgba(119,105,244,.18) 42%, transparent 70%); border: 1px solid rgba(255,255,255,.12); }
.watch-shot { position: relative; z-index: 1; width: min(360px, 78%); margin: 0; overflow: hidden; border: 12px solid #393740; border-radius: 82px; background: #dff6ff; box-shadow: 0 42px 82px rgba(0,0,0,.36); }
.watch-shot img { display: block; width: 100%; }
.watch-duration { position: absolute; z-index: 2; right: 5%; top: 13%; display: grid; place-items: center; width: 94px; height: 94px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #dd62b6, #6e68ef 58%, #4db9ed); box-shadow: 0 18px 38px rgba(97,87,222,.36); font-size: 1.15rem; font-weight: 900; }
.split-story__copy .info-kicker { color: #8bcff1; }
.split-story__copy h2 { max-width: 760px; }
.choice-stack { display: grid; gap: .8rem; margin-top: 2.3rem; }
.choice-stack article { display: grid; grid-template-columns: 110px 1fr; gap: .4rem 1.2rem; padding: 1.35rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.choice-stack article > span { grid-row: 1 / 3; color: #8acbed; font-size: .75rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.choice-stack h3 { margin: 0; font-size: 1.25rem; }
.choice-stack p { margin: 0; color: #aaa8b6; line-height: 1.6; }
.boundary-note { margin: 1.2rem 0 0; color: #b9b7c4; font-size: .9rem; }

.harmony-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .58fr); align-items: center; gap: clamp(3rem, 8vw, 7.5rem); }
.harmony-copy .info-lead { margin-top: 1.7rem; }
.mode-list { display: grid; gap: .7rem; margin-top: 2rem; }
.mode-list article { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--info-line); border-radius: 16px; background: #fafafe; }
.mode-list b { color: #6559df; }
.mode-list span { color: var(--info-muted); line-height: 1.45; }
.micro-note { margin: 1.15rem 0 0; padding-left: 1rem; border-left: 3px solid #5fbbe9; color: #686676; font-size: .9rem; line-height: 1.55; }
.intelligence-shot, .wide-app-shot { margin: 0; overflow: hidden; border: 9px solid #191820; border-radius: 44px; background: #fff; box-shadow: 0 35px 75px rgba(34,30,69,.21); }
.intelligence-shot img, .wide-app-shot img { display: block; width: 100%; }
.intelligence-shot figcaption { padding: .9rem 1.1rem; color: #777484; background: #fff; font-size: .76rem; font-weight: 700; }

.direction-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
.direction-card { display: grid; grid-template-columns: 78px 1fr; gap: 1.2rem; min-height: 280px; padding: 2rem; border-radius: 28px; color: #fff; }
.direction-card--stabilize { background: linear-gradient(135deg, #251f54, #655ada); }
.direction-card--match { background: linear-gradient(135deg, #174667, #39a6df); }
.direction-number { margin: 0; font-family: Georgia, serif; font-size: 4.6rem; line-height: .84; opacity: .3; }
.direction-card .signal-label { margin: .15rem 0 .55rem; color: rgba(255,255,255,.62); }
.direction-card h3 { margin: 0 0 .9rem; font-size: clamp(1.55rem, 2.2vw, 2.35rem); letter-spacing: -.035em; line-height: 1.05; }
.direction-card div > p:last-child { margin: 0; color: rgba(255,255,255,.72); line-height: 1.55; }
.music-proof-grid { display: grid; grid-template-columns: minmax(300px, .62fr) minmax(0, 1fr); gap: 1rem; }
.wide-app-shot { position: relative; max-height: 570px; border-width: 7px; border-radius: 28px; }
.wide-app-shot img { transform: translateY(-3%); }
.music-proof-copy { min-height: 570px; padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid rgba(118,105,244,.16); border-radius: 28px; background: rgba(255,255,255,.72); }
.music-proof-copy .info-kicker { margin-bottom: .2rem; }
.big-number { margin: 0; color: transparent; font-family: Georgia, serif; font-size: clamp(7rem, 15vw, 13rem); letter-spacing: -.08em; line-height: .86; background: linear-gradient(115deg, #da5daf, #7568ef, #4bb6eb); background-clip: text; -webkit-background-clip: text; }
.music-proof-copy h3 { margin: 0 0 1.8rem; font-size: clamp(1.7rem, 2.4vw, 2.7rem); letter-spacing: -.03em; }
.clean-list { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.clean-list li { position: relative; padding-left: 1.5rem; color: #656374; font-size: 1rem; }
.clean-list li::before { content: ""; position: absolute; left: 0; top: .47rem; width: .62rem; height: .62rem; border-radius: 50%; background: linear-gradient(135deg, #da5daf, #54b5ec); }

.data-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .72fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.data-story .info-lead { margin-top: 1.5rem; }
.import-flow { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.import-flow li { display: grid; grid-template-columns: 52px 1fr; gap: .1rem 1rem; padding: 1.3rem; border: 1px solid var(--info-line); border-radius: 20px; background: #fafafe; }
.import-flow span { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #6b61dc; background: #eeebff; font-size: .74rem; font-weight: 900; }
.import-flow b { font-size: 1.05rem; }
.import-flow small { color: var(--info-muted); font-size: .88rem; }

.info-cta { padding: clamp(5.5rem, 10vw, 9rem) 0; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(76,183,236,.28), transparent 30%), linear-gradient(125deg, #211739, #422866 50%, #194f70); }
.info-cta__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.info-cta .info-kicker { justify-content: center; color: #9bdcf7; }
.info-cta p:not(.info-kicker) { max-width: 700px; margin: 1.4rem auto 0; color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.65; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.button-primary, .button-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .75rem 1.35rem; border-radius: 999px; font-weight: 800; text-decoration: none; }
.button-primary { color: #24202e; background: #fff; }
.button-quiet { border: 1px solid rgba(255,255,255,.26); color: #fff; }

@media (max-width: 980px) {
  .info-hero { min-height: auto; }
  .info-hero__grid, .split-story, .harmony-layout, .data-story { grid-template-columns: 1fr; }
  .info-hero__grid { gap: 2rem; }
  .phone-stage { width: min(620px, 100%); min-height: 650px; margin-inline: auto; }
  .section-intro { grid-template-columns: 1fr; gap: 1rem; }
  .signal-grid { grid-template-columns: 1fr; }
  .signal-card { min-height: 320px; }
  .signal-label { margin-top: 2.8rem; }
  .watch-stage { order: 2; }
  .direction-grid, .music-proof-grid { grid-template-columns: 1fr; }
  .wide-app-shot { max-height: 680px; }
}

@media (max-width: 680px) {
  .info-shell { width: min(calc(100% - 26px), 1240px); }
  .info-page .site-nav .nav-cta { border-radius: 0; color: inherit; background: none; box-shadow: none; }
  .info-hero { padding-top: 3.4rem; }
  .info-hero__copy h1 { font-size: clamp(3.1rem, 16vw, 5.2rem); }
  .hero-proof { grid-template-columns: 1fr; gap: .65rem; }
  .phone-stage { min-height: 530px; }
  .app-shot { border-width: 6px; border-radius: 34px; }
  .app-shot--main { width: 58%; right: 2%; }
  .app-shot--rear { width: 51%; top: 68px; }
  .screen-note { padding: .55rem .7rem; font-size: .68rem; }
  .screen-note--one { top: 11%; }
  .screen-note--two { bottom: 6%; }
  .info-section { padding: 4.4rem 0; }
  .signal-card { min-height: 350px; padding: 1.5rem; }
  .signal-scale { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
  .watch-stage { min-height: 430px; }
  .watch-shot { border-width: 8px; border-radius: 58px; }
  .watch-duration { right: 0; width: 76px; height: 76px; }
  .choice-stack article, .mode-list article { grid-template-columns: 1fr; }
  .choice-stack article > span { grid-row: auto; }
  .direction-card { grid-template-columns: 1fr; min-height: auto; padding: 1.5rem; }
  .direction-number { font-size: 3.5rem; }
  .music-proof-copy { min-height: auto; padding: 2rem 1.5rem; }
  .import-flow li { grid-template-columns: 44px 1fr; }
}
.privacy-hero { background: radial-gradient(circle at 86% 24%, rgba(75,183,235,.22), transparent 31%), radial-gradient(circle at 62% 72%, rgba(222,98,182,.16), transparent 36%), linear-gradient(135deg, #fff 0%, #f6f4ff 62%, #edfaff 100%); }
.privacy-device { position: relative; min-height: 660px; }
.app-shot--privacy { width: min(325px, 65%); left: 50%; top: 0; transform: translateX(-50%) rotate(3deg); }
.privacy-badge { position: absolute; z-index: 3; right: 1%; bottom: 14%; display: grid; gap: .15rem; width: 210px; padding: 1.15rem; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 22px 42px rgba(46,41,86,.14); backdrop-filter: blur(15px); }
.privacy-badge span { color: #5bace0; font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.privacy-badge b { font-size: 1.45rem; }
.privacy-badge small { color: var(--info-muted); }
.privacy-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.privacy-lanes article { min-height: 330px; padding: 2rem; border-radius: 28px; color: #fff; }
.privacy-lanes article:nth-child(1) { --signal: #db60b4; background: linear-gradient(145deg, #4c1d49, #c552a5); }
.privacy-lanes article:nth-child(2) { --signal: #aaa0ff; background: linear-gradient(145deg, #2e285d, #665add); }
.privacy-lanes article:nth-child(3) { --signal: #88d9ff; background: linear-gradient(145deg, #164965, #38a5dc); }
.privacy-lanes .signal-label { margin: 3.2rem 0 .45rem; color: var(--signal); }
.lane-number { color: rgba(255,255,255,.48); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.privacy-lanes h3 { margin: 0 0 1rem; font-size: clamp(1.55rem, 2vw, 2.2rem); letter-spacing: -.035em; }
.privacy-lanes article > p:last-child { margin: 0; color: rgba(255,255,255,.7); line-height: 1.6; }
.privacy-inventory { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.privacy-inventory article { padding: 1.8rem; border: 1px solid var(--info-line); border-radius: 24px; background: rgba(255,255,255,.78); }
.inventory-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--info-line); }
.inventory-head span { color: #655bdb; font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.inventory-head b { padding: .36rem .65rem; border-radius: 999px; color: #50677a; background: #edf8fe; font-size: .7rem; }
.privacy-inventory h3 { margin: 1.2rem 0 .65rem; font-size: 1.45rem; letter-spacing: -.025em; }
.privacy-inventory article > p { margin: 0; color: var(--info-muted); line-height: 1.58; }
.privacy-inventory dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1.4rem 0 0; }
.privacy-inventory dl div { padding: .75rem; border-radius: 14px; background: #f5f5fa; }
.privacy-inventory dt { color: #92909d; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.privacy-inventory dd { margin: .2rem 0 0; font-size: .87rem; font-weight: 800; }
.cloud-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(400px, .75fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.cloud-split .info-kicker { color: #8bcff1; }
.cloud-split .info-lead { margin-top: 1.5rem; color: #afadba; }
.cloud-steps { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.cloud-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(255,255,255,.035); }
.cloud-steps span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #d85caf, #54b7eb); font-size: .78rem; font-weight: 900; }
.cloud-steps b { font-size: 1.05rem; }
.cloud-steps p { margin: .35rem 0 0; color: #aaa8b6; line-height: 1.5; }
.service-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--info-line); border-radius: 24px; background: var(--info-line); }
.service-strip article { min-height: 210px; padding: 1.5rem; background: #fff; }
.service-strip b { color: #5f55d8; font-size: 1.05rem; }
.service-strip p { margin: 3rem 0 0; color: var(--info-muted); line-height: 1.55; }
@media (max-width: 980px) {
  .privacy-device { min-height: 650px; }
  .privacy-lanes { grid-template-columns: 1fr; }
  .privacy-lanes article { min-height: 270px; }
  .privacy-lanes .signal-label { margin-top: 2rem; }
  .cloud-split { grid-template-columns: 1fr; }
  .service-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .privacy-device { min-height: 520px; }
  .privacy-inventory { grid-template-columns: 1fr; }
  .service-strip { grid-template-columns: 1fr; }
  .privacy-badge { right: 0; bottom: 8%; width: 180px; }
}
.support-hero { min-height: 700px; padding-bottom: 5rem; background: radial-gradient(circle at 80% 30%, rgba(216,88,175,.21), transparent 26%), radial-gradient(circle at 90% 76%, rgba(74,181,235,.22), transparent 32%), linear-gradient(145deg, #fff, #f5f3ff 55%, #effaff); }
.support-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .5fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.support-jumps { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.support-jumps a { padding: .65rem .85rem; border: 1px solid var(--info-line); border-radius: 999px; color: #484653; background: rgba(255,255,255,.56); font-size: .82rem; font-weight: 800; text-decoration: none; }
.support-screen { width: min(330px, 100%); max-height: 600px; margin: 0 auto; overflow: hidden; border: 9px solid #191820; border-radius: 46px; background: #fff; box-shadow: 0 40px 80px rgba(47,42,89,.22); transform: rotate(2.5deg); }
.support-screen img { display: block; width: 100%; }
.support-screen figcaption { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); width: max-content; padding: .6rem .85rem; border-radius: 999px; color: #fff; background: rgba(24,24,31,.82); backdrop-filter: blur(10px); font-size: .72rem; font-weight: 800; }
.start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.start-grid article { min-height: 280px; padding: 1.8rem; border: 1px solid var(--info-line); border-radius: 26px; background: #fafafe; }
.start-grid span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #d85caf, #7769f4 55%, #53b7eb); font-size: .75rem; font-weight: 900; }
.start-grid h3 { margin: 4rem 0 .75rem; font-size: 1.55rem; letter-spacing: -.03em; }
.start-grid p { margin: 0; color: var(--info-muted); line-height: 1.58; }
.support-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.support-split h2, .archive-layout h2, .account-help h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 4.6vw, 5.2rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.numbered-check { display: grid; gap: 0; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: support-step; }
.numbered-check li { counter-increment: support-step; display: grid; grid-template-columns: minmax(150px, .35fr) 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--info-line); }
.numbered-check b::before { content: "0" counter(support-step) " "; color: #8f84ed; font-size: .72rem; }
.numbered-check span { color: var(--info-muted); line-height: 1.55; }
.support-watch { margin: 0; padding: 2rem; border-radius: 44px; background: linear-gradient(150deg, #251d4c, #27678b); box-shadow: 0 32px 70px rgba(50,44,97,.22); }
.support-watch img { display: block; width: 100%; border: 10px solid #393740; border-radius: 64px; }
.support-watch figcaption { margin-top: 1rem; color: rgba(255,255,255,.72); text-align: center; font-weight: 800; }
.dark-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.dark-faq details { min-height: 165px; padding: 1.5rem; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.04); }
.dark-faq summary { cursor: pointer; color: #fff; font-size: 1.1rem; font-weight: 800; }
.dark-faq p { margin: 1rem 0 0; color: #aaa8b6; line-height: 1.55; }
.archive-layout { display: grid; grid-template-columns: minmax(310px, .5fr) minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.archive-shot { max-height: 690px; margin: 0; overflow: hidden; border: 9px solid #191820; border-radius: 44px; background: #fff; box-shadow: 0 35px 75px rgba(34,30,69,.2); }
.archive-shot img { display: block; width: 100%; }
.tip-stack { display: grid; gap: .65rem; margin-top: 2rem; }
.tip-stack article { padding: 1.05rem 1.2rem; border-left: 3px solid #7669f4; background: #f8f7fd; }
.tip-stack b { font-size: 1rem; }
.tip-stack p { margin: .3rem 0 0; color: var(--info-muted); line-height: 1.48; }
.account-help { display: grid; grid-template-columns: minmax(300px, .62fr) minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.account-cards { display: grid; gap: .8rem; }
.account-cards article { padding: 1.5rem; border: 1px solid var(--info-line); border-radius: 22px; background: rgba(255,255,255,.7); }
.account-cards h3 { margin: 0 0 .65rem; font-size: 1.3rem; }
.account-cards p { margin: 0; color: var(--info-muted); line-height: 1.55; }
.account-cards a { display: inline-block; margin-top: .8rem; color: #6559dc; font-weight: 800; }
@media (max-width: 980px) {
  .support-hero__grid, .support-split, .archive-layout, .account-help { grid-template-columns: 1fr; }
  .support-screen { margin-top: 1rem; }
  .start-grid { grid-template-columns: 1fr; }
  .start-grid article { min-height: 230px; }
  .start-grid h3 { margin-top: 2.5rem; }
  .support-watch, .archive-shot { width: min(480px, 100%); margin-inline: auto; }
}
@media (max-width: 680px) {
  .dark-faq { grid-template-columns: 1fr; }
  .numbered-check li { grid-template-columns: 1fr; }
  .support-screen { max-height: 520px; }
}
.service-links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.service-links a { padding: .65rem .85rem; border: 1px solid var(--info-line); border-radius: 999px; color: #5f55d8; background: #fff; font-size: .78rem; font-weight: 800; text-decoration: none; }
.policy-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.policy-notes article { padding: 1.5rem; border: 1px solid var(--info-line); border-radius: 22px; background: #fafafe; }
.policy-notes b { color: #5f55d8; }
.policy-notes p { margin: 1.4rem 0 0; color: var(--info-muted); line-height: 1.55; }
@media (max-width: 780px) { .policy-notes { grid-template-columns: 1fr; } }
.deletion-hero { background: radial-gradient(circle at 79% 20%, rgba(223,92,179,.2), transparent 27%), radial-gradient(circle at 91% 78%, rgba(75,184,236,.21), transparent 31%), linear-gradient(140deg, #fff 0%, #f5f2ff 58%, #eefaff 100%); }
.deletion-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .55fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.deletion-device { position: relative; min-height: 660px; }
.app-shot--deletion { width: min(330px, 74%); left: 50%; top: 0; transform: translateX(-50%) rotate(2.5deg); }
.deletion-device__label { position: absolute; z-index: 3; left: 0; bottom: 12%; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.75); border-radius: 16px; color: #514e5f; background: rgba(255,255,255,.82); box-shadow: 0 20px 42px rgba(43,38,82,.13); backdrop-filter: blur(15px); font-size: .78rem; font-weight: 900; }
.deletion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.deletion-card { --signal: #7165eb; min-height: 390px; padding: 1.8rem; border: 1px solid var(--info-line); border-radius: 28px; background: #fafafe; }
.deletion-card--local { --signal: #dd61b5; }
.deletion-card--track { --signal: #9167ef; }
.deletion-card--account { --signal: #5b73ed; }
.deletion-card--health { --signal: #48afe9; }
.deletion-card > span { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); border-radius: 50%; color: var(--signal); font-size: .74rem; font-weight: 900; }
.deletion-card .signal-label { margin: 2.8rem 0 .45rem; }
.deletion-card h3 { margin: 0 0 .75rem; font-size: clamp(1.6rem, 2.1vw, 2.25rem); letter-spacing: -.035em; }
.deletion-card > p:not(.signal-label) { margin: 0; color: var(--info-muted); line-height: 1.58; }
.deletion-path { display: grid; gap: .3rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--info-line); }
.deletion-path b { color: #9693a0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.deletion-path code { color: #4f4c5b; font-family: inherit; font-size: .88rem; font-weight: 800; }
.deletion-process { display: grid; grid-template-columns: minmax(0, .85fr) minmax(390px, .7fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.deletion-process h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 4.6vw, 5.2rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.deletion-process .info-kicker { color: #8bcff1; }
.deletion-process .info-lead { margin-top: 1.5rem; color: #aaa8b6; }
.delete-outcomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.delete-outcomes article { padding: 1.5rem; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.04); }
.delete-outcomes span { color: #91d7f5; font-size: .75rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.delete-outcomes ul { display: grid; gap: .75rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.delete-outcomes li { color: #c0bec8; font-size: .9rem; line-height: 1.42; }
.help-banner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgba(117,104,238,.16); border-radius: 30px; background: rgba(255,255,255,.72); }
.help-banner h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.4rem, 4vw, 4.6rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.help-banner p:not(.info-kicker) { max-width: 720px; margin: 1rem 0 0; color: var(--info-muted); line-height: 1.6; }
.help-banner__action { display: flex; align-items: center; gap: 1.3rem; min-width: 230px; padding: 1rem 1.2rem; border-radius: 999px; color: #fff; background: linear-gradient(105deg, #d85caf, #7669f4 55%, #4db6eb); font-weight: 900; text-decoration: none; }
.help-banner__action span { font-size: 1.3rem; }
.policy-faq { display: grid; gap: .7rem; }
.policy-faq details { padding: 1.25rem 1.4rem; border: 1px solid var(--info-line); border-radius: 20px; background: #fafafe; }
.policy-faq summary { cursor: pointer; font-size: 1.05rem; font-weight: 850; }
.policy-faq p { margin: 1rem 0 0; color: var(--info-muted); line-height: 1.58; }
@media (max-width: 980px) {
  .deletion-hero__grid, .deletion-process { grid-template-columns: 1fr; }
  .deletion-device { min-height: 620px; }
  .help-banner { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .deletion-device { min-height: 520px; }
  .deletion-grid, .delete-outcomes { grid-template-columns: 1fr; }
  .deletion-card { min-height: auto; }
  .help-banner { padding: 1.5rem; }
  .help-banner__action { min-width: 0; }
}
.review-overview { padding: clamp(3rem, 6vw, 5.5rem) 0 4rem; background: radial-gradient(circle at 78% 20%, rgba(221,96,181,.19), transparent 25%), radial-gradient(circle at 91% 77%, rgba(75,184,236,.2), transparent 31%), linear-gradient(140deg, #fff 0%, #f5f2ff 57%, #eefaff 100%); }
.review-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .38fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.review-overview__copy h1 { max-width: 850px; margin: 0 0 1.4rem; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3.2rem, 6vw, 6.6rem); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.review-overview__copy h1 em { display: block; color: transparent; font-style: italic; background: linear-gradient(100deg, #d852ab, #7669f4 52%, #3faee8); background-clip: text; -webkit-background-clip: text; }
.review-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; margin-top: 2.1rem; border: 1px solid var(--info-line); border-radius: 18px; background: var(--info-line); }
.review-status article { display: grid; gap: .28rem; padding: .95rem; background: rgba(255,255,255,.78); }
.review-status span { color: #93909c; font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.review-status b { font-size: .88rem; }
.review-screen { position: relative; width: min(290px, 100%); max-height: 540px; margin: 0 auto; overflow: hidden; border: 8px solid #18171f; border-radius: 42px; background: #fff; box-shadow: 0 36px 75px rgba(43,38,84,.21); transform: rotate(2deg); }
.review-screen img { display: block; width: 100%; }
.review-screen figcaption { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); width: max-content; padding: .55rem .8rem; border-radius: 999px; color: #fff; background: rgba(23,22,30,.82); backdrop-filter: blur(10px); font-size: .7rem; font-weight: 850; }
.review-flow { padding: clamp(4.5rem, 8vw, 7.5rem) 0; background: #fff; }
.review-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr); gap: 2rem 5rem; align-items: end; margin-bottom: 2.4rem; }
.review-section-head h2, .review-boundary h2, .harmony-review h2, .review-contact h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 4.5vw, 5rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.review-section-head > p { margin: 0; color: var(--info-muted); line-height: 1.6; }
.review-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--info-line); border-radius: 26px; background: var(--info-line); list-style: none; }

/* Tüm sayfalarda ana sayfadaki aynı marka–menü–beta üst düzeni. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 250, 255, .9);
  border-bottom: 1px solid rgba(240, 108, 164, .28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header::after {
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, rgba(240, 108, 164, .38), rgba(135, 121, 239, .4), rgba(96, 198, 237, .4));
}

.site-header .header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.8rem, 2vw, 2rem);
  min-height: 3.7rem;
}

.site-header .header-kicker { display: none; }

.site-header .brand {
  grid-column: 1;
  grid-row: 1;
  gap: .65rem;
  margin: 0;
  color: var(--violet-light);
  font-size: 1.65rem;
  font-weight: 820;
  letter-spacing: -.045em;
}

.site-header .brand img {
  display: block;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: .82rem;
}

.site-header .site-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  flex-direction: row;
  gap: clamp(1.1rem, 2.1vw, 1.9rem);
  width: auto;
  padding-bottom: 0;
}

.site-header .site-nav[hidden] { display: none; }

.site-header .site-nav a {
  padding: 0;
  border-bottom: 0;
  color: var(--ink-soft);
  font-size: .755rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 59.99em) {
  .site-header .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3.4rem;
    gap: .55rem;
  }

  .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.08rem;
  }

  .site-header .brand img {
    width: 2rem;
    height: 2rem;
    border-radius: .62rem;
  }

  .site-header .menu-button {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: .35rem .48rem;
    font-size: .58rem;
  }

  .site-header .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    justify-self: stretch;
    gap: .1rem;
    width: 100%;
    padding-bottom: .85rem;
  }

  .site-header .site-nav a {
    padding: .55rem 0;
    border-bottom: 1px solid rgba(73, 57, 109, .16);
    font-size: .72rem;
  }

  .site-header .header-beta { display: none; }
}

@media (min-width: 60em) {
  .site-header .site-nav[hidden] { display: flex; }
}

/* Mobil ürün düzeni: bölümler doğal akışta, daha kısa ve daha okunaklı. */
@media (max-width: 40em) {
  .immersive-home .visual-page {
    min-height: auto;
    overflow: clip;
  }

  .immersive-home .visual-page__inner {
    min-height: auto;
    align-items: start;
    padding-block: 1.3rem 3rem;
  }

  .immersive-home .visual-page__inner--devices {
    align-content: start;
    padding-block: 1.5rem 2rem;
  }

  .immersive-home { --gutter: 1rem; }

  .immersive-home .visual-page--wave {
    background: linear-gradient(155deg, #fffafd, #f5f3ff 65%, #effaff);
  }

  .immersive-home .visual-page--wave .visual-page__image { opacity: .18; }
  .immersive-home .visual-page--wave::after { display: none; }

  .immersive-home .visual-page__inner--devices .visual-page__copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: 1rem .75rem;
    width: 100%;
    max-width: none;
    overflow: visible;
  }

  .immersive-home .visual-page__inner--devices .eyebrow {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .6rem;
    letter-spacing: .13em;
  }

  .immersive-home .visual-page--wave h1 {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    max-width: 100%;
    margin: 0;
    font-family: var(--sans);
    font-weight: 750;
    font-size: clamp(2.1rem, 10.4vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -.055em;
  }

  .immersive-home .hero-motto {
    grid-column: 1 / -1;
    margin: .25rem 0 0;
    font-family: var(--sans);
    font-style: normal;
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.45;
  }

  .immersive-home .visual-page__inner--devices .visual-lead {
    grid-column: 1 / -1;
    margin: 0;
    color: #514a63;
    font-size: .94rem;
    line-height: 1.6;
  }

  .immersive-home .beta-invite-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .72rem;
    line-height: 1.5;
  }

  .immersive-home .hero-vitals {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: .5rem;
    grid-template-columns: 1fr;
  }

  .immersive-home .hero-vital {
    min-height: 5.4rem;
    grid-template-columns: 1fr;
    grid-template-rows: 2.4rem auto auto;
    justify-items: center;
    padding: .4rem .25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 .3rem .8rem rgba(64, 52, 111, .05);
    text-align: center;
  }

  .immersive-home .hero-vital__orb {
    grid-row: 1;
    width: 2.3rem;
  }
  .immersive-home .hero-vital > strong { font-size: .7rem; }
  .immersive-home .hero-vital > small { font-size: .6rem; }

  .immersive-home .store-links {
    grid-column: 1 / -1;
    gap: .6rem;
    margin: 0;
  }

  .immersive-home .store-link {
    min-height: 3.55rem;
    border: 1px solid rgba(73, 57, 109, .16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .86);
  }

  .immersive-home .device-showcase {
    display: none;
  }

  .immersive-home .device-phone {
    top: 0;
    right: .35rem;
    width: 6.1rem;
    transform: none;
  }

  .immersive-home .device-watch {
    left: .05rem;
    bottom: 0;
    width: 4.3rem;
  }

  .immersive-home .visual-page--plain h2 {
    max-width: 100%;
    font-family: var(--sans);
    font-weight: 750;
    font-size: clamp(1.8rem, 7.5vw, 2.5rem);
    line-height: 1.15;
  }

  .immersive-home .visual-page--paths h2 {
    max-width: 100%;
    font-size: clamp(1.65rem, 7vw, 2.35rem);
    line-height: 1.18;
  }

  .immersive-home .paths-heading h2 .chromatic-line {
    display: block;
    margin-top: .15em;
  }

  .immersive-home .visual-page__inner--split {
    padding-block: 2rem 2.8rem;
  }

  .immersive-home .visual-page__inner--split .state-ribbon {
    right: -3rem;
    bottom: -2.5rem;
    width: min(19rem, 70vw);
    opacity: .16;
  }

  .immersive-home .visual-page__inner--paths {
    padding-block: 2rem 2.8rem;
  }
}
.review-steps li { min-height: 310px; padding: 1.45rem; background: #fafafe; }
.review-steps li > span { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #d95dae, #7468ef 55%, #4fb7eb); font-size: .7rem; font-weight: 900; }
.review-steps div { margin-top: 3.5rem; }
.review-steps b { font-size: 1.05rem; line-height: 1.22; }
.review-steps p { margin: .7rem 0 0; color: var(--info-muted); font-size: .9rem; line-height: 1.52; }
.review-tip { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; margin-top: 1rem; padding: 1.2rem 1.35rem; border-radius: 18px; color: #fff; background: linear-gradient(110deg, #2d245b, #5166cb 55%, #328db9); }
.review-tip b { color: #a8e2fa; }
.review-tip span { color: rgba(255,255,255,.74); line-height: 1.5; }
.permission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.permission-grid article { min-height: 265px; padding: 1.55rem; border: 1px solid var(--info-line); border-radius: 24px; background: rgba(255,255,255,.76); }
.permission-grid article > span { color: #655ada; font-size: .73rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.permission-grid h3 { margin: 3.2rem 0 .65rem; font-size: 1.45rem; letter-spacing: -.03em; }
.permission-grid p { margin: 0; color: var(--info-muted); line-height: 1.55; }
.review-boundary { display: grid; grid-template-columns: minmax(0, .9fr) minmax(400px, .72fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.review-boundary .info-kicker { color: #8bcff1; }
.review-boundary .info-lead { margin-top: 1.5rem; color: #aaa8b6; }
.boundary-stack { display: grid; gap: .7rem; }
.boundary-stack article { display: grid; gap: .45rem; padding: 1.15rem 1.25rem; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.035); }
.boundary-stack b { color: #93d8f5; }
.boundary-stack span { color: #aaa8b6; line-height: 1.48; }
.harmony-review { display: grid; grid-template-columns: minmax(0, .9fr) minmax(390px, .68fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.harmony-review .info-lead { margin-top: 1.4rem; }
.review-mode-list { display: grid; gap: .7rem; }
.review-mode-list article { display: grid; gap: .35rem; padding: 1.2rem; border: 1px solid var(--info-line); border-radius: 18px; background: #fafafe; }
.review-mode-list b { color: #655ada; }
.review-mode-list span { color: var(--info-muted); line-height: 1.48; }
.review-contact { padding: clamp(4.5rem, 8vw, 7rem) 0; background: linear-gradient(135deg, #f6f3ff, #eefaff); }
.review-contact__inner { display: grid; grid-template-columns: minmax(300px, .6fr) 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.review-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.review-links a { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem; border: 1px solid var(--info-line); border-radius: 18px; color: #34313f; background: rgba(255,255,255,.72); font-weight: 850; text-decoration: none; }
.review-links b { color: #655ada; }
@media (max-width: 1050px) {
  .review-overview__grid, .review-boundary, .harmony-review, .review-contact__inner { grid-template-columns: 1fr; }
  .review-screen { margin-top: 1rem; }
  .review-steps { grid-template-columns: repeat(2, 1fr); }
  .permission-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .review-status { grid-template-columns: repeat(2, 1fr); }
  .review-section-head { grid-template-columns: 1fr; gap: 1rem; }
  .review-steps, .permission-grid, .review-links { grid-template-columns: 1fr; }
  .review-steps li { min-height: 250px; }
  .review-steps div { margin-top: 2.5rem; }
  .review-tip { grid-template-columns: 1fr; }
}

/* Shared mobile typography and spacing for the information pages. */
@media (max-width: 40em) {
  .info-page { --gutter: 1rem; }
  .info-page .site-header .brand { gap: .45rem; }
  .info-page .info-shell { width: calc(100% - 2rem); }
  .info-page .info-hero,
  .info-page .review-overview { min-height: 0; padding-block: 2rem; }
  .info-page .info-hero__copy h1,
  .info-page .review-overview__copy h1 {
    font-family: var(--sans);
    font-size: clamp(2rem, 8.5vw, 2.8rem);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.12;
    margin-bottom: 1.25rem;
  }
  .info-page .info-hero__copy h1 em,
  .info-page .review-overview__copy h1 em { font-style: normal; }
  .info-page .info-section { padding-block: 2.75rem; }
  .info-page .info-lead { font-size: .98rem; line-height: 1.65; }
}