/* ===========================================================================
   Tayfa — tanıtım sayfası

   Uygulamanın dışında kalan tek sayfa, ve tek işi var: ne olduğunu anlatıp
   insanı /app'e göndermek. O yüzden kendi katmanı — uygulama katmanının
   (app.css) dört dikey yüzeyi, ray hiyerarşisi ve mesaj sütunu burada
   hiç kullanılmıyor, ve app.css'i tanıtım için esnetmek ikisini de bozardı.

   Token dışında hiçbir değer yok. Renk, boşluk, radius, süre: hepsi
   tokens.css'ten. Üç tema da kendiliğinden çalışıyor çünkü hiçbir kural
   temaya bakmıyor.
   =========================================================================== */

.lp {
  min-height: 100%;
  background: var(--bg-base);
  color: var(--fg);
}

/* ---- şerit --------------------------------------------------------------- */
.lp__top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 64px;
  padding: 0 var(--space-6);
  background: color-mix(in oklab, var(--bg-base) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.lp__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
}
.lp__mark { width: 28px; height: 28px; color: var(--accent); flex: none; }

.lp__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.lp__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lp__link:hover { color: var(--fg); background: var(--row-hover); }
.lp__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 980 piksel altında bağlantılar düşüyor, düğmeler kalıyor: menüyü bir
   hamburger'in arkasına almak dört bağlantı için fazla makine. */
@media (max-width: 980px) {
  .lp__nav .lp__link { display: none; }
  .lp__top { padding: 0 var(--space-4); }
}

/* ---- hero ---------------------------------------------------------------- */
.lp__hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) var(--space-6) var(--space-12);
  text-align: center;
}

/* Arkadaki ışık. Turuncunun kendisi değil, oklab'da zemine karıştırılmış
   hâli: ham vurgu rengi bu boyutta ekranı ele geçiriyor. */
.lp__glow {
  position: absolute;
  inset: auto 0 auto 50%;
  top: -220px;
  width: 760px;
  height: 540px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--accent) 22%, transparent),
    transparent
  );
}

.lp__inner { position: relative; max-width: 880px; margin: 0 auto; }

.lp__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--fg-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.lp__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  flex: none;
}

.lp__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(32px, 6vw, 60px);
  /* Oran, mutlak px değil: başlık clamp ile büyüyor ve miras alınan mutlak
     bir satır yüksekliği onu kendi üstüne bindiriyor (CLAUDE.md). */
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.lp__title em {
  font-style: normal;
  color: var(--accent);
}

.lp__sub {
  max-width: 620px;
  margin: 0 auto var(--space-8);
  font-size: var(--fs-h3);
  line-height: 1.6;
  color: var(--fg-muted);
}

.lp__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.lp__note {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
}

/* ---- canlı oda önizlemesi ------------------------------------------------ */
.lp__shot {
  position: relative;
  max-width: 1080px;
  margin: 0 auto var(--space-10);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}
.lp__shot-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.lp__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  flex: none;
}
.lp__shot-url {
  margin-left: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--bg-base);
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}
.lp__shot-img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--bg-base);
}

/* ---- bölümler ----------------------------------------------------------- */
.lp__sect { padding: var(--space-16) var(--space-6); }
.lp__sect--alt { background: var(--bg-surface); border-block: 1px solid var(--border); }
.lp__wrap { max-width: 1120px; margin: 0 auto; }

.lp__kicker {
  margin: 0 0 var(--space-2);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lp__h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.lp__lead {
  max-width: 640px;
  margin: 0 0 var(--space-10);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--fg-muted);
}

/* Kart genişliği 280–360 arasında kalıyor; auto-fit ile sütun sayısı
   viewport'a göre kendi kendine düşüyor ve kırılma noktası yazmak
   gerekmiyor. */
.lp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.lp__card {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lp__sect--alt .lp__card { background: var(--bg-elevated); }
.lp__card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.lp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.lp__icon svg { width: 22px; height: 22px; }

.lp__card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  font-weight: 700;
}
.lp__card p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-muted);
}

/* ---- adımlar ------------------------------------------------------------ */
.lp__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  counter-reset: step;
}
.lp__step { position: relative; padding-top: var(--space-10); }
.lp__step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent);
  /* Turuncu zeminde yazı her zaman --accent-fg; beyaz 2.4:1 veriyor
     (CLAUDE.md kırmızı çizgi 7). */
  color: var(--accent-fg);
  font-size: var(--fs-small);
  font-weight: 800;
}
.lp__step h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); font-weight: 700; }
.lp__step p { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--fg-muted); }

/* ---- kapanış ------------------------------------------------------------ */
.lp__end {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ---- alt bilgi ---------------------------------------------------------- */
.lp__foot {
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}
.lp__foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  max-width: 1120px;
  margin: 0 auto;
}
.lp__foot-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-left: auto; }
.lp__foot-links a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--fs-small);
}
.lp__foot-links a:hover { color: var(--fg); text-decoration: underline; }
.lp__foot-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp__copy { font-size: var(--fs-caption); color: var(--fg-subtle); }

@media (max-width: 720px) {
  .lp__hero { padding: var(--space-12) var(--space-4) var(--space-8); }
  .lp__sect, .lp__end { padding: var(--space-12) var(--space-4); }
  .lp__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lp__card:hover { transform: none; }
  .lp__top { backdrop-filter: none; }
}