/* ============================================================
   ORTAK CANLI ÖNİZLEME (_LivePreview.cshtml)
   /vitrin, /katalog, /referans — hepsi bu katmanı kullanır.
   ============================================================ */

.lx-lp {
  position: fixed;
  inset: 0;
  z-index: var(--lx-z-modal);
  display: flex;
  flex-direction: column;
  background: rgba(2, 6, 15, 0.94);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--lx-transition-base);
}

.lx-lp[hidden] { display: none; }
.lx-lp.is-open { opacity: 1; }

/* --- Üst çubuk ------------------------------------------------------ */
.lx-lp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lx-space-3);
  padding: var(--lx-space-3) var(--lx-space-5);
  border-bottom: 1px solid var(--lx-border-base);
  background: var(--lx-surface-deep);
}

.lx-lp__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lx-lp__id strong {
  font-size: var(--lx-text-sm);
  color: var(--lx-text-primary);
}

.lx-lp__id span {
  font-family: var(--lx-font-mono);
  font-size: var(--lx-text-2xs);
  color: var(--lx-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}

.lx-lp__tools {
  display: flex;
  align-items: center;
  gap: var(--lx-space-2);
}

.lx-lp__seg {
  display: flex;
  padding: 3px;
  border: 1px solid var(--lx-border-base);
  border-radius: var(--lx-radius-full);
  background: rgba(255, 255, 255, 0.03);
}

.lx-lp__seg[hidden] { display: none; }

.lx-lp__seg button {
  padding: 6px 14px;
  border: 0;
  border-radius: var(--lx-radius-full);
  background: transparent;
  color: var(--lx-text-tertiary);
  font: inherit;
  font-size: var(--lx-text-xs);
  cursor: pointer;
  transition: color var(--lx-transition-fast), background var(--lx-transition-fast);
}

.lx-lp__seg button:hover { color: var(--lx-text-primary); }

.lx-lp__seg button.is-on {
  background: var(--lx-color-primary-600);
  color: #fff;
}

.lx-lp__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-space-2);
  padding: 8px 14px;
  border: 1px solid var(--lx-border-base);
  border-radius: var(--lx-radius-md);
  background: transparent;
  color: var(--lx-text-secondary);
  font: inherit;
  font-size: var(--lx-text-xs);
  cursor: pointer;
  transition: color var(--lx-transition-fast),
              border-color var(--lx-transition-fast),
              background var(--lx-transition-fast);
}

.lx-lp__btn[hidden] { display: none; }

.lx-lp__btn:hover {
  color: var(--lx-text-primary);
  border-color: var(--lx-border-brand);
  background: rgba(59, 130, 246, 0.14);
}

.lx-lp__btn .lx-icon { width: 14px; height: 14px; }

.lx-lp__btn--close {
  width: 38px;
  height: 34px;
  padding: 0;
  justify-content: center;
}

.lx-lp__btn--close:hover {
  color: var(--lx-color-danger);
  border-color: rgba(244, 63, 94, 0.5);
  background: rgba(244, 63, 94, 0.12);
}

/* --- Sahne / çerçeve ------------------------------------------------ */
.lx-lp__stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--lx-space-4);
  min-height: 0;
  overflow: auto;
}

.lx-lp__frame {
  width: 100%;
  height: 100%;
  border-radius: var(--lx-radius-lg);
  overflow: hidden;
  background: var(--lx-surface-abyss);
  box-shadow: var(--lx-shadow-2xl);
  transition: width var(--lx-transition-base), height var(--lx-transition-base);
}

.lx-lp__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lx-lp__stage[data-lp-size-mode="tablet"] .lx-lp__frame {
  width: min(834px, 100%);
  border: 1px solid var(--lx-border-strong);
}

.lx-lp__stage[data-lp-size-mode="phone"] .lx-lp__frame {
  width: min(414px, 100%);
  height: min(896px, 100%);
  border: 1px solid var(--lx-border-strong);
  border-radius: var(--lx-radius-2xl);
}

/* Dikey video (YouTube Shorts) */
.lx-lp__frame.is-portrait {
  width: min(430px, 100%);
  height: 100%;
  aspect-ratio: 9 / 16;
}

.lx-lp__note {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 var(--lx-space-5) var(--lx-space-3);
  text-align: center;
  font-size: var(--lx-text-xs);
  color: var(--lx-text-muted);
}

.lx-lp__note a { color: var(--lx-text-link); }

/* --- QR katmanı ------------------------------------------------------ */
.lx-lp-qr {
  position: fixed;
  inset: 0;
  z-index: calc(var(--lx-z-modal) + 10);
  display: grid;
  place-items: center;
  padding: var(--lx-space-6);
  background: rgba(2, 6, 15, 0.88);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--lx-transition-base);
}

.lx-lp-qr[hidden] { display: none; }
.lx-lp-qr.is-open { opacity: 1; }

.lx-lp-qr__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lx-space-3);
  max-width: 22rem;
  padding: var(--lx-space-7) var(--lx-space-6) var(--lx-space-6);
  border: 1px solid var(--lx-border-base);
  border-radius: var(--lx-radius-2xl);
  background: var(--lx-surface-elevated);
  box-shadow: var(--lx-shadow-2xl);
  text-align: center;
}

.lx-lp-qr__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--lx-border-base);
  border-radius: var(--lx-radius-full);
  background: transparent;
  color: var(--lx-text-tertiary);
  cursor: pointer;
  transition: color var(--lx-transition-fast), background var(--lx-transition-fast);
}

.lx-lp-qr__close:hover { color: #fff; background: var(--lx-color-danger); }
.lx-lp-qr__close .lx-icon { width: 14px; height: 14px; }

/* QR beyaz zeminde kalmalı — koyu tema üstünde okuma oranı düşüyor */
.lx-lp-qr__code {
  padding: var(--lx-space-3);
  border-radius: var(--lx-radius-lg);
  background: #fff;
  line-height: 0;
}

.lx-lp-qr__code img,
.lx-lp-qr__code svg {
  display: block;
  width: 240px;
  height: 240px;
}

.lx-lp-qr__title {
  margin: var(--lx-space-2) 0 0;
  font-size: var(--lx-text-base);
  font-weight: var(--lx-font-weight-semibold);
  color: var(--lx-text-primary);
}

.lx-lp-qr__url {
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: var(--lx-text-2xs);
  color: var(--lx-text-muted);
  word-break: break-all;
}

.lx-lp-qr__hint {
  margin: var(--lx-space-2) 0 0;
  font-size: var(--lx-text-xs);
  color: var(--lx-text-tertiary);
}

/* --- Duyarlılık ------------------------------------------------------ */
@media (max-width: 900px) {
  .lx-lp__bar { padding: var(--lx-space-3); }
  .lx-lp__id span { max-width: 60vw; }
  .lx-lp__seg { display: none; }
  .lx-lp__stage { padding: 0; }
  .lx-lp__frame { border-radius: 0; }
}

.lx-lp__note[hidden] { display: none; }