/* ==========================================================================
   ANASAYFA — Hero, Showroom Vitrini, Marka Gridi, Öne Çıkanlar, CTA
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--gradient-navy);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: var(--gradient-hero-overlay); z-index: 1; }
.hero__grid-lines {
  position: absolute; inset: 0; z-index: 1; opacity: 0.35; pointer-events: none;
  background-image: linear-gradient(rgba(229,231,235,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(229,231,235,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}
.hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding-top: var(--header-h); }
.hero__badge { margin-bottom: var(--space-2); }
.hero__title {
  font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.03em; max-width: 18ch;
}
.hero__title em { font-style: normal; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__subtitle { font-size: var(--fs-body-lg); color: var(--color-text-muted); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; justify-content: center; }
.hero__scroll {
  position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text-dim); font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(var(--color-hover), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; top: -40px; left: 0; width: 100%; height: 40px; background: linear-gradient(#fff, transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine { to { top: 40px; } }

/* --------------------------------------------------------------------------
   SHOWROOM — Sitenin en önemli bölümü
   -------------------------------------------------------------------------- */
.showroom { position: relative; padding-block: var(--space-16) var(--space-10); overflow: hidden; }
.showroom__ambient {
  position: absolute; inset: -10% -10% auto -10%; height: 70%; z-index: 0; pointer-events: none;
  background: var(--gradient-radial-spot);
  filter: blur(10px);
}
.showroom__head { position: relative; z-index: 1; }

.showroom__stage {
  position: relative;
  z-index: 1;
  height: min(78vh, 760px);
  min-height: 520px;
  margin-inline: auto;
  max-width: 1180px;
  perspective: 1600px;
}

/* Dairesel döner platform */
.showroom__platform {
  position: absolute; left: 50%; bottom: 8%; width: min(64%, 620px); aspect-ratio: 4 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at center, rgba(37,99,235,0.22), rgba(15,23,42,0) 70%);
  box-shadow:
    0 0 0 1px rgba(229,231,235,0.08),
    0 40px 80px rgba(0,0,0,0.55),
    inset 0 2px 24px rgba(255,255,255,0.06);
  animation: platformSpin 20s linear infinite;
}
.showroom__platform::before, .showroom__platform::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgba(229,231,235,0.12);
}
.showroom__platform::after { inset: 20%; border-color: rgba(229,231,235,0.08); }
@keyframes platformSpin {
  from { background-position: 0 0; }
  to { background-position: 120px 0; }
}

/* Ana araç */
.showroom__main {
  position: absolute; left: 50%; bottom: 14%; width: min(52%, 560px); transform: translateX(-50%);
  transform-style: preserve-3d; z-index: 3;
}
.showroom__mainMedia {
  aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: visible; background: transparent;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.5));
  transition: filter 0.4s ease;
}
.showroom__mainMedia img { border-radius: var(--radius-lg); }
.showroom__mainMedia .studio-placeholder { border-radius: var(--radius-lg); }
.showroom__main-code {
  position: absolute; top: 10px; left: 10px; z-index: 2;
}
.showroom__main-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.showroom__main-fav svg { width: 20px; height: 20px; }
.showroom__main-fav.is-active { color: var(--color-hover); }

/* Yarım daire araç kartları (arc) */
.showroom__arc {
  position: absolute; top: 0; left: 0; right: 0; height: 46%; z-index: 2;
  pointer-events: none;
}
.arc-card {
  position: absolute; top: 0; left: 50%; width: 132px;
  margin-left: -66px; margin-top: -52px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: auto;
  transition: border-color var(--transition-fast);
}
.arc-card__media {
  aspect-ratio: 4/3; border-radius: var(--radius-md); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}
.arc-card__media img { border-radius: var(--radius-md); }
.arc-card__brand { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; }
.arc-card__brand .brand-mark { background: rgba(15,23,42,0.55); border-radius: 6px; backdrop-filter: blur(6px); padding: 3px; }
.arc-card__brand img { filter: brightness(0) invert(1); }
.arc-card__info { display: none; }
.arc-card.is-active .arc-card__media { border-color: var(--color-hover); box-shadow: var(--shadow-glow-hover); }
.arc-card.is-active .arc-card__info {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; color: var(--color-text);
}
.arc-card.is-active .arc-card__info strong { font-size: var(--fs-xs); font-family: var(--font-heading); }
.arc-card.is-active .arc-card__info em { font-style: normal; font-size: 10px; color: var(--color-hover); }

.showroom__nav {
  position: absolute; top: 50%; z-index: 4; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--color-text);
  transform: translateY(-50%); transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.showroom__nav:hover { border-color: var(--color-hover); background: rgba(37,99,235,0.18); }
.showroom__nav--prev { left: 0; }
.showroom__nav--next { right: 0; }

/* Bilgi paneli */
.showroom__info {
  position: relative; z-index: 1; margin-top: var(--space-8); padding: var(--space-6) var(--space-8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.showroom__info-title { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.showroom__info-title span { font-size: var(--fs-xs); color: var(--color-text-dim); }
.showroom__info-title h3 { font-size: var(--fs-h3); }
.showroom__specs { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.showroom__specs div { display: flex; flex-direction: column; gap: 4px; min-width: 84px; }
.showroom__specs span { font-size: var(--fs-xs); color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.showroom__specs strong { font-size: var(--fs-small); font-weight: 600; }
.showroom__price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.showroom__price-block strong { font-size: var(--fs-h3); font-family: var(--font-heading); color: var(--color-hover); }
.showroom__actions { display: flex; gap: var(--space-3); }

@media (max-width: 1080px) {
  .showroom__info { justify-content: center; text-align: center; }
  .showroom__info-title, .showroom__price-block { align-items: center; }
}

@media (max-width: 720px) {
  .showroom__stage { height: 560px; }
  .arc-card { width: 92px; margin-left: -46px; margin-top: -35px; }
  .showroom__nav { width: 40px; height: 40px; }
  .showroom__specs { justify-content: center; }
}

/* --------------------------------------------------------------------------
   MARKA GRİDİ
   -------------------------------------------------------------------------- */
.brand-section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.brand-category { padding: var(--space-6); }
.brand-category__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.brand-category__head h3 { font-size: var(--fs-h3); }
.brand-category__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); max-height: 420px; overflow-y: auto; padding-right: 4px; }
.brand-tile {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: rgba(255,255,255,0.02);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.brand-tile:hover { transform: translateY(-3px); border-color: var(--color-hover); background: rgba(37,99,235,0.08); }
.brand-tile .brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand-tile .brand-mark__fallback { font-size: 11px; }
.brand-tile__meta { display: flex; flex-direction: column; overflow: hidden; }
.brand-tile__meta strong { font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tile__meta span { font-size: var(--fs-xs); color: var(--color-text-dim); }

@media (max-width: 1080px) {
  .brand-section-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   ÖNE ÇIKAN ARAÇLAR
   -------------------------------------------------------------------------- */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 1080px) { .featured-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .featured-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   CTA BANNER
   -------------------------------------------------------------------------- */
.cta-banner {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; padding: var(--space-12) var(--space-8);
  background: var(--gradient-navy); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.cta-banner::before { content: ""; position: absolute; inset: 0; background: var(--gradient-radial-spot); }
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { font-size: var(--fs-h2); max-width: 20ch; }
.cta-banner p { color: var(--color-text-muted); max-width: 46ch; }