/* Pencere önizleme (pencere-onizleme.js). Tüm sınıflar po- önekli; tema CSS'iyle çakışmasın. */
.po { position: relative; }
.po-sahne { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #d9d6d2; border: 1px solid #e3e3e3; user-select: none; -webkit-user-select: none; }
.po-kadr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.po-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }

/* Boyalı parça: kutu (kırpar) > iç katman (doku; sıkışır ya da kayar) > renk × gölge + ışık */
.po-boyali { position: absolute; overflow: hidden; }
.po-ic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; isolation: isolate; }
.po-ic > *, .po-lupe > *, .po-lb-stof > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; margin: 0; }
.po-renk { background: #fafafa; transition: background-color .18s ease; }
.po-renk2 { background: #f7f8f8; transition: background-color .18s ease; }
.po-golge { mix-blend-mode: multiply; }
.po-isik { mix-blend-mode: screen; }

/* Sürüklenebilir yerler: görünenden geniş dokunma alanı */
/* Tutamaklar büyüteç dairesinin üstünde: daireyle çakışınca da sürüklenebilsin */
.po-tut { cursor: ns-resize; touch-action: none; outline: none; overflow: visible; z-index: 3; }
.po-tut-y::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.po-tut-x { cursor: ew-resize; position: absolute; }
.po-tut-x::after { content: ""; position: absolute; left: 50%; top: 42%; width: 4px; height: 16%; margin-left: -2px; border-radius: 2px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); opacity: .75; }
.po-tut-x:hover::after, .po-tut-x:focus-visible::after { opacity: 1; }
.po-tut:focus-visible { box-shadow: 0 0 0 2px #17687a; }
.po-suruklu, .po-suruklu * { cursor: grabbing !important; }

.po-ip { position: absolute; width: 1px; margin-left: -.5px; background: rgba(95, 95, 95, .55); pointer-events: none; }
/* Zincir: ince boncuklu halka */
.po-zincir { position: absolute; box-sizing: border-box; border: 2px dotted currentColor; border-top: 0; border-radius: 0 0 8px 8px; color: #f4f4f4; filter: drop-shadow(0 0 .5px rgba(0, 0, 0, .55)); pointer-events: none; }
.po-tutamak { position: absolute; overflow: hidden; }
/* Parkering seçilince lameller kayarak toplanır */
.po-kay .po-kumas, .po-kay .po-kumas > .po-ic, .po-kay .po-kenar, .po-kay .po-tutamak { transition: left .8s ease, width .8s ease; }

/* Büyüteç dairesi */
.po-lupe { position: absolute; z-index: 2; width: 27%; aspect-ratio: 1 / 1; right: 6%; top: 44%; padding: 0; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); overflow: hidden; isolation: isolate; cursor: zoom-in; background: none; }
.po-lupe::after { content: ""; position: absolute; right: 9%; bottom: 9%; left: auto; top: auto; width: 26px; height: 26px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317687a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); z-index: 2; }

.po-ipucu { margin-top: 8px; font-size: 13px; color: #55646b; }
.po-ipucu::before { content: "⇕ "; color: #17687a; font-weight: 700; }
.po[data-hareket="yatay"] .po-ipucu::before { content: "⇔ "; }

/* Büyük kumaş görünümü */
.po-lb { position: fixed; inset: 0; z-index: 100000; display: none; place-items: center; background: rgba(15, 20, 23, .88); }
.po-lb.po-aaben { display: grid; }
.po-lb figure { margin: 0; }
.po-lb-stof { position: relative; width: min(80vh, 88vw); aspect-ratio: 1 / 1; isolation: isolate; overflow: hidden; }
.po-lb figcaption { margin-top: 10px; color: #fff; font-size: 15px; }
.po-lb-nav, .po-lb-luk { position: fixed; background: none; border: 0; color: #fff; cursor: pointer; line-height: 1; }
.po-lb-nav { top: 50%; transform: translateY(-50%); font-size: 46px; padding: 16px; }
.po-lb-prev { left: 6px; }
.po-lb-next { right: 6px; }
.po-lb-luk { top: 10px; right: 14px; font-size: 36px; padding: 6px 10px; }
.po-lb-tek .po-lb-nav { display: none; }
.po-lb-stof { cursor: zoom-in; touch-action: pinch-zoom; }
.po-lb-stof > :not(.po-lb-ipucu) { transition: transform .25s ease; transform-origin: var(--po-zx, 50%) var(--po-zy, 50%); }
.po-lb-stof.po-zoom { cursor: zoom-out; touch-action: none; }
.po-lb-stof.po-zoom > :not(.po-lb-ipucu) { transform: scale(2.5); transition: transform .25s ease, transform-origin 0s; }
.po-lb-stof > .po-lb-ipucu { inset: auto auto 12px 50%; width: auto; height: auto; transform: translateX(-50%); background: rgba(20, 22, 26, .78); color: #fff; font: 600 13px/1.2 system-ui, sans-serif; padding: 7px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; z-index: 5; transition: opacity .2s; }
.po-lb-stof.po-zoom > .po-lb-ipucu { opacity: 0; }

/* Site yerleşimi (topgardiner.js) */
.po-yer { margin: 18px 0 8px; }
.po-yer.po-yapiskan { position: sticky; top: var(--po-top, 16px); z-index: 2; transition: top .15s ease; }
/* Kısa ekranda önizleme + alt yazı ekrana sığsın */
.po-yapiskan .po { max-width: calc(100vh - var(--po-top, 16px) - 80px); }
.po-secim { margin-top: 4px; font-size: 15px; color: #1f2a30; }
.po-secim b { color: #17687a; }

/* Bayi vitrini (vitrin.js): önizleme galeri sütununun en üstünde, fotoğraflar altında.
   Temanın yapışkan galerisi sabitlenir, yoksa kaydırınca önizlemenin üstüne biner. */
.po-galeri { position: static !important; }
.po-yer.po-ust { margin: 0 0 22px; }

/* Kol (Håndtag): rayın altında küçük yuvarlak tutamak, ray renginde */
.po-kol { position: absolute; z-index: 2; border-radius: 0 0 40% 40% / 0 0 70% 70%; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 -2px 3px rgba(0, 0, 0, .18); pointer-events: none; }
.po-kol .po-renk { position: absolute; inset: 0; }