/*
 * NEROTEX · ürün sayfası galerisi, büyütme penceresi, renk düğmeleri, ölçü çizimi, sabit çubuk rengi (dalga 2, 13 Eki 2026).
 * Görsel çerçevesi 4:5, krem ürün zemini; kayma yok (oran sabit). Hareket: hareket.css kuralları ve tokenları.
 */

/* ---------- Galeri ---------- */
.nx-galeri { position: relative; margin-inline: calc(var(--gutter) * -1) !important; min-width: 0; }
.nx-galeri-ana { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-card); isolation: isolate; }
.nx-galeri-iz { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; outline-offset: -3px; }
.nx-galeri-iz::-webkit-scrollbar { display: none; }
.nx-galeri-kare { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; position: relative; }
.nx-galeri-buyut { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.nx-galeri-buyut img, .nx-galeri-perde { display: block; width: 100%; height: 100% !important; object-fit: cover; mix-blend-mode: multiply; }
.nx-galeri-buyut img[src*="-studyo"], .nx-galeri-buyut img[src*="-yasam"], .nx-galeri-buyut img[src*="yasam-"], .nx-galeri-perde { mix-blend-mode: normal; }
.nx-galeri-perde { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .45s var(--hz-egri, ease); }
.nx-galeri-sayac { position: absolute; z-index: 3; top: var(--wp--custom--bosluk--12); right: var(--wp--custom--bosluk--12); padding: var(--wp--custom--bosluk--4) var(--wp--custom--bosluk--10); border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-surface) 82%, transparent); color: var(--c-ink); font: 600 var(--fs-xs)/1.3 var(--f-body); font-variant-numeric: tabular-nums; pointer-events: none; }
.nx-galeri-nokta { display: flex; justify-content: center; gap: 6px; padding: var(--wp--custom--bosluk--10) 0 0; }
.nx-galeri-nokta i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ink); opacity: .22; transition: opacity var(--hz-kisa, .2s), transform var(--hz-kisa, .2s); }
.nx-galeri-nokta i.is-on { opacity: .85; transform: scale(1.4); }
.nx-galeri-kucuk { display: none; }
.nx-galeri-ok { display: none; }
/* Renk değişince çerçevede koşan dikiş (kil, kesik çizgi). */
.nx-galeri-dikis { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; opacity: 0; overflow: visible; }
.nx-dikis-cizgi { fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-dasharray: 10 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nx-dikis-maske { fill: none; stroke: #fff; stroke-width: 40; stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (prefers-reduced-motion: no-preference) {
	.nx-galeri.is-dikis .nx-galeri-dikis { animation: nx-dikis-gor 1.35s ease-in-out both; }
	.nx-galeri.is-dikis .nx-dikis-maske { animation: nx-ciz 1s cubic-bezier(.55, .05, .35, 1) forwards; }
}
@keyframes nx-dikis-gor { 0% { opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

@media (min-width: 900px) {
	.nx-galeri { margin: 0 !important; position: sticky; top: calc(var(--head-h) + var(--wp--custom--bosluk--16)); display: grid; grid-template-columns: var(--wp--custom--olcu--76) minmax(0, 1fr); gap: var(--wp--custom--bosluk--14); align-items: start; }
	.nx-galeri-ana { grid-column: 2; grid-row: 1; border-radius: var(--r-lg); }
	.nx-galeri-nokta { display: none; }
	.nx-galeri-kucuk { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--wp--custom--bosluk--8); max-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-line) transparent; padding: 2px; align-self: stretch; height: 0; min-height: 100%; }
	.nx-galeri-k { flex: none; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 2px solid transparent; border-radius: var(--wp--custom--yaricap--12); overflow: hidden; background: var(--c-card); cursor: pointer; transition: border-color var(--hz-kisa, .2s), opacity var(--hz-kisa, .2s); opacity: .78; }
	.nx-galeri-k:hover { opacity: 1; }
	.nx-galeri-k[aria-current="true"] { border-color: var(--c-ink); opacity: 1; }
	.nx-galeri-k img { display: block; width: 100%; height: 100% !important; object-fit: cover; mix-blend-mode: multiply; }
	.nx-galeri-k img[src*="-studyo"], .nx-galeri-k img[src*="-yasam"], .nx-galeri-k img[src*="yasam-"] { mix-blend-mode: normal; }
	.nx-galeri-ok { display: grid; place-items: center; position: absolute; z-index: 3; top: 50%; width: var(--wp--custom--olcu--44); height: var(--wp--custom--olcu--44); margin-top: -22px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-surface) 90%, transparent); color: var(--c-ink); box-shadow: var(--sh-1); cursor: pointer; opacity: 0; transition: opacity var(--hz-kisa, .2s), transform var(--hz-kisa, .2s); }
	.nx-galeri-ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.nx-galeri-ok.is-geri { left: var(--wp--custom--bosluk--12); }
	.nx-galeri-ok.is-ileri { right: var(--wp--custom--bosluk--12); }
	.nx-galeri-ana:hover .nx-galeri-ok, .nx-galeri-ok:focus-visible { opacity: 1; }
	.nx-galeri-ok:hover { transform: scale(1.06); }
}

/* ---------- Büyütme penceresi ---------- */
.nx-lb { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--c-dark); color: var(--c-on-dark); overflow: hidden; }
.nx-lb::backdrop { background: var(--c-dark); }
.nx-lb[open] { display: block; animation: nx-belir .25s ease-out both; }
.nx-lb-ust { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--wp--custom--bosluk--10) + env(safe-area-inset-top)) var(--wp--custom--bosluk--12) var(--wp--custom--bosluk--10) var(--wp--custom--bosluk--16); pointer-events: none; }
.nx-lb-sayac { font: 600 var(--fs-sm)/1 var(--f-body); font-variant-numeric: tabular-nums; padding: var(--wp--custom--bosluk--6) var(--wp--custom--bosluk--10); border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-dark) 72%, transparent); }
.nx-lb-kapat, .nx-lb-ok { pointer-events: auto; width: var(--wp--custom--olcu--44); height: var(--wp--custom--olcu--44); border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-dark) 72%, transparent); color: var(--c-on-dark); display: grid; place-items: center; cursor: pointer; }
.nx-lb-kapat svg, .nx-lb-ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-lb-iz { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.nx-lb-iz::-webkit-scrollbar { display: none; }
.nx-lb-iz.is-kilit { overflow-x: hidden; }
.nx-lb-kare { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; touch-action: pan-x; cursor: zoom-in; }
.nx-lb-kare.is-zoom { touch-action: none; cursor: grab; }
.nx-lb-kare img { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: contain; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.nx-lb-kare img.is-gecis { transition: transform .3s var(--hz-egri, ease); }
.nx-lb-ok { position: absolute; z-index: 3; top: 50%; margin-top: -22px; display: none; }
.nx-lb-ok.is-geri { left: var(--wp--custom--bosluk--16); }
.nx-lb-ok.is-ileri { right: var(--wp--custom--bosluk--16); }
@media (hover: hover) and (pointer: fine) { .nx-lb-ok { display: grid; } }
.nx-lb-ipucu { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--wp--custom--bosluk--16) + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: var(--wp--custom--bosluk--6) var(--wp--custom--bosluk--12); border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-dark) 72%, transparent); font-size: var(--fs-xs); pointer-events: none; transition: opacity .3s; }
.nx-lb.is-zoom .nx-lb-ipucu { opacity: 0; }
html.nx-lb-acik { overflow: hidden; }

/* ---------- Renk düğmelerinde renk noktası ---------- */
.nx-buy-form .wc-block-product-filter-chips__label { display: inline-flex; align-items: center; gap: var(--wp--custom--bosluk--8); }
.nx-buy-form .wc-block-product-filter-chips__label::before { content: ""; display: var(--nx-renk-on, none); flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--nx-renk); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 22%, transparent); }
.nx-buy-form .wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__label::before { box-shadow: 0 0 0 2px var(--wp--preset--color--beyaz); }
@media (prefers-reduced-motion: no-preference) {
	.nx-buy-form .wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__label::before { animation: nx-renk-sec .45s var(--hz-yay, ease) both; }
}
@keyframes nx-renk-sec { 0% { transform: scale(.6); } 100% { transform: none; } }

/* ---------- Ölçü çizimi ---------- */
.nx-olcu { max-width: 360px; margin: 0 0 var(--sp-3); color: var(--c-ink); }
.nx-olcu-cizim { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-olcu-cizim .z { opacity: .3; }
.nx-olcu-cizim .i { stroke: var(--c-accent); }
.nx-olcu-ok path { stroke-width: 1.6; }
.nx-olcu-ok path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.nx-olcu-yazi { fill: var(--c-ink); stroke: none; font: 600 13px var(--f-body); font-variant-numeric: tabular-nums; }
.nx-olcu-cizim.is-hazir:not(.is-oyna) .nx-olcu-ok path[pathLength] { stroke-dashoffset: 1; }
.nx-olcu-cizim.is-hazir:not(.is-oyna) .nx-olcu-ok path:not([pathLength]), .nx-olcu-cizim.is-hazir:not(.is-oyna) .nx-olcu-yazi { opacity: 0; }
.nx-olcu-cizim.is-oyna .nx-olcu-ok path[pathLength] { animation: nx-ciz .8s cubic-bezier(.5, 0, .3, 1) .15s both; stroke-dashoffset: 1; }
.nx-olcu-cizim.is-oyna .nx-olcu-dik path[pathLength] { animation-delay: .55s; }
.nx-olcu-cizim.is-oyna .nx-olcu-ok path:not([pathLength]) { animation: nx-belir .3s ease-out .85s both; }
.nx-olcu-cizim.is-oyna .nx-olcu-yazi { animation: nx-belir .35s ease-out 1s both; }

/* ---------- Sabit çubuk: seçili rengin küçük görseli + noktası ---------- */
.nx-sticky-renk { position: relative; flex: none; width: var(--wp--custom--olcu--44); height: var(--wp--custom--olcu--44); border-radius: var(--wp--custom--yaricap--10); overflow: visible; background: var(--c-card); }
.nx-sticky-renk[hidden] { display: none; }
.nx-sticky-renk img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.nx-sticky-renk i { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--nx-renk, transparent); box-shadow: 0 0 0 2px var(--c-surface); }
.nx-sticky-renk i:not([style]) { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.nx-sticky-buy.is-on .nx-sticky-renk { animation: nx-sabit-renk .5s var(--hz-yay, ease) .12s both; }
	.nx-sticky-renk.is-yeni i { animation: nx-renk-sec .45s var(--hz-yay, ease) both; }
}
@keyframes nx-sabit-renk { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 100% { opacity: 1; transform: none; } }

/* ---------- Ürün rozeti (mini tambur) ---------- */
.nx-pill-tambur .nx-ci { width: var(--wp--custom--olcu--18); height: var(--wp--custom--olcu--18); }

@media (prefers-reduced-motion: reduce) {
	.nx-galeri *, .nx-lb *, .nx-olcu-cizim *, .nx-sticky-renk, .nx-sticky-renk * { animation: none !important; transition: none !important; }
	.nx-galeri-dikis { display: none; }
}

/* Telefonda bilgi sütunu taşmasın (12 Eki'den kalan hata: açılır satırların tek satır özeti min-content'i 425 px'e çıkarıp
   sayfayı 441 px genişletiyordu → telefon sayfayı küçültüyordu). Örtük ızgara sütunu daralabilir olmalı. */
.nx-pinfo { grid-template-columns: minmax(0, 1fr); }