/* ==========================================================================
   SyncResto — V4 "SAHİL" · components.css
   Kategori kapakları · ürün kartları · banner'lar · alt sekme çubuğu

   🔴 DOM'A DOKUNULMAZ. `.card`, `.v3-catcard`, `.cat-btn`, `.featured-card` gibi
   sınıfları ORTAK home.js üretiyor (üç tema paylaşıyor). Sahil yalnız giydirir.
   ========================================================================== */

/* ==========================================================================
   KATEGORİ KAPAKLARI — Sahil'in imza öğesi
   Referanstan ÖLÇÜLDÜ: 2 sütun · kart oranı 2,05:1 (3 kartta 2.03/2.16/2.10)
   · dış marj %3,85 (390px'te 15px) · ara boşluk %1,4 (5,5px).

   home.js şu DOM'u üretiyor (değiştirilemez):
     .v3-catcard > img|.v3-ph + .v3-catcard__scrim + .v3-catcard__label(h3 + BOŞ span + .v3-catcard__count)
   Referanstaki altın çemberli "›" için o BOŞ span kullanılıyor — JS'e dokunmadan.
   ========================================================================== */
.v4-theme .v3-catgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v4-gap);
  padding: 0 var(--v4-edge) 4px;
}
.v4-theme .v3-catgrid:empty { display: none; }   /* görselsiz/boş ızgara boşluk bırakmasın */

.v4-theme .v3-catcard {
  position: relative;
  aspect-ratio: 2.1 / 1;      /* ölçüldü: 494x235 = 2,10 */
  border-radius: var(--v4-r-card);
  overflow: hidden;
  cursor: pointer;
  background: var(--v4-surface-2);
  box-shadow: var(--v4-shadow-1);
  transition: transform .22s var(--v4-ease), box-shadow .22s var(--v4-ease);
}
/* Referansta İLK kart altın çerçeveli (öne çıkan kategori). */
.v4-theme .v3-catcard:first-child {
  box-shadow: 0 0 0 1.5px var(--v4-gold), var(--v4-shadow-1);
}
.v4-theme .v3-catcard:hover { box-shadow: var(--v4-shadow-2); }
.v4-theme .v3-catcard:first-child:hover { box-shadow: 0 0 0 1.5px var(--v4-gold), var(--v4-shadow-2); }
.v4-theme .v3-catcard:active { transform: scale(.985); }
.v4-theme .v3-catcard .v3-ph {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(var(--v4-deep-rgb), .16), rgba(var(--v4-gold-rgb), .12));
}
/* 🔴 opacity ÇİFTİ ZORUNLU: home.js yüklenen görsele `is-loaded` ekliyor.
   Yalnız 0 yazılırsa (çift olmadan) kapaklar SONSUZA KADAR görünmez kalır. */
.v4-theme .v3-catcard img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--v4-surface-2);
  opacity: 0;
  transition: opacity .45s var(--v4-ease);
}
.v4-theme .v3-catcard img.is-loaded { opacity: 1; }

/* üstten hafif karartma — fotoğraf açık olduğunda bile bant kenarı okunur kalsın */
.v4-theme .v3-catcard__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--v4-deep-rgb), .10) 0%, rgba(var(--v4-deep-rgb), 0) 46%);
}

/* alttaki koyu BANT — referansın belirleyici öğesi */
.v4-theme .v3-catcard__label {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  /* Bant, kartın ~%35'i olmalı (referansta 29/87 CSS). Ölçümde %55'e çıkmıştı. */
  padding: 3px 8px 4px 10px;
  /* 🔴 Referansta bant YARI SAYDAM: fotoğraf bandın içinden görünüyor ve üstte sert
     bir çizgi yok, yumuşak geçiş var (aynı ölçekte yan yana konup okundu). Düz koyu
     blok + altın çizgi kartı referanstan ayıran en görünür farktı. */
  background: linear-gradient(180deg,
              rgba(var(--v4-deep-rgb), 0) 0%,
              rgba(var(--v4-deep-rgb), .58) 17%,
              rgba(var(--v4-deep-rgb), .93) 38%,
              rgba(var(--v4-deep-rgb), .96) 100%);
  border-top: 0;
  padding-top: 12px;   /* yumuşak geçişin başladığı saydam üst pay */
}
.v4-theme .v3-catcard__label h3 {
  grid-column: 1; grid-row: 1;
  font-family: var(--v4-font-display);
  font-size: .92rem; font-weight: 700; line-height: 1.1;
  color: var(--v4-on-deep); margin: 0;
  /* uzun kategori adı bandı büyütmesin */
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.v4-theme .v3-catcard__count {
  grid-column: 1; grid-row: 2;
  font: 400 .66rem/1.1 var(--v4-font-body);
  color: var(--v4-on-deep-mute);
  margin: 1px 0 0;
}
/* BOŞ span → altın çemberli ok. İçerik CSS'ten gelir, JS'e dokunulmaz. */
.v4-theme .v3-catcard__label span {
  grid-column: 2; grid-row: 1 / span 2;
  width: 23px; height: 23px; border-radius: 50%;
  border: 1.2px solid var(--v4-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--v4-gold);
  font: 400 .98rem/1 var(--v4-font-display);
}
.v4-theme .v3-catcard__label span::after { content: "\203A"; margin-top: -2px; }

/* ==========================================================================
   KATEGORİ ŞERİDİ (yapışkan)
   ========================================================================== */
.v4-theme .categories {
  /* Üst pay başlık bandı + dalgasından ÇALIŞMA ANINDA ölçülüyor (bant yüksekliğini
     bayinin logosu, dalga derinliğini ekran genişliği belirliyor). Sabit 56px iken
     masaüstünde çubuk bandın 14px altına giriyordu. Betik koşmazsa 64px yedek. */
  position: sticky; top: var(--v4-yapiskan-ust, 64px); z-index: 50;
  background: var(--v4-paper);
  border-bottom: 1px solid var(--v4-line);
  padding: 8px var(--v4-edge);
}
.v4-theme .cat-btn {
  background: var(--v4-surface); color: var(--v4-ink-1);
  border: 1px solid var(--v4-line); border-radius: 999px;
  padding: 7px 14px; font: 500 .84rem var(--v4-font-body); cursor: pointer;
  transition: background .18s var(--v4-ease), color .18s var(--v4-ease);
}
.v4-theme .cat-btn.active {
  background: var(--v4-deep); color: var(--v4-on-deep);
  border-color: var(--v4-deep);
}

/* ==========================================================================
   BÖLÜM BAŞLIKLARI ve ÜRÜN KARTLARI (DOM home.js'ten)
   ========================================================================== */
.v4-theme .section-title {
  font-family: var(--v4-font-display); font-size: 1.42rem; font-weight: 700;
  color: var(--v4-ink-0); letter-spacing: .2px;
  display: flex; align-items: center; gap: 10px;
}
.v4-theme .section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(var(--v4-gold-rgb), .55), transparent);
}
.v4-theme .card {
  background: var(--v4-surface); color: var(--v4-ink-0);
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-r-card);
  box-shadow: var(--v4-shadow-1);
  overflow: hidden;
}
.v4-theme .card-title { font-family: var(--v4-font-display); font-size: 1.02rem; font-weight: 700; color: var(--v4-ink-0); }
.v4-theme .card-desc { color: var(--v4-ink-2); }
.v4-theme .price { color: var(--v4-deep); font-weight: 700; }
.v4-theme .market-price { color: var(--v4-ink-2); }
.v4-theme .add-btn {
  background: var(--v4-deep); color: var(--v4-on-deep);
  border: 1px solid rgba(var(--v4-gold-rgb), .45); border-radius: 10px;
}
.v4-theme .add-btn:hover { filter: brightness(1.12); }
.v4-theme .badge { background: var(--v4-gold); color: var(--v4-deep); font-weight: 700; }
.v4-theme .out-of-stock { background: rgba(var(--v4-deep-rgb), .55); color: #fff; }

/* ==========================================================================
   BANNER'LAR
   ⚠️ Sıralama CSS `order` ile YAPILMAZ — sunucu doğru sırada basıyor.
   ⚠️ JS `.visible` ekliyor: display çifti olmazsa boş bantlar hep görünür kalır.
   ========================================================================== */
.v4-theme .banners-row { display: block; height: auto; padding: 0 var(--v4-edge); }
.v4-theme .v3-banner {
  display: none;
  background: var(--v4-surface); color: var(--v4-ink-0);
  border: 1px solid var(--v4-line); border-left: 3px solid var(--v4-gold-ink);
  border-radius: var(--v4-r-card);
  box-shadow: var(--v4-shadow-1);
  margin-bottom: var(--v4-gap);
  cursor: pointer;
}
/* 🔴 `display: block` çocukları alt alta yığıyordu: küçük görsel üstte, yazılar
   altında, ok kendi satırında, kartın sağ yarısı bomboş (ölçüldü: gövde 326px,
   yazı 68px). Sahil'in kart dili YATAY: görsel/ikon solda, yazı ortada, ok sağda —
   bilgi kartı ve kategori kartlarıyla aynı hizada. DOM'a dokunulmuyor. */
.v4-theme .v3-banner.visible,
.v4-theme .flash-banner.visible,
.v4-theme .campaigns-banner-card.visible,
.v4-theme .loyalty-banner:not(.hidden) {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
}

/* görsel (Günün Fırsatı) */
.v4-theme .v3-banner__img {
  flex: 0 0 64px; width: 64px; height: 64px;
  border-radius: 12px; object-fit: cover; display: block;
  border: 1px solid var(--v4-line);
}
/* ikon rozeti (Kampanyalar, Puan Kazan) */
.v4-theme .v3-banner__icon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--v4-deep); color: var(--v4-on-deep);
}
.v4-theme .v3-banner__body { flex: 1 1 auto; min-width: 0; }
.v4-theme .v3-banner__title {
  font-family: var(--v4-font-display); font-weight: 700; font-size: 1.02rem;
  line-height: 1.2; color: var(--v4-ink-0);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.v4-theme .v3-banner__sub {
  font: 400 .80rem/1.25 var(--v4-font-body); color: var(--v4-ink-2);
  margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* indirim rozeti */
.v4-theme .flash-title-pct {
  flex: 0 0 auto;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(var(--v4-gold-rgb), .20);
  color: var(--v4-gold-ink);
  font: 700 .72rem/1.3 var(--v4-font-body);
}
/* fiyat satırı */
.v4-theme .flash-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.v4-theme .flash-price {
  font-family: var(--v4-font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--v4-deep);
}
.v4-theme .flash-old-price {
  font: 400 .80rem/1 var(--v4-font-body); color: var(--v4-ink-2);
  text-decoration: line-through;
}
.v4-theme .flash-name {
  font-family: var(--v4-font-display); font-weight: 600; font-size: .88rem;
  color: var(--v4-ink-1);
}
/* ok: kategori kartındakiyle AYNI altın çember */
.v4-theme .v3-banner__cta {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.2px solid var(--v4-gold); color: var(--v4-gold-ink);
  background: transparent;
}
.v4-theme .v3-banner__cta svg { width: 15px; height: 15px; }
/* "Üye Ol →" metinli olduğu için hap biçiminde */
.v4-theme .loyalty-banner .v3-banner__cta {
  width: auto; height: auto; border-radius: 999px;
  padding: 8px 14px; gap: 6px;
  background: var(--v4-deep); border-color: var(--v4-deep); color: var(--v4-on-deep);
  font: 600 .78rem/1 var(--v4-font-body); white-space: nowrap;
}
.v4-theme .loyalty-percent {
  color: var(--v4-gold-ink); font-family: var(--v4-font-display); font-weight: 700;
}
.v4-theme .quick-reorder { display: none; }
.v4-theme .quick-reorder.visible { display: block; }
.v4-theme .featured-slider { padding: 0 var(--v4-edge); }
.v4-theme .featured-card {
  background: var(--v4-surface); border: 1px solid var(--v4-line);
  border-radius: var(--v4-r-card); box-shadow: var(--v4-shadow-1);
}

/* ==========================================================================
   ARAMA SONUÇLARI (DOM home.js'ten)
   ========================================================================== */
.v4-theme .search-result-item { border-bottom: 1px solid var(--v4-line); }
.v4-theme .search-result-item:hover { background: var(--v4-surface-2); }
.v4-theme .search-result-name { color: var(--v4-ink-0); font-weight: 600; }
.v4-theme .search-result-cat { color: var(--v4-ink-2); }
.v4-theme .search-result-price { color: var(--v4-deep); font-weight: 700; }
.v4-theme .search-no-result, .v4-theme .search-hint { color: var(--v4-ink-2); }

/* ==========================================================================
   ALT SEKME ÇUBUĞU
   ========================================================================== */
.v4-theme .v4-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 59;
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: calc(var(--v4-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--v4-deep);
  border-top: 1px solid rgba(var(--v4-gold-rgb), .35);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
}
.v4-theme .v4-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: 100%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--v4-on-deep-soft);
  font: 500 .66rem/1 var(--v4-font-body);
  text-decoration: none;
  position: relative;
  padding: 0 2px;
}
.v4-theme .v4-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.v4-theme .v4-tab:hover { color: var(--v4-on-deep); }
/* aktif sekme: ana sayfadayken "Ana Sayfa" */
.v4-theme .v4-tab[href="/"] { color: var(--v4-gold); }
.v4-theme .v4-tab[href="/"]::after {
  content: ""; position: absolute; bottom: 7px; width: 26px; height: 2px;
  background: var(--v4-gold); border-radius: 2px;
}
/* sepet sekmesi: altın çember (referanstaki FAB) */
.v4-theme .v4-tab--cart { color: var(--v4-gold); }
.v4-theme .v4-tab__fab {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--v4-gold); color: var(--v4-deep);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  margin-top: -14px;
}
.v4-theme .v4-tab--cart span:not(.v4-tab__fab) { margin-top: 1px; }

/* 🔴 QR MENÜ MODU — sipariş alınmayan bayide sepete/hesaba ulaşılmamalı.
   `[aria-label="Sepet"]` zaten common.js'in enjekte ettiği kuralla gizleniyor;
   hesap sekmesi ve çubuk düzeni burada tamamlanıyor. */
/* 🔴 QR MENÜ MODU (panelden `qr_menu_only`) — sipariş alınmayan bayide sepete,
   ödemeye ve hesaba ulaşılmamalı. common.js şunları ZATEN gizliyor (okundu, satır 303-310):
     .add-btn · .flash-add-btn · .campaign-add-btn · [aria-label="Sepet"] · #authBtn
     · #cart · #checkoutBtn · #productModal .modal-footer · #productNoteSection
     · .qty-selector · #modalOptions · #modalIngredients · #quickReorder
     · .reorder-btn-small · .combo-modal-footer
   `qr_hide_price` fiyatları, `qr_hide_description` açıklamaları da kapatıyor.
   Sahil'in sepet sekmesi `aria-label="Sepet"` taşıdığı için kendiliğinden gizleniyor;
   hesap ve siparişler sekmeleri burada kapatılıyor, çubuk 2 sütuna iniyor. */
.v4-theme.qr-menu-only .v4-tab--account,
.v4-theme.qr-menu-only .v4-tab[href="/siparislerim"] { display: none; }
.v4-theme.qr-menu-only .v4-tabbar { grid-template-columns: repeat(2, 1fr); }
/* 21 Eyl 2026 — Mustafa: QR menü modunda "Günün Fırsatı", "Kampanyalar" ve
   "Puan Kazan" bantları GÖRÜNMEMELİ. QR menü salt görüntüleme: sepet, üyelik ve
   kampanya akışlarının hiçbiri çalışmıyor; `common.js` zaten sepet/üyelik
   düğmelerini gizliyor, bu bantlar o listede yoktu.
   ⚠️ `!important` bilinçli: bantları `.visible` sınıfı açıyor ve o kural burayla
   aynı özgüllükte — sıraya bağlı kalmasın. */
.v4-theme.qr-menu-only .flash-banner,
.v4-theme.qr-menu-only .campaigns-banner-card,
.v4-theme.qr-menu-only .loyalty-banner,
.v4-theme.qr-menu-only .featured-slider { display: none !important; }

.v4-theme.qr-menu-only .floating-call-btn,
.v4-theme.qr-menu-only .scroll-to-top { bottom: calc(var(--v4-tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); }

/* ==========================================================================
   GRUP SİPARİŞİ BANNER'I (DOM group-banner.js'ten)
   ========================================================================== */
.v4-theme .gob-banner {
  background: var(--v4-deep); color: var(--v4-on-deep);
  border: 1px solid rgba(var(--v4-gold-rgb), .4);
  border-radius: var(--v4-r-card); margin: 0 var(--v4-edge) var(--v4-gap);
}
.v4-theme .gob-title { font-family: var(--v4-font-display); font-weight: 700; }
.v4-theme .gob-badge { background: var(--v4-gold); color: var(--v4-deep); }

@media (min-width: 601px) {
  .v4-theme .v3-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 901px) {
  .v4-theme .v3-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; }
  /* top artık betiğin ölçtüğü değişkenden geliyor — burada sabit değer YOK. */
}

/* ==========================================================================
   BANNER İÇ YAPISI — flash · kampanya · sadakat (DOM view'dan) ve
   öne çıkanlar kaydırıcısı (DOM home.js'ten)
   ========================================================================== */
/* 🔴 BURAYA `display` YAZILMAZ. Bantların görünürlüğü `.visible` sınıfıyla
   yönetiliyor (home.js: `renderFlashBanner` ürün yoksa hiç eklemiyor,
   `renderMiniCampaigns` 0 kampanyada KALDIRIYOR). Bu kuralda koşulsuz
   `display: flex` vardı ve yukarıdaki `display: none` varsayılanını eziyordu →
   "Günün Fırsatı" ürün olmadan, "Kampanyalar" 0 aktif kampanyayla görünüyordu. */
.v4-theme .v3-banner {
  align-items: center; gap: 12px;
  padding: 11px 13px;
  text-decoration: none;
}
.v4-theme .v3-banner__img {
  flex: 0 0 54px; width: 54px; height: 54px;
  border-radius: 10px; object-fit: cover;
  background: var(--v4-surface-2);
}
.v4-theme .v3-banner__icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--v4-deep); color: var(--v4-on-deep);
}
.v4-theme .v3-banner__body { flex: 1 1 auto; min-width: 0; }
.v4-theme .v3-banner__title {
  font-family: var(--v4-font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--v4-ink-0); line-height: 1.2;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.v4-theme .v3-banner__sub {
  font: 400 .8rem/1.35 var(--v4-font-body); color: var(--v4-ink-2);
  margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.v4-theme .v3-banner__cta {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--v4-gold-ink); color: var(--v4-gold-ink);
  display: flex; align-items: center; justify-content: center;
}

/* Günün Fırsatı */
.v4-theme .flash-title-pct {
  background: var(--v4-gold); color: var(--v4-deep);
  border-radius: 999px; padding: 1px 8px;
  font: 700 .70rem/1.6 var(--v4-font-body);
}
.v4-theme .flash-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.v4-theme .flash-price { font: 700 1rem var(--v4-font-body); color: var(--v4-deep); }
.v4-theme .flash-old-price { font: 400 .82rem var(--v4-font-body); color: var(--v4-ink-2); text-decoration: line-through; }

/* ÖNE ÇIKANLAR — 🔴 SAYFA TAŞMASI BURADAYDI.
   `.featured-inner` 2088px genişleyip 1440px'lik kapsayıcıdan taşıyor, sayfayı
   117px yatay kaydırıyordu (ölçüldü) → sağ üstteki ikonlar kesiliyordu.
   Kaydırma artık kapsayıcının İÇİNDE. */
.v4-theme .featured-slider { overflow: hidden; }
.v4-theme .featured-inner {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.v4-theme .featured-inner::-webkit-scrollbar { display: none; }
.v4-theme .featured-card {
  flex: 0 0 76%; max-width: 300px;
  scroll-snap-align: start;
  position: relative; aspect-ratio: 16 / 10;
  border-radius: var(--v4-r-card); overflow: hidden;
  border: 0; box-shadow: var(--v4-shadow-1);
  cursor: pointer;
}
.v4-theme .featured-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4-theme .featured-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 12px 10px;
  background: linear-gradient(180deg, rgba(var(--v4-deep-rgb), 0) 0%, rgba(var(--v4-deep-rgb), .92) 62%);
  color: #fff;
}
.v4-theme .featured-badge {
  display: inline-block; margin-bottom: 4px;
  background: var(--v4-gold); color: var(--v4-deep);
  border-radius: 999px; padding: 1px 8px;
  font: 700 .66rem/1.6 var(--v4-font-body);
}
.v4-theme .featured-name {
  font-family: var(--v4-font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.v4-theme .featured-desc {
  font: 400 .74rem/1.3 var(--v4-font-body); color: rgba(255, 255, 255, .78); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v4-theme .featured-price {
  font: 700 .95rem var(--v4-font-body); color: var(--v4-gold); margin-top: 4px;
}

/* Sadakat bandındaki "Üye Ol" çağrısı metin olabiliyor — düğmeye benzesin */
.v4-theme #loyaltyCta {
  flex: 0 0 auto; width: auto; height: auto; border-radius: 999px;
  padding: 6px 13px;
  background: var(--v4-deep); color: var(--v4-on-deep);
  border: 1px solid rgba(var(--v4-gold-rgb), .45);
  font: 600 .78rem var(--v4-font-body);
  white-space: nowrap;
}