/* TAN DECO — ürün sayfalarında yerinde oynayan video ve fotoğraf büyütme (js/urun-medya.js).
   Renkler sitenin değişkenlerinden gelir (style.css, tema.css). */

/* ---------- Gömülü oynatıcı ve video önizleme karesi ---------- */
.um-cerceve { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; display: block; }
.um-kapak { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #1F2A2E; color: #fff; cursor: pointer; overflow: hidden; display: block; font: inherit; }
.um-kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .86; }
.um-kapak::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); pointer-events: none; }
.um-oynat { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(255,255,255,.95); color: #1F2A2E; display: grid; place-items: center; box-shadow: 0 6px 22px rgba(0,0,0,.35); z-index: 1; }
.um-oynat svg { width: 40px; height: 40px; margin-left: 4px; }
.um-kapak:hover .um-oynat { background: #fff; transform: scale(1.05); }
.um-kapak:focus-visible { outline: 3px solid var(--c-accent, #2F6B4F); outline-offset: -3px; }
.um-ad { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.um-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .um-kapak:hover .um-oynat { transform: none; } }

/* ---------- Önizleme kutusunun yerinde oynatıcı (sineklik, stor / zebra / jaluzi) ---------- */
.um-sahne { position: relative; }
.um-katman { position: absolute; inset: 0; z-index: 9; background: #000; line-height: 0; }
.um-dugmeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 0; line-height: 1.2; }
.um-dugmeler[hidden], .um-dugme[hidden], .um-don[hidden] { display: none; }
.um-dugme, .um-don { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; width: auto; margin: 0; padding: 6px 10px; border-radius: var(--r-btn, 6px); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; min-width: 0; text-align: center; white-space: normal; box-sizing: border-box; }
.um-dugme { border: 1.5px solid var(--c-ink, #1F2A2E); background: #fff; color: var(--c-ink, #1F2A2E); }
.um-dugme:hover, .um-dugme[aria-pressed="true"] { background: var(--c-ink, #1F2A2E); color: #fff; }
.um-don { border: 1.5px solid var(--c-line, #d9d2c5); background: var(--c-cream, #F7F5F1); color: var(--c-ink, #1F2A2E); }
.um-don:hover { border-color: var(--c-ink, #1F2A2E); }
.um-dugme:focus-visible, .um-don:focus-visible, .um-buyut:focus-visible { outline: 3px solid var(--c-accent, #2F6B4F); outline-offset: 2px; }
.um-simge { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; flex: 0 0 auto; }
.um-simge svg { width: 12px; height: 12px; margin-left: 1px; }
/* Sineklik sayfası: düğme satırı kartın içinde, fotoğrafın hemen altında */
.ys-prev-card > .um-dugmeler { margin: 0; padding: 10px 12px; }
.um-sahne.um-acik .ys-try, .um-sahne.um-acik .um-buyut { display: none; }
/* Stor / zebra / jaluzi: video oynarken perde ayarları (açıklık, zincir) gizlenir */
.pon.video-acik .pon-ayar, .pon.video-acik .pon-ipucu { display: none; }

/* ---------- Plise ürün sayfası: galerinin sonunda iki video kutusu ---------- */
.ys-thumbs { grid-template-columns: repeat(var(--ys-th-n, 8), 1fr); }
.ys-th-vid { background: var(--c-ink, #1F2A2E); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; font-size: 10px; font-weight: 700; line-height: 1.1; text-align: center; }
.ys-th-vid[hidden] { display: none; }
.ys-th-vid svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ys-th-vid span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.ys-th-vid.on { border-color: var(--c-accent, #2F6B4F); }
.ys-th:focus-visible { outline: 3px solid var(--c-accent, #2F6B4F); outline-offset: 1px; }
.ys-photo img[hidden] { display: none; }
.ys-prev-card.video-acik .ys-try, .ys-prev-card.video-acik .ys-prev-hint, .ys-prev-card.video-acik .um-buyut { display: none; }
/* Ölçü ve montaj adımındaki video satırları artık bağlantı değil düğmedir */
button.ys-vid { width: 100%; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
.ys-vid[hidden] { display: none; }
.ys-vid:focus-visible { outline: 3px solid var(--c-accent, #2F6B4F); outline-offset: 2px; }
.ys-cards > .ys-vid { grid-column: 1 / -1; margin: 4px 0 0; }

/* ---------- Fotoğraf büyütme ---------- */
.um-buyur img { cursor: zoom-in; }
.um-buyut { position: absolute; left: 10px; bottom: 10px; z-index: 7; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--c-ink, #1F2A2E); display: grid; place-items: center; cursor: zoom-in; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.um-buyut[hidden] { display: none; }
.um-buyut svg { width: 20px; height: 20px; }
.um-buyut:hover { background: #fff; }
.um-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(18,17,15,.92); color: #fff; overflow: hidden; }
.um-lb:not([open]) { display: none; }
.um-lb::backdrop { background: rgba(18,17,15,.6); }
.um-lb-ic { position: absolute; inset: 0; margin: 0; padding: calc(env(safe-area-inset-top, 0px) + 60px) 64px calc(env(safe-area-inset-bottom, 0px) + 48px); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.um-lb-ic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 4px; background: #fff; }
.um-lb-x, .um-lb-ok { position: absolute; z-index: 2; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1F2A2E; font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.um-lb-x { top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; }
.um-lb-ok { top: 50%; margin-top: -23px; }
.um-lb-once { left: 10px; } .um-lb-sonra { right: 10px; }
.um-lb.tek .um-lb-ok { display: none; }
.um-lb-x:focus-visible, .um-lb-ok:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 3px #1F2A2E; }
.um-lb-sayac { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: #fff; }
html.um-lb-acik { overflow: hidden; }
@media (max-width: 600px) {
  .um-lb-ic { padding-left: 8px; padding-right: 8px; }
  .um-lb-ok { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); margin-top: 0; width: 44px; height: 44px; }
  .um-oynat { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .um-oynat svg { width: 32px; height: 32px; }
  .um-ad { font-size: 14px; left: 10px; right: 10px; bottom: 9px; }
  .um-dugmeler { gap: 6px; }
  .um-dugme, .um-don { font-size: 12.5px; padding: 5px 6px; gap: 5px; }
  .um-simge { width: 18px; height: 18px; } .um-simge svg { width: 10px; height: 10px; }
}

/* Plise galerisi: önceki / sonraki okları fotoğrafın ve video karesinin de üstünde görünür (sıra: önizleme → fotoğraflar → videolar) */
.ys-prev-card > .ph-nav { z-index: 8; }

/* ---------- Masaüstü: sağ taraf kayarken soldaki galeri / önizleme sabit kalır ----------
   Sabitleme kuralı yeni-siparis.css içindedir (.ys-left { position: sticky }). Plise ürün sayfasında "Özellikler" ve bilgi
   başlıkları artık sağ sütunun içindedir; böylece sağ taraf uzundur ve sol kart sipariş özeti ile özellikler boyunca sabit kalır. */
@media (min-width: 901px) {
  .ys-left { align-self: start; }
  .ys-right > .ys-props { margin-top: 32px; }
  .ys-right > .ys-props .ys-props-grid { grid-template-columns: 1fr; }
  .ys-right > .ys-desc { max-width: none !important; margin-top: 28px !important; }
  /* Sineklik: video düğmeleri satırı varsa büyük fotoğraf o kadar küçülür (sol sütun ekrana sığsın, alttaki fiyat çubuğunun altında kalmasın) */
  .ys-left.um-videolu { width: min(100%, calc(100vh - var(--header-h, 100px) - 280px)); }
}