/* ============================================================
   SportsMatched tanıtım sayfası
   ------------------------------------------------------------
   Renkler ve tipografi uygulamanın `src/constants/theme.ts`
   dosyasından birebir alındı. Orada bir jeton değişirse buradaki
   karşılığını da güncelle — iki dosya elle senkron tutuluyor,
   ortak bir kaynak yok (site derlenmiyor, o yüzden import edemiyor).
   ============================================================ */

/* Yazı tipi kendi sunucumuzdan yükleniyor (Google Fonts değil): ziyaretçinin
   adresi üçüncü bir tarafa gitmiyor. Plus Jakarta Sans, SIL Açık Yazı Tipi
   Lisansı (fonts/OFL-PlusJakartaSans.txt). Değişken yazı tipi: tek dosyada
   200–800 arası her kalınlık. 2026-10-20: kurucu isteğiyle geometrik,
   spor markası duruşunda bir tipe geçildi (uygulama hâlâ Archivo). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url('fonts/PlusJakartaSans.ttf') format('truetype');
}

:root {
  /* theme.ts → Palette */
  --canvas: #060a14;
  --surface: #0d1424;
  --surface-raised: #16203A;
  --line: rgba(150,180,255,0.12);
  --line-strong: rgba(150,180,255,0.22);

  --ink: #f3f6fd;
  --ink-muted: #9aa7c4;
  --ink-faint: #8793b0;

  --flame: #4f94ff;
  --flame-soft: rgba(79,148,255, 0.14);
  --pace: #12b981;
  --danger: #ff5a5f;
  --on-accent: #060a14;

  /* theme.ts → FontFamily
     Archivo Black condensed'e göre çok daha geniş kuruyor: buradaki başlık
     puntoları da uygulamadakiyle aynı oranda küçültüldü. */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* theme.ts → Palette (cam yüzeyler ve huzme) */
  --glass: rgba(6,10,20, 0.7);
  --glass-line: rgba(255, 255, 255, 0.07);
  --beam: #dcebff;

  /* theme.ts → Radius */
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Cam hap: referans tasarımın imzası. Üç katman — üstte ışık,
     altta gölge, içeride koyu bir iç gölge. */
  --pill-bg: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.015) 100%
  );
  --pill-bg-hover: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  --pill-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 -1px 2px rgba(0, 0, 0, 0.55);
  --pill-shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.7),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* `hidden` niteliği tarayıcıda `display: none` demek, ama bu sayfadaki
   `display: flex` kuralları onu eziyor — nitelik duruyor, eleman görünmeye
   devam ediyor. Sözleşme satırı tam olarak böyle sızmıştı: hem gizli
   sayılıyor hem ekranda duruyordu. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /* Üst bar sabit; bölüme atlarken başlık barın altında kalmasın. */
  scroll-padding-top: 96px;
  /* `body`'ye vermek yetmiyor: bazı mobil tarayıcılarda görüntü alanı
     yine de yana kayabiliyor. Eğik şerit bilerek ekrandan geniş, o
     taşmanın kaydırma çubuğu doğurmaması gerekiyor. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Dev araçlarının değil, tasarımın kararı: yatay kaydırma yok.
     Döndürülmüş şerit ve dev yazı taşıyor, taşması da gerekiyor. */
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--flame);
  color: var(--on-accent);
}

/* Klavye odağı her yerde görünür olmalı; fare tıklamasında değil. */
:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ekran dışına `left: -9999px` ile atılmıyor: o yöntem sayfanın
   ölçülen genişliğini büyütüyor ve yatay taşmaya sayılıyor. Kırpma
   ekran okuyucudan gizlemeden yer kaplamayı bitiriyor. */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--flame);
  color: var(--on-accent);
  font-weight: 500;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.skip-link:focus {
  clip-path: none;
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------------------------------------------
   ORTAK PARÇALAR
   ------------------------------------------------------------ */

.overline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-muted);
}

.accent {
  color: var(--flame);
}

.glass {
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 44px: dokunma hedefi alt sınırı. Küçük düğme büyük hata demek. */
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, color 0.2s ease;
}

.btn-lg {
  min-height: 56px;
  padding: 0 32px;
  font-size: 17px;
}

.btn-primary {
  background: var(--flame);
  color: var(--on-accent);
}
.btn-primary:hover {
  background: #6ea6ff;
}

.btn-ghost {
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}

.btn-glass {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(150, 180, 255, 0.4);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
a.pill:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}
.pill-static {
  cursor: default;
  font-size: 13px;
}

/* ------------------------------------------------------------
   ARKA PLAN KATMANLARI
   ------------------------------------------------------------ */

/* Nefes alan turuncu ışıma. Referanstaki "aurora"nın marka rengiyle
   yeniden yazılmış hali — iki renk değil tek vurgu, çünkü tasarım
   sistemi tek vurgu rengi üzerine kurulu. */
.aurora {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 80vw;
  height: 60vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(79,148,255, 0.22) 0%,
    rgba(79,148,255, 0.08) 40%,
    transparent 70%
  );
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: breathe 8s ease-in-out infinite alternate;
}

@keyframes breathe {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  to {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

.grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 60px 60px;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 25%,
    black 75%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 25%,
    black 75%,
    transparent
  );
}

/* ------------------------------------------------------------
   ÜST BAR
   ------------------------------------------------------------ */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  transition: background 0.3s ease, border-color 0.3s ease,
    backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}

/* Sayfa kayınca bar zemin kazanıyor — main.js `is-stuck` ekliyor.
   Başta şeffaf: hero'nun üstünde bir çubuk, tasarımı ikiye böler. */
.topbar.is-stuck {
  background: rgba(6,10,20, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

/* Perde açılırken bar çekiliyor. Sabit bir menü çubuğu "Hazır mısın?"
   anının tam üstünde durursa sinematik biten bir sayfa değil, üstüne
   menü yapıştırılmış bir sayfa olur. Kaybolan düğmelerin ikisi de
   perdenin içinde zaten var, yani kimse bir şey kaybetmiyor. */
.topbar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.wordmark-mark {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--flame);
  box-shadow: 0 0 18px rgba(79,148,255, 0.7);
}

.wordmark-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.wordmark-accent {
  color: var(--flame);
}

.topbar-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
}
.topbar-nav a {
  transition: color 0.2s ease;
}
.topbar-nav a:hover {
  color: var(--ink);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 24px;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 100px;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero-title {
  /* clamp: telefonda okunur, geniş ekranda afiş gibi. */
  font-size: clamp(30px, 4.4vw, 62px);
}

.hero-sub {
  max-width: 620px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-muted);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
}

.hero-note {
  font-size: 13px;
  color: var(--ink-faint);
}

.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.scroll-hint-line {
  display: block;
  width: 1px;
  height: 72px;
  background: linear-gradient(to bottom, var(--ink-faint), transparent);
}

/* ------------------------------------------------------------
   KAYAN ŞERİT
   ------------------------------------------------------------ */

/* Düz, simetrik bant (2026-10-20: eğim, bulanıklık ve gölge kaldırıldı).
   Kenarlarda yumuşak solma: yazılar kesik kesik girip çıkmaz. Ayraçlar
   tek renk, eşit aralıklı küçük kareler (girişteki özet satırıyla aynı dil). */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-marquee 45s linear infinite;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.marquee-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--flame);
}

@keyframes scroll-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* Şerit iki özdeş kopyadan oluşuyor; yarısı kadar kayınca
       başa dönüş görünmez oluyor. */
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------
   BÖLÜMLER
   ------------------------------------------------------------ */

.section {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 120px 24px;
}

.section-head {
  max-width: 680px;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-title {
  font-size: clamp(28px, 3.8vw, 46px);
}

.section-sub {
  color: var(--ink-muted);
  font-size: 17px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.step {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--flame);
  opacity: 0.85;
}

.step h3,
.card h3 {
  font-size: 24px;
}

.step p,
.card p {
  color: var(--ink-muted);
  font-size: 15px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  padding: 28px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card:hover,
.step:hover,
.sport:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--pill-shadow-hover);
}

.sports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.sport {
  padding: 40px 28px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sport-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}

.sport-meta {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------
   SİNEMATİK ALT BÖLÜM
   ------------------------------------------------------------ */

/* 2026-10-19: perde etkisi (ekrana sabit, 100svh) kaldırıldı. Sütunlu alt
   bilgi ekrana sığmıyor, yasal satırlar (5651/6563) kesiliyordu; alt bilgi
   artık normal akışta, içeriği kadar uzar. */
.footer-curtain {
  position: relative;
  width: 100%;
}

.footer {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--canvas);
}

.footer-aurora {
  top: 55%;
}

.giant-text {
  position: absolute;
  bottom: -3vh;
  /* Ortalama `left: 50% + translateX(-50%)` ile YAPILMIYOR, bilerek.
     GSAP bu elemanın `transform`'unu canlandırıyor ve yüzdeyi okuduğu
     andaki genişliğe göre piksele çeviriyor; eleman büyürken o piksel
     yanlış kalıyor ve yazı sola kayıyor. Bir kez yaşandı. Transform'a
     hiç dokunmayan bir ortalama bu sınıf hatayı tamamen bitiriyor. */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 0;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 700;
  /* 19vw "SPORTMATCH" (10 harf) için ayarlıydı; "SPORTSMATCHED" 13 harf,
     aynı genişliğe oranla küçültüldü. Ad değişirse bunu yeniden ölç. */
  font-size: 7.6vw;
  line-height: 0.75;
  /* İçi boş, yalnızca ince bir kontur ve yukarıdan aşağı sönen bir
     dolgu. Dolu yazılsaydı içeriği ezerdi. */
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 60%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.footer-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 100px 24px 0;
  text-align: center;
}

.footer-title {
  font-size: clamp(40px, 7.4vw, 96px);
  color: var(--ink);
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.footer-note,
.footer-legal-missing {
  font-size: 13px;
  color: var(--ink-faint);
}

/* Sütunlu alt bilgi: solda marka, sağda Ürün ve Destek. */
.footer-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  width: min(1120px, 100%);
  margin: 96px auto 0;
  padding: 48px 24px 32px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.footer-about {
  max-width: 42ch;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-icon:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}
.footer-icon svg {
  width: 20px;
  height: 20px;
}
.footer-col-title {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--ink);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-col a,
.footer-col .copy-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}
.footer-col a:hover,
.footer-col .copy-btn:hover {
  color: var(--ink);
}
.footer-legal li:has(> [hidden]) {
  display: none;
}
.footer-grid + .footer-disclaimer {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin: 0 auto 24px;
  padding: 0 24px;
  max-width: none;
}
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 64px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Çerez bilgisi: altta, ortada; düz yüzey, tek düğme. */
.cookie-note {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(760px, calc(100% - 32px));
  padding: 16px 16px 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.cookie-note[hidden] {
  display: none;
}
.cookie-note-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--flame);
}
.cookie-note-text {
  flex: 1;
}
.cookie-note-title {
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--ink);
}
.cookie-note a {
  color: var(--flame);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-note-ok {
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .cookie-note {
    flex-wrap: wrap;
  }
  .cookie-note-icon {
    display: none;
  }
  .cookie-note-ok {
    width: 100%;
  }
}

/* Tanıtıcı bilgi satırı — alt bilginin hemen üstünde, telif satırından ayrı.
   Sessiz ama gizli değil: yasal bir zorunluluk, süs değil. */
.footer-operator {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 24px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-faint);
}

.footer-bottom {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 24px 32px;
}

.footer-copy {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-muted);
}


.to-top {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pill-bg);
  border: 1px solid var(--line);
  box-shadow: var(--pill-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.to-top:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}
.to-top svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
.to-top:hover svg {
  transform: translateY(-5px);
}

/* ------------------------------------------------------------
   GİRİŞ ANİMASYONU
   ------------------------------------------------------------
   `.reveal` varsayılan olarak GÖRÜNÜR. Gizleyen kural yalnızca
   JS çalıştığında ekleniyor (`js-ready`). GSAP yüklenmezse veya
   engellenirse sayfa boş kalmaz — bu tercih bilinçli. */

.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}

/* ------------------------------------------------------------
   VİTRİN — kaydırmayla doğrulan kart
   ------------------------------------------------------------ */

.showcase-head {
  max-width: 680px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Perspektif SAHNEDE duruyor, kartın kendisinde değil. Elemanın kendi
   `transform` listesine `perspective()` yazmak onu her eleman için ayrı
   bir kaçış noktasına bağlar; kapsayıcıya verilen `perspective` ise tek
   bir kaçış noktası kurar — kart bir odanın içinde duruyormuş gibi
   görünmesinin sebebi bu. */
.showcase-stage {
  perspective: 1000px;
  perspective-origin: center 40%;
}

.showcase-frame {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 30px;
  border: 4px solid rgba(255, 255, 255, 0.14);
  background: var(--surface);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.29), 0 37px 37px rgba(0, 0, 0, 0.26),
    0 84px 50px rgba(0, 0, 0, 0.15), 0 149px 60px rgba(0, 0, 0, 0.04);
  /* Alt kenardan doğruluyor: merkezden döndürülseydi kart eğilirken
     aşağı doğru büyür, bir sonraki bölümün üstüne binerdi. */
  transform-origin: center bottom;
}

/* Yatık başlangıç yalnızca animasyonun gerçekten kurulacağı hâlde
   uygulanıyor. GSAP yüklenmezse kart dimdik durur — sayfanın tamamı
   kütüphanesiz de eksiksiz çalışmalı, bu sitenin kuralı bu. */
.js-ready .showcase-frame {
  transform: rotateX(18deg) scale(1.06);
}

/* Yükseklik SABİT DEĞİL, bilerek. Önceki maket tek bir kart olduğu için
   `height` ile kırpılabiliyordu; şema dört adım ve dar ekranda alt alta
   diziliyor. Sabit yükseklik bırakılsaydı telefonda son iki adım
   `overflow: hidden`'ın altında kalır, kimse fark etmezdi. */
.showcase-screen {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-raised);
  padding: 28px 24px;
}

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: none;
}

.flow-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  /* İnce dikey çizgi adımları bir zincir gibi bağlıyor. Ok yerine çizgi:
     kart 18 derece yatıkken ok uçları eziliyor, düz çizgi ezilmiyor. */
  border-left: 1px solid var(--line);
}

.flow-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--flame);
}

.flow-title {
  margin: 0;
  /* Dar sütunda Archivo Black dört satıra bölünüyordu; gövdenin kalını. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}

.flow-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.flow-chip {
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.flow-chip.is-solid {
  background: var(--flame-soft);
  border-color: transparent;
  color: var(--flame);
}

/* ---- Seviye ekseni ----
   Kuralın kendisi: beş kademe, üçü yanıyor. "Bir alt bir üst" cümlesini
   okumadan da anlaşılsın diye var. */
.flow-scale {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.flow-tick {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-faint);
}

.flow-tick i {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.flow-tick.is-in i {
  height: 18px;
  background: var(--flame-soft);
  border: 1px solid var(--flame);
}

.flow-tick.is-in {
  color: var(--ink-muted);
}

.flow-tick.is-you i {
  height: 26px;
  background: var(--flame);
}

.flow-tick.is-you {
  color: var(--ink);
  font-weight: 500;
}

.flow-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--ink-faint);
}

.flow-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--flame);
  flex-shrink: 0;
}

/* ---- Karşılıklı beğeni ----
   İki ok, ters yönlerde. Emoji değil, CSS ile çizilmiş — proje kuralı
   emojiyi ikon olarak yasaklıyor ve emoji zaten her işletim sisteminde
   başka türlü çiziliyor. */
.flow-arrows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 6px;
}

.flow-arrow {
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right, var(--flame), rgba(79,148,255, 0.15));
}

.flow-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid rgba(79,148,255, 0.45);
  border-right: 2px solid rgba(79,148,255, 0.45);
  transform: translateY(-50%) rotate(45deg);
}

.flow-arrow.is-back {
  background: linear-gradient(to left, var(--flame), rgba(79,148,255, 0.15));
}

.flow-arrow.is-back::after {
  right: auto;
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}

/* Dört sütun ancak geniş ekranda okunuyor; altında ikiye, telefonda tek
   sütuna düşüyor. Tek sütunda soldaki zincir çizgisi anlamını yitirdiği
   için üste taşınıyor. */
@media (max-width: 860px) {
  .flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 520px) {
  .showcase-screen {
    padding: 22px 18px;
  }
  .flow {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .flow-step {
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ------------------------------------------------------------
   DUYARLI DAVRANIŞ
   ------------------------------------------------------------ */

@media (max-width: 860px) {
  .topbar-nav {
    display: none;
  }
  .topbar-actions {
    margin-left: auto;
  }
  .section {
    padding: 88px 20px;
  }
  .marquee {
    padding: 18px 0;
  }
  .marquee-item {
    gap: 28px;
    padding-right: 28px;
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .topbar {
    padding: 12px 16px;
    gap: 12px;
  }
  .wordmark-text {
    font-size: 17px;
  }
  .btn {
    padding: 0 16px;
    font-size: 14px;
  }
  .btn-lg {
    min-height: 52px;
    padding: 0 24px;
    font-size: 16px;
  }
  .hero {
    padding: 120px 20px 80px;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .footer-cta .btn {
    width: 100%;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
  /* Dev yazı telefonda tek satıra sığmıyor; kısaltmak yerine
     küçültüyoruz, çünkü marka adının yarısı görünmesin. */
  .giant-text {
    font-size: 7.6vw;
  }
}

/* Hareket azaltma tercihi işletim sistemi ayarı — süsleme uğruna
   yok sayılmaz. Sonsuz döngüler durur, girişler anında görünür. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .aurora,
  .marquee-track {
    animation: none;
  }
  .js-ready .reveal {
    opacity: 1;
    transform: none;
  }
  /* `js-ready` zaten hareket azaltma açıkken eklenmiyor. Bu satır ayarın
     sayfa açıldıktan SONRA değiştirildiği hâl için: o durumda sınıf
     yerinde kalır ve kart yatık takılırdı. */
  .js-ready .showcase-frame {
    transform: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Güven bölümü ve SSS
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}

.faq-item {
  border-radius: var(--r-lg);
  padding: 0 24px;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 26px;
  color: var(--flame);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 4px;
  border-radius: var(--r-md);
}

.faq-item p {
  color: var(--ink-muted);
  font-size: 16px;
  padding-bottom: 22px;
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

/* ============================================================
   Örnek ekran (telefon çerçevesi)
   ============================================================ */
.showcase {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.showcase-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.showcase-points {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
  font-size: 17px;
}

.showcase-points li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.showcase-points li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flame);
}

.phone {
  margin: 0 auto;
  width: min(300px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.phone-screen {
  width: 100%;
  aspect-ratio: 9 / 18;
  border-radius: 38px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -30px rgba(79,148,255, 0.35), var(--pill-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mock-card {
  flex: 1;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

.mock-photo {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 30% 20%, #4f94ff 0%, #153a7a 55%, #0c1322 100%);
}

.mock-initials {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  color: rgba(255, 255, 255, 0.92);
}

.mock-bars {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

.mock-bars i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.mock-bars i.on {
  background: #fff;
}

.mock-info {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mock-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
}

.mock-meta {
  font-size: 13px;
  color: var(--ink-muted);
}

.mock-level {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.mock-level span {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line-strong);
}

.mock-level span.on {
  background: var(--flame);
}

.mock-actions {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.mock-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  border: 1.5px solid var(--line-strong);
}

.mock-btn.pass {
  color: var(--danger);
  border-color: var(--danger);
}

.mock-btn.like {
  color: var(--on-accent);
  background: var(--flame);
  border-color: var(--flame);
}

.phone-caption {
  font-size: 12px;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .showcase {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}



/* Telefonda üst çubuk: geniş harf aralıklı iki düğme sığmıyor. Giriş yap
   hero'da zaten var; üstte yalnızca Kayıt ol kalır. */
@media (max-width: 520px) {
  .topbar-actions .btn-ghost {
    display: none;
  }
  .topbar-actions .btn {
  }
}

/* ===========================================================================
   EKLER — 2026-10-07: mobil menü, ilerleme çubuğu, SSS araması, kopyala,
   duyuru bandı, yüzen iletişim, kayınca küçülen üst bar, yazdırma.
   Yalnızca opacity/transform canlandırılır; hareket azaltmada geçişler kapalı.
   =========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Kayınca küçülen üst bar */
.topbar.is-stuck {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Kaydırma ilerleme çubuğu */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 101;
  background: linear-gradient(90deg, var(--flame), var(--beam));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Mobil menü */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--pill-bg);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.menu-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle[aria-expanded='true'] .menu-toggle-bar:first-child {
  transform: translateY(4px) rotate(45deg);
}
.menu-toggle[aria-expanded='true'] .menu-toggle-bar:last-child {
  transform: translateY(-4px) rotate(-45deg);
}
.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: rgba(6, 10, 20, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--pill-shadow-hover);
}
.mobile-menu[hidden] {
  display: none;
}
.mobile-menu a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 13px;
}
.mobile-menu a:not(.btn):hover,
.mobile-menu a:not(.btn):focus-visible {
  background: var(--flame-soft);
}
.mobile-menu .btn {
  margin-top: 8px;
  justify-content: center;
}
@media (max-width: 860px) {
  .menu-toggle {
    display: inline-flex;
  }
}
@media (min-width: 1101px) {
  .mobile-menu {
    display: none !important;
  }
}

/* SSS araması */
.faq-search {
  max-width: 760px;
  margin: 0 auto 16px;
}
.faq-search-input {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease;
}
.faq-search-input::placeholder {
  color: var(--ink-faint);
}
.faq-search-input:focus {
  outline: none;
  border-color: var(--flame);
}
.faq-empty {
  max-width: 760px;
  margin: 0 auto 16px;
  text-align: center;
  color: var(--ink-muted);
}
.faq-empty a,
.announce a {
  color: var(--flame);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-item[hidden] {
  display: none;
}

/* Kopyala düğmesi (pill görünümü, buton olduğu için hover burada) */
.copy-btn {
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.copy-btn:hover {
  color: var(--ink);
}

/* Duyuru bandı */
.announce {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100% - 112px));
  padding: 10px 10px 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(6, 10, 20, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--pill-shadow);
  font-size: 13px;
  color: var(--ink-muted);
  transform: translateX(-50%);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.announce[hidden] {
  display: none;
}
.announce p {
  margin: 0;
  flex: 1;
}
.announce-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.announce-close:hover {
  color: var(--ink);
  background: var(--flame-soft);
}
.announce-close svg {
  width: 18px;
  height: 18px;
}

/* Yüzen iletişim */
.float-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flame);
  color: var(--on-accent);
  box-shadow: 0 12px 30px -8px rgba(79, 148, 255, 0.6);
  transition: transform 0.25s ease, opacity 0.35s ease;
}
.float-contact:hover {
  transform: translateY(-2px) scale(1.04);
}
.float-contact svg {
  width: 22px;
  height: 22px;
}
.announce.is-away {
  opacity: 0;
  transform: translate(-50%, 24px);
  pointer-events: none;
}
.float-contact.is-away {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}
@media (max-width: 520px) {
  .announce {
    left: 12px;
    right: 80px;
    width: auto;
    transform: none;
    bottom: 16px;
    font-size: 12px;
    padding-left: 16px;
    border-radius: var(--r-lg);
  }
  .announce.is-away {
    transform: translateY(24px);
  }
  .float-contact {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle-bar,
  .announce,
  .float-contact,
  .faq-search-input {
    transition: none;
  }
  .float-contact:hover {
    transform: none;
  }
}

/* Yazdırma: koyu zemin, sabit öğeler ve süslemeler kâğıtta israf */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  .topbar,
  .scroll-progress,
  .mobile-menu,
  .announce,
  .float-contact,
  .to-top,
  .skip-link,
  .faq-search,
  .marquee,
  .giant-text,
  video,
  canvas {
    display: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .faq-item {
    break-inside: avoid;
  }
  .faq-item p {
    display: block !important;
  }
  .footer-curtain,
  .footer {
    position: static !important;
    clip-path: none !important;
    height: auto !important;
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 90%;
  }
}

/* Telefonda üst bar: marka + "Kayıt ol" + menü düğmesi 360 px'e sığsın
   (e2e/site.spec.ts yatay taşma testi bunu yakaladı). */
@media (max-width: 520px) {
  .topbar {
    gap: 8px;
  }
  .topbar-actions {
    margin-left: auto;
  }
  .topbar-actions .btn {
    padding: 0 12px;
  }
  .menu-toggle {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 400px) {
  .wordmark-text {
    font-size: 15px;
  }
  .wordmark {
    gap: 8px;
  }
}

/* 861–1100 px (tablet yatay, küçük dizüstü): beş bölüm bağlantısı + iki düğme
   tek satıra sığmıyordu — yazılar iki satıra bölünüp "Kayıt ol" sağdan
   taşıyordu (1024 px'te 14 px). Bu aralıkta da mobil menüye geçiliyor. */
@media (max-width: 1100px) {
  .topbar-nav {
    display: none;
  }
  .topbar-actions {
    margin-left: auto;
  }
  .menu-toggle {
    display: inline-flex;
  }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .mobile-menu {
    display: flex !important;
  }
  .mobile-menu[hidden] {
    display: none !important;
  }
  .mobile-menu {
    left: auto;
    width: 320px;
  }
}

/* ------------------------------------------------------------
   Hero: değer önerisi etiketleri ve giriş bağlantısı (2026-10-09)
   ------------------------------------------------------------ */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Hap değil düz satır: iki kısa gerçek, başında küçük mavi kare. */
.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 500;
}
.hero-facts li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--flame);
}
.hero-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink-muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero-signin:hover,
.hero-signin:focus-visible {
  color: var(--ink);
}

.footer-disclaimer {
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------
   Telefonda sabit kayıt çubuğu
   ------------------------------------------------------------ */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.mobile-cta[hidden] {
  display: none;
}
.mobile-cta .btn {
  flex: 1;
  min-height: 48px;
}
.mobile-cta .btn-glass {
  flex: 0 0 auto;
  padding-inline: 20px;
}
@media (min-width: 861px) {
  .mobile-cta {
    display: none !important;
  }
}
@media print {
  .mobile-cta {
    display: none !important;
  }
}


/* ===========================================================================
   GİRİŞ BÖLÜMÜ VE ÜST BAR — 2026-10-20 (kurucu isteği: Strava'daki gibi)
   Üstte koyu, aşağı doğru marka mavisine açılan zemin; sağda ekrandan taşan
   büyük, soluk X amblemi; ortada küçük rozet + büyük beyaz başlık + tek dolu
   düğme. Menü ortada, kalın; giriş ve kayıt sağda metin bağlantısı.
   =========================================================================== */
.topbar {
  padding: 18px clamp(20px, 4vw, 64px);
}
.topbar.is-stuck {
  background: rgba(6, 10, 20, 0.92);
}
.wordmark-text {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.wordmark-x {
  width: 22px;
  height: 22px;
  fill: var(--flame);
}
.wordmark-mark {
  display: none;
}
.topbar-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  gap: clamp(20px, 3vw, 44px);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.topbar-nav a:hover {
  color: var(--flame);
}
.topbar-actions {
  margin-left: auto;
  gap: 22px;
}
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.2s ease;
}
.topbar-link svg {
  width: 16px;
  height: 16px;
}
.topbar-link:hover {
  color: var(--flame);
}
.topbar-link-strong {
  color: var(--flame);
}
.topbar-link-strong:hover {
  color: #8db8ff;
}

.hero {
  min-height: min(100svh, 860px);
  padding: 150px 24px 110px;
  background: linear-gradient(
    180deg,
    var(--canvas) 0%,
    #07122a 38%,
    #0b2a63 68%,
    #1d5bc4 92%,
    #3478ea 100%
  );
}
.hero > .aurora,
.hero > .grid-bg,
.hero .scroll-hint {
  display: none;
}
/* Sağda ekrandan taşan soluk amblem: halka + X. Süs; okunacak bir şey değil. */
.hero-emblem {
  position: absolute;
  right: -15vw;
  top: 50%;
  width: min(62vw, 760px);
  aspect-ratio: 1;
  transform: translateY(-38%);
  border-radius: 50%;
  border: clamp(14px, 1.6vw, 22px) solid rgba(6, 12, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero-emblem svg {
  width: 52%;
  height: 52%;
  fill: rgba(6, 12, 30, 0.5);
}
.hero-inner {
  max-width: 1080px;
  gap: 22px;
}
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.hero-label b {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 14px;
  background: linear-gradient(160deg, #6ea6ff 0%, var(--flame) 55%, #2f6fe0 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.hero-badge svg {
  width: 38px;
  height: 38px;
  fill: var(--on-accent);
}
.hero-title {
  font-size: clamp(34px, 4.8vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
}
.hero-title .accent {
  color: var(--ink);
}
.hero-sub {
  max-width: 640px;
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(243, 246, 253, 0.88);
}
.hero-facts li {
  color: var(--ink);
}
.hero-facts li::before {
  background: var(--ink);
}
.hero .btn {
  border-radius: 4px;
  font-weight: 700;
}
.hero .btn-primary {
  background: var(--flame);
  color: var(--on-accent);
}
.hero .btn-primary:hover {
  background: #6ea6ff;
}
.hero .btn-glass {
  border-color: rgba(243, 246, 253, 0.55);
  color: var(--ink);
}
.hero .btn-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ink);
}
.hero-signin,
.hero-note {
  color: rgba(243, 246, 253, 0.8);
}
@media (max-width: 1100px) {
  .topbar-nav {
    display: none;
  }
}
@media (max-width: 760px) {
  .hero-emblem {
    right: -30vw;
    width: 110vw;
    top: auto;
    bottom: -40vw;
    transform: none;
  }
  .hero-badge {
    width: 56px;
    height: 56px;
  }
  .hero-badge svg {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 520px) {
  .topbar-actions .topbar-link:not(.topbar-link-strong) {
    display: none;
  }
}