/* Kampanya şeridi — ürün sayfasında kademelerin üstünde.

   Ayrı dosya değil, styles.css'e ait bir parça; ancak styles.css'e ekleme
   yaparken kabuk tırnak kaçışları bozduğu için burada duruyor ve base.html
   tarafından bağlanıyor. Renk/boşluk/süre tokens.css'ten geliyor. */

.deal-strip {
  position: relative; display: grid; align-items: center;
  grid-template-columns: auto 1fr auto; gap: var(--sy-space-3);
  margin-bottom: var(--sy-space-4); padding: var(--sy-space-4);
  border-radius: var(--sy-radius-md); cursor: pointer;
  background: var(--sy-grad-ocean); color: var(--sy-dark-text);
  border: 1px solid transparent;
  transition: transform var(--sy-dur-fast) var(--sy-ease),
              box-shadow var(--sy-dur-fast) var(--sy-ease);
}
.deal-strip:hover { transform: translateY(-2px); box-shadow: var(--sy-elev-2); }
.deal-strip:active { transform: translateY(0) scale(.995); }
/* Radyo görsel olarak gizli ama odaklanabilir; klavye kullanıcısı şeridin
   seçilebilir olduğunu görmeli. */
.deal-strip:has(input:focus-visible) { outline: 2px solid var(--sy-mint); outline-offset: 3px; }
.deal-strip:has(input:checked) { border-color: var(--sy-mint); }

.deal-strip__tag {
  align-self: start; padding: 4px 9px; border-radius: var(--sy-radius-xs);
  background: var(--sy-mint); color: var(--sy-on-mint);
  font: 700 .68rem/1.3 var(--sy-font-data); letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.deal-strip__body { display: grid; gap: 2px; min-width: 0; }
.deal-strip__body strong { font-size: 1.02rem; }
.deal-strip__body small { font-size: .76rem; color: var(--sy-sky); }
.deal-strip__price {
  font-family: var(--sy-font-data); font-size: 1.32rem; font-weight: 600;
  white-space: nowrap; text-align: right;
}
.deal-strip__price .old-price {
  display: block; font-size: .76rem; font-weight: 400;
  color: var(--sy-dark-muted); text-decoration: line-through;
}
/* Dar ekranda "Bunu seç" satırı taşıyordu; fiyat zaten çağrıyı taşıyor. */
.deal-strip__cta { display: none; }

@media (min-width: 720px) {
  .deal-strip { grid-template-columns: auto 1fr auto auto; }
  .deal-strip__cta {
    display: inline-block; padding-left: var(--sy-space-3);
    font: 600 .82rem/1 var(--sy-font-ui); color: var(--sy-sky); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deal-strip:hover, .deal-strip:active { transform: none; }
}