/* Hallmark · pre-emit critique: P5 H4 E4 S4 R5 V5
 * macrostructure: Marquee Hero · genre: playful · tone: energetic-warm
 * theme: Coral (light) · paper: warm cream · accent hue: coral ~27 (warm)
 * differs from prev (cyan/light/geometric) on: accent hue
 * contrast: pass · states: CTA default/hover/focus/active
 */

/* ───────── Tokens (OKLCH · Coral light) ───────── */
:root {
  --color-accent:        oklch(0.70 0.17 27);    /* coral */
  --color-accent-strong: oklch(0.61 0.185 29);   /* deep coral */
  --color-accent-ink:    oklch(0.48 0.13 30);    /* koyu coral metin */
  --color-accent-wash:   oklch(0.95 0.04 38);    /* şeftali zemin */
  --color-gold:          oklch(0.80 0.135 72);   /* sıcak bal (ödül) */
  --color-gold-soft:     oklch(0.93 0.05 72);

  --color-ink:     oklch(0.25 0.012 40);    /* sıcak neredeyse-siyah */
  --color-ink-2:   oklch(0.52 0.016 40);
  --color-paper:   oklch(0.985 0.011 70);   /* sıcak krem */
  --color-surface: oklch(1 0 0);
  --color-hairline:oklch(0.90 0.012 60);    /* sıcak hairline */
  --color-focus:   oklch(0.61 0.185 29);

  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 4pt scale */
  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  --text-display: clamp(2.1rem, 9.5vw, 3.1rem);
  --text-lg: 1.0625rem;

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

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.5s;

  --pad: 22px;
  --shadow-soft: 0 10px 30px oklch(0.24 0.006 250 / 0.10);
  --shadow-cta:  0 10px 26px oklch(0.61 0.185 29 / 0.34);
}

* { 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.45;
  -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(178px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: clip;
}

/* Arka plan ışıması — enerji + derinlik */
.aura {
  position: absolute;
  top: -160px; left: 50%;
  width: 620px; height: 620px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, var(--color-accent-wash), transparent 70%),
    radial-gradient(closest-side, var(--color-gold-soft), transparent 72%);
  background-position: center, 64% 30%;
  background-size: 100% 100%, 58% 58%;
  background-repeat: no-repeat;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.page > *:not(.aura):not(.cta) { position: relative; z-index: 1; }

/* ───────── 1) Marka barı ───────── */
.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 4px;
}
.brandbar__logo { height: 32px; width: auto; display: block; }
.brandbar__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
}
.star { color: var(--color-gold); }

/* ───────── 2) Hero ───────── */
.hero { text-align: center; padding-top: 18px; }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.hero__accent {
  color: var(--color-accent-strong);
  /* tonal coral altı-vurgu */
  background: linear-gradient(transparent 62%, var(--color-accent-wash) 0);
  padding: 0 2px;
}
.hero__sub {
  margin: 14px auto 0;
  max-width: 32ch;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-ink-2);
}

/* ───────── 3) Ödül sahnesi (phone + chips) ───────── */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 0 10px;
}
.phone {
  position: relative;
  border-radius: 34px;
  padding: 7px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-soft);
  transform: rotate(-4deg);
}
.phone__screen {
  display: block;
  width: clamp(208px, 60vw, 264px);
  height: auto;
  border-radius: 27px;
}

.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  will-change: transform;
}
.chip--gb {
  top: 16%; right: 2%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 9px 14px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 16px;
  animation: bob 4.2s var(--ease-in-out) infinite;
}
.chip--gb b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.chip--gb small { font-size: 0.7rem; font-weight: 600; opacity: 0.92; }
.chip--coin {
  bottom: 16%; left: 1%;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: var(--color-gold-soft);
  border: 1px solid var(--color-gold);
  animation: bob 3.4s var(--ease-in-out) infinite 0.4s;
}
.chip--wifi {
  top: 30%; left: -2%;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  color: var(--color-accent-strong);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  animation: bob 3.8s var(--ease-in-out) infinite 0.9s;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ───────── 4) Stat trio ───────── */
.stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 4px auto 0;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stat__num {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.stat__label { font-size: 0.72rem; font-weight: 500; color: var(--color-ink-2); white-space: nowrap; }
.stat__div { width: 1px; align-self: stretch; background: var(--color-hairline); }

/* ───────── 5) Sticky CTA ───────── */
.cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--color-paper) 70%, transparent);
}
.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-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--color-accent);
  border-radius: 17px;
  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-accent-strong); }
.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 14px oklch(0.61 0.185 29 / 0.3); }

.cta__stores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 11px;
}
.store { display: inline-flex; opacity: 0.92; transition: opacity 0.14s var(--ease-out); }
.store:hover { opacity: 1; }
.store:active { opacity: 0.7; }
.store img { height: 34px; width: auto; display: block; }

/* ───────── Giriş animasyonu (staggered fade-up) ───────── */
.reveal { opacity: 0; transform: translateY(14px); animation: rise var(--dur) var(--ease-out) forwards; animation-delay: calc(var(--i) * 0.09s + 0.05s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ───────── Desktop dokunuşu ───────── */
@media (min-width: 481px) {
  .page { box-shadow: 0 0 0 1px var(--color-hairline); }
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .chip { animation: none !important; }
  .cta__btn, .cta__arrow, .store { transition: none; }
}