/* Marketing landing page (phase 6.2). Deliberately its own stylesheet, not
   folded into style.css: these rules (nav scroll-state, hero gradient,
   stat/step/pricing grids, scroll-reveal) are only ever used on one page and
   would otherwise bloat the CSS every authenticated screen also has to load.
   Reuses the shared design tokens (--brand/--surface/--text/... from
   style.css's :root and [data-theme="dark"]) so the page stays on-brand and
   themeable without redefining a second palette. */

.lp-skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 200;
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: top 0.15s ease;
}

.lp-skip-link:focus {
  top: 8px;
}

.lp-body {
  overflow-x: hidden;
}

.lp-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.lp-container-narrow {
  max-width: 820px;
}

.lp-section {
  padding: 88px 0;
}

.lp-section-sub {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 640px;
  margin: -8px 0 40px;
}

.lp-eyebrow {
  display: inline-block;
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ---- Nav ---- */

/* position: fixed (not sticky) is what makes "transparent over the hero"
   actually work - the nav needs to visually sit ON TOP of the hero's
   gradient rather than push it down in normal flow, or the transparent
   state just shows the plain page background instead (unreadable white nav
   text on the light theme's off-white page). Every .lp-section already has
   88px/56px of top padding (comfortably more than this nav's ~64-70px
   height), so once the nav goes solid on scroll it never actually clips a
   heading - no extra scroll-margin/padding hack needed on the sections. */
.lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lp-nav.lp-nav-solid {
  background: var(--surface);
  border-bottom-color: var(--border);
}

.lp-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.lp-logo {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: var(--lp-nav-fg, var(--text));
  margin-right: auto;
  display: inline-flex;
  align-items: center;
}

/* Muhtelix logo lockup (from _brand.html's lp_logo() macro). Full-colour on
   light, all-white on dark - and always all-white while the nav is still
   transparent over the dark hero gradient, regardless of theme. */
.lp-logo-img {
  height: 26px;
  width: auto;
  display: block;
}
.lp-logo-white { display: none; }
:root[data-theme="dark"] .lp-logo-color { display: none; }
:root[data-theme="dark"] .lp-logo-white { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-logo-color { display: none; }
  :root:not([data-theme="light"]) .lp-logo-white { display: block; }
}
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-logo .lp-logo-color { display: none; }
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-logo .lp-logo-white { display: block; }

.lp-nav.lp-nav-solid .lp-logo,
.lp-nav.lp-nav-solid .lp-nav-links a {
  color: var(--text);
}

/* Scoped to .lp-nav-inner specifically, NOT the whole .lp-nav - the
   transparent-over-hero state only ever applies to that bar. .lp-mobile-menu
   is a sibling of .lp-nav-inner (both live inside <header class="lp-nav">)
   but is always its own opaque var(--surface) panel regardless of scroll
   position; matching on .lp-nav alone would force its links white too and
   make them invisible against that panel - a real contrast bug caught while
   screenshotting the mobile menu open. */
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-logo,
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-nav-links a {
  color: #fff;
}

.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.lp-nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

.lp-nav-links a:hover {
  opacity: 1;
}

.lp-nav:not(.lp-nav-solid) .lp-nav-inner .icon-btn {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}

.lp-theme-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
}

.lp-theme-icon {
  width: 18px;
  height: 18px;
}

.lp-theme-icon-moon {
  display: none;
}

:root[data-theme="dark"] .lp-theme-icon-sun {
  display: none;
}

:root[data-theme="dark"] .lp-theme-icon-moon {
  display: block;
}

.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-link-btn {
  color: #fff;
}

/* ---- Language switch (?lang=tr / ?lang=en) ---- */

.lp-lang-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

.lp-lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text-muted, var(--text));
  opacity: 0.75;
}

.lp-lang-switch a:hover {
  opacity: 1;
}

.lp-lang-switch a.is-active {
  background: var(--brand);
  color: #fff;
  opacity: 1;
}

/* Transparent-over-hero nav state - same "scope to .lp-nav-inner only" rule
   as the logo/links above, so the opaque mobile-menu copy is unaffected. */
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-lang-switch {
  border-color: rgba(255, 255, 255, 0.5);
}
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-lang-switch a {
  color: #fff;
}
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-lang-switch a.is-active {
  background: rgba(255, 255, 255, 0.22);
}

.lp-lang-switch a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-lang-switch a:focus-visible {
  outline-color: #fff;
}

/* The mobile-menu copy only shows inside the drawer; the nav-inner copy
   only shows in the top bar. */
.lp-lang-switch-mobile {
  display: none;
  align-self: flex-start;
  margin-top: 8px;
}

.lp-link-btn {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
}

.lp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.lp-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

.lp-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.lp-mobile-menu a {
  padding: 12px 4px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ---- Hero ---- */

.lp-hero {
  position: relative;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-dark) 55%, black) 0%,
    color-mix(in srgb, var(--brand) 35%, black) 55%,
    color-mix(in srgb, var(--brand-dark) 25%, black) 100%
  );
  color: #fff;
  padding: 64px 0 96px;
  overflow: hidden;
}

.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.16), transparent 55%);
  pointer-events: none;
}

.lp-hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.lp-hero-copy h1 {
  font-size: 44px;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 20px;
}

.lp-hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  margin: 0 0 32px;
}

.lp-hero-ctas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-hero-ctas .lp-link-btn {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

.lp-btn-lg {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
}

.lp-hero-trust {
  margin: 20px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* A trimmed, single-centered-column hero (unsubscribed.html's game-shelf
   intro, bilgi.html's product hero) instead of .lp-hero-inner's two-column
   grid. The generic .lp-hero-sub / .lp-hero-ctas below it are authored for
   the left-aligned two-column hero (max-width + flex-start), so they must be
   re-centered here or they render visibly offset from the centered h1. */
.lp-hero-compact {
  padding-bottom: 48px;
}

.lp-hero-inner-compact {
  grid-template-columns: 1fr;
  text-align: center;
  padding-bottom: 0;
}

.lp-hero-inner-compact .lp-hero-copy {
  max-width: 760px;
  margin: 0 auto;
}

.lp-hero-inner-compact .lp-hero-sub {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.lp-hero-inner-compact .lp-hero-ctas {
  justify-content: center;
}

/* Same content the full hero above used to carry (intro paragraph/CTAs/
   trust line), now living in an ordinary .lp-section further down the page
   instead of over the hero's dark gradient - needs theme-aware text colors
   instead of .lp-hero-sub/.lp-hero-trust's hardcoded white/rgba(255,...). */
.lp-hero-intro {
  text-align: center;
}

.lp-hero-intro-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 100%;
  margin: 0 auto 28px;
}

.lp-hero-intro-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.lp-hero-intro-trust {
  margin: 0 0 40px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .lp-hero-compact {
    padding-bottom: 32px;
  }

  .lp-hero-intro-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .lp-hero-intro-ctas .btn,
  .lp-hero-intro-ctas .lp-link-btn {
    text-align: center;
  }
}

/* Decorative "app mockup" card - pure CSS, no screenshots, so it stays crisp
   and fast on every connection/device. */
.lp-hero-visual {
  display: flex;
  justify-content: center;
}

.lp-mock-window {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 18px;
  color: var(--text);
}

.lp-mock-titlebar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.lp-mock-titlebar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
}

.lp-mock-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.lp-mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

.lp-mock-search-text {
  font-size: 13px;
  color: var(--text-muted);
}

.lp-mock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.lp-mock-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand-weak);
  flex-shrink: 0;
}

/* Short "found lead -> personalized opening line" preview text (phase
   value-prop rewrite) - was a plain decorative gray bar before; real
   (illustrative) copy communicates the personalization step at a glance
   instead of an abstract shape. Single line + ellipsis since the row is
   narrow (avatar + chip already take a fixed chunk of the 420px card). */
.lp-mock-line {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-mock-line strong {
  color: var(--text);
  font-weight: 600;
}

.lp-mock-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.lp-mock-chip-ok {
  background: var(--success-weak);
  color: var(--success);
}

.lp-mock-chip-sent {
  background: var(--info-weak);
  color: var(--info);
}

.lp-mock-reply {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: var(--brand-weak);
  border: 1px solid var(--border);
}

.lp-mock-chip-reply {
  background: var(--success-weak);
  color: var(--success);
}

.lp-mock-reply-text {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text);
}

/* ---- Stats ---- */

.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lp-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

.lp-stat-num {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--brand);
  margin-bottom: 8px;
}

.lp-stat-line {
  font-size: 14px;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.5;
}

.lp-stat-source {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---- Steps ---- */

.lp-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lp-step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 22px 22px;
}

.lp-step-num {
  position: absolute;
  top: -14px;
  left: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-step-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: var(--brand);
  margin-bottom: 12px;
}

.lp-step-icon svg {
  width: 100%;
  height: 100%;
}

.lp-step-card h3 {
  margin-bottom: 6px;
}

.lp-step-card p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

/* ---- Benefits ---- */

.lp-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lp-benefit-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

.lp-benefit-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--brand);
  background: var(--brand-weak);
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 14px;
}

.lp-benefit-icon svg {
  width: 100%;
  height: 100%;
}

.lp-benefit-tile h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.lp-benefit-tile p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

/* ---- Why us ---- */

.lp-why-section {
  background: var(--surface-2);
}

.lp-why-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.lp-why-copy h2 {
  font-size: 30px;
  line-height: 1.25;
}

.lp-why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: 1 / -1;
}

.lp-why-inner .lp-why-copy {
  grid-column: 1;
}

.lp-why-inner .lp-why-list {
  grid-column: 2;
  grid-row: 1;
}

.lp-why-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.lp-why-check {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--success);
  margin-top: 1px;
}

.lp-why-check svg {
  width: 100%;
  height: 100%;
}

.lp-why-stat {
  grid-column: 2;
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text);
  background: var(--brand-weak);
  border-radius: 8px;
  padding: 14px 16px;
}

.lp-why-stat .lp-stat-source {
  display: inline;
}

/* ---- Social proof ---- */

.lp-proof-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lp-proof-header h2 {
  margin-bottom: 0;
}

.lp-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.lp-testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
}

.lp-testimonial-card p {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 14px;
}

.lp-testimonial-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.lp-metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.lp-metric {
  text-align: center;
}

.lp-metric-num {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--text-muted);
}

.lp-metric span:last-child {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Pricing ---- */

.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.lp-pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.lp-pricing-card-highlight {
  border-color: var(--brand);
  box-shadow: 0 8px 28px rgba(47, 111, 91, 0.16);
}

.lp-pricing-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.lp-pricing-tagline {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.lp-pricing-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  flex: 1;
}

.lp-pricing-features li {
  padding-left: 20px;
  position: relative;
}

.lp-pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.lp-pricing-cta {
  text-align: center;
}

.lp-pricing-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 24px 0 0;
}

/* ---- FAQ ---- */

.lp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.lp-faq-item h3 {
  margin: 0;
}

.lp-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  padding: 18px 20px;
  min-height: 44px;
  text-align: left;
}

.lp-faq-caret {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.lp-faq-question[aria-expanded="true"] .lp-faq-caret {
  transform: rotate(225deg);
}

.lp-faq-answer {
  padding: 0 20px 18px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.lp-faq-answer p {
  margin: 0;
}

/* ---- Final CTA band ---- */

.lp-final-cta {
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--brand-dark) 55%, black) 0%,
    color-mix(in srgb, var(--brand) 40%, black) 100%
  );
  padding: 64px 0;
  text-align: center;
}

.lp-final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lp-final-cta h2 {
  color: #fff;
  font-size: 30px;
  max-width: 620px;
  margin: 0;
}

/* ---- Contact page (app/templates/contact.html) ---- */
/* This page has no .lp-hero, so .lp-section's normal 88px top padding (sized
   to clear the nav) reads as cramped for a single, short, centered section -
   a bit of extra top padding here is purely aesthetic, not required for the
   nav-clipping reason that padding otherwise exists for. */

.lp-contact-section {
  padding-top: 160px;
  text-align: center;
}

/* bilgi.html reuses this centered contact block as one section in a full
   page (not contact.html's standalone short page), so it keeps the normal
   .lp-section rhythm instead of the extra standalone-page top padding. */
#lp-iletisim.lp-contact-section {
  padding-top: 88px;
}

.lp-contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.lp-contact-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  color: var(--brand);
  background: var(--brand-weak);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 20px;
}

.lp-contact-icon svg {
  width: 100%;
  height: 100%;
}

.lp-contact-sub {
  margin-left: auto;
  margin-right: auto;
}

.lp-contact-email-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-copy-btn {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp-copy-icon {
  width: 17px;
  height: 17px;
}

.lp-copy-icon-done {
  display: none;
  color: var(--success, #2f6f5b);
}

.lp-copy-btn.is-copied .lp-copy-icon-default {
  display: none;
}

.lp-copy-btn.is-copied .lp-copy-icon-done {
  display: block;
}

.lp-copy-btn.is-copied {
  border-color: var(--success, #2f6f5b);
  color: var(--success, #2f6f5b);
}

.lp-contact-back {
  margin-top: 32px;
}

.lp-contact-back a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}

.lp-contact-back a:hover {
  color: var(--text);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .lp-contact-section {
    padding-top: 128px;
  }
}

/* ---- Shared hero eyebrow + button row (bilgi.html) ---- */

.lp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ---- Generic button row ---- */

.lp-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lp-btn-row + .lp-btn-row {
  margin-top: 10px;
}

/* ---- Unsubscribe page (app/templates/unsubscribed.html) ----
   Recipient-facing, carries only the sending user's own brand/content.
   Asks Hayır/Evet first, then shows the outcome. */

.unsub-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.unsub-preview-bar {
  background: var(--warning-weak, var(--brand-weak));
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13.5px;
  text-align: center;
  padding: 10px 16px;
}

.unsub-preview-bar a {
  margin-left: 8px;
  color: var(--brand);
  font-weight: 600;
}

.unsub-preview-states {
  display: inline-block;
  margin-left: 12px;
}

.unsub-preview-states a[aria-current="page"] {
  text-decoration: none;
  color: var(--text);
}

.unsub-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.unsub-card {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px 32px;
  text-align: center;
}

.unsub-brand {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin: 0 0 20px;
}

.unsub-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--success-weak, var(--brand-weak));
  color: var(--success, var(--brand));
  margin-bottom: 16px;
}

.unsub-check svg {
  width: 24px;
  height: 24px;
}

.unsub-check--ask {
  background: var(--brand-weak);
  color: var(--brand);
}

.unsub-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.unsub-actions .btn {
  min-height: 46px;
  padding: 0 22px;
  font-size: 15px;
}

.unsub-undo {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-muted);
}

.unsub-linkbtn {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.unsub-card h1 {
  font-size: 22px;
  margin: 0 0 12px;
}

.unsub-text {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.unsub-muted {
  color: var(--text-muted);
}

.unsub-custom {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}

.unsub-custom > :first-child {
  margin-top: 0;
}

.unsub-custom > :last-child {
  margin-bottom: 0;
}

.unsub-custom img {
  max-width: 100%;
  height: auto;
}

.unsub-footer {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .unsub-card {
    padding: 28px 20px;
  }

  .unsub-actions .btn {
    flex: 1 1 100%;
  }
}

/* ---- Footer ---- */

.lp-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.lp-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.lp-footer-brand p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 8px 0 0;
  max-width: 260px;
}

.lp-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}

.lp-footer-links a:hover {
  color: var(--brand);
}

.lp-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  text-align: right;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Scroll reveal ----
   Progressive enhancement: .lp-reveal elements are fully visible by default
   (so a JS failure/block never hides content - see landing.js). Only once
   landing.js has run does it tag <body class="lp-js"> and the hidden/fade-in
   states below actually apply; prefers-reduced-motion is checked in JS too,
   so a reduced-motion visitor never gets the .lp-js class's hidden state at
   all rather than getting it and having the transition merely skipped. */

body.lp-js .lp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

body.lp-js .lp-reveal.lp-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-nav {
    transition: none;
  }

  .lp-faq-caret {
    transition: none;
  }
}

/* ---- Focus states ---- */

.lp-nav-links a:focus-visible,
.lp-link-btn:focus-visible,
.lp-logo:focus-visible,
.lp-hamburger:focus-visible,
.lp-faq-question:focus-visible,
.lp-footer-links a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lp-nav:not(.lp-nav-solid) .lp-nav-links a:focus-visible,
.lp-nav:not(.lp-nav-solid) .lp-link-btn:focus-visible,
.lp-nav:not(.lp-nav-solid) .lp-logo:focus-visible {
  outline-color: #fff;
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
  .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .lp-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lp-hero-sub {
    max-width: 100%;
  }

  .lp-hero-visual {
    max-width: 420px;
    /* min-width: 0 overrides the grid item's automatic min-width:auto
       (which resolves to the subtree's min-content size) - without it, the
       real text now inside .lp-mock-line (white-space: nowrap, so its
       min-content IS its full unwrapped width) forces this whole card wider
       than the viewport on narrow phones regardless of max-width, a classic
       CSS grid "min-content blowout". Caught via an actual mobile-viewport
       screenshot, not a hypothetical - see the sibling .lp-mock-line note. */
    min-width: 0;
    width: 100%;
    margin: 0 auto;
  }

  .lp-stats-grid,
  .lp-steps-grid,
  .lp-benefits-grid,
  .lp-testimonial-grid,
  .lp-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-why-inner {
    grid-template-columns: 1fr;
  }

  .lp-why-inner .lp-why-copy,
  .lp-why-inner .lp-why-list,
  .lp-why-stat {
    grid-column: 1;
  }

  .lp-footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .lp-footer-meta {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 860px) {
  .lp-nav-links {
    display: none;
  }

  .lp-hamburger {
    display: inline-flex;
  }

  .lp-mobile-menu[hidden] {
    display: none;
  }

  /* Move the language switch into the drawer on mobile - the top bar only
     has room for the logo, theme toggle and hamburger at narrow widths. */
  .lp-nav-inner > .lp-lang-switch {
    display: none;
  }

  .lp-mobile-menu:not([hidden]) .lp-lang-switch-mobile {
    display: inline-flex;
  }
}

@media (min-width: 861px) {
  .lp-mobile-menu {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .lp-section {
    padding: 56px 0;
  }

  .lp-hero {
    padding: 36px 0 64px;
  }

  .lp-hero-copy h1 {
    font-size: 30px;
  }

  .lp-hero-sub {
    font-size: 16px;
  }

  .lp-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .lp-hero-ctas .btn,
  .lp-hero-ctas .lp-link-btn {
    text-align: center;
  }

  .lp-stats-grid,
  .lp-steps-grid,
  .lp-benefits-grid,
  .lp-testimonial-grid,
  .lp-metric-strip,
  .lp-pricing-grid {
    grid-template-columns: 1fr;
  }

  .lp-footer-inner {
    grid-template-columns: 1fr;
  }

  .lp-footer-meta {
    align-items: flex-start;
    text-align: left;
  }

  .lp-final-cta h2 {
    font-size: 24px;
  }
}