/* Masaüstü (>=1024 px) ürün detay katmanı (2026-10-22, Burak: "yalnızca MASAÜSTÜ ÜRÜN DETAY SAYFALARININ tasarımını iyileştir").
   Üretim: scripts/website_urun.py + scripts/website_urun_masaustu.py. <=1023 px: bu blok display:none, eski sayfa (galeri-kutu, urun-bilgi, sekmeler, benzer şerit, eski altbilgi) AYNEN.
   >=1024 px: eski bölümler gizli (DOM'da durur, odak almaz), .ud gösterilir. Renkler: zemin #fff, metin #242424/#666, düğme #333/#454545, ayırıcı #e5e5e5. Ürün fotoğrafı 2:3 beyaz çerçeve (contain). */
body.urun-sayfa .ud, body.urun-sayfa .ms-alt { display: none; }

@media (min-width: 1024px) {
  body.urun-sayfa main > .kap, body.urun-sayfa > footer.alt { display: none; }
  body.urun-sayfa .ms-alt { display: block; }
  body.urun-sayfa, body.urun-sayfa main { background: #fff; }
  body.urun-sayfa .ud { display: block; }
  /* 2026-10-23 yerleşim revizyonu (Burak): ana galeri YÜKSEKLİĞE de uyar. --ud-ust = galeri üstünün sayfadaki konumu (ilk açılış; başlık + yol alanı tahmini, urun-masaustu.js gerçek değeri ölçüp yazar);
     --ud-yuk = min(600px, pencere yüksekliği - galeri üstü - 24px). Çerçeve genişliği = yükseklik x 2/3. Sabit alt sınır yok (yalnız aşırı kısa pencerede 320px). */
  .ud { --ud-hdr: 160px; --ud-ust: calc(var(--ud-hdr) + 8px + 12px + 20px + 14px); --ud-yuk: max(320px, min(600px, calc(100vh - var(--ud-ust) - 24px)));
        box-sizing: border-box; width: min(1280px, 100% - 48px); margin: 0 auto; padding: 12px 0 64px; color: #242424; background: #fff; }
  body.urun-sayfa main.bolum { padding-top: 8px; padding-bottom: 16px; }
  .ud a:focus-visible, .ud button:focus-visible, .ud input:focus-visible, .ud textarea:focus-visible, .ud [tabindex]:focus-visible { outline: 2px solid #242424; outline-offset: 2px; border-radius: 3px; }
  .ud-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .ud-iz ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.4; color: #666; }
  .ud-iz li + li::before { content: "/"; margin-right: 8px; color: #999; }
  .ud-iz a { color: #666; text-decoration: none; }
  .ud-iz a:hover { color: #242424; text-decoration: underline; text-underline-offset: 3px; }
  .ud-iz [aria-current] { color: #242424; }
  .ud-ust { --ud-kuc: 0px; display: grid; grid-template-columns: minmax(0, calc(var(--ud-kuc) + var(--ud-yuk) * 2 / 3)) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 14px; }
  .ud-ust.ud-coklu { --ud-kuc: 72px; }

  /* ---- galeri: küçük resim şeridi (60 px, ana çerçeve yüksekliğine uyar, sığmazsa kendi içinde kayar) + 2:3 beyaz ana çerçeve (contain); çerçeve görsel değişince sabit */
  .ud-galeri { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
  .ud-coklu .ud-galeri { grid-template-columns: 60px minmax(0, 1fr); }
  .ud-kuc-sar { position: relative; align-self: stretch; min-height: 0; }
  .ud-kucukler { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-behavior: smooth; }
  .ud-kucukler::-webkit-scrollbar { display: none; }
  .ud-kucukler li { flex: none; }
  .ud-kucuk { position: relative; display: block; width: 60px; aspect-ratio: 2 / 3; padding: 0; background: #fff; border: 1px solid #e5e5e5; border-radius: 4px; cursor: pointer; overflow: hidden; box-sizing: border-box; }
  .ud-kucuk img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .ud-kucuk.etkin { border: 2px solid #333; }
  .ud-kuc-ok { position: absolute; left: 0; right: 0; z-index: 1; display: grid; place-items: center; height: 26px; margin: 0; padding: 0; border: 0; color: #242424; cursor: pointer; }
  .ud-kuc-ok[hidden] { display: none; }
  .ud-kuc-ok svg { width: 20px; height: 20px; }
  .ud-kuc-yukari { top: 0; background: linear-gradient(#fff 55%, rgba(255, 255, 255, 0)); }
  .ud-kuc-asagi { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff 45%); }
  .ud-kuc-asagi svg { transform: rotate(180deg); }
  .ud-cerceve { position: relative; width: 100%; aspect-ratio: 2 / 3; background: #fff; border: 1px solid #e5e5e5; border-radius: 4px; overflow: hidden; box-sizing: border-box; }
  .ud-ana { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
  .ud-ana img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; }
  .ud-cerceve.zoom .ud-ana img { transform: scale(2.2); }
  .ud-ok { position: absolute; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; background: #fff; color: #242424; border: 1px solid #d8d8d8; border-radius: 50%; cursor: pointer; }
  .ud-ok[hidden] { display: none; }
  .ud-ok svg { width: 20px; height: 20px; }
  .ud-ok-sol { left: 8px; } .ud-ok-sag { right: 8px; }
  .ud-ok:hover { border-color: #333; }
  .ud-buyut-ikon { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px; background: #fff; border: 1px solid #e5e5e5; border-radius: 50%; color: #242424; pointer-events: none; }
  .ud-buyut-ikon svg { width: 16px; height: 16px; }

  /* ---- sağ sütun: marka, H1, özet, kod, fiyat/paket, seçenekler, miktar, eylemler, hizmet, destek */
  .ud-bilgi { min-width: 0; max-width: 640px; }
  /* A. kimlik (grup içi 6-8 px) · B. ticari bilgi · C. satın alma (gruplar arası 18 px) */
  .ud-marka { margin: 0 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #666; }
  .ud-baslik { margin: 0 0 8px; font-size: 28px; line-height: 1.22; font-weight: 600; letter-spacing: 0; color: #242424; overflow-wrap: anywhere; }
  .ud-ozet { margin: 0 0 6px; font-size: 16px; line-height: 1.45; color: #666; }
  .ud-kod { margin: 0; font-size: 13px; color: #666; }
  .ud-satin { margin-top: 18px; }
  .ud-ticari > :first-child { margin-top: 0; }
  .ud-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; font-size: 16px; color: #666; }
  .ud-fiyat strong { font-size: 32px; line-height: 1.15; font-weight: 600; color: #242424; }
  .ud-paket[hidden], .ud-birim[hidden] { display: none; }
  .ud-birim { margin: 4px 0 0; font-size: 14px; color: #666; }
  .ud-fiyat-yok { margin: 0; font-size: 17px; line-height: 1.45; color: #242424; }
  .ud-stok { margin: 6px 0 0; font-size: 15px; color: #666; }
  .ud-grup { margin-top: 10px; }
  .ud-etiket { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #242424; }
  .ud-secenekler { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .ud-secenek { display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; padding: 8px 12px; text-align: left; background: #fff; color: #242424; border: 1px solid #cfcfcf; border-radius: 6px; font: inherit; cursor: pointer; }
  .ud-secenek b { font-size: 15px; font-weight: 600; }
  .ud-secenek span { font-size: 14px; color: #666; }
  .ud-secenek:hover { border-color: #333; }
  .ud-secenek.etkin { padding: 7px 11px; border: 2px solid #333; }
  .ud-alim { margin-top: 18px; }
  .ud-miktar-satir { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
  .ud-adet { display: inline-flex; align-items: center; height: 44px; border: 1px solid #cfcfcf; border-radius: 6px; overflow: hidden; }
  .ud-adet button { width: 44px; height: 100%; padding: 0; background: #fff; color: #242424; border: 0; font: inherit; font-size: 20px; cursor: pointer; }
  .ud-adet button:hover { background: #f4f4f4; }
  .ud-adet input { width: 56px; height: 100%; padding: 0; text-align: center; border: 0; border-inline: 1px solid #e5e5e5; font: inherit; font-size: 16px; color: #242424; -moz-appearance: textfield; appearance: textfield; background: #fff; }
  .ud-adet input::-webkit-outer-spin-button, .ud-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .ud-toplam { margin: 0; font-size: 14px; color: #666; }
  .ud-toplam:empty { display: none; }
  .ud-al { display: flex; gap: 10px; margin-top: 12px; }
  .ud-alim > .ud-al:first-child { margin-top: 0; }
  .ud-sepet { flex: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 0 20px; background: #333; color: #fff; border: 1px solid #333; border-radius: 6px; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
  .ud-sepet:hover { background: #454545; border-color: #454545; }
  .ud-fav { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; background: #fff; color: #333; border: 1px solid #d8d8d8; border-radius: 6px; font: inherit; font-size: 15px; cursor: pointer; }
  .ud-fav:hover { border-color: #333; }
  .ud-fav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
  .ud-fav[aria-pressed="true"] svg { fill: currentColor; }
  /* hizmet notları: kısa, sakin grup */
  .ud-hizmet { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid #e5e5e5; font-size: 13.5px; line-height: 1.45; color: #666; }
  .ud-hizmet li { position: relative; padding: 0 0 3px 20px; }
  .ud-hizmet li::before { content: ""; position: absolute; left: 3px; top: 3px; width: 5px; height: 9px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(40deg); }
  .ud-hizmet-bag { margin: 2px 0 0; font-size: 13.5px; }
  .ud-hizmet-bag a, .ud-toptan a, .ud-destek a { color: #242424; text-decoration: underline; text-underline-offset: 3px; }
  /* destek: tek kompakt satır (WhatsApp'tan sor · Soru formu · Paylaş), altında toptan bağlantısı */
  .ud-destek { margin-top: 12px; font-size: 14px; }
  .ud-destek-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; }
  .ud-destek-bag { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; background: none; border: 0; font: inherit; font-size: 14px; color: #242424; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .ud-paylas-dugme { text-decoration: none; }
  .ud-paylas-dugme svg { width: 16px; height: 16px; }
  .ud-paylas-dugme span { text-decoration: underline; text-underline-offset: 3px; }
  .ud-paylas-sar { position: relative; }
  .ud-paylas-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 168px; max-width: calc(100vw - 16px); padding: 6px; background: #fff; border: 1px solid #d8d8d8; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
  .ud-paylas-panel[hidden] { display: none; }
  .ud-paylas-panel.sagda { left: auto; right: 0; }
  .ud-paylas-panel.ustte { top: auto; bottom: calc(100% + 4px); }
  .ud-paylas-panel ul { list-style: none; margin: 0; padding: 0; }
  .ud-paylas-panel a { display: block; padding: 8px 10px; border-radius: 4px; font-size: 14px; color: #242424; text-decoration: none; }
  .ud-paylas-panel a:hover { background: #f4f4f4; }
  .ud-toptan { margin: 6px 0 0; font-size: 13.5px; color: #666; }
  .ud-toptan a { color: #666; }
  .ud-soru-form { display: grid; gap: 10px; margin-top: 8px; }
  .ud-soru-form[hidden], .ud-soru-misafir[hidden] { display: none; }
  .ud-soru-form label { display: grid; gap: 4px; font-size: 14px; color: #666; }
  .ud-soru-form input, .ud-soru-form textarea { box-sizing: border-box; width: 100%; padding: 9px 10px; border: 1px solid #c9c9c9; border-radius: 6px; font: inherit; font-size: 15px; color: #242424; }
  .ud-soru-not { margin: 0; min-height: 18px; font-size: 14px; color: #b3261e; }
  .ud-soru-not.iyi { color: #2e6b3a; }
  .ud-dugme-ince { justify-self: start; min-height: 40px; padding: 0 20px; background: #fff; color: #333; border: 1px solid #333; border-radius: 6px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

  /* ---- görünür bilgi bölümleri (2026-10-23, Burak: yatay sekme yok): açıklama, teknik özellikler, teslimat ve iade (açılır); üst iki sütunun altında */
  .ud-bolumler { margin-top: 36px; }
  .ud-bolum { margin: 0; padding: 28px 0 0; border-top: 1px solid #e5e5e5; scroll-margin-top: calc(var(--u2-yuk, 128px) + 16px); }
  .ud-bolum + .ud-bolum { margin-top: 32px; }
  .ud-bolum h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: 0; color: #242424; }
  .ud-metin { max-width: 78ch; font-size: 16px; line-height: 1.65; color: #333; }
  .ud-metin p { margin: 0 0 14px; }
  .ud-metin p:last-child { margin-bottom: 0; }
  .ud-metin ul, .ud-metin ol { margin: 0 0 14px; padding-left: 22px; }
  .ud-metin h3 { margin: 20px 0 8px; font-size: 18px; font-weight: 600; color: #242424; }
  .ud-metin h3:first-child { margin-top: 0; }
  .ud-metin a { color: #242424; text-decoration: underline; text-underline-offset: 3px; }
  .ud-tablo { width: 100%; max-width: 760px; border-collapse: collapse; }
  .ud-tablo th, .ud-tablo td { padding: 11px 0; border-bottom: 1px solid #e5e5e5; font-size: 15px; line-height: 1.45; text-align: left; vertical-align: top; }
  .ud-tablo th { width: 34%; padding-right: 16px; font-weight: 500; color: #666; }
  .ud-tablo td { color: #242424; }
  .ud-tablo a { color: #242424; text-decoration: underline; text-underline-offset: 3px; }
  .ud-acilir summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: -6px 0 0; list-style: none; cursor: pointer; }
  .ud-acilir summary::-webkit-details-marker { display: none; }
  .ud-acilir summary h2 { margin: 0; }
  .ud-acilir-ok { display: grid; place-items: center; width: 32px; height: 32px; color: #242424; }
  .ud-acilir-ok svg { width: 22px; height: 22px; transition: transform .15s ease; }
  .ud-acilir[open] .ud-acilir-ok svg { transform: rotate(180deg); }
  .ud-acilir[open] summary { margin-bottom: 10px; }
  .ud-acilir:not([open]) { padding-bottom: 0; }

  /* ---- benzer ürünler (ana sayfanın onaylı kartı: masaustu.css .ms-kart; 4 sütun, dar masaüstünde 3) */
  .ud-ilgili { margin-top: 40px; padding-top: 28px; border-top: 1px solid #e5e5e5; }
  .ud-ilgili-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
  .ud-ilgili h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: 0; color: #242424; }
  .ud-ilgili-bas a { font-size: 15px; color: #242424; text-decoration: underline; text-underline-offset: 3px; }

  /* ---- büyüteç penceresi (JS ekler) */
  .ud-lb { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #fff; color: #242424; }
  .ud-lb[hidden] { display: none; }
  .ud-lb-ust { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; font-size: 15px; color: #666; }
  .ud-lb-kapat { width: 44px; height: 44px; padding: 0; background: #fff; border: 1px solid #cfcfcf; border-radius: 50%; font-size: 26px; line-height: 1; color: #242424; cursor: pointer; }
  .ud-lb-sahne { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 72px; }
  .ud-lb-kare { position: relative; height: 100%; max-height: 100%; aspect-ratio: 2 / 3; max-width: 100%; overflow: hidden; background: #fff; }
  .ud-lb-kare img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; transform-origin: 50% 50%; }
  .ud-lb-kare.zoom img { transform: scale(2.2); cursor: zoom-out; }
  .ud-lb-ok { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; padding: 0; background: #fff; color: #242424; border: 1px solid #cfcfcf; border-radius: 50%; cursor: pointer; }
  .ud-lb-ok[hidden] { display: none; }
  .ud-lb-ok svg { width: 22px; height: 22px; }
  .ud-lb-sol { left: 20px; } .ud-lb-sag { right: 20px; }
  .ud-lb-kucukler { display: flex; justify-content: center; gap: 8px; padding: 12px 24px 18px; }
  .ud-lb-kucukler button { width: 48px; aspect-ratio: 2 / 3; padding: 0; background: #fff; border: 1px solid #e5e5e5; border-radius: 4px; overflow: hidden; cursor: pointer; }
  .ud-lb-kucukler button.etkin { border: 2px solid #333; }
  .ud-lb-kucukler img { display: block; width: 100%; height: 100%; object-fit: contain; }
  body.ud-lb-acik { overflow: hidden; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .ud { --ud-hdr: 112px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ud-ilgili .ms-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ud-ilgili .ms-kart:nth-child(4) { display: none; }
  .ud-baslik { font-size: 26px; }
  .ud-fiyat strong { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .ud *, .ud-lb * { transition: none !important; } }