/* Solutions */

.lc-solution-nav {
  padding-block: var(--lc-space-4);
  border-bottom: 1px solid var(--lc-border);
}

.lc-solution {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  border-bottom: 1px solid var(--lc-border);
}

.lc-solution:last-of-type { border-bottom: 0; }

@media (min-width: 1024px) {
  .lc-solution { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lc-solution:nth-of-type(even) .lc-solution__visual { order: 2; }
}

.lc-solution__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background:
    radial-gradient(60% 70% at 30% 70%, color-mix(in srgb, var(--lc-accent) 14%, transparent), transparent 70%),
    var(--lc-surface-raised);
  overflow: hidden;
}

.lc-solution__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--lc-pixel-dot) 1.1px, transparent 1.6px);
  background-size: 14px 14px;
}

.lc-solution__visual .lc-solution-tile__scene { position: absolute; inset: 0; height: auto; }

.lc-solution__icon {
  position: absolute;
  left: var(--lc-space-5);
  bottom: var(--lc-space-5);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--lc-radius-sm);
  border: 1px solid var(--lc-border-strong);
  background: var(--lc-surface);
  color: var(--lc-text);
}

.lc-solution__tag {
  position: absolute;
  right: var(--lc-space-5);
  bottom: var(--lc-space-5);
  background: var(--lc-surface);
}

.lc-solution__body {
  display: grid;
  gap: var(--lc-space-5);
  align-content: start;
}

.lc-solution__audience {
  margin: 0;
  font-size: var(--lc-text-sm);
  color: var(--lc-text-muted);
}

.lc-solution__audience strong { color: var(--lc-text); font-weight: var(--lc-weight-semibold); }

.lc-solution-cta { padding-bottom: var(--lc-section-y-compact); }

.lc-unsure {
  display: grid;
  gap: var(--lc-space-6);
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-surface-raised);
}

@media (min-width: 768px) {
  .lc-unsure { grid-template-columns: minmax(0, 1fr) auto; }
}

.lc-unsure p { margin: var(--lc-space-2) 0 0; color: var(--lc-text-muted); }

/* /nasil-calisir */
@media (min-width: 768px) {
  .lc-how-steps { row-gap: var(--lc-space-10); }
}

.lc-how-steps .lc-icon { margin-block: var(--lc-space-2); }
.lc-how-cta { margin-top: var(--lc-space-10); }