/*
 * BiliyonMu — lansman öncesi karşılama sayfası.
 * Renk, yazı tipi ve köşe değerleri packages/ui/src/styles/tokens.css ile aynıdır; sayfa statik olduğu için
 * paket derlemesine bağlanmaz. Görsel gece manzarası olduğundan zemin lacivert, metin beyazdır.
 */
:root {
  --navy: #08254b;
  --brand-blue: #0074ed;
  --sky: #02cafe;
  --primary: #0a6ae0;
  --primary-hover: #0a52b8;
  --accent: #fea10b;
  --text: #ffffff;
  /* Lacivert zeminde ~8,5:1 */
  --text-muted: rgb(255 255 255 / 72%);
  --track: rgb(255 255 255 / 12%);
  --hairline: rgb(255 255 255 / 12%);
  --radius-lg: 24px;
  --font-display: 'Nunito', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:
    'Nunito Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* İçerik sütunu: telefonda tam genişlik; geniş ekranda görsel ile çubuk aynı genişlikte */
  --column: 100%;
  --gutter: 16px;
  color-scheme: dark;
}

@media (min-width: 641px) {
  :root {
    --column: min(100% - 48px, 1120px);
    --gutter: 0px;
  }
}

/* Alçak ekranlarda görsel küçülür; ilerleme çubuğu ilk ekranda kalır */
@media (min-width: 641px) and (min-height: 560px) {
  :root {
    --column: min(100% - 48px, 1120px, max(560px, (100vh - 250px) * 1.7769));
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

::selection {
  background: var(--sky);
  color: var(--navy);
}

a:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

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

.page {
  flex: 1;
  width: var(--column);
  margin: 0 auto;
  padding-bottom: 64px;
}

/* --- Görsel ------------------------------------------------------------------------------------ */

.visual {
  display: block;
}

.visual img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 641px) {
  .page {
    padding-top: 32px;
  }

  .visual img {
    border-radius: var(--radius-lg);
    box-shadow:
      0 0 0 1px var(--hairline),
      0 24px 64px -24px rgb(0 0 0 / 60%);
  }
}

/* --- İlerleme ------------------------------------------------------------------------------------ */

.progress {
  margin: 28px var(--gutter) 0;
}

.progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.progress-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.progress-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/*
 * Altı bölüm = altı aşama. Dolgu rengi bütün çubuk boyunca maviden camgöbeğine akar (logodaki işaret gibi);
 * her bölüm geçişin kendi payına düşen parçasını gösterir. Turuncu nokta (logodaki soru işaretinin noktası)
 * "şu an buradayız" işaretidir.
 */
.progress-bar {
  --gap: 6px;
  --segment: calc((100cqw - 5 * var(--gap)) / 6);
  /* Sürmekte olan aşamanın dolu kısmı */
  --active-fill: 20%;
  --fill: linear-gradient(90deg, var(--brand-blue), var(--sky));
  container-type: inline-size;
  display: flex;
  gap: var(--gap);
  height: 10px;
  margin-top: 14px;
}

.segment {
  position: relative;
  flex: 1 1 0;
  border-radius: 999px;
  background: var(--track);
}

.segment:nth-child(1) {
  --i: 0;
}
.segment:nth-child(2) {
  --i: 1;
}
.segment:nth-child(3) {
  --i: 2;
}
.segment:nth-child(4) {
  --i: 3;
}
.segment:nth-child(5) {
  --i: 4;
}
.segment:nth-child(6) {
  --i: 5;
}

.segment.is-done::after {
  content: '';
}

.segment.is-done::after,
.segment-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--fill);
  background-repeat: no-repeat;
  background-size: 100cqw 100%;
  background-position: calc(var(--i) * (var(--segment) + var(--gap)) * -1) 0;
}

.segment-fill {
  right: auto;
  width: var(--active-fill);
}

/* Sürmekte olan aşamada boş kısmın üzerinden geçen ışık */
.segment.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 24%), transparent) no-repeat;
  background-position: -100% 0;
  background-size: 50% 100%;
}

.segment-dot {
  position: absolute;
  top: 50%;
  left: var(--active-fill);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(254 161 11 / 25%);
}

@media (min-width: 641px) {
  .progress {
    margin-top: 36px;
  }

  .progress-title {
    font-size: 1.25rem;
  }

  .progress-value {
    font-size: 2.5rem;
  }

  .progress-bar {
    height: 12px;
  }
}

/* Tek açılış anı: bölümler sırayla dolar, nokta yerine oturur; sonra ışık süzülür */
@media (prefers-reduced-motion: no-preference) {
  .segment.is-done::after,
  .segment-fill {
    animation: bm-fill 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(200ms + var(--i) * 140ms);
  }

  .segment-dot {
    animation:
      bm-pop 320ms cubic-bezier(0.2, 0.7, 0.3, 1.4) both,
      bm-halo 2.4s ease-in-out infinite;
    animation-delay: calc(560ms + var(--i) * 140ms), calc(900ms + var(--i) * 140ms);
  }

  .segment.is-active::before {
    animation: bm-sweep 2.2s ease-in-out 1.6s infinite;
  }
}

@keyframes bm-fill {
  from {
    clip-path: inset(0 100% 0 0 round 999px);
  }
  to {
    clip-path: inset(0 0 0 0 round 999px);
  }
}

@keyframes bm-pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes bm-halo {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgb(254 161 11 / 25%);
  }
  50% {
    box-shadow: 0 0 0 8px rgb(254 161 11 / 0%);
  }
}

@keyframes bm-sweep {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 200% 0;
  }
}

/* Yüksek karşıtlık modu: renkler kalktığında da dolu bölümler görünür */
@media (forced-colors: active) {
  .segment {
    border: 1px solid CanvasText;
  }

  .segment.is-done::after,
  .segment-fill,
  .segment-dot {
    background: Highlight;
    forced-color-adjust: none;
  }
}

/* --- BiliyonMu nedir? ------------------------------------------------------------------------------ */

.about {
  max-width: 640px;
  margin: 56px var(--gutter) 0;
}

.about h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.about p {
  margin: 0 0 12px;
  color: var(--text-muted);
}

.about .slogan {
  margin: 20px 0 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.3;
}

/* İki satır: üstte eylem, altta hesap adı; simge iki satırı birden kaplar */
.follow {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 48px;
  margin-top: 24px;
  padding: 10px 26px 10px 20px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--text);
  line-height: 1.3;
  text-decoration: none;
}

.follow:hover {
  background: var(--primary-hover);
}

.follow svg {
  grid-row: span 2;
  width: 26px;
  height: 26px;
}

.follow-label {
  font-weight: 700;
}

.follow-handle {
  font-size: 0.9375rem;
  font-weight: 500;
}

@media (min-width: 641px) {
  .about {
    margin-top: 72px;
  }

  .about h2 {
    font-size: 1.75rem;
  }
}