/* =============================================================
   Pulsora — Landing Page Design System
   Instagram algoritma & performans analiz panosu (SaaS, TR)
   -------------------------------------------------------------
   - Tüm sınıflar `.lp-` önekiyle (auth.css / style.css ile çakışmaz)
   - Token tabanlı: renk, tipografi, TUTARLI SPACING ölçeği
   - Koyu premium tema + Pulsora mavi/mor gradient
   - Mobil-öncelikli, erişilebilir kontrast, hover/focus durumları
   ============================================================= */

/* ---------------------------------------------------------------
   1) DESIGN TOKENS
   --------------------------------------------------------------- */
.lp-root,
:root {
  /* --- Marka renkleri (mevcut koyu tema + mavi/mor ile uyumlu) --- */
  --lp-blue: #4f7cff;          /* Pulsora primary blue */
  --lp-blue-600: #3b66f0;
  --lp-blue-400: #6f97ff;
  --lp-purple: #8b5cf6;        /* Pulsora purple */
  --lp-purple-600: #7c3aed;
  --lp-violet: #a78bfa;
  --lp-cyan: #22d3ee;          /* aksan / "erişim" vurgusu */
  --lp-pink: #ec4899;          /* aksan / "etkileşim" vurgusu */

  /* --- Koyu yüzeyler (premium derinlik) --- */
  --lp-bg: #070912;            /* en koyu zemin */
  --lp-bg-2: #0c1020;          /* section alternatif */
  --lp-surface: #11162b;       /* kart zemini */
  --lp-surface-2: #161c34;     /* yükseltilmiş kart */
  --lp-surface-3: #1d2540;     /* hover / aktif kart */
  --lp-border: rgba(255, 255, 255, 0.08);
  --lp-border-strong: rgba(255, 255, 255, 0.14);

  /* --- Metin --- */
  --lp-text: #f5f7ff;          /* başlık / yüksek kontrast */
  --lp-text-soft: #c3c9e0;     /* gövde metni */
  --lp-text-muted: #8b93b3;    /* ikincil / yardımcı */
  --lp-text-faint: #61698c;    /* devre dışı / placeholder */

  /* --- Durum renkleri --- */
  --lp-success: #34d399;
  --lp-warning: #fbbf24;       /* shadowban erken uyarı */
  --lp-danger: #f87171;

  /* --- Gradientler --- */
  --lp-grad-brand: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-purple) 100%);
  --lp-grad-brand-soft: linear-gradient(135deg, rgba(79,124,255,0.18) 0%, rgba(139,92,246,0.18) 100%);
  --lp-grad-text: linear-gradient(120deg, #6f97ff 0%, #a78bfa 55%, #22d3ee 100%);
  --lp-grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(79,124,255,0.28) 0%, rgba(139,92,246,0.12) 45%, transparent 75%);
  --lp-grad-hero: linear-gradient(180deg, #0a0d1c 0%, #070912 100%);

  /* --- Tipografi ölçeği (1.250 majör üçlü) --- */
  --lp-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --lp-text-xs:   0.75rem;   /* 12 */
  --lp-text-sm:   0.875rem;  /* 14 */
  --lp-text-base: 1rem;      /* 16 */
  --lp-text-lg:   1.125rem;  /* 18 */
  --lp-text-xl:   1.375rem;  /* 22 */
  --lp-text-2xl:  1.75rem;   /* 28 */
  --lp-text-3xl:  2.25rem;   /* 36 */
  --lp-text-4xl:  3rem;      /* 48 */
  --lp-text-5xl:  3.75rem;   /* 60 */
  --lp-leading-tight: 1.12;
  --lp-leading-snug: 1.3;
  --lp-leading: 1.6;
  --lp-weight-regular: 400;
  --lp-weight-medium: 500;
  --lp-weight-semibold: 600;
  --lp-weight-bold: 700;
  --lp-weight-black: 800;

  /* --- TUTARLI SPACING ÖLÇEĞİ (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) --- */
  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 24px;
  --lp-space-6: 32px;
  --lp-space-7: 48px;
  --lp-space-8: 64px;
  /* türetilmiş (büyük bölücüler için) */
  --lp-space-9: 96px;
  --lp-space-10: 128px;

  /* --- Yapısal token'lar --- */
  --lp-container: 1180px;
  --lp-container-narrow: 760px;
  --lp-section-y: var(--lp-space-9);    /* dikey section padding */
  --lp-grid-gap: var(--lp-space-5);     /* grid boşluğu */
  --lp-card-pad: var(--lp-space-6);     /* kart iç boşluğu */

  /* --- Köşe yarıçapı --- */
  --lp-radius-sm: 8px;
  --lp-radius: 14px;
  --lp-radius-lg: 20px;
  --lp-radius-xl: 28px;
  --lp-radius-pill: 999px;

  /* --- Gölgeler --- */
  --lp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --lp-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
  --lp-shadow-lg: 0 28px 70px rgba(2, 6, 23, 0.6);
  --lp-shadow-glow: 0 18px 50px rgba(79, 124, 255, 0.35);

  /* --- Hareket --- */
  --lp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --lp-dur: 0.22s;
  --lp-dur-slow: 0.4s;

  --lp-ring: 0 0 0 3px rgba(79, 124, 255, 0.45);
}

/* ---------------------------------------------------------------
   2) RESET / BASE (landing kapsamına özgü, global'i kirletmez)
   --------------------------------------------------------------- */
.lp-page,
.lp-page * {
  box-sizing: border-box;
}

.lp-page {
  margin: 0;
  font-family: var(--lp-font);
  font-size: var(--lp-text-base);
  line-height: var(--lp-leading);
  color: var(--lp-text-soft);
  background: var(--lp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-page *,
  .lp-page *::before,
  .lp-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.lp-page h1,
.lp-page h2,
.lp-page h3,
.lp-page h4 {
  margin: 0;
  color: var(--lp-text);
  line-height: var(--lp-leading-tight);
  font-weight: var(--lp-weight-bold);
  letter-spacing: -0.02em;
}

.lp-page p { margin: 0; }
.lp-page a { color: inherit; text-decoration: none; }
.lp-page img { max-width: 100%; display: block; }
.lp-page :focus-visible {
  outline: none;
  box-shadow: var(--lp-ring);
  border-radius: var(--lp-radius-sm);
}

/* ---------------------------------------------------------------
   3) LAYOUT PRIMITIVES
   --------------------------------------------------------------- */
.lp-container {
  width: 100%;
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: var(--lp-space-5);
}

.lp-section {
  position: relative;
  padding-block: var(--lp-section-y);
}

.lp-section--tight { padding-block: var(--lp-space-7); }
.lp-section--alt { background: var(--lp-bg-2); }

.lp-section-head {
  max-width: var(--lp-container-narrow);
  margin: 0 auto var(--lp-space-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-4);
}

.lp-section-title {
  font-size: var(--lp-text-3xl);
  font-weight: var(--lp-weight-black);
}

.lp-section-sub {
  font-size: var(--lp-text-lg);
  color: var(--lp-text-muted);
  line-height: var(--lp-leading-snug);
}

/* Eyebrow / küçük etiket */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-2);
  align-self: center;
  padding: var(--lp-space-2) var(--lp-space-4);
  font-size: var(--lp-text-sm);
  font-weight: var(--lp-weight-semibold);
  color: var(--lp-blue-400);
  background: var(--lp-grad-brand-soft);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-radius-pill);
  letter-spacing: 0.01em;
}

.lp-gradient-text {
  background: var(--lp-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------
   4) NAVBAR
   --------------------------------------------------------------- */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 9, 18, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--lp-border);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-5);
  height: 64px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-3);
  font-size: var(--lp-text-xl);
  font-weight: var(--lp-weight-black);
  color: var(--lp-text);
  letter-spacing: -0.02em;
}

.lp-brand__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--lp-radius-sm);
  background: var(--lp-grad-brand);
  box-shadow: var(--lp-shadow-glow);
}

.lp-nav__links {
  display: none;
  align-items: center;
  gap: var(--lp-space-6);
}

.lp-nav__link {
  font-size: var(--lp-text-sm);
  font-weight: var(--lp-weight-medium);
  color: var(--lp-text-muted);
  transition: color var(--lp-dur) var(--lp-ease);
}
.lp-nav__link:hover { color: var(--lp-text); }

.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
}

@media (min-width: 880px) {
  .lp-nav__links { display: flex; }
}

/* ---------------------------------------------------------------
   5) BUTTONS (birincil / ikincil / glass)
   --------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-2);
  padding: var(--lp-space-3) var(--lp-space-5);
  font-family: inherit;
  font-size: var(--lp-text-base);
  font-weight: var(--lp-weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--lp-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--lp-dur) var(--lp-ease),
              box-shadow var(--lp-dur) var(--lp-ease),
              background var(--lp-dur) var(--lp-ease),
              border-color var(--lp-dur) var(--lp-ease),
              color var(--lp-dur) var(--lp-ease);
}
.lp-btn:active { transform: translateY(1px) scale(0.99); }

.lp-btn--primary {
  background: var(--lp-grad-brand);
  color: #fff;
  box-shadow: var(--lp-shadow-glow);
}
.lp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(79, 124, 255, 0.5);
}

.lp-btn--secondary {
  background: var(--lp-surface-2);
  color: var(--lp-text);
  border-color: var(--lp-border-strong);
}
.lp-btn--secondary:hover {
  background: var(--lp-surface-3);
  border-color: var(--lp-blue-400);
}

.lp-btn--glass {
  background: rgba(255, 255, 255, 0.06);
  color: var(--lp-text);
  border-color: var(--lp-border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lp-btn--glass:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.lp-btn--ghost {
  background: transparent;
  color: var(--lp-text-soft);
}
.lp-btn--ghost:hover { color: var(--lp-text); background: rgba(255,255,255,0.05); }

.lp-btn--lg { padding: var(--lp-space-4) var(--lp-space-6); font-size: var(--lp-text-lg); }
.lp-btn--sm { padding: var(--lp-space-2) var(--lp-space-4); font-size: var(--lp-text-sm); }
.lp-btn--block { width: 100%; }

/* ---------------------------------------------------------------
   6) HERO
   --------------------------------------------------------------- */
.lp-hero {
  position: relative;
  background: var(--lp-grad-hero);
  padding-block: var(--lp-space-9) var(--lp-space-8);
  overflow: hidden;
}

/* gradient parlama / blur arka plan */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lp-grad-glow);
  pointer-events: none;
}

.lp-blur-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.lp-blur-orb--blue {
  width: 420px; height: 420px;
  background: var(--lp-blue);
  top: -120px; left: -80px;
}
.lp-blur-orb--purple {
  width: 380px; height: 380px;
  background: var(--lp-purple);
  top: 40px; right: -100px;
}
.lp-blur-orb--cyan {
  width: 300px; height: 300px;
  background: var(--lp-cyan);
  bottom: -140px; left: 40%;
  opacity: 0.3;
}

.lp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lp-space-5);
}

.lp-hero__title {
  font-size: var(--lp-text-4xl);
  font-weight: var(--lp-weight-black);
  letter-spacing: -0.03em;
}

.lp-hero__sub {
  max-width: 640px;
  font-size: var(--lp-text-lg);
  color: var(--lp-text-soft);
  line-height: var(--lp-leading);
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-3);
  justify-content: center;
  margin-top: var(--lp-space-2);
}

.lp-hero__note {
  font-size: var(--lp-text-sm);
  color: var(--lp-text-muted);
}

/* hero görsel / panel önizleme */
.lp-hero__visual {
  position: relative;
  z-index: 1;
  margin-top: var(--lp-space-8);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-radius-xl);
  background: var(--lp-surface);
  box-shadow: var(--lp-shadow-lg);
  overflow: hidden;
}

/* trust / metrik şeridi */
.lp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lp-space-6);
  margin-top: var(--lp-space-7);
  position: relative;
  z-index: 1;
}
.lp-trust__item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-1);
}
.lp-trust__num {
  font-size: var(--lp-text-2xl);
  font-weight: var(--lp-weight-black);
  color: var(--lp-text);
}
.lp-trust__label {
  font-size: var(--lp-text-sm);
  color: var(--lp-text-muted);
}

@media (min-width: 720px) {
  .lp-hero__title { font-size: var(--lp-text-5xl); }
}

/* ---------------------------------------------------------------
   7) FEATURE CARDS GRID
   --------------------------------------------------------------- */
.lp-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lp-grid-gap);
}

.lp-card {
  position: relative;
  padding: var(--lp-card-pad);
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  transition: transform var(--lp-dur) var(--lp-ease),
              border-color var(--lp-dur) var(--lp-ease),
              background var(--lp-dur) var(--lp-ease),
              box-shadow var(--lp-dur) var(--lp-ease);
}
.lp-card:hover {
  transform: translateY(-4px);
  border-color: var(--lp-border-strong);
  background: var(--lp-surface-2);
  box-shadow: var(--lp-shadow);
}

.lp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--lp-space-4);
  border-radius: var(--lp-radius);
  background: var(--lp-grad-brand-soft);
  border: 1px solid var(--lp-border-strong);
  color: var(--lp-blue-400);
  font-size: var(--lp-text-xl);
}

.lp-card__title {
  font-size: var(--lp-text-xl);
  font-weight: var(--lp-weight-semibold);
  margin-bottom: var(--lp-space-2);
}

.lp-card__text {
  font-size: var(--lp-text-base);
  color: var(--lp-text-muted);
  line-height: var(--lp-leading);
}

/* vurgulu / geniş kart (öne çıkan özellik) */
.lp-card--feature {
  background: var(--lp-grad-brand-soft);
  border-color: var(--lp-border-strong);
}
.lp-card--feature .lp-card__icon { color: var(--lp-violet); }

/* küçük etiket (örn. PRO / Yeni / Erken Uyarı) */
.lp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-1);
  padding: 2px var(--lp-space-3);
  font-size: var(--lp-text-xs);
  font-weight: var(--lp-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--lp-radius-pill);
}
.lp-tag--pro { background: var(--lp-grad-brand); color: #fff; }
.lp-tag--warn { background: rgba(251,191,36,0.16); color: var(--lp-warning); }
.lp-tag--new { background: rgba(52,211,153,0.16); color: var(--lp-success); }

@media (min-width: 640px) {
  .lp-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .lp-features { grid-template-columns: repeat(3, 1fr); }
  .lp-card--span2 { grid-column: span 2; }
}

/* ---------------------------------------------------------------
   8) STEPS (adım göstergesi — "nasıl çalışır")
   --------------------------------------------------------------- */
.lp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lp-space-6);
  counter-reset: lp-step;
}

.lp-step {
  position: relative;
  padding: var(--lp-card-pad);
  padding-top: var(--lp-space-7);
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
}
.lp-step::before {
  counter-increment: lp-step;
  content: counter(lp-step);
  position: absolute;
  top: calc(-1 * var(--lp-space-4));
  left: var(--lp-card-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: var(--lp-text-lg);
  font-weight: var(--lp-weight-black);
  color: #fff;
  background: var(--lp-grad-brand);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-glow);
}

.lp-step__title {
  font-size: var(--lp-text-lg);
  font-weight: var(--lp-weight-semibold);
  margin-bottom: var(--lp-space-2);
}
.lp-step__text {
  font-size: var(--lp-text-base);
  color: var(--lp-text-muted);
}

@media (min-width: 760px) {
  .lp-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------
   9) PRICING (fiyat kartı, "Önerilen" vurgulu)
   --------------------------------------------------------------- */
.lp-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lp-grid-gap);
  max-width: 900px;
  margin-inline: auto;
  align-items: stretch;
}

.lp-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-5);
  padding: var(--lp-space-7) var(--lp-card-pad);
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  transition: transform var(--lp-dur) var(--lp-ease),
              box-shadow var(--lp-dur) var(--lp-ease);
}
.lp-price-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }

/* Önerilen (Recommended) vurgulu kart */
.lp-price-card--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--lp-surface-2), var(--lp-surface-2)) padding-box,
    var(--lp-grad-brand) border-box;
  box-shadow: var(--lp-shadow-lg);
}
@media (min-width: 760px) {
  .lp-price-card--featured { transform: scale(1.04); }
  .lp-price-card--featured:hover { transform: scale(1.04) translateY(-4px); }
}

.lp-price-card__badge {
  position: absolute;
  top: calc(-1 * var(--lp-space-3));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--lp-space-1) var(--lp-space-4);
  font-size: var(--lp-text-xs);
  font-weight: var(--lp-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--lp-grad-brand);
  border-radius: var(--lp-radius-pill);
  box-shadow: var(--lp-shadow-glow);
  white-space: nowrap;
}

.lp-price-card__name {
  font-size: var(--lp-text-xl);
  font-weight: var(--lp-weight-semibold);
}
.lp-price-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--lp-space-2);
}
.lp-price-card__amount {
  font-size: var(--lp-text-4xl);
  font-weight: var(--lp-weight-black);
  color: var(--lp-text);
}
.lp-price-card__period {
  font-size: var(--lp-text-sm);
  color: var(--lp-text-muted);
}
.lp-price-card__desc {
  font-size: var(--lp-text-base);
  color: var(--lp-text-muted);
}

.lp-price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-3);
  flex: 1;
}
.lp-price-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--lp-space-3);
  font-size: var(--lp-text-base);
  color: var(--lp-text-soft);
}
.lp-price-list li::before {
  content: "✓";
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--lp-text-xs);
  font-weight: var(--lp-weight-bold);
  color: var(--lp-success);
  background: rgba(52, 211, 153, 0.14);
  border-radius: 50%;
}
.lp-price-list li.lp-price-list__off {
  color: var(--lp-text-faint);
}
.lp-price-list li.lp-price-list__off::before {
  content: "–";
  color: var(--lp-text-faint);
  background: rgba(255, 255, 255, 0.05);
}

@media (min-width: 760px) {
  .lp-pricing { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------
   10) FAQ ACCORDION
   --------------------------------------------------------------- */
.lp-faq {
  max-width: var(--lp-container-narrow);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-3);
}

.lp-faq__item {
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  overflow: hidden;
  transition: border-color var(--lp-dur) var(--lp-ease);
}
.lp-faq__item[open] { border-color: var(--lp-border-strong); }
.lp-faq__item:hover { border-color: var(--lp-border-strong); }

.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-4);
  padding: var(--lp-space-5);
  font-size: var(--lp-text-lg);
  font-weight: var(--lp-weight-semibold);
  color: var(--lp-text);
  cursor: pointer;
  list-style: none;
}
.lp-faq__q::-webkit-details-marker { display: none; }

/* +/- ikon */
.lp-faq__q::after {
  content: "+";
  flex: none;
  font-size: var(--lp-text-2xl);
  font-weight: var(--lp-weight-regular);
  line-height: 1;
  color: var(--lp-blue-400);
  transition: transform var(--lp-dur) var(--lp-ease);
}
.lp-faq__item[open] .lp-faq__q::after {
  content: "+";
  transform: rotate(45deg);
}

.lp-faq__a {
  padding: 0 var(--lp-space-5) var(--lp-space-5);
  font-size: var(--lp-text-base);
  color: var(--lp-text-muted);
  line-height: var(--lp-leading);
}

/* ---------------------------------------------------------------
   11) CTA (kapanış çağrısı)
   --------------------------------------------------------------- */
.lp-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--lp-space-9) var(--lp-card-pad);
  border-radius: var(--lp-radius-xl);
  background: var(--lp-grad-brand);
  box-shadow: var(--lp-shadow-lg);
}
.lp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.lp-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lp-space-4);
}
.lp-cta__title {
  font-size: var(--lp-text-3xl);
  font-weight: var(--lp-weight-black);
  color: #fff;
}
.lp-cta__text { color: rgba(255, 255, 255, 0.86); font-size: var(--lp-text-lg); }
.lp-cta .lp-btn--primary {
  background: #fff;
  color: var(--lp-blue-600);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
.lp-cta .lp-btn--primary:hover { background: #f1f4ff; }

/* ---------------------------------------------------------------
   12) FOOTER
   --------------------------------------------------------------- */
.lp-footer {
  background: var(--lp-bg-2);
  border-top: 1px solid var(--lp-border);
  padding-block: var(--lp-space-8) var(--lp-space-6);
}
.lp-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lp-space-7);
  margin-bottom: var(--lp-space-7);
}
.lp-footer__brand { display: flex; flex-direction: column; gap: var(--lp-space-3); max-width: 320px; }
.lp-footer__tagline { font-size: var(--lp-text-sm); color: var(--lp-text-muted); line-height: var(--lp-leading); }

.lp-footer__col-title {
  font-size: var(--lp-text-sm);
  font-weight: var(--lp-weight-semibold);
  color: var(--lp-text);
  margin-bottom: var(--lp-space-4);
  letter-spacing: 0.02em;
}
.lp-footer__links { display: flex; flex-direction: column; gap: var(--lp-space-3); }
.lp-footer__link {
  font-size: var(--lp-text-sm);
  color: var(--lp-text-muted);
  transition: color var(--lp-dur) var(--lp-ease);
}
.lp-footer__link:hover { color: var(--lp-text); }

.lp-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-3);
  padding-top: var(--lp-space-5);
  border-top: 1px solid var(--lp-border);
  font-size: var(--lp-text-sm);
  color: var(--lp-text-muted);
}

@media (min-width: 760px) {
  .lp-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .lp-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------------------------------------------------------------
   13) UTILITIES (spacing yardımcıları — token tabanlı)
   --------------------------------------------------------------- */
.lp-mt-4 { margin-top: var(--lp-space-4); }
.lp-mt-5 { margin-top: var(--lp-space-5); }
.lp-mt-6 { margin-top: var(--lp-space-6); }
.lp-mt-7 { margin-top: var(--lp-space-7); }
.lp-text-center { text-align: center; }
.lp-hidden { display: none !important; }

/* küçük giriş animasyonu (reveal) */
.lp-reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: lp-fade-up var(--lp-dur-slow) var(--lp-ease) forwards;
}
@keyframes lp-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ============ HERO CHART — sonsuz büyüme / sayfa aşağı kayma bug fix ============ */
/* Chart.js (responsive:true + maintainAspectRatio:false) canvas'ı, ana kapsayıcısının
   yüksekliğine göre boyutlar. Kapsayıcı yüksekliği "auto" ise canvas her render'da uzar
   ve sayfa sürekli aşağı kayar. Çözüm: canvas'ı SABİT yükseklikli bir sarmalayıcıya kilitle. */
.lp-hero__chart-card { position: relative; }
.lp-hero__chart-wrap {
  position: relative;
  width: 100%;
  height: 300px;            /* SABİT yükseklik — bug'ın asıl çözümü */
  margin-top: var(--lp-space-4, 16px);
}
.lp-hero__chart-wrap > #heroChart {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;  /* canvas kapsayıcıyı asla aşamaz */
}
@media (max-width: 640px) {
  .lp-hero__chart-wrap { height: 210px; }
}