/* ==========================================================================
   Marka vitrinleri ve ürün videoları
   ========================================================================== */

/* ——— Video kartı (9:16) ——— */
.vcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vcard__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6);
  isolation: isolate;
}
.vcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.vcard__link { position: absolute; inset: 0; z-index: 1; }
.vcard__media::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  z-index: 1;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  pointer-events: none;
}
.vcard__play {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(23, 24, 26, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(230, 203, 139, .55);
  color: #f2dfaa;
  transform: translate(-50%, -50%);
  transition: opacity .5s, transform .5s var(--ease);
  cursor: pointer;
}
.vcard__play .i { width: 22px; height: 22px; margin-left: 3px; }
.vcard.is-playing .vcard__play { opacity: 0; transform: translate(-50%, -50%) scale(.7); pointer-events: none; }
.vcard .card__fav { z-index: 3; }
.vcard__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px; color: #fff; pointer-events: none; }
.vcard__info a { pointer-events: auto; }
.vcard__brand { font: 600 .62rem/1 var(--font-t); letter-spacing: .22em; text-transform: uppercase; color: #e6cb8b; margin-bottom: 6px; }
.vcard__name { font: 500 1.25rem/1.15 var(--font-d); }
.vcard__price { margin-top: 6px; font: 600 .85rem var(--font-t); opacity: .9; }
.vcard__wa { --h: 46px; font-size: .68rem; letter-spacing: .1em; border-radius: 10px; }

/* ——— Ana sayfa marka bölümü ——— */
.brands { padding-block: clamp(70px, 9vw, 130px) clamp(40px, 6vw, 80px); background: radial-gradient(70% 50% at 50% 0%, rgba(200, 163, 91, .08), transparent 70%); }
.brands__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(30px, 4vw, 54px); }
.brands__head .kicker { margin-bottom: 16px; }
.brand-row + .brand-row { margin-top: clamp(50px, 6vw, 80px); }
.brand-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 20px; }
.brand-row__name { display: flex; align-items: baseline; gap: 14px; font: 500 clamp(1.8rem, 3vw, 2.6rem)/1 var(--font-d); }
.brand-row__name .num { font-size: 1rem; }
.brand-row__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.brand-row__card .card__media { aspect-ratio: 9 / 16; border-radius: 14px; }

/* ——— Marka sayfası ——— */
.bpage { padding-block: clamp(40px, 7vw, 100px) clamp(30px, 4vw, 50px); }
.bpage .display { margin: 16px 0 22px; }
.bpage__n { margin-top: 18px; color: var(--muted); font-size: .85rem; }
.bpage__n b { color: var(--fg); font: 500 1.5rem var(--font-d); margin-right: 4px; }
.bpage__videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; padding-bottom: 60px; }
.bpage__sub { margin-bottom: 28px; }

@media (max-width: 1100px) {
  .brand-row__rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 30vw; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; padding-bottom: 6px; }
  .brand-row__rail::-webkit-scrollbar { display: none; }
  .brand-row__rail > * { scroll-snap-align: start; }
  .bpage__videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .brands__head, .brand-row__head { flex-direction: column; align-items: flex-start; }
  .brand-row__rail { grid-auto-columns: 64vw; }
  .bpage__videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 10px; }
  .vcard__name { font-size: 1.05rem; }
  .vcard__wa { font-size: .6rem; letter-spacing: .04em; padding: 0 10px; }
}