/* ==========================================================================
   efsanenine.com — v2, the one-screen poster (the partner's mockup, 02.09.2026).
   Cream paper, teal + gold + red — the grandmother's palette, NOT the aivinir brandbook
   (v1 wore the dark aivinir tokens; that page is frozen in versions/ver1).
   System fonts only: serif for the headline/badge, sans for everything else.

   THE POSTER UNIT. Every size below is `calc(N * var(--k))`: N hundredths of the poster's
   width, so 1k ≈ 3.9px on a 390-px phone and the layout is the same drawing at any width.
   `--k` is capped by the viewport HEIGHT too (svh = the viewport with the browser's bars
   shown) so the whole poster — badge to the «Başlat» hint — fits one screen and the button
   is never below the fold: the owner's iPhone 15 inside Yandex Browser shows ~650 CSS px of
   page, and on the first build the button was barely peeking in. When height is the limit
   the poster shrinks uniformly, like an image with object-fit: contain, and the paper shows
   at the sides. A floor keeps the tile text legible on the smallest phones (there the page
   may scroll a little); a ceiling stops it growing past a phone's width on desktop, where
   the phone-width column is simply centred on the paper.
   Two root documents share this file: index.html (.page) and poster.html (.page--poster);
   each declares its own --fit = 100svh / (its natural height in k).
   ========================================================================== */

:root {
  --paper: #FBF3E1;
  --paper-2: #F3E4C4;
  --paper-card: #FFF9EC;
  --ink: #1F2A33;
  --ink-soft: #2F5D5C;
  --teal: #137A78;
  --teal-deep: #0C5A5A;
  --teal-soft: #8FCFCD;
  --teal-bright: #3DB2C2;
  --gold: #D8B45A;
  --gold-deep: #B58F36;
  --gold-pale: #E6D3A6;
  --red: #D8323A;
  --red-deep: #A61E27;
  --crimson: #D3345A;
  --ig: #D6336C;
  --tt: #0F7C86;
  --tg: #29A9EA;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Noto Serif", "DejaVu Serif", serif;
  --shadow-card: 0 8px 20px rgba(80, 55, 20, 0.12);
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Author display rules (flex/grid on blocks) would silently defeat the [hidden] attribute
   the JS toggles — author CSS always beats the UA's [hidden]{display:none}. */
[hidden] { display: none !important; }
/* NO scroll-behavior:smooth — it makes synchronous geometry reads in tests lie (v1 lesson). */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.35;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  /* paper: a warm sheet, lighter in the middle, with faint gold curls in the corners */
  background:
    radial-gradient(60% 40% at 88% 4%, rgba(216, 180, 90, 0.16), transparent 70%),
    radial-gradient(55% 35% at 6% 96%, rgba(216, 180, 90, 0.14), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #FFFBF1 0%, var(--paper) 55%, var(--paper-2) 100%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
svg { display: block; }

.page {
  /* --fit = 100svh / natural height in k (measured 02.09.2026: index.html ≈ 180k, poster.html ≈ 177k). Fallback vh for
     browsers without svh; @supports below upgrades it. */
  --fit: 0.55vh;
  --k: max(min(1vw, 4.8px, var(--fit)), 2.9px);
  width: calc(100 * var(--k));
  max-width: 100%;
  margin: 0 auto;
  padding: calc(1.5 * var(--k)) calc(3 * var(--k)) calc(4 * var(--k));
  text-align: center;
  font-size: calc(4.1 * var(--k));
}
.page--poster { --fit: 0.55vh; }
@supports (height: 1svh) {
  .page { --fit: 0.55svh; }
  .page--poster { --fit: 0.55svh; }
}

/* ------------------------------ badge ------------------------------ */
.top { position: relative; padding-top: calc(2 * var(--k)); }
.badge {
  position: relative;
  display: inline-block;
  padding: calc(1.8 * var(--k)) calc(7.7 * var(--k)) calc(1.5 * var(--k));
  color: #FFF8E7;
  background: linear-gradient(180deg, #1F8E8B 0%, #137A78 55%, #0F6968 100%);
  border: calc(0.7 * var(--k)) solid var(--gold);
  border-radius: calc(6.7 * var(--k)) / calc(8.2 * var(--k));
  box-shadow: 0 calc(2 * var(--k)) calc(5 * var(--k)) rgba(12, 90, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(8.2 * var(--k));
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 calc(0.5 * var(--k)) 0 rgba(0, 0, 0, 0.28);
}
.badge::before, .badge::after {
  content: "✦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.42em;
  color: var(--gold);
  text-shadow: none;
}
.badge::before { left: calc(2.8 * var(--k)); }
.badge::after { right: calc(2.8 * var(--k)); }
.badge__pearl {
  position: absolute;
  top: calc(-3.6 * var(--k));
  left: 50%;
  width: calc(6.2 * var(--k));
  height: calc(6.2 * var(--k));
  transform: translateX(-50%);
  border-radius: 50%;
  border: calc(0.7 * var(--k)) solid var(--gold);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F1ECFF 40%, #C9C2D8 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ------------------------------ tagline ------------------------------ */
.tagline {
  margin: calc(1.8 * var(--k)) 0 0;
  color: #1B4E63;
  font-weight: 600;
  font-size: calc(4 * var(--k));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* the two little "wing" strokes of the mockup */
.tagline::before, .tagline::after {
  content: "";
  flex: none;
  width: calc(3.6 * var(--k));
  height: calc(2.6 * var(--k));
  margin: 0 calc(2.6 * var(--k));
  border-top: calc(0.5 * var(--k)) solid var(--teal-bright);
  border-bottom: calc(0.5 * var(--k)) solid var(--teal-bright);
  transform: skewX(-14deg);
}

/* ------------------------------ divider ------------------------------ */
.divider {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--k));
  margin: calc(0.8 * var(--k)) 0;
  color: var(--gold);
  font-size: calc(3 * var(--k));
  line-height: 1;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: calc(0.5 * var(--k));
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider--tight { margin: calc(0.5 * var(--k)) 0 calc(1.3 * var(--k)); }

/* ------------------------------- hero ------------------------------- */
/* Two columns: the figure (left) and the copy (right), both starting at the TOP of the row
   (hair and headline line up, as on the poster). The figure bleeds a little past the left
   edge and runs on below the row (negative bottom margin) under the tiles, which sit above
   it in z-order; a mask fades it out before the tiles' top edge so nothing floral shows in
   the gaps between them. The <img> carries width/height, so the row's height is known
   before the image loads — CLS 0. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: calc(40 * var(--k)) minmax(0, 1fr);
  column-gap: calc(0.5 * var(--k));
  align-items: start;
  margin-top: calc(0.5 * var(--k));
}
.hero__figure {
  position: relative;
  z-index: 0;
  margin: 0 0 calc(-22 * var(--k)) calc(-5 * var(--k));
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 79%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 79%);
}
.hero__nine {
  width: calc(47 * var(--k));
  max-width: none;
  height: auto;
  filter: drop-shadow(0 calc(2.5 * var(--k)) calc(3.6 * var(--k)) rgba(70, 45, 15, 0.18));
}
.hero__copy {
  position: relative;
  z-index: 1;
  padding: 0 0 calc(1.5 * var(--k));
}

.headline {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1;
  color: var(--teal-deep);
  text-shadow: 0 1px 0 #FFFDF7;
}
.headline__line {
  display: block;
  font-size: calc(7.2 * var(--k));
}
.headline__line--num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.16em;
  margin: 0.03em 0;
}
.headline__num {
  font-weight: 700;
  font-size: calc(13.2 * var(--k));
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--crimson);
  text-shadow: 0 calc(0.5 * var(--k)) 0 #FFFDF7, 0 calc(1.5 * var(--k)) calc(3.6 * var(--k)) rgba(211, 52, 90, 0.22);
}
.headline__word {
  font-size: calc(6 * var(--k));
  color: var(--crimson);
}

/* ------------------------------- stats ------------------------------- */
.stats {
  position: relative;
  margin: calc(0.5 * var(--k)) 0 0;
  padding: calc(1.3 * var(--k)) calc(2 * var(--k)) calc(5 * var(--k));
  text-align: left;
  background: linear-gradient(180deg, #FFFBF0 0%, #FFF6E3 100%);
  border: calc(0.5 * var(--k)) solid var(--teal-soft);
  border-radius: calc(4 * var(--k));
  box-shadow: var(--shadow-card);
}
.stats__row {
  display: grid;
  grid-template-columns: calc(9 * var(--k)) minmax(0, 1fr) calc(7 * var(--k));
  gap: calc(1.8 * var(--k));
  align-items: center;
  padding: calc(0.9 * var(--k)) 0;
}
.stats__icon {
  width: calc(9 * var(--k));
  height: calc(9 * var(--k));
  border-radius: calc(2.5 * var(--k));
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}
.stats__icon svg { width: calc(5.6 * var(--k)); height: calc(5.6 * var(--k)); }
.stats__icon--ig { background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 55%, #6228D7 100%); }
.stats__icon--tt { background: #111; }
.stats__body { min-width: 0; }
.stats__name {
  font-weight: 800;
  font-size: calc(4.2 * var(--k));
  line-height: 1.1;
}
.stats__name--ig { color: var(--ig); }
.stats__name--tt { color: #111; }
.stats__nums {
  display: flex;
  align-items: baseline;
  gap: calc(1.3 * var(--k));
  line-height: 1.05;
  margin-top: calc(0.3 * var(--k));
  white-space: nowrap;
}
.stats__big { font-weight: 900; font-size: calc(5.8 * var(--k)); }
.stats__mid { font-weight: 900; font-size: calc(4.5 * var(--k)); }
.stats__dot { font-weight: 900; color: var(--ink-soft); }
.stats__nums--ig b { color: var(--ig); }
.stats__nums--tt b { color: var(--tt); }
.stats__label { font-weight: 600; font-size: calc(3.1 * var(--k)); color: var(--ink-soft); }
.stats__medal {
  width: calc(7 * var(--k));
  height: calc(7 * var(--k));
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: calc(0.5 * var(--k)) solid #FFFDF7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.stats__medal svg { width: calc(4 * var(--k)); height: calc(4 * var(--k)); }
.stats__medal--gold { background: radial-gradient(circle at 35% 30%, #FFEBB0, #D9AE4C 60%, #B3842A); color: #7A5A16; }
.stats__medal--teal { background: radial-gradient(circle at 35% 30%, #C4F0F1, #3FB3B5 60%, #1B7F81); color: #FFFFFF; }
.stats__sep { border: 0; border-top: 1px dashed #C9B896; margin: calc(0.3 * var(--k)) 0; }

/* the red banner under the card, the mockup's "28 GÜNDE SIFIRDAN" — always ONE line */
.ribbon {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: calc(-3.8 * var(--k));
  padding: calc(1.3 * var(--k)) calc(1.5 * var(--k));
  text-align: center;
  white-space: nowrap;
  color: #FFFFFF;
  background: linear-gradient(180deg, #E4404A 0%, #C41E2A 60%, #A81722 100%);
  border: calc(0.5 * var(--k)) solid var(--gold);
  border-radius: calc(1.8 * var(--k));
  box-shadow: 0 calc(1.5 * var(--k)) calc(3.6 * var(--k)) rgba(160, 20, 30, 0.32);
  font-weight: 900;
  font-size: calc(3.8 * var(--k));
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
/* folded ribbon ends */
.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  top: calc(1.5 * var(--k));
  bottom: calc(-1.5 * var(--k));
  width: calc(3 * var(--k));
  background: #A81722;
  z-index: -1;
}
.ribbon::before { left: calc(-2.3 * var(--k)); transform: skewY(18deg); border-radius: 3px 0 0 3px; }
.ribbon::after { right: calc(-2.3 * var(--k)); transform: skewY(-18deg); border-radius: 0 3px 3px 0; }

/* ------------------------------- tiles ------------------------------- */
.tiles {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: calc(6 * var(--k)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(2 * var(--k));
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1.3 * var(--k));
  padding: calc(1.8 * var(--k)) calc(1.3 * var(--k)) calc(1.5 * var(--k));
  text-align: center;
  background: linear-gradient(180deg, #FFFCF3 0%, #FFF5E1 100%);
  border: calc(0.5 * var(--k)) solid var(--gold-pale);
  border-radius: calc(4 * var(--k));
  box-shadow: var(--shadow-card);
}
.tile__icon {
  width: calc(9.5 * var(--k));
  height: calc(9.5 * var(--k));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #F3D98A;
  background: radial-gradient(circle at 35% 30%, #2A9C99, #137A78 60%, #0C5A5A);
  border: calc(0.5 * var(--k)) solid var(--gold);
  box-shadow: 0 calc(1 * var(--k)) calc(2.5 * var(--k)) rgba(12, 90, 90, 0.3);
}
.tile__icon svg { width: calc(5.4 * var(--k)); height: calc(5.4 * var(--k)); }
.tile__text {
  font-weight: 700;
  font-size: calc(3.6 * var(--k));
  line-height: 1.18;
  color: #164B5E;
  min-height: 3.2em;
  display: flex;
  align-items: center;
}
.tile__heart { color: var(--gold); font-size: calc(2.8 * var(--k)); line-height: 1; }

/* -------------------------------- CTA -------------------------------- */
.cta { margin: calc(2.4 * var(--k)) 0 0; }
.btn-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(2.6 * var(--k));
  width: 100%;
  min-height: calc(17 * var(--k));
  padding: calc(1.8 * var(--k)) calc(3 * var(--k));
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient(180deg, #EA4B55 0%, #D22A34 55%, #B11B25 100%);
  border: calc(0.75 * var(--k)) solid #E9CD7C;
  border-radius: calc(6 * var(--k));
  box-shadow: 0 calc(3 * var(--k)) calc(6.5 * var(--k)) rgba(178, 27, 37, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  will-change: transform;
  /* the partner's «лёгкое движение»: the button breathes… */
  animation: cta-breathe 3.2s ease-in-out infinite;
}
/* …and a sheen sweeps over it every few seconds (transform only — compositor-friendly) */
.btn-cta::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -45%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
  transform: skewX(-18deg) translateX(0);
  animation: cta-sheen 5s ease-in-out infinite;
}
.btn-cta__icon {
  flex: none;
  width: calc(12 * var(--k));
  height: calc(12 * var(--k));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  background: radial-gradient(circle at 35% 30%, #5EC6F4, var(--tg) 60%, #1B8FD0);
  border: calc(0.5 * var(--k)) solid #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.btn-cta__icon svg { width: calc(6.4 * var(--k)); height: calc(6.4 * var(--k)); margin-left: calc(-0.5 * var(--k)); }
.btn-cta__label {
  flex: 1;
  text-align: center;
  font-weight: 900;
  font-size: calc(8.2 * var(--k));
  letter-spacing: 0.01em;
  line-height: 1;
  text-shadow: 0 calc(0.5 * var(--k)) 0 rgba(0, 0, 0, 0.28);
}
.btn-cta__chevron { flex: none; width: calc(5 * var(--k)); height: calc(5 * var(--k)); color: #FFFFFF; }
.btn-cta__chevron svg { width: calc(5 * var(--k)); height: calc(5 * var(--k)); }
/* press state via filter, NOT transform — the breathing animation owns transform */
.btn-cta:active { filter: brightness(0.94); }

@keyframes cta-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes cta-sheen {
  0%, 70% { transform: skewX(-18deg) translateX(0); }
  100% { transform: skewX(-18deg) translateX(440%); }
}
/* the visitor asked for less motion — then there is none */
@media (prefers-reduced-motion: reduce) {
  .btn-cta, .btn-cta::after { animation: none; }
}
/* a hidden tab burns no frames (app.js toggles the class on visibilitychange) */
html.is-hidden .btn-cta, html.is-hidden .btn-cta::after { animation-play-state: paused; }

.cta__hint {
  margin: calc(2 * var(--k)) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.5 * var(--k));
  font-weight: 700;
  font-size: calc(4.2 * var(--k));
  color: var(--ink-soft);
}
.cta__heart { width: calc(3.8 * var(--k)); height: calc(3.8 * var(--k)); color: #2FA7A3; }
.cta__heart svg { width: calc(3.8 * var(--k)); height: calc(3.8 * var(--k)); }
.cta__start {
  margin: calc(0.5 * var(--k)) 0 0;
  font-size: calc(3.5 * var(--k));
  color: #4C6B6A;
}

/* ------------------------ poster variant (poster.html) ------------------------ */
/* The partner's render as ONE image, cut just above its own button; the button below it is
   the real .btn-cta. The wrapper carries the picture's aspect ratio (inline, next to the
   file it belongs to), so the box — and the tap zones inside it — is final before the bytes
   arrive and stays put whatever file loads; the image's rounded corners are baked in. */
.poster-wrap {
  position: relative;
  width: 100%;
}
.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(4 * var(--k));
}
/* Tap zones over the Instagram / TikTok rows (poster.html positions them in % of the
   picture). Invisible at rest; a faint teal wash while pressed says «this was a button». */
.poster__hot {
  position: absolute;
  display: block;
  border-radius: calc(3 * var(--k));
  -webkit-tap-highlight-color: rgba(19, 122, 120, 0.18);
  cursor: pointer;
}
.poster__hot:active { background: rgba(19, 122, 120, 0.12); }
.page--poster .cta { margin-top: calc(1.5 * var(--k)); }

/* ------------------- "didn't open — copy the link" block ------------------- */
.fallback {
  margin: calc(5.6 * var(--k)) 0 0;
  padding: calc(4 * var(--k));
  text-align: left;
  color: var(--ink);
  background: var(--paper-card);
  border: 1px solid var(--gold-pale);
  border-radius: calc(4 * var(--k));
  box-shadow: var(--shadow-card);
}
.fallback.hide { display: none; }
.fallback__title { margin: 0 0 calc(2 * var(--k)); font-size: calc(4.3 * var(--k)); }
.fallback p { margin: calc(1.5 * var(--k)) 0; font-size: calc(3.9 * var(--k)); }
.fallback__input {
  width: 100%;
  padding: calc(2.6 * var(--k));
  margin: calc(2 * var(--k)) 0;
  /* 16px EXACTLY: iOS Safari auto-zooms the page when a focused field is smaller. */
  font-size: 16px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid #D9C79A;
  border-radius: calc(2.6 * var(--k));
}
.btn-copy {
  display: block;
  width: 100%;
  padding: 0.8rem 1.5rem;
  color: #FFFFFF;
  background: var(--teal);
  border: 0;
  border-radius: calc(3 * var(--k));
  font-weight: 700;
  font-size: 1rem;
}
.btn-copy:hover { filter: brightness(1.07); }