/**
 * Beyazoğlu catalog / commerce / footer layout.
 * app.css Tailwind build lacks responsive variants (lg:, flex-row, grid-cols-12).
 * These semantic rules restore desktop composition without rebuilding the Banani CSS.
 */

/* —— Interactive affordance —— */
button,
[type="button"],
[type="submit"],
[type="reset"],
a.bg-secondary,
a.bg-primary,
a.border,
.bg-secondary,
[data-bg-add-to-cart],
[data-bg-gallery-thumb],
select,
label[for],
summary {
  cursor: pointer;
}

a[href] {
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* —— Product detail: gallery | buy box —— */
.bg-pdp {
  width: 100%;
}

.bg-pdp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.bg-pdp__gallery {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.bg-pdp__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 28rem;
}

.bg-pdp__buy {
  width: 100%;
  min-width: 0;
}

.bg-pdp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.bg-pdp__trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.bg-pdp__related-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.bg-pdp__related-grid::-webkit-scrollbar {
  display: none;
}

.bg-pdp__related-grid > [data-bg-product-card] {
  flex: 0 0 min(16.5rem, calc(100% - 2.75rem));
  width: min(16.5rem, calc(100% - 2.75rem));
  max-width: calc(100% - 2.75rem);
  scroll-snap-align: start;
  min-width: 0;
  height: auto;
}

@media (min-width: 640px) {
  .bg-pdp__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .bg-pdp__related-grid {
    gap: 1rem;
  }

  .bg-pdp__related-grid > [data-bg-product-card] {
    flex: 0 0 calc((100% - 2rem) / 3.25);
    width: calc((100% - 2rem) / 3.25);
    max-width: calc((100% - 2rem) / 3.25);
    height: auto;
  }
}

@media (min-width: 1024px) {
  .bg-pdp__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem;
  }

  .bg-pdp__gallery {
    max-width: none;
    margin-inline: 0;
    position: sticky;
    top: 1rem;
  }

  .bg-pdp__related-grid {
    gap: 1rem;
  }

  .bg-pdp__related-grid > [data-bg-product-card] {
    flex: 0 0 calc((100% - 3rem) / 4.2);
    width: calc((100% - 3rem) / 4.2);
    max-width: calc((100% - 3rem) / 4.2);
    height: auto;
  }
}

/* —— Product detail tabs (below buy grid) —— */
.bg-pdp-tabs {
  margin-top: 2.5rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1rem;
  background: var(--color-card, #fff);
  overflow: hidden;
}

.bg-pdp-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #f8fafc);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bg-pdp-tabs__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-muted-foreground, #6b7280);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.875rem 1.25rem;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.bg-pdp-tabs__tab:hover,
.bg-pdp-tabs__tab:focus-visible {
  color: var(--color-primary, #111827);
  outline: none;
  background: rgba(17, 24, 39, 0.03);
}

.bg-pdp-tabs__tab.is-active {
  color: var(--color-secondary, #c1121f);
  border-bottom-color: var(--color-secondary, #c1121f);
  background: var(--color-card, #fff);
}

.bg-pdp-tabs__panel {
  padding: 1.25rem 1.5rem 1.5rem;
}

.bg-pdp-tabs__panel[hidden] {
  display: none !important;
}

.bg-pdp-tabs__prose {
  color: var(--color-foreground, #0f172a);
  font-size: var(--text-base, 1.05rem);
  line-height: 1.7;
  max-width: 46rem;
}

.bg-pdp-tabs__prose > *:first-child {
  margin-top: 0;
}

.bg-pdp-tabs__prose > *:last-child {
  margin-bottom: 0;
}

.bg-pdp-tabs__prose p {
  margin: 0 0 1rem;
  color: var(--color-foreground, #0f172a);
}

.bg-pdp-tabs__prose p:last-child {
  margin-bottom: 0;
}

.bg-pdp-tabs__prose h2,
.bg-pdp-tabs__prose h3 {
  margin: 1.25rem 0 0.5rem;
  color: var(--color-primary, #111827);
  font-family: var(--font-headings, inherit);
  font-weight: 700;
  line-height: 1.3;
}

.bg-pdp-tabs__prose h2 {
  font-size: var(--text-xl, 1.25rem);
}

.bg-pdp-tabs__prose h3 {
  font-size: var(--text-lg, 1.125rem);
}

.bg-pdp-tabs__prose a {
  color: var(--color-secondary, #c1121f);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bg-pdp-desc__facts,
.bg-pdp-tabs__prose ul.bg-pdp-desc__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.bg-pdp-desc__fact,
.bg-pdp-tabs__prose li.bg-pdp-desc__fact {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--color-surface, #f8fafc);
  color: var(--color-primary, #1e293b);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.bg-pdp-desc__fact--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.01em;
}

.bg-pdp-desc__list,
.bg-pdp-tabs__prose ul,
.bg-pdp-tabs__prose ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--color-foreground, #0f172a);
}

.bg-pdp-desc__list li,
.bg-pdp-tabs__prose li {
  margin: 0.35rem 0;
}

@media (max-width: 640px) {
  .bg-pdp-tabs__prose {
    font-size: 1rem;
  }

  .bg-pdp-desc__facts {
    gap: 0.4rem;
  }
}

.bg-pdp-specs {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.bg-pdp-specs__row {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  font-size: 0.875rem;
}

.bg-pdp-specs__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.bg-pdp-specs__row:first-child {
  padding-top: 0;
}

.bg-pdp-specs__row dt {
  margin: 0;
  color: var(--color-muted-foreground, #6b7280);
  font-weight: 600;
}

.bg-pdp-specs__row dd {
  margin: 0;
  color: var(--color-primary, #111827);
  font-weight: 500;
}

.bg-pdp-fitment {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bg-pdp-fitment li {
  position: relative;
  padding: 0.625rem 0.875rem 0.625rem 2rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.75rem;
  background: var(--color-surface, #f8fafc);
  font-size: 0.875rem;
  color: var(--color-primary, #111827);
}

.bg-pdp-fitment li::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--color-secondary, #c1121f);
  transform: translateY(-50%);
}

.bg-pdp-fitment__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bg-pdp-fitment__brand {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.bg-pdp-fitment__brand:hover {
  color: var(--color-secondary, #c1121f);
}

.bg-pdp-fitment__models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.bg-pdp-fitment__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--color-card, #fff);
  color: var(--color-primary, #111827);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.bg-pdp-fitment__chip:hover {
  border-color: var(--color-secondary, #c1121f);
  color: var(--color-secondary, #c1121f);
}

.bg-pdp-fitment__chip:focus-visible {
  outline: 2px solid var(--color-secondary, #c1121f);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bg-pdp-fitment__chip {
    transition: none;
  }
}

.bg-pdp-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bg-pdp-docs__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bg-pdp-docs__link:hover,
.bg-pdp-docs__link:focus-visible {
  border-color: var(--color-secondary, #c1121f);
  background: rgba(193, 18, 31, 0.03);
  outline: none;
}

.bg-pdp-docs__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary, #111827);
}

.bg-pdp-docs__meta {
  font-size: 0.75rem;
  color: var(--color-muted-foreground, #6b7280);
  flex-shrink: 0;
}

.bg-pdp .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* —— Category: sidebar + product panel —— */
.bg-catalog-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  width: 100%;
}

.bg-catalog-sidebar {
  width: 100%;
  flex-shrink: 0;
}

.bg-catalog-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Listing / cart card grid: 1 / 2 / 3 — not a snap carousel */
.bg-product-grid {
  --bg-listing-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--bg-listing-cols), minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  overflow: visible;
}

.bg-product-grid > [data-bg-product-card] {
  min-width: 0;
  height: auto;
}

@media (min-width: 640px) {
  .bg-product-grid {
    --bg-listing-cols: 2;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .bg-catalog-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .bg-catalog-sidebar {
    width: 16rem;
  }

  .bg-product-grid {
    --bg-listing-cols: 3;
  }
}

.bg-catalog-main[data-grid-density="1"] .bg-product-grid {
  --bg-listing-cols: 1;
}

.bg-catalog-main[data-grid-density="2"] .bg-product-grid {
  --bg-listing-cols: 2;
}

.bg-catalog-main[data-grid-density="3"] .bg-product-grid {
  --bg-listing-cols: 3;
}

/* 3-col clips below ~140px cards (padding + gap) */
@media (max-width: 479px) {
  .bg-catalog-main[data-grid-density="3"] .bg-product-grid {
    --bg-listing-cols: 2;
  }
}

/* —— Markalar index harf grid'i (app.css'te responsive varyant yok) —— */
.bg-brand-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

@media (min-width: 640px) {
  .bg-brand-index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bg-brand-index-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .bg-brand-index-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* —— Catalog / PDP mobile chrome (375px: no page overflow, 44px hits) —— */
.bg-catalog-gutter {
  min-width: 0;
}

.bg-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.bg-catalog-toolbar__title {
  min-width: 0;
  flex: 1 1 10rem;
}

.bg-catalog-toolbar__title h2 {
  overflow-wrap: anywhere;
}

.bg-catalog-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
}

.bg-catalog-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.bg-catalog-density {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-card, #fff);
}

.bg-catalog-density button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--color-border, #e5e7eb);
  background: transparent;
  color: var(--color-muted-foreground, #64748b);
  cursor: pointer;
}

.bg-catalog-density button:last-child {
  border-right: 0;
}

.bg-catalog-density button[aria-pressed="true"] {
  background: rgba(193, 18, 31, 0.08);
  color: var(--color-secondary, #c1121f);
}

.bg-catalog-density button:hover,
.bg-catalog-density button:focus-visible {
  color: var(--color-secondary, #c1121f);
  outline: none;
}

.bg-catalog-density button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-secondary, #c1121f);
}

.bg-catalog-density__icon {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  width: 16px;
  height: 12px;
}

.bg-catalog-density__icon i {
  flex: 1 1 auto;
  display: block;
  font-style: normal;
  border-radius: 1px;
  background: currentColor;
}

.bg-catalog-filter-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--color-card, #fff);
  color: var(--color-primary, #111827);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.bg-catalog-filter-btn:hover,
.bg-catalog-filter-btn:focus-visible,
.bg-catalog-filter-btn[aria-expanded="true"] {
  border-color: var(--color-secondary, #c1121f);
  color: var(--color-secondary, #c1121f);
  outline: none;
}

.bg-catalog-filter-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--color-card, #fff), 0 0 0 4px var(--color-secondary, #c1121f);
}

.bg-catalog-filters-backdrop,
.bg-catalog-filters-sheet__bar {
  display: none;
}

.bg-catalog-layout:not(:has([data-bg-catalog-filters])) .bg-catalog-filter-btn {
  display: none !important;
}

.bg-catalog-subcats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.bg-catalog-filters {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--color-card, #fff);
}

.bg-catalog-filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  cursor: pointer;
  list-style: none;
}

.bg-catalog-filters__summary::-webkit-details-marker,
.bg-catalog-filters__summary::marker {
  display: none;
}

.bg-catalog-filters__summary-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary, #111827);
}

.bg-catalog-filters__chevron {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--color-muted-foreground, #64748b);
  transition: transform 0.18s ease;
}

.bg-catalog-filters[open] .bg-catalog-filters__chevron {
  transform: rotate(180deg);
}

.bg-catalog-filters__body a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.bg-catalog-filters__body input[type="search"] {
  min-height: 44px;
}

.bg-pdp__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.bg-pdp__thumbs::-webkit-scrollbar {
  display: none;
}

.bg-pdp__thumbs [data-bg-gallery-thumb] {
  flex: 0 0 4rem;
  width: 4rem;
  height: 4rem;
  min-width: 44px;
  min-height: 44px;
  scroll-snap-align: start;
}

.bg-pdp__buy h1 {
  overflow-wrap: anywhere;
}

.bg-brand-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.bg-brand-hero__text {
  min-width: 0;
  flex: 1 1 12rem;
}

.bg-brand-hero__text h1 {
  overflow-wrap: anywhere;
}

.bg-brand-model-picker {
  max-width: 100%;
  min-width: 0;
}

[data-bg-product-card] button,
[data-bg-product-card] [data-bg-add-to-cart] {
  min-height: 44px;
}

[data-bg-mobile-cart-bar] {
  z-index: 45;
}

@media (max-width: 767px) {
  .bg-catalog-gutter.px-8,
  .bg-pdp.px-8 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .bg-catalog-toolbar__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .bg-catalog-toolbar__sort {
    flex: 1 1 8rem;
    width: auto;
    order: 1;
  }

  .bg-catalog-filter-btn {
    order: 2;
    flex: 0 0 auto;
  }

  .bg-catalog-density {
    order: 3;
  }

  .bg-catalog-toolbar__sort .bg-combobox,
  .bg-catalog-toolbar__sort select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bg-pdp__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bg-pdp__actions form,
  .bg-pdp__actions a,
  .bg-pdp__actions button {
    width: 100%;
  }

  .bg-pdp__actions button,
  .bg-pdp__actions a {
    min-height: 44px;
    justify-content: center;
    box-sizing: border-box;
  }

  .bg-product-carousel__head {
    flex-direction: column;
    align-items: stretch;
  }

  .bg-product-carousel__tools {
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .bg-catalog-subcats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bg-pdp__thumbs {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
  }
}

@media (min-width: 1024px) {
  .bg-catalog-subcats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bg-catalog-filters-sheet {
    display: contents;
  }

  .bg-catalog-filters__summary {
    pointer-events: none;
    cursor: default;
  }

  .bg-catalog-filters__chevron {
    display: none;
  }

  .bg-catalog-filters > .bg-catalog-filters__body {
    display: block !important;
  }

  [data-bg-mobile-cart-bar] {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .bg-pdp:has([data-bg-mobile-cart-bar]) {
    padding-bottom: 6.5rem;
  }

  body.has-bottom-nav [data-bg-mobile-cart-bar] {
    bottom: var(--bottom-nav-h, 72px);
  }

  body.has-bottom-nav .bg-pdp:has([data-bg-mobile-cart-bar]) {
    padding-bottom: calc(6.5rem + var(--bottom-nav-h, 72px));
  }
}

/* —— WhatsApp sipariş modalı (şase no) —— */
.bg-wa-order-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.bg-wa-order-modal[hidden] {
  display: none;
}

.bg-wa-order-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.bg-wa-order-modal__card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  animation: bg-wa-order-modal-in 180ms ease-out;
}

@keyframes bg-wa-order-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-wa-order-modal__card {
    animation: none;
  }
}

.bg-wa-order-modal__x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-muted-foreground, #6b7280);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.bg-wa-order-modal__x:hover,
.bg-wa-order-modal__x:focus-visible {
  color: var(--color-primary, #111827);
}

/* JS aktifken sepet adet formunun manuel Güncelle düğmesi gizlenir */
.bg-js [data-bg-cart-qty-submit] {
  display: none;
}

/* Otomatik güncelleme sırasında satır soluklaşır */
.bg-cart-line[aria-busy="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* —— Cart line denser composition —— */
.bg-cart-line {
  align-items: center;
}

.bg-cart-line__media {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

@media (min-width: 640px) {
  .bg-cart-line__media {
    width: 6.5rem;
    height: 6.5rem;
  }
}

/* —— Footer: filled multi-column —— */
.bg-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.bg-footer-brand {
  max-width: 22rem;
}

.bg-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.bg-footer-col__title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  opacity: 0.95;
}

.bg-footer-col__links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bg-footer-col__links a {
  font-size: 0.875rem;
  opacity: 0.6;
  text-decoration: none;
  color: inherit;
}

.bg-footer-col__links a:hover,
.bg-footer-col__links a:focus-visible {
  opacity: 1;
}

@media (min-width: 768px) {
  .bg-footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bg-footer-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.6fr);
    gap: 3rem;
    align-items: start;
  }

  .bg-footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* —— Local cart toast (commerce kapalıyken cart.js) —— */
.bg-cart-toast-root {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.bg-cart-toast {
  pointer-events: auto;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.35);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.bg-cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bg-cart-toast-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-cart-toast-body {
  flex: 1 1 auto;
  min-width: 0;
}

.bg-cart-toast-title {
  font-size: 0.875rem;
  font-weight: 700;
}

.bg-cart-toast-product {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-cart-toast-meta {
  font-size: 0.6875rem;
  opacity: 0.55;
  margin-top: 0.25rem;
}

.bg-cart-toast-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.bg-cart-toast-btn {
  border: 0;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
}

.bg-cart-toast-btn-primary {
  background: var(--color-secondary, #c1121f);
  color: #fff;
}

.bg-cart-toast-btn-ghost {
  background: transparent;
  color: rgba(248, 250, 252, 0.75);
}

.bg-cart-added-flash {
  transform: scale(0.98);
  filter: brightness(1.08);
}

/* —— Brand page model picker (scoped; do not unscope flex) —— */
.bg-brand-model-picker {
  margin-top: 1.25rem;
}

.bg-brand-model-picker__label {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted-foreground, #64748b);
}

.bg-brand-model-picker__scroller {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.125rem 0 0.375rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.bg-brand-model-picker__scroller::-webkit-scrollbar {
  display: none;
}

.bg-brand-model-picker__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 999px;
  background: var(--color-card, #fff);
  color: var(--color-primary, #0f172a);
  font-family: var(--font-headings, inherit);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.bg-brand-model-picker__chip:hover {
  border-color: var(--color-secondary, #c1121f);
  color: var(--color-secondary, #c1121f);
  background: rgba(193, 18, 31, 0.04);
}

.bg-brand-model-picker__chip:focus-visible {
  outline: 2px solid var(--color-secondary, #c1121f);
  outline-offset: 2px;
}

.bg-brand-model-picker__chip.is-active {
  border-color: var(--color-secondary, #c1121f);
  background: var(--color-secondary, #c1121f);
  color: #fff;
}

.bg-brand-model-picker__chip.is-active:hover {
  color: #fff;
  background: var(--color-secondary, #c1121f);
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .bg-brand-model-picker__chip {
    transition: none;
  }
}

/* —— Home brand logo scroll row —— */
[data-bg-brand-scroll-wrap] {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.bg-brand-scroll-row {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bg-brand-scroll-row::-webkit-scrollbar {
  display: none;
}

.bg-brand-scroll-row > a {
  flex: 0 0 auto;
  min-width: 7.5rem;
}

[data-bg-brand-scroll-wrap] [data-bg-brand-scroll-prev]:hover:not(:disabled),
[data-bg-brand-scroll-wrap] [data-bg-brand-scroll-next]:hover:not(:disabled),
[data-bg-brand-scroll-wrap] [data-bg-brand-scroll-prev]:focus-visible:not(:disabled),
[data-bg-brand-scroll-wrap] [data-bg-brand-scroll-next]:focus-visible:not(:disabled) {
  border-color: var(--color-secondary, #c1121f);
  color: var(--color-secondary, #c1121f);
  background: rgba(193, 18, 31, 0.03);
  outline: none;
}

[data-bg-brand-scroll-wrap] [data-bg-brand-scroll-prev]:disabled,
[data-bg-brand-scroll-wrap] [data-bg-brand-scroll-next]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* —— Home / storefront product carousel (horizontal snap + peek at all breakpoints) —— */
.bg-product-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
}

.bg-product-carousel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.bg-product-carousel__copy {
  min-width: 0;
  flex: 1 1 12rem;
}

.bg-product-carousel__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.bg-product-carousel__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bg-product-carousel__track,
[data-bg-carousel-track] {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.bg-product-carousel__track::-webkit-scrollbar,
[data-bg-carousel-track]::-webkit-scrollbar {
  display: none;
}

.bg-product-carousel__slide {
  flex: 0 0 min(16.5rem, calc(100% - 2.75rem));
  width: min(16.5rem, calc(100% - 2.75rem));
  max-width: calc(100% - 2.75rem);
  scroll-snap-align: start;
  min-width: min(16.5rem, calc(100% - 2.75rem));
}

[data-bg-product-carousel] [data-bg-carousel-prev],
[data-bg-product-carousel] [data-bg-carousel-next] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

[data-bg-product-carousel] [data-bg-carousel-prev]:hover:not(:disabled),
[data-bg-product-carousel] [data-bg-carousel-next]:hover:not(:disabled),
[data-bg-product-carousel] [data-bg-carousel-prev]:focus-visible:not(:disabled),
[data-bg-product-carousel] [data-bg-carousel-next]:focus-visible:not(:disabled) {
  border-color: var(--color-secondary, #c1121f);
  color: var(--color-secondary, #c1121f);
  background: rgba(193, 18, 31, 0.03);
  outline: none;
}

[data-bg-product-carousel] [data-bg-carousel-prev]:disabled,
[data-bg-product-carousel] [data-bg-carousel-next]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .bg-product-carousel__track,
  [data-bg-carousel-track] {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .bg-product-carousel__slide {
    flex: 0 0 16.5rem;
    width: 16.5rem;
    max-width: 16.5rem;
    min-width: 16.5rem;
  }

  .bg-product-carousel__nav {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-product-carousel__track,
  [data-bg-carousel-track],
  .bg-brand-scroll-row {
    scroll-behavior: auto;
  }
}

/* PDP “Birlikte Alınanlar”: peek carousel at all breakpoints (not a static grid) */
.bg-product-carousel--peek .bg-product-carousel__head {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .bg-product-carousel--peek .bg-product-carousel__track,
  .bg-product-carousel--peek [data-bg-carousel-track] {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .bg-product-carousel--peek .bg-product-carousel__slide {
    flex: 0 0 calc((100% - 2rem) / 3.25);
    width: calc((100% - 2rem) / 3.25);
    max-width: calc((100% - 2rem) / 3.25);
  }

  .bg-product-carousel--peek .bg-product-carousel__nav {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .bg-product-carousel--peek .bg-product-carousel__slide {
    flex: 0 0 calc((100% - 3rem) / 4.2);
    width: calc((100% - 3rem) / 4.2);
    max-width: calc((100% - 3rem) / 4.2);
  }
}

/* —— Home finder: Marka | Model | Ara (app.css has no sm:flex-row) —— */
.bg-finder__row,
[data-bg-hero-finder] .bg-finder__row.flex,
[data-bg-hero-finder] .bg-finder__row.flex-col,
body.has-bottom-nav .bg-finder__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.bg-finder__field {
  flex: 1 1 auto;
  min-width: 0;
}

.bg-finder__submit {
  flex: 0 0 auto;
  min-height: 44px;
  height: 44px;
  padding-inline: 1.25rem;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .bg-finder__row,
  [data-bg-hero-finder] .bg-finder__row.flex,
  [data-bg-hero-finder] .bg-finder__row.flex-col,
  body.has-bottom-nav .bg-finder__row {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.75rem;
  }

  .bg-finder__field {
    flex: 1 1 0;
  }
}

/* —— Searchable combobox (theme-local; hides native select) —— */
.bg-combobox {
  position: relative;
  width: 100%;
  min-width: 0;
}

.bg-combobox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.bg-combobox__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--color-input, #f3f4f6);
  color: var(--color-primary, #111827);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bg-combobox__trigger:hover:not(:disabled),
.bg-combobox__trigger:focus-visible {
  border-color: var(--color-secondary, #c1121f);
  outline: none;
  box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.12);
}

.bg-combobox.is-open .bg-combobox__trigger {
  border-color: var(--color-secondary, #c1121f);
  box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.12);
}

.bg-combobox.is-disabled .bg-combobox__trigger,
.bg-combobox__trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bg-combobox.is-placeholder .bg-combobox__value {
  color: var(--color-muted-foreground, #6b7280);
}

.bg-combobox__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-combobox__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-muted-foreground, #6b7280);
  transition: transform 0.15s ease;
}

.bg-combobox.is-open .bg-combobox__chevron {
  transform: rotate(180deg);
  color: var(--color-secondary, #c1121f);
}

.bg-combobox__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: 280px;
  background: var(--color-card, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14);
  overflow: hidden;
  overscroll-behavior: contain;
}

.bg-combobox__panel[hidden] {
  display: none;
}

.bg-combobox__search {
  flex: 0 0 auto;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-card, #ffffff);
  color: var(--color-primary, #111827);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}

.bg-combobox__search:focus {
  box-shadow: inset 0 -2px 0 var(--color-secondary, #c1121f);
}

.bg-combobox__search[hidden] {
  display: none;
}

.bg-combobox__list {
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 236px;
}

.bg-combobox__option {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-primary, #111827);
  cursor: pointer;
}

.bg-combobox__option:hover,
.bg-combobox__option.is-active {
  background: rgba(193, 18, 31, 0.06);
  color: var(--color-secondary, #c1121f);
}

.bg-combobox__option.is-selected {
  font-weight: 600;
}

.bg-combobox__option.is-placeholder {
  color: var(--color-muted-foreground, #6b7280);
}

.bg-combobox__option mark {
  background: rgba(193, 18, 31, 0.16);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.bg-combobox__empty {
  margin: 0;
  padding: 0.875rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground, #6b7280);
}

/* —— Garajım (/garajim): list + edit chrome —— */
.bg-garage-page-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.garage-page {
  padding: 1.75rem 0 1.25rem;
}

.garage-page__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.garage-page__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-headings, inherit);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary, #111827);
  line-height: 1.2;
}

.garage-page__intro {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted-foreground, #6b7280);
  line-height: 1.45;
}

.garage-page__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.garage-page__limit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.875rem;
  border-radius: 999px;
  background: var(--color-muted, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted-foreground, #6b7280);
  white-space: nowrap;
}

.garage-page__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--color-secondary, #c1121f);
  color: var(--color-secondary-foreground, #ffffff);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  flex: 0 0 auto;
}

.garage-page__add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.garage-page__add:focus-visible,
.garage-card__btn:focus-visible,
.garage-form__input:focus-visible,
.garage-file:focus-within .garage-file__ui {
  outline: none;
  box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.16);
}

.garage-page__list-card,
.garage-page__notice,
.garage-page__guest {
  background: var(--color-card, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1rem;
  padding: 1.25rem 1.125rem;
}

.garage-page__list-title {
  margin: 0 0 1rem;
  font-family: var(--font-headings, inherit);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary, #111827);
}

.garage-page__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.garage-page__empty,
.garage-page__guest p,
.garage-page__notice {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted-foreground, #6b7280);
}

.garage-page__guest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.garage-page__tip {
  background: var(--color-surface, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1rem;
  padding: 1.125rem 1.125rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground, #6b7280);
}

.garage-page__tip-title {
  font-weight: 700;
  color: var(--color-primary, #111827);
  margin-bottom: 0.5rem;
}

.garage-page__tip p {
  margin: 0 0 0.75rem;
}

.garage-page__tip p:last-child {
  margin-bottom: 0;
}

.garage-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.garage-page__list > .garage-card:first-child {
  padding-top: 0;
}

.garage-page__list > .garage-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.garage-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.garage-card__photo {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.garage-card__photo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.garage-card__main {
  flex: 1 1 auto;
  min-width: 0;
}

.garage-card__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.garage-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary, #111827);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.garage-card__label {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted-foreground, #6b7280);
}

.garage-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-top: 0.4rem;
}

.garage-card__chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground, #6b7280);
}

.garage-card__chip--plate {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.garage-card__chip--km {
  font-variant-numeric: tabular-nums;
}

.garage-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgba(193, 18, 31, 0.1);
  color: var(--color-secondary, #c1121f);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.garage-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.garage-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.625rem;
  background: var(--color-card, #ffffff);
  color: var(--color-primary, #111827);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.garage-card__btn--primary {
  color: var(--color-secondary, #c1121f);
  border-color: rgba(193, 18, 31, 0.28);
}

.garage-card__btn--danger {
  color: var(--color-secondary, #c1121f);
}

dialog.garage-form-dialog,
dialog[data-garage-dialog],
dialog.garage-confirm-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-width: 32rem;
  padding: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 1rem;
  background: var(--color-card, #ffffff);
  overflow: visible;
}

.garage-form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.5rem 1.25rem 1.25rem;
}

.garage-form__title {
  margin: 0;
  font-family: var(--font-headings, inherit);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary, #111827);
}

.garage-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.garage-form__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary, #111827);
}

.garage-form__hint {
  font-size: 0.75rem;
  color: var(--color-muted-foreground, #6b7280);
}

.garage-form__input,
.garage-form__textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.75rem;
  background: var(--color-input, #f3f4f6);
  color: var(--color-primary, #111827);
  font: inherit;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.garage-form__textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.garage-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.garage-form__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.garage-form__brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 32px;
  align-self: center;
}

.garage-form__brand .bg-combobox {
  flex: 1 1 auto;
  min-width: 0;
}

.garage-form__preview {
  max-width: 120px;
  margin-top: 0.25rem;
  border-radius: 0.5rem;
}

.garage-file {
  position: relative;
  display: block;
}

.garage-file__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.garage-file__ui {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 0.75rem;
  background: var(--color-input, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
}

.garage-file__btn {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary, #111827);
}

.garage-file__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground, #6b7280);
}

.garage-form__error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-secondary, #c1121f);
}

.garage-form__actions,
.garage-confirm__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.garage-confirm-dialog {
  padding: 1.25rem 1.25rem 1.125rem;
}

.garage-confirm__text {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--color-primary, #111827);
}

@media (min-width: 480px) {
  .garage-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .bg-garage-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    gap: 2rem;
    align-items: start;
  }

  .garage-card {
    flex-direction: row;
    align-items: center;
  }

  .garage-card__row {
    flex: 1 1 auto;
    min-width: 0;
  }

  .garage-card__actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .garage-form {
    padding: 1.75rem 1.75rem 1.5rem;
  }

  .garage-form__actions {
    padding-bottom: 0;
  }
}

/* —— Header search form (real GET /arama) —— */
.bg-header-search {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
  border: 2px solid var(--color-muted, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-input, #f3f4f6);
}

.bg-header-search:focus-within {
  border-color: var(--color-secondary, #c1121f);
}

.bg-header-search__field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0 1rem;
  min-height: 44px;
}

.bg-header-search__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-muted-foreground, #6b7280);
}

.bg-header-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-primary, #111827);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}

.bg-header-search__input::placeholder {
  color: var(--color-muted-foreground, #6b7280);
}

.bg-header-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 0;
  background: var(--color-secondary, #c1121f);
  color: var(--color-secondary-foreground, #ffffff);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.bg-header-search__submit:hover,
.bg-header-search__submit:focus-visible {
  filter: brightness(1.06);
  outline: none;
}

/*
 * Desktop header chrome labels.
 * Blade leftovers use style="font-size: 10px" + .text-xs (14px token);
 * both ignore html { font-size: 125% }. +25% of 12px ≈ 15px = 0.75rem @ 20px root.
 * Hidden on ≤1023 (icon-only sticky bar). Do not enlarge .bottom-nav 10px.
 */
@media (min-width: 1024px) {
  [data-bg-header-utilities] {
    --bg-chrome-label: 0.75rem;
  }

  [data-bg-header-utilities] > a {
    text-decoration: none;
  }

  [data-bg-header-utilities] > a > span.text-xs,
  [data-bg-header-utilities] > a > span:last-child {
    font-size: var(--bg-chrome-label) !important;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }

  [data-bg-topbar] {
    font-size: 0.75rem;
  }

  [data-bg-topbar] .text-xs {
    font-size: inherit;
  }

  /*
   * Primary nav triggers: <a> and <button> (Markalar) must compute identical type.
   * .text-sm is a 16px token (ignores html 125%). Only <a> used to get 1rem —
   * the toggle kept 16px / shorter box (64 vs 58). Reset UA button chrome too.
   */
  [data-bg-desktop-nav] .bg-theme-container > a,
  [data-bg-desktop-nav] .bg-theme-container > button {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: calc(1.25 / 0.875);
    box-sizing: border-box;
  }

  [data-bg-desktop-nav] .bg-theme-container > button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary-foreground, #fff);
  }

  [data-bg-desktop-nav] .bg-theme-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-bg-desktop-nav] .bg-theme-container::-webkit-scrollbar {
    display: none;
  }

  /*
   * Desktop mega brand labels (not primary nav 20px, not mobile accordion).
   * Featured: .text-lg 21px token + .font-bold; chips: .text-sm 16px token.
   * Both ignore html { font-size: 125% }. Column type = rem text-sm:
   * 0.875rem = 17.5px @ 20px root. Mobile uses .bg-nav-accordion__link.
   */
  [data-bg-brands-mega] {
    --bg-mega-link: 0.875rem;
  }

  [data-bg-brands-mega] [data-bg-brand-mega-link] .text-lg,
  [data-bg-brands-mega] [data-bg-brand-mega-link] .text-sm,
  [data-bg-brands-mega] [data-bg-brand-mega-link] .font-headings {
    font-family: inherit;
    font-size: var(--bg-mega-link) !important;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.25;
  }

  [data-bg-brands-mega] [data-bg-brand-group] .text-sm.font-semibold,
  [data-bg-brands-mega] [data-bg-brands-mega-inner] > .border-r .text-sm.font-semibold {
    font-size: var(--bg-mega-link) !important;
    font-weight: 600;
  }

  .bg-footer-legal,
  .bg-footer-legal .text-xs {
    font-size: 0.75rem;
  }
}

/*
 * Smaller desktop (1024–1366): tighten navy-bar gutters so 8 labels fit.
 * If they still overflow, the row scrolls — never the page, never two lines.
 * Do not touch Garajım chrome labels.
 */
@media (min-width: 1024px) and (max-width: 1366px) {
  [data-bg-desktop-nav] {
    padding-inline: 0.75rem;
  }

  [data-bg-desktop-nav] .bg-theme-container > a,
  [data-bg-desktop-nav] .bg-theme-container > button {
    padding-inline: 0.5rem;
    gap: 0.25rem;
  }
}

/* —— Page chrome: breadcrumb + page-hero use the same column as listings —— */
.theme-container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

.bg-breadcrumb-bar {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-card, #ffffff);
  padding: 0.75rem 2rem;
}

.bg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-muted-foreground, #6b7280);
}

.bg-breadcrumb__sep {
  flex: 0 0 auto;
  color: var(--color-muted-foreground, #9ca3af);
  user-select: none;
}

.bg-breadcrumb__link {
  color: inherit;
  text-decoration: none;
}

.bg-breadcrumb__link:hover,
.bg-breadcrumb__link:focus-visible {
  color: var(--color-secondary, #c1121f);
}

.bg-breadcrumb__current {
  color: var(--color-primary, #111827);
  font-weight: 600;
}

.bg-page-hero__pad {
  box-sizing: border-box;
  padding: 2.5rem 2rem;
}

.page-hero {
  width: 100%;
  background: var(--color-surface, #f0f2f5);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  text-align: left;
  color: inherit;
}

.page-hero .bg-page-hero__title,
.page-hero h1 {
  margin: 0;
  max-width: none;
  font-family: var(--font-headings, inherit);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary, #111827);
  text-align: left;
}

.page-hero .bg-page-hero__lede,
.page-hero p {
  margin: 0.5rem 0 0;
  max-width: 40rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted-foreground, #6b7280);
  text-align: left;
}

.page-hero .theme-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary, #c1121f);
}

.bg-text-image {
  background: var(--color-surface, #f0f2f5);
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.split-image {
  overflow: hidden;
  border-radius: 1rem;
}

.split-image img {
  display: block;
  width: 100%;
  height: auto;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.check-list div {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-primary, #111827);
}

@media (min-width: 768px) {
  .split-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* —— Global containment: theme-container is the single inset (not 2053px flush) —— */
main .theme-container,
main .bg-theme-container,
footer .bg-theme-container,
.bg-breadcrumb-bar .bg-theme-container {
  padding-inline: 1rem;
  min-width: 0;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  main .theme-container,
  main .bg-theme-container,
  footer .bg-theme-container,
  .bg-breadcrumb-bar .bg-theme-container {
    padding-inline: 2rem;
  }
}

main .px-8,
footer.bg-primary > .px-8,
footer .bg-footer-legal,
.page-hero .bg-page-hero__pad,
.bg-text-image .bg-page-hero__pad,
.bg-breadcrumb-bar {
  padding-left: 0;
  padding-right: 0;
}

.bg-breadcrumb-bar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.bg-page-hero__pad {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .bg-page-hero__pad {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (max-width: 767px) {
  .page-hero .bg-page-hero__title,
  .page-hero h1 {
    font-size: 1.5rem;
  }

  .bg-home-hero h1 {
    font-size: 1.75rem;
  }

  .bg-breadcrumb {
    font-size: 0.8125rem;
    gap: 0.375rem;
  }
}

/* —— Home hero: stack copy + media (Banani flex + w-96 overflows 375) —— */
.bg-home-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
}

.bg-home-hero__copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 36rem;
}

.bg-home-hero__media {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
}

.bg-home-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .bg-home-hero {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }

  .bg-home-hero__media {
    width: 24rem;
    height: 18rem;
    aspect-ratio: auto;
    flex-shrink: 0;
  }
}

/* —— Section heads: title + link stack on mobile —— */
.bg-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .bg-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
  }
}

/* —— Trust strip: horizontal snap on mobile, row on desktop —— */
.bg-trust-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.bg-trust-row::-webkit-scrollbar {
  display: none;
}

.bg-trust-row > * {
  flex: 0 0 auto;
  min-width: min(16.5rem, 78vw);
  scroll-snap-align: start;
}

.bg-trust-row > * > :last-child {
  min-width: 0;
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .bg-trust-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .bg-trust-row > * {
    flex: none;
    min-width: 0;
    max-width: none;
    padding-inline: 1rem;
  }

  .bg-trust-row > *:nth-child(-n+2) {
    grid-column: span 3;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
  }

  .bg-trust-row > *:nth-child(n+3) {
    grid-column: span 2;
  }

  .bg-trust-row > *:nth-child(2) {
    border-right-width: 0;
  }
}

@media (min-width: 1200px) {
  .bg-trust-row {
    overflow: visible;
    scroll-snap-type: none;
  }

  .bg-trust-row > * {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .bg-trust-row > * {
    padding-inline: 1rem;
  }
}

/* —— Marketing card grids (Tailwind md:/grid-cols-3 is always 3-col) —— */
.bg-card-grid-3,
.bg-stats-grid,
.bg-cat-grid,
.bg-model-grid,
.bg-brand-card-grid,
.bg-b2b-split,
.bg-b2b-cards,
.bg-chip-grid,
.bg-split-2,
.bg-hard-split {
  display: grid;
  width: 100%;
  min-width: 0;
}

.bg-card-grid-3 {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.bg-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.bg-cat-grid,
.bg-model-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.bg-brand-card-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.bg-b2b-split,
.bg-split-2,
.bg-hard-split {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.bg-b2b-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.bg-chip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.bg-b2b-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .bg-card-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .bg-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .bg-cat-grid,
  .bg-model-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .bg-brand-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .bg-b2b-split,
  .bg-split-2,
  .bg-hard-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }

  .bg-chip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bg-card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bg-cat-grid,
  .bg-model-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .bg-brand-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bg-b2b-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .bg-b2b-split {
    gap: 4rem;
  }

  .bg-chip-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .bg-brand-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* —— Footer stack + legal bar —— */
.bg-footer-main {
  padding-block: 2.5rem;
}

.bg-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1rem;
}

.bg-footer-legal__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bg-footer-cols {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

@media (min-width: 560px) {
  .bg-footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
  }
}

@media (min-width: 768px) {
  .bg-footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* —— Campaign banners: Banani md:/h-56/from-black/* are missing from app.css —— */
.bg-campaign-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .bg-campaign-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .bg-campaign-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bg-campaign-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  height: 240px;
  border-radius: 0.75rem;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 768px) {
  .bg-campaign-card {
    min-height: 260px;
    height: 260px;
  }
}

@media (min-width: 1024px) {
  .bg-campaign-card {
    min-height: 280px;
    height: 280px;
  }
}

.bg-campaign-card:hover,
.bg-campaign-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.bg-campaign-card:focus-visible {
  outline: 2px solid var(--color-secondary, #c1121f);
  outline-offset: 3px;
}

.bg-campaign-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bg-campaign-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.5) 42%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

.bg-campaign-card__body {
  position: relative;
  z-index: 2;
  padding: 1.25rem;
}

.bg-campaign-card__title {
  font-family: var(--font-headings, inherit);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

.bg-campaign-card__desc {
  margin: 0.35rem 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bg-campaign-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--color-secondary, #c1121f);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}

.bg-campaign-card:hover .bg-campaign-card__cta,
.bg-campaign-card:focus-visible .bg-campaign-card__cta {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .bg-campaign-card,
  .bg-campaign-card__cta {
    transition: none;
  }

  .bg-campaign-card:hover,
  .bg-campaign-card:focus-visible {
    transform: none;
  }
}