.home { background: #fbf8f7; }
.home .button:not(.outline) {
  background: linear-gradient(155deg, #bf253a 0%, #9b1027 51%, #680a1c 100%);
  border-color: #ee798785;
  box-shadow: inset 0 1px #ffc0c04d, 0 5px 15px #27050d35;
}
.home .button:not(.outline):hover { background: linear-gradient(155deg, #c42e43, #870f23); }

.showroom {
  color: #fff;
  background: var(--metallic-red);
  border-bottom: 1px solid #9f3343;
}
.showroom-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(24px, 4vw, 62px);
  padding-block: clamp(40px, 6vw, 92px);
}
.showroom-label { color: var(--red-highlight); }
.showroom h1 { margin-top: 14px; font-size: clamp(2.9rem, 5.7vw, 5.1rem); }
.showroom h1 em { display: block; color: #ff8998; font-style: normal; }
.showroom-copy > p:not(.eyebrow) { max-width: 37ch; margin-block: 18px 23px; color: #f2d9de; }
.showroom-display {
  overflow: hidden;
  border: 1px solid #d26c7c;
  border-radius: 16px;
  background: #25181c;
  box-shadow: 0 22px 48px #1802087a, inset 0 1px #ffd1da30;
}
.showroom-display-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 11px 14px; color: #fff; font-size: .82rem; }
.showroom-display-head span { color: #ffabb6; font-weight: 800; letter-spacing: .12em; }
.showroom-stage { position: relative; overflow: hidden; background: #747075; }
.showroom-car { width: 100%; height: auto; filter: brightness(.91) contrast(1.06); }
.showroom-rim {
  position: absolute;
  width: 12.365%;
  height: 31.032%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: #17181a url("demo-brake.svg") center / cover no-repeat;
}
/* Jant merkezleri BMW F30 görselinin kendi ölçülerine göre hizalanır. */
.showroom-rim-front { left: 17.9752%; top: 74.3307%; }
.showroom-rim-rear { left: 78.8695%; top: 74.55%; width: 12.0098%; height: 30.432%; }
.showroom-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.showroom-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px;
  color: #fff;
  background: #2a151cd9;
  border: 1px solid #f8acb563;
  border-radius: 10px;
  font: inherit;
  font-size: .83rem;
  font-weight: 750;
  cursor: pointer;
}
.showroom-options button:hover { background: #631b2a; }
.showroom-options button[aria-pressed="true"] { background: #72182b; border-color: #ff9ba8; box-shadow: inset 0 -2px #ff9ba8; }
.showroom-options img { flex: 0 0 auto; }
.showroom-options button:focus-visible { outline-color: #ffb8c1; }

.home .quick { background: #f7eaeb; }
.home-collection { background: var(--metallic-red); }
.home-collection .section-head { color: #fff; }
.home-collection .section-head :is(.eyebrow, .text-link) { color: var(--red-highlight); }
.home-collection .section-head p:not(.eyebrow) { color: #f2d9de; }
.home-collection .card { position: relative; border-radius: 14px; box-shadow: 0 8px 25px #57152612; }
.home-collection .card-image { aspect-ratio: 1.35; }
.home .contact-grid { align-items: stretch; gap: clamp(16px, 3vw, 34px); }
.home-visit { padding: clamp(16px, 3vw, 27px); border: 1px solid #d68e9959; border-radius: 14px; background: #2d1921; }
.home-visit img { width: 100%; height: clamp(132px, 18vw, 225px); object-fit: cover; object-position: center 55%; margin-bottom: 18px; border-radius: 8px; }
.home-map {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
  min-height: 290px;
  padding: clamp(22px, 5vw, 54px);
  border: 1px solid #d68e9959;
  border-radius: 14px;
  background: radial-gradient(ellipse at top right, #652238, #2d1921 75%);
}
.home-map svg { color: var(--red-highlight); }
.home-map h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.home-map :is(p, small) { color: #f2d9de; }
.home .home-shortcuts .whatsapp { background: #262326; border: 1px solid #ffd1d45c; }
.home .home-shortcuts .whatsapp svg { color: #87e5b5; }
.home .home-shortcuts .whatsapp:hover { background: #3b3238; }
.home footer { padding-bottom: 128px; }

.brand-intro[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: #fff;
  background: transparent;
}
.brand-intro::backdrop { background: transparent; }
.brand-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--metallic-red);
  animation: intro-curtain 1s ease-out both;
}
.brand-intro-emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  transform: translate(-50%, -50%);
  animation: intro-wheel 1s cubic-bezier(.22,.7,.25,1) both;
}
.brand-intro-emblem svg { position: absolute; inset: 0; width: 100%; }
.brand-intro-emblem circle {
  stroke: #ff7c90;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  filter: drop-shadow(0 0 6px #ff435d);
  animation: intro-ring .52s ease-out both;
}
.brand-intro-emblem img { animation: intro-logo .48s ease-out both; }
.brand-intro-name {
  position: absolute;
  top: calc(50% + 68px);
  width: 100%;
  text-align: center;
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .16em;
  animation: intro-wordmark 1s ease-out both;
}
.brand-intro-name span { display: block; color: var(--red-highlight); font-size: .65rem; }
.brand-intro-skip {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #ffb3bd80;
  border-radius: 24px;
  color: #fff;
  background: #301219;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  animation: intro-curtain 1s ease-out both;
}
.brand-intro-skip:focus-visible { outline-color: #ffb3bd; }
@keyframes intro-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes intro-logo { 0%, 22% { opacity: 0; transform: scale(.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes intro-curtain { 0%, 57% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro-wordmark { 0%, 20% { opacity: 0; } 43%, 57% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes intro-wheel {
  0%, 55% { transform: translate(-50%, -50%); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--intro-x)), calc(-50% + var(--intro-y))) scale(var(--intro-scale));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-intro[open] { visibility: hidden; }
}

@media (min-width: 801px) and (max-height: 760px) {
  .showroom-grid { padding-block: 32px; }
  .showroom h1 { font-size: clamp(2.9rem, 5.25vw, 4.7rem); }
}
@media (max-width: 800px) {
  .showroom-grid { grid-template-columns: 1fr; }
  .showroom h1 { font-size: clamp(2.65rem, 8vw, 4.8rem); }
}
@media (max-width: 590px) {
  .home .header nav { gap: 2px 10px; font-size: .77rem; }
  .showroom-grid { gap: 16px; padding-block: 22px; }
  .showroom h1 { margin-top: 10px; }
  .showroom-copy > p:not(.eyebrow) { margin-block: 11px 15px; }
  .showroom-display-head { padding-block: 8px; }
  .showroom-copy .actions { gap: 8px; }
  .showroom-copy .button { padding-inline: 12px; font-size: .86rem; }
  .home-shortcuts { gap: 6px; }
  .home-shortcuts :is(.wheel-shortcut, .whatsapp) { min-height: 44px; padding: 8px 11px; font-size: .76rem; }
  .home-shortcuts svg { width: 20px; height: 20px; }
}
@media (max-width: 390px) {
  .showroom-options button { gap: 5px; font-size: .76rem; }
  .showroom-options img { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: no-preference) {
  .showroom-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg, transparent 36%, #ffe9ec33 49%, transparent 62%);
    transform: translateX(100%);
    pointer-events: none;
    animation: showroom-light 1.3s ease-out .2s both;
  }
  .home-collection .card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 28%, #fff5 49%, transparent 70%);
    transform: translateX(-105%);
    transition: transform .65s ease;
    pointer-events: none;
  }
  .home-collection .card:focus-within::after { transform: translateX(105%); }
  .home-collection .card-in-view { animation: showroom-rise .45s ease-out; }
  @keyframes showroom-light { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  @keyframes showroom-rise { from { opacity: .66; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-collection .card:hover::after { transform: translateX(105%); }
}