/* === kiralama-sureci.css — section styles for kiralama-sureci.html === */
/*
  Sections: kiralama-adimlari (how-it-works), taahhut-listesi (guarantees),
  odeme-secenekleri (payment-methods), talep-formu (lead-form)

  Layout DNA: Diagonal / Angled Sections + Floating Islands
  Visual: Negative Space Art + Dot/Line Patterns + Scroll-Triggered Scenes
  Direction: serious, dynamic, airy, modern, medium contrast, geometric, subtle
*/

/* ========================================
   SECTION BASE + H2 DECORATION
   ======================================== */

main > section {
  padding-block: var(--space-3xl);
}

/* H2 accent bar — consistent with project pattern */
main > section h2 {
  position: relative;
  padding-inline-start: var(--space-md);
}

main > section h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.15em;
  width: 3px;
  height: 0.85em;
  background-color: var(--color-accent);
}

/* ========================================
   1. HOW IT WORKS (.kiralama-adimlari)
   ======================================== */

.kiralama-adimlari {
  padding-block: 0;
}

/* Page banner — dark intro */
.surec-giris {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  padding: calc(var(--space-3xl) + 5rem) var(--space-lg) calc(var(--space-2xl) + 4vw);
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
  margin-block-end: calc(-4vw + 1px);
  position: relative;
}

.surec-giris::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 70% 55%, color-mix(in srgb, var(--color-deep) 30%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 15% 40%, color-mix(in srgb, var(--color-trust) 8%, transparent) 0%, transparent 45%);
  pointer-events: none;
}

.surec-giris h1 {
  position: relative;
  z-index: 1;
  max-inline-size: 22ch;
  margin-inline: auto;
  color: var(--color-text-inverse);
}

/* No accent bar on H1 */
.surec-giris h1::before {
  display: none;
}

.surec-giris > p {
  position: relative;
  z-index: 1;
  max-inline-size: 50ch;
  margin-inline: auto;
  margin-block-start: var(--space-md);
  color: color-mix(in srgb, var(--color-light) 65%, transparent);
  font-size: clamp(1rem, 0.8vw + 0.8rem, 1.15rem);
  line-height: var(--leading-relaxed);
}

/* Steps content area */
.surec-icerik {
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.surec-icerik > h2 {
  max-inline-size: 20ch;
}

/* Two-column: image + steps */
.surec-gorunum {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-xl);
  align-items: start;
}

.surec-gorsel img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 3 / 2;
  position: sticky;
  inset-block-start: calc(var(--space-xl) + 4rem);
}

/* Steps list — vertical timeline */
.surec-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.surec-madde {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  position: relative;
}

/* Vertical connector line */
.surec-madde:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 1.25rem;
  inset-block-start: 3.25rem;
  width: 2px;
  height: calc(100% + var(--space-xl) - 3.25rem);
  background: repeating-linear-gradient(
    180deg,
    var(--color-border-strong) 0px,
    var(--color-border-strong) 5px,
    transparent 5px,
    transparent 10px
  );
}

.surec-numara {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--size-small);
  color: var(--color-text-inverse);
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.surec-detay {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block-start: var(--space-2xs);
}

.surec-detay h3 {
  padding-inline-start: 0;
}

/* No accent bar on H3 inside steps */
.surec-detay h3::before {
  display: none;
}

.surec-detay p {
  font-size: var(--size-small);
  line-height: var(--leading-relaxed);
}

/* ========================================
   2. GUARANTEES (.taahhut-listesi)
   ======================================== */

.taahhut-listesi {
  background-color: var(--color-surface-alt);
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
  padding-block: calc(var(--space-3xl) + 3vw);
  position: relative;
}

.taahhut-listesi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-brand) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.03;
  pointer-events: none;
}

.taahhut-icerik {
  position: relative;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.taahhut-icerik > h2 {
  max-inline-size: 24ch;
}

.taahhut-icerik > p {
  margin-block-start: calc(-1 * var(--space-md));
}

.taahhut-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.taahhut-kart {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.taahhut-kart:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.taahhut-kart .icon-lg {
  color: var(--color-flame);
}

.taahhut-kart h3 {
  margin-block-start: var(--space-2xs);
}

/* No accent bar on H3 inside guarantee cards */
.taahhut-kart h3::before {
  display: none;
}

.taahhut-kart p {
  font-size: var(--size-small);
  line-height: var(--leading-relaxed);
}

/* ========================================
   3. PAYMENT METHODS (.odeme-secenekleri)
   ======================================== */

.odeme-secenekleri {
  background-color: var(--color-surface-deep);
  color: var(--color-text-inverse);
  clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
  margin-block-start: calc(-3vw + 1px);
  padding-block-start: calc(var(--space-3xl) + 3vw);
  padding-block-end: var(--space-3xl);
}

.odeme-icerik {
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.odeme-icerik > h2 {
  max-inline-size: 22ch;
  color: var(--color-text-inverse);
}

.odeme-icerik > h2::before {
  background-color: var(--color-warm);
}

.odeme-icerik > p {
  margin-block-start: calc(-1 * var(--space-md));
  color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
}

.odeme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.odeme-kart {
  padding: var(--space-lg) var(--space-md);
  background-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-deep));
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.odeme-kart:hover {
  border-color: color-mix(in srgb, var(--color-warm) 50%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-brand) 30%, transparent);
}

.odeme-kart h3 {
  font-size: var(--size-h3);
  color: var(--color-text-inverse);
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-xs);
  border-block-end: 2px solid var(--color-warm);
}

/* No accent bar on H3 inside payment cards */
.odeme-kart h3::before {
  display: none;
}

.odeme-kart p {
  font-size: var(--size-small);
  color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
  line-height: var(--leading-relaxed);
}

/* Deposit note */
.odeme-teminat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background-color: color-mix(in srgb, var(--color-trust) 10%, transparent);
  border-inline-start: 3px solid var(--color-trust);
  border-radius: var(--radius-sm);
}

.odeme-teminat .icon {
  color: var(--color-trust);
  flex-shrink: 0;
  margin-block-start: 0.15em;
}

.odeme-teminat p {
  font-size: var(--size-small);
  color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
  line-height: var(--leading-relaxed);
  max-inline-size: none;
}

/* ========================================
   4. LEAD FORM (.talep-formu)
   ======================================== */

.talep-formu {
  background-color: var(--color-surface);
}

.talep-icerik {
  max-inline-size: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.talep-metin {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.talep-metin h2 {
  max-inline-size: 22ch;
}

.talep-metin p {
  line-height: var(--leading-relaxed);
}

/* Form area */
.talep-form-alani {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.talep-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-opsiyonel {
  font-weight: 400;
  color: var(--color-text-soft);
}

.talep-form-alani .btn-primary {
  align-self: flex-start;
  margin-block-start: var(--space-xs);
}

/* ========================================
   DARK MODE — Section overrides
   ======================================== */

@media (prefers-color-scheme: dark) {
  .taahhut-listesi {
    background-color: var(--color-surface-alt);
  }

  .taahhut-kart {
    background-color: var(--color-surface);
  }

  .talep-form-alani {
    background-color: var(--color-surface-alt);
  }
}

/* ========================================
   RESPONSIVE — Desktop-first (max-width)
   ======================================== */

/* ---- Below lg (1024px) ---- */
@media (max-width: 1023px) {
  .odeme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Below md (768px) — burger threshold ---- */
@media (max-width: 767px) {
  /* General section padding reduction */
  main > section {
    padding-block: var(--space-2xl);
  }

  /* Banner */
  .surec-giris {
    padding: calc(var(--space-2xl) + 4rem) var(--space-md) calc(var(--space-xl) + 2vw);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
    margin-block-end: calc(-2vw + 1px);
  }

  .surec-giris h1 {
    max-inline-size: 18ch;
  }

  /* Steps — single column */
  .surec-gorunum {
    grid-template-columns: 1fr;
  }

  .surec-gorsel img {
    position: static;
  }

  .surec-icerik {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  /* Guarantees */
  .taahhut-listesi {
    clip-path: polygon(0 2vw, 100% 0, 100% calc(100% - 2vw), 0 100%);
    padding-block: calc(var(--space-2xl) + 2vw);
  }

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

  /* Payment */
  .odeme-secenekleri {
    clip-path: polygon(0 2vw, 100% 0, 100% 100%, 0 100%);
    margin-block-start: calc(-2vw + 1px);
    padding-block-start: calc(var(--space-2xl) + 2vw);
    padding-block-end: var(--space-2xl);
  }

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

  /* Form grid — single column */
  .talep-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Below sm (480px) ---- */
@media (max-width: 479px) {
  .surec-giris {
    padding: calc(var(--space-xl) + 3.5rem) var(--space-md) calc(var(--space-lg) + 2vw);
  }

  .talep-form-alani {
    padding: var(--space-lg);
  }

  .surec-madde {
    grid-template-columns: 1fr;
  }

  .surec-madde:not(:last-child)::after {
    display: none;
  }
}