/* === kiralama-talebi.css — section styles for kiralama-talebi.html === */
/*
  Sections: talep-sayfasi (booking), rezervasyon-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. BOOKING (.talep-sayfasi)
   ======================================== */

.talep-sayfasi {
  padding-block: 0;
}

/* Page banner — dark intro */
.talep-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;
}

.talep-giris::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 60% 45%, color-mix(in srgb, var(--color-deep) 32%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 20% 65%, color-mix(in srgb, var(--color-trust) 10%, transparent) 0%, transparent 45%);
  pointer-events: none;
}

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

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

.talep-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);
}

/* Booking info content */
.talep-rehber {
  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);
}

.talep-rehber > h2 {
  max-inline-size: 26ch;
}

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

.rehber-gorsel img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.rehber-kartlar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rehber-kart {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background-color: var(--color-surface-alt);
  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);
}

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

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

.rehber-kart h3 {
  padding-inline-start: 0;
}

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

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

/* ========================================
   2. LEAD FORM (.rezervasyon-formu)
   ======================================== */

.rezervasyon-formu {
  background-color: var(--color-surface-alt);
  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);
  position: relative;
}

.rezervasyon-formu::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 16px,
    var(--color-brand) 16px,
    var(--color-brand) 17px
  );
  opacity: 0.02;
  pointer-events: none;
}

.form-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);
}

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

.form-metin h2 {
  max-inline-size: 24ch;
}

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

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

/* Fieldset groups */
.form-grup {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-grup-baslik {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  padding-block-end: var(--space-xs);
  border-block-end: 2px solid var(--color-accent);
  margin-block-end: var(--space-xs);
}

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

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

.form-onay {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

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

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

@media (prefers-color-scheme: dark) {
  .rehber-kart {
    background-color: var(--color-surface);
  }

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

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

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

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

  /* Banner */
  .talep-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);
  }

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

  /* Booking info — single column */
  .talep-rehber {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .rehber-gorunum {
    grid-template-columns: 1fr;
  }

  /* Form section */
  .rezervasyon-formu {
    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);
  }

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

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

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