/* =========================================================
   Hızlı Bakış modalı: tüm temalar için ortak taban.

   Modal markup'ı RenderTrait::quickViewInject() ile altı temanın
   footer'ında basılır, içeriği themes/shared/quickview.js doldurur.
   2026-10-09'a kadar stil yalnız Novera'nın theme.css'indeydi: Shiva'da
   kart butonu vardı ama modal stilsiz kalıp sayfanın en altında açılıyor,
   kaydırma kilitlendiği için kullanıcı hiçbir şey görmüyordu.

   Bütün seçiciler :where() içinde (özgüllük 0). Bu dosya footer'da,
   temanın CSS'inden SONRA yüklenir: bir tema modalı kendi diline
   çevirmek için kendi theme.css'inde aynı sınıfları yazar ve yükleme
   sırasından bağımsız olarak kazanır (Novera böyle yapar).
   Renk/font yalnız --et-* sözleşmesinden gelir (TokenSozlesmesiTest).
   ========================================================= */
:where(.qv-overlay) {
  position: fixed; inset: 0; z-index: 9999995;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .55);
}
:where(.qv-overlay[hidden]) { display: none; }
:where(.qv-modal) {
  position: relative;
  width: 100%; max-width: 820px; max-height: 90vh; overflow-y: auto;
  background: var(--et-bg, #fff);
  color: var(--et-text, #111827);
  border-radius: var(--et-radius, 8px);
  font-family: var(--et-font-body, inherit);
  animation: qv-in .2s ease;
}
@keyframes qv-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes qv-spin { to { transform: rotate(360deg); } }
:where(.qv-close) {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--et-bg, #fff); color: var(--et-text-muted, #6b7280);
  border: 0; border-radius: 50%; cursor: pointer;
}
:where(.qv-close:hover) { color: var(--et-text, #111827); }
:where(.qv-body) { display: grid; grid-template-columns: 1fr 1fr; }
:where(.qv-loading) { grid-column: 1 / -1; padding: 64px 16px; text-align: center; color: var(--et-text-muted, #6b7280); }
:where(.qv-img) {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--et-surface, #fafafa);
}
:where(.qv-img img) { max-width: 100%; max-height: 360px; object-fit: contain; }
:where(.qv-no-img) { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
:where(.qv-info) { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; min-width: 0; }
:where(.qv-cat) { font-size: 12px; color: var(--et-text-muted, #6b7280); }
:where(.qv-name) {
  margin: 0;
  font-family: var(--et-font-heading, inherit);
  font-weight: var(--et-font-weight-heading, 500);
  font-size: 22px; line-height: 1.3;
  color: var(--et-text, #111827);
}
:where(.qv-price) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
:where(.qv-price-cur) { font-size: 20px; font-weight: 600; color: var(--et-text, #111827); }
:where(.qv-price-old) { font-size: 14px; color: var(--et-text-muted, #6b7280); text-decoration: line-through; }
:where(.qv-desc) { margin: 0; font-size: 14px; line-height: 1.65; color: var(--et-text-muted, #6b7280); }
:where(.qv-actions) { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 8px; }
/* Bağlantı rengi: temaların temel "a { color: inherit }" kuralı tek
   başına bir :where() rengini ezer (2026-10-10, Hera'da buton yazısı
   zeminle aynı renkte kalıyordu). Renk kapsayıcıdan miras alınır. */
:where(.qv-actions) { color: var(--et-primary-text, #fff); }
:where(.qv-btn-detail) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  background: var(--et-primary, #111827); color: var(--et-primary-text, #fff);
  border-radius: var(--et-radius, 8px);
  font-size: 14px; text-decoration: none;
}
:where(.qv-btn-detail:hover) { opacity: .88; }
/* Varyant seçimi ve sepete ekleme (quickview.js secimBagla) */
:where(.qv-opt) { display: flex; flex-direction: column; gap: 8px; }
:where(.qv-opt-bas) { margin: 0; font-size: 14px; color: var(--et-text-muted, #6b7280); }
:where(.qv-opt-bas strong) { color: var(--et-text, #111827); font-weight: 600; }
:where(.qv-opt-list) { display: flex; flex-wrap: wrap; gap: 8px; }
:where(.qv-opt-btn) {
  min-width: 44px; min-height: 38px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--et-border, #e5e7eb); border-radius: var(--et-btn-radius, var(--et-radius, 8px));
  background: var(--et-bg, #fff); color: var(--et-text, #111827); font: inherit; font-size: 14px;
}
:where(.qv-opt-btn.is-on) { border-color: var(--et-text, #111827); background: var(--et-text, #111827); color: var(--et-bg, #fff); }
:where(.qv-opt-renk) {
  width: 32px; height: 32px; padding: 0; cursor: pointer; border-radius: 50%;
  border: 1px solid var(--et-border, #e5e7eb); background: var(--qv-sw, transparent);
  box-shadow: inset 0 0 0 3px var(--et-bg, #fff);
}
:where(.qv-opt-renk.is-on) { border-color: var(--et-text, #111827); }
:where(.qv-uyari) { margin: 0; font-size: 13px; color: var(--et-danger, #b91c1c); }
:where(.qv-satin) { display: flex; gap: 10px; width: 100%; }
:where(.qv-adet) {
  width: 76px; min-height: 46px; padding: 0 10px; text-align: center;
  border: 1px solid var(--et-border, #e5e7eb); border-radius: var(--et-btn-radius, var(--et-radius, 8px));
  background: var(--et-bg, #fff); color: var(--et-text, #111827); font: inherit;
}
:where(.qv-btn-add) {
  flex: 1; min-height: 46px; padding: 0 22px; cursor: pointer; border: 0;
  border-radius: var(--et-btn-radius, var(--et-radius, 8px));
  background: var(--et-primary, #111827); color: var(--et-primary-text, #fff);
  font: inherit; font-size: 15px; font-weight: 600;
}
:where(.qv-btn-add:disabled) { opacity: .45; cursor: not-allowed; }
:where(.qv-detay) { margin: 0; font-size: 14px; color: var(--et-text, #111827); }
:where(.qv-link-detail) { color: var(--et-text, #111827); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  :where(.qv-body) { grid-template-columns: 1fr; }
  :where(.qv-info) { padding: 20px 20px 28px; }
}

/* Temaların "button { background: none; border: 0 }" sıfırlaması :where()
   kurallarını ezer (Novera, Poseidon, Freya'da zemin ve renk daireleri
   boş kalıyordu, 2026-10-10). Görsel özellikler bu yüzden element+sınıf
   özgüllüğüyle verilir. Bu dosya temanın CSS'inden sonra yüklenir, aynı
   özgüllükteki ".tema button" kuralında da kazanır. Tema kendi tasarımını
   ".tema .qv-btn-add" gibi daha özgül bir seçiciyle yazar. */
:where(.qv-overlay) button.qv-btn-add { background: var(--et-primary, #111827); color: var(--et-primary-text, #fff); border: 0; border-radius: var(--et-btn-radius, var(--et-radius, 8px)); }
:where(.qv-overlay) button.qv-opt-btn { background: var(--et-bg, #fff); color: var(--et-text, #111827); border: 1px solid var(--et-border, #e5e7eb); border-radius: var(--et-btn-radius, var(--et-radius, 8px)); }
:where(.qv-overlay) button.qv-opt-btn.is-on { background: var(--et-text, #111827); color: var(--et-bg, #fff); border-color: var(--et-text, #111827); }
:where(.qv-overlay) button.qv-opt-renk { background: var(--qv-sw, transparent); border: 1px solid var(--et-border, #e5e7eb); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--et-bg, #fff); }
:where(.qv-overlay) button.qv-opt-renk.is-on { border-color: var(--et-text, #111827); }
:where(.qv-overlay) input.qv-adet { background: var(--et-bg, #fff); color: var(--et-text, #111827); border: 1px solid var(--et-border, #e5e7eb); border-radius: var(--et-btn-radius, var(--et-radius, 8px)); }