/* === filo-rehberi.css — section styles for filo-rehberi.html === */
/*
  Sections: tam-filo (vehicle catalog), donanim-karsilastirma (specs),
  maliyet-haritasi (pricing comparison)

  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 index.html 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. VEHICLE CATALOG (.tam-filo)
   ======================================== */

.tam-filo {
  padding-block: 0;
}

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

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

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

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

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

/* Category list */
.tam-filo-liste {
  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-2xl);
}

/* Alternating image + text blocks */
.filo-kategori-blok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.filo-blok-ters .filo-kategori-gorsel {
  order: 2;
}

.filo-blok-ters .filo-kategori-metin {
  order: 1;
}

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

.filo-kategori-metin h2 {
  margin-block-end: var(--space-sm);
}

.filo-kategori-metin > p {
  margin-block-end: var(--space-md);
  line-height: var(--leading-relaxed);
}

.filo-kategori-metin ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.filo-kategori-metin li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--size-small);
  color: var(--color-text-soft);
}

.filo-kategori-metin li .icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ========================================
   2. SPECS (.donanim-karsilastirma)
   ======================================== */

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

.donanim-karsilastirma::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;
}

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

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

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

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

.donanim-kart {
  background-color: var(--color-surface);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

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

.donanim-kart .icon-lg {
  color: var(--color-flame);
  margin-block-end: var(--space-sm);
}

.donanim-kart h3 {
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-xs);
  border-block-end: 2px solid var(--color-accent);
}

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

.donanim-kart dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.donanim-satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--color-border);
}

.donanim-satir:last-child {
  border-block-end: none;
}

.donanim-satir dt {
  font-weight: 600;
  font-size: var(--size-small);
  color: var(--color-text);
  white-space: nowrap;
}

.donanim-satir dd {
  font-size: var(--size-small);
  color: var(--color-text-soft);
  text-align: end;
}

/* ========================================
   3. PRICING COMPARISON (.maliyet-haritasi)
   ======================================== */

.maliyet-haritasi {
  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);
}

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

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

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

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

.maliyet-tablo-sarma {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.maliyet-tablo {
  width: 100%;
  min-width: 580px;
  border-collapse: separate;
  border-spacing: 0;
}

.maliyet-tablo thead th {
  padding: var(--space-md) var(--space-lg);
  text-align: start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-warm);
  border-block-end: 2px solid color-mix(in srgb, var(--color-text-inverse) 15%, transparent);
}

.maliyet-tablo tbody td {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--size-body);
  color: color-mix(in srgb, var(--color-text-inverse) 85%, transparent);
  border-block-end: 1px solid color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
}

.maliyet-tablo tbody td:first-child {
  font-weight: 600;
  color: var(--color-text-inverse);
}

.maliyet-tablo tbody tr:last-child td {
  border-block-end: none;
}

.maliyet-tablo tbody tr:hover td {
  background-color: color-mix(in srgb, var(--color-trust) 8%, transparent);
}

/* Alternating row tint */
.maliyet-tablo tbody tr:nth-child(even) td {
  background-color: color-mix(in srgb, var(--color-text-inverse) 3%, transparent);
}

.maliyet-tablo tbody tr:nth-child(even):hover td {
  background-color: color-mix(in srgb, var(--color-trust) 10%, transparent);
}

.maliyet-dipnot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.maliyet-dipnot p {
  font-size: var(--size-small);
  color: color-mix(in srgb, var(--color-text-inverse) 50%, transparent);
  max-inline-size: 48ch;
}

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

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

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

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

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

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

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

  .tam-filo-giris h1 {
    max-inline-size: 16ch;
  }

  /* Category blocks — single column */
  .tam-filo-liste {
    padding-block: var(--space-xl) var(--space-2xl);
    gap: var(--space-xl);
  }

  .filo-kategori-blok {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .filo-blok-ters .filo-kategori-gorsel {
    order: 0;
  }

  .filo-blok-ters .filo-kategori-metin {
    order: 0;
  }

  /* Specs — 2 columns */
  .donanim-karsilastirma {
    clip-path: polygon(0 2vw, 100% 0, 100% 100%, 0 calc(100% - 2vw));
    padding-block: calc(var(--space-2xl) + 2vw);
  }

  .donanim-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing — reduced angles */
  .maliyet-haritasi {
    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);
  }

  .maliyet-dipnot {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

  .tam-filo-liste {
    padding-inline: var(--space-md);
  }

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

  .maliyet-tablo thead th,
  .maliyet-tablo tbody td {
    padding: var(--space-sm) var(--space-md);
  }
}