/* KORGU — ana sayfa yerleşimi
 * Tasarım ve geliştirme: Mini Bilişim
 * ============================================================================
 * Asimetrik kompozisyon. İçerik solda hizalı, 3B sahne sağda serbest durur.
 * Üç adım cam kart şeridi olarak sunulur.
 *
 * Gerektirir: tokens.css -> base.css -> bu dosya
 * ============================================================================ */

/* Sahne sağda olduğu için karartma soldan sağa açılır. */
.vignette {
  background:
    radial-gradient(120% 80% at 78% 45%,
      transparent 0%, rgba(4, 7, 13, .55) 55%, rgba(4, 7, 13, .92) 100%),
    linear-gradient(90deg,
      rgba(4, 7, 13, .96) 0%, rgba(4, 7, 13, .78) 34%, transparent 62%);
}

/* ------------------------------------------------------------------- hero */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 44rem;
  padding-block: clamp(.5rem, 3vh, 2rem);
}

.hero .badge { margin-bottom: 1.25rem; }

.hero h1 {
  margin-bottom: 1rem;
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
}

/* Ana mesaj — başlığın hemen altında, gövde metninden belirgin şekilde büyük */
.hero .lede {
  max-width: 34rem;
  margin-bottom: 1.9rem;
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--ink);
}

/* ------------------------------------------------------------- üç adım */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;                       /* 1px boşluk + zemin rengi = ince ayraç */
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
}

.steps li {
  display: grid;
  align-content: start;
  gap: .3rem;
  padding: 1.05rem 1.1rem;
  background: var(--surface-card);
  backdrop-filter: blur(10px);
}

.steps .step-no {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .2em;
  color: var(--korgu-cyan);
  opacity: .75;
}

.steps h2 {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--ink);
}

.steps p {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- duyarlı */

@media (max-width: 860px) {
  /* Dar ekranda sahne yukarı taşınır; içerik onun altından başlar. */
  .vignette {
    background:
      radial-gradient(90% 50% at 50% 22%,
        transparent 0%, rgba(4, 7, 13, .7) 60%, rgba(4, 7, 13, .95) 100%),
      linear-gradient(180deg,
        transparent 0%, rgba(4, 7, 13, .82) 42%, var(--surface-0) 78%);
  }

  .hero {
    max-width: none;
    padding-top: 30vh;
  }

  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}