/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * macrostructure: Marquee Hero (device-bleed) · genre: editorial-minimal · tone: calm-premium
 * theme: white paper · serif display (Instrument Serif) + Inter body · accent: brand yellow #FFC53D
 * ref: joi.software — serif headline, generous whitespace, single meaningful accent
 * contrast: pass · states: CTA default/hover/focus/active
 */

/* ───────── Fixel (marka fontu, self-host, variable) ─────────
 * TODO opt: TTF (472k) → woff2 (~200k) fonttools ile küçültülebilir. */
@font-face {
  font-family: "Fixel";
  src: url("assets/fonts/FixelVariable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ───────── Tokens ───────── */
:root {
  --color-accent:    #FFC53D;               /* marka sarısı — tek aksan */
  --color-accent-deep:#e9a91f;              /* sarı koyu (kontrast detay) */

  --color-ink:     oklch(0.20 0.004 60);    /* #161616 yakını */
  --color-ink-2:   oklch(0.50 0.006 60);    /* ikincil gri */
  --color-ink-3:   oklch(0.62 0.006 60);    /* zayıf gri */
  --color-paper:   #ffffff;
  --color-surface: #ffffff;
  --color-hairline:oklch(0.92 0.002 60);    /* #e9e9e9 ince çizgi */
  --color-focus:   oklch(0.20 0.004 60);

  --color-btn:      #161616;                /* siyah buton */
  --color-btn-press:#000000;

  --font-display: "Fixel", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Fixel", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-display: clamp(1.95rem, 8.5vw, 2.6rem);

  --radius: 20px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  --pad: 24px;
  --shadow-phone: 0 36px 70px -30px rgba(20,20,20,0.28);
  --shadow-cta:   0 8px 22px rgba(20,20,20,0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ───────── Sayfa kabı ───────── */
.page {
  position: relative;
  min-height: 100svh;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--pad);
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;   /* tüm grup (ikon→metin→butonlar) dikey ortalı */
  text-align: center;
  overflow-x: clip;
}

/* ───────── Hero — app icon odaklı ───────── */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* App ikonu = hero'nun odağı; pattern halkası tam etrafında */
.appicon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
}
.appicon-wrap::before {
  content: "";
  position: absolute;
  width: 264px;
  height: 264px;
  background: url("assets/pattern.svg") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.appicon {
  position: relative;
  width: 112px;
  height: 112px;
  display: block;
  border-radius: 24%;                          /* iOS squircle */
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.05),
              0 16px 34px -14px rgba(20, 20, 20, 0.28);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
}
.hero__accent {
  /* sarı marker vurgu */
  background: linear-gradient(transparent 70%, var(--color-accent) 0);
  padding: 0 0.04em;
}
.hero__sub {
  margin: 16px auto 0;
  max-width: 32ch;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--color-ink-2);
}

/* ── İnce güven satırı ── */
.trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 13px;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--color-ink-3);
}
.trust li { display: inline-flex; align-items: center; gap: 5px; }
.trust li + li::before {
  content: "";
  width: 3px; height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--color-hairline);
}
.trust b { font-weight: 600; color: var(--color-ink); }
.star { color: var(--color-accent-deep); font-size: 0.95em; }

/* ───────── 3) Marka pattern — boş alt alanda soluk doku ───────── */
.pattern-mark {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  width: min(88vw, 360px);
  aspect-ratio: 1;
  background: url("assets/pattern.svg") center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* ───────── 4) Sticky CTA ───────── */
.cta {
  width: 100%;
  max-width: 440px;
  margin: 34px auto 0;   /* metnin hemen altında, akış içinde */
}
.cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  height: 58px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  background: var(--color-btn);
  border-radius: 15px;
  box-shadow: var(--shadow-cta);
  transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out), background 0.14s var(--ease-out);
}
.cta__btn .cta__arrow { transition: transform 0.18s var(--ease-out); }
.cta__btn:hover { background: var(--color-btn-press); }
.cta__btn:hover .cta__arrow { transform: translateX(3px); }
.cta__btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.cta__btn:active { transform: translateY(1px) scale(0.99); box-shadow: 0 5px 13px rgba(20,20,20,0.2); }

.cta__stores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.store { display: inline-flex; opacity: 1; transition: transform 0.14s var(--ease-out); }
.store:active { transform: scale(0.97); }
.store img { height: 40px; width: auto; display: block; }

/* ───────── Giriş — sade fade-up ───────── */
@media (prefers-reduced-motion: no-preference) {
  .brandbar, .hero, .stage { animation: rise var(--dur) var(--ease-out) both; }
  .hero { animation-delay: 0.05s; }
  .stage { animation-delay: 0.12s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ───────── Desktop ───────── */
@media (min-width: 481px) {
  .page { border-inline: 1px solid var(--color-hairline); }
}

@media (prefers-reduced-motion: reduce) {
  .cta__btn, .cta__arrow, .store { transition: none; }
}