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

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gradient-void);
}
.hero::before {
  /* Sağ üstten süzülen, showroom vitrinini müjdeleyen zayıf altın ışık */
  content: ""; position: absolute; top: -20%; right: -10%; width: 60%; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(201,168,105,0.14), transparent 65%);
  filter: blur(20px);
}
.hero__grid-lines {
  position: absolute; inset: 0; z-index: 1; opacity: 0.4; pointer-events: none;
  background-image: linear-gradient(rgba(229,231,235,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(229,231,235,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(120deg, transparent 5%, black 35%, black 65%, transparent 95%);
}
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr); gap: var(--space-10); align-items: center; padding-top: var(--header-h); }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); text-align: left; }
.hero__title {
  font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--ls-display); max-width: 21ch;
}
.hero__title em { font-style: normal; background: var(--gradient-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__subtitle { font-size: var(--fs-body-lg); color: var(--color-text-muted); max-width: 42ch; }
.hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-2); flex-wrap: wrap; }
.hero__meta { display: flex; gap: var(--space-8); margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-border); width: 100%; max-width: 30rem; }
.hero__meta div { display: flex; flex-direction: column; gap: 2px; }
.hero__meta strong { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--color-text); }
.hero__meta span { font-size: var(--fs-xs); color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Showroom teaser paneli (sağ sütun) ---- */
.hero__showcase { position: relative; display: flex; justify-content: center; align-items: center; height: min(64vh, 620px); }
.hero__showcase-label {
  position: absolute; right: -2.1rem; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center;
  font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-gold-bright); white-space: nowrap;
}
.hero__showcase-frame {
  position: relative; width: 100%; height: 100%; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__showcase-frame::before, .hero__showcase-frame::after {
  content: ""; position: absolute; z-index: 3; width: 34px; height: 34px; pointer-events: none;
  border-color: var(--color-gold-bright); border-style: solid; opacity: 0.85;
}
.hero__showcase-frame::before { top: 16px; left: 16px; border-width: 1.5px 0 0 1.5px; }
.hero__showcase-frame::after { bottom: 16px; right: 16px; border-width: 0 1.5px 1.5px 0; }
.hero__showcase-media { width: 100%; height: 100%; border-radius: var(--radius-lg); }
.hero__showcase-media img { border-radius: var(--radius-lg); }
.hero__showcase-media .studio-placeholder { border-radius: var(--radius-lg); }

.hero__scroll {
  position: absolute; bottom: var(--space-8); left: var(--container-pad); 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-gold), 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; } }

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { align-items: center; text-align: center; }
  .hero__title { max-width: 16ch; }
  .hero__meta { justify-content: center; }
  .hero__showcase { height: 380px; margin-top: var(--space-6); }
  .hero__scroll { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 560px) {
  .hero__meta { gap: var(--space-5); flex-wrap: wrap; justify-content: center; }
}

/* --------------------------------------------------------------------------
   SHOWROOM — Sitenin en önemli bölümü
   -------------------------------------------------------------------------- */
.showroom { position: relative; padding-block: var(--space-16) var(--space-12); overflow: hidden; background: var(--gradient-void); }
.showroom__ambient {
  position: absolute; inset: -10% -10% auto -10%; height: 78%; z-index: 0; pointer-events: none;
  background: var(--gradient-radial-spot);
  filter: blur(10px);
}
.showroom__ambient::after {
  /* Tepeden platforma inen ışık konisi — vitrin/spot ışığı hissi */
  content: ""; position: absolute; top: 0; left: 50%; width: min(70%, 900px); height: 100%;
  transform: translateX(-50%);
  background: var(--gradient-spotlight-beam);
  mix-blend-mode: screen;
}
.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-gold-bright); box-shadow: var(--shadow-glow-gold); }
.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-gold-bright); }

.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); font-weight: 600;
  background: var(--gradient-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.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); position: relative; }
.brand-category::before {
  /* Üst altın çizgi — premium kategori ayracı */
  content: ""; position: absolute; top: 0; left: var(--space-6); right: var(--space-6); height: 2px;
  background: var(--gradient-gold); border-radius: var(--radius-full);
}
.brand-category__head { display: flex; align-items: center; gap: var(--space-3); justify-content: flex-start; margin-bottom: var(--space-5); }
.brand-category__head h3 { font-size: var(--fs-h3); margin-right: auto; }
.brand-category__icon { width: 26px; height: 26px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.9; }
.brand-category[data-cat="otomobil"] .brand-category__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13l1.5-4.5A2 2 0 0 1 6.4 7h11.2a2 2 0 0 1 1.9 1.5L21 13M3 13v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-4M3 13h18M7 17a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm10 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z' fill='none' stroke='%23c9a869' stroke-width='1.6'/%3E%3C/svg%3E");
}
.brand-category[data-cat="motosiklet"] .brand-category__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5.5' cy='17' r='3' fill='none' stroke='%23c9a869' stroke-width='1.6'/%3E%3Ccircle cx='18.5' cy='17' r='3' fill='none' stroke='%23c9a869' stroke-width='1.6'/%3E%3Cpath d='M8.5 17h4l2-6h3M12.5 11H9l-2 4M15 7h3l1 4' fill='none' stroke='%23c9a869' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.brand-category[data-cat="deniz"] .brand-category__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2' fill='none' stroke='%23c9a869' stroke-width='1.6'/%3E%3Cpath d='M12 7v13M7 12a5 5 0 0 0 5 5 5 5 0 0 0 5-5M4 12h3m10 0h3' fill='none' stroke='%23c9a869' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.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-void); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
  border: 1px solid var(--color-hairline);
}
.cta-banner::before { content: ""; position: absolute; inset: 0; background: var(--gradient-radial-spot); }
.cta-banner::after {
  content: ""; position: absolute; top: -40%; left: 50%; width: 70%; height: 100%; transform: translateX(-50%);
  background: var(--gradient-spotlight-beam); mix-blend-mode: screen; pointer-events: none;
}
.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; }