/* ════════════════════════════════════════════════════════════════
   UX CAROUSEL — Frontend
   Tasarımın tek kaynağı: .uxc wrapper'daki CSS değişkenleri.
   ════════════════════════════════════════════════════════════════ */

/* ── 1) TEMEL ─────────────────────────────────────────────────── */

.uxc {
	position: relative;
	--swiper-pagination-bullet-vertical-gap: 0px;
	--swiper-pagination-bullet-horizontal-gap: 0px;
}

.uxc .uxc-swiper {
	margin: 0;
	padding: 0;
}

.uxc-slide {
	height: auto;
	display: flex;
}

.uxc-item-marker {
	display: none !important;
}

/* ── 2) KART ──────────────────────────────────────────────────── */

.uxc-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	background: var(--uxc-bg, #ffffff);
	border: var(--uxc-bw, 0px) var(--uxc-bst, solid) var(--uxc-bc, #e5e5e5);
	border-radius: var(--uxc-rad, 12px);
	box-shadow: var(--uxc-sh, 0 6px 18px rgba(16, 18, 24, .08));
	overflow: hidden;
	transition:
		transform .35s cubic-bezier(.22, .61, .36, 1),
		box-shadow .35s cubic-bezier(.22, .61, .36, 1);
}

.uxc-card:hover {
	transform: translateY(calc(var(--uxc-lift, 6px) * -1));
	box-shadow: var(--uxc-hsh, 0 14px 34px rgba(16, 18, 24, .15));
}

.uxc--equal .uxc-slide {
	display: flex;
}

.uxc--equal .uxc-card {
	height: 100%;
}

/* ── 3) GÖRSEL ALANI ──────────────────────────────────────────── */
/* Grid hilesi: ::before padding-top ile oran kilitlenir;
   --uxc-ratio "auto" iken geçersiz değer → doğal yükseklik. */

.uxc-media {
	position: relative;
	display: grid;
	overflow: hidden;
	flex-shrink: 0;
	background: #eef0f3;
}

.uxc-media::before {
	content: '';
	grid-area: 1 / 1;
	padding-top: var(--uxc-ratio, 75%);
}

.uxc-media > img,
.uxc-media > .uxc-media__link {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

.uxc-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--uxc-fit, cover);
}

.uxc-media__link {
	display: block;
}

/* Hover zoom */
.uxc--zoom .uxc-media img {
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.uxc--zoom .uxc-slide:hover .uxc-media img {
	transform: scale(1.06);
}

/* ── 4) ROZET ─────────────────────────────────────────────────── */

.uxc-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 3;
	padding: 5px 10px;
	font-size: var(--uxc-bdgs, 11px);
	font-weight: var(--uxc-bdgw, 700);
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--uxc-bdgc, #ffffff);
	background: var(--uxc-bdgbg, #111111);
	border-radius: var(--uxc-bdgr, 4px);
}

.uxc[style*="--uxc-bdgp:top_right"] .uxc-badge {
	left: auto;
	right: 12px;
}

.uxc--bdgup .uxc-badge {
	text-transform: uppercase;
	letter-spacing: .09em;
}

/* ── 5) GÖVDE ─────────────────────────────────────────────────── */

.uxc-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: var(--uxc-cpad, 24px);
	text-align: var(--uxc-align, left);
	flex: 1 1 auto;
	min-width: 0;
}

.uxc[style*="--uxc-align:center"] .uxc-body { align-items: center; }
.uxc[style*="--uxc-align:right"]  .uxc-body { align-items: flex-end; }

/* ── 6) ELEMANLAR ─────────────────────────────────────────────── */

/* Başlık */
.uxc-title {
	margin: 0;
	font-family: var(--uxc-tf, inherit);
	font-size: var(--uxc-ts, 20px);
	font-weight: var(--uxc-tw, 700);
	line-height: var(--uxc-tlh, 1.3);
	color: var(--uxc-tc, #16181d);
	display: -webkit-box;
	-webkit-line-clamp: var(--uxc-tlines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.uxc[style*="--uxc-tlines:0"] .uxc-title {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.uxc-title a {
	color: inherit;
	text-decoration: none;
	transition: color .25s ease;
}

.uxc-title a:hover {
	color: var(--uxc-thc, #2ea3f2);
}

/* Meta */
.uxc-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--uxc-mf, inherit);
	font-size: var(--uxc-ms, 12px);
	font-weight: var(--uxc-mw, 500);
	color: var(--uxc-mc, #8b909a);
}

.uxc-meta__sep {
	opacity: .45;
}

/* Özet */
.uxc-excerpt {
	margin: 0;
	font-family: var(--uxc-ef, inherit);
	font-size: var(--uxc-es, 14px);
	font-weight: var(--uxc-ew, 400);
	line-height: var(--uxc-elh, 1.65);
	color: var(--uxc-ec, #5c616b);
}

/* Özel alan */
.uxc-cf {
	font-family: var(--uxc-cff, inherit);
	font-size: var(--uxc-cfs, 13px);
	font-weight: var(--uxc-cfw, 500);
	color: var(--uxc-cfc, #5c616b);
}

/* Serbest metin */
.uxc-text {
	font-family: var(--uxc-xtf, inherit);
	font-size: var(--uxc-xts, 14px);
	font-weight: var(--uxc-xtw, 400);
	line-height: 1.6;
	color: var(--uxc-xtc, #444a53);
}

.uxc-text p {
	margin: 0 0 .6em;
}

.uxc-text p:last-child {
	margin-bottom: 0;
}

/* Fiyat (Woo markup: del / ins) */
.uxc-price {
	font-size: var(--uxc-prs, 18px);
	font-weight: var(--uxc-prw, 700);
	color: var(--uxc-prc, #16181d);
	line-height: 1.3;
}

.uxc-price del {
	opacity: .5;
	font-weight: 400;
	font-size: .82em;
	margin-inline-end: 7px;
}

.uxc-price ins {
	text-decoration: none;
	color: var(--uxc-prsc, #e0393e);
}

/* Puan */
.uxc-rating {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: var(--uxc-rts, 14px);
	line-height: 1;
}

.uxc-rating__bg {
	color: #d9dbe0;
	letter-spacing: 2px;
}

.uxc-rating__fg {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	letter-spacing: 2px;
	color: var(--uxc-rtc, #f5b301);
}

.uxc-rating__count {
	margin-inline-start: 7px;
	font-size: .85em;
	color: var(--uxc-mc, #8b909a);
}

/* Buton */
.uxc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--uxc-btnpv, 12px) var(--uxc-btnph, 26px);
	font-size: var(--uxc-btns, 14px);
	font-weight: var(--uxc-btnw, 600);
	line-height: 1.2;
	text-decoration: none;
	color: var(--uxc-btnc, #ffffff);
	background: var(--uxc-btnbg, #1a1a1a);
	border: var(--uxc-btnbw, 0px) solid var(--uxc-btnbc, #1a1a1a);
	border-radius: var(--uxc-btnr, 6px);
	transition:
		background .25s ease,
		color .25s ease,
		border-color .25s ease,
		scale .25s cubic-bezier(.22, .61, .36, 1);
}

.uxc-btn:hover {
	background: var(--uxc-btnhbg, #2ea3f2);
	color: var(--uxc-btnhc, #ffffff);
	scale: 1.03;
}

.uxc[style*="--uxc-btnwd:full"] .uxc-btn { width: 100%; }
.uxc[style*="--uxc-btnal:left"]   .uxc-btn { align-self: flex-start; }
.uxc[style*="--uxc-btnal:center"] .uxc-btn { align-self: center; }
.uxc[style*="--uxc-btnal:right"]  .uxc-btn { align-self: flex-end; }

/* Ayraç */
.uxc-divider {
	display: block;
	width: var(--uxc-dvwd, 100%);
	border-top: var(--uxc-dvw, 1px) var(--uxc-dvs, solid) var(--uxc-dvc, #e8e8ea);
	margin: calc(var(--uxc-dvm, 14px) * .5) 0;
}

/* İkon */
.uxc-icon {
	font-size: var(--uxc-ics, 28px);
	line-height: 1;
	color: var(--uxc-icc, #2ea3f2);
}

/* Metin link */
.uxc-link {
	font-weight: 600;
	text-decoration: none;
	color: var(--uxc-lkc, #1a1a1a);
	border-bottom: 1px solid transparent;
	transition: color .25s ease, border-color .25s ease;
}

.uxc-link:hover {
	color: var(--uxc-lkhc, #2ea3f2);
	border-bottom-color: currentColor;
}

/* ── 7) YERLEŞİM: YAN YANA ────────────────────────────────────── */

.uxc--side .uxc-card {
	flex-direction: row;
}

.uxc--side .uxc-media {
	display: block;
	width: 45%;
	min-height: 100%;
}

.uxc--side .uxc-media::before {
	content: none;
}

.uxc--side .uxc-media > img,
.uxc--side .uxc-media > .uxc-media__link {
	position: absolute;
	inset: 0;
}

/* Mobilde yan yana → üst üste */
@media (max-width: 767px) {
	.uxc--side .uxc-card {
		flex-direction: column;
	}

	.uxc--side .uxc-media {
		display: grid;
		width: 100%;
		min-height: 0;
	}

	.uxc--side .uxc-media::before {
		content: '';
		padding-top: var(--uxc-ratio, 75%);
	}

	.uxc--side .uxc-media > img,
	.uxc--side .uxc-media > .uxc-media__link {
		position: static;
		inset: auto;
	}
}

/* ── 8) YERLEŞİM: OVERLAY ─────────────────────────────────────── */

.uxc--overlay .uxc-card {
	position: relative;
	background: #16181d;
	min-height: 340px;
}

.uxc--overlay .uxc-media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.uxc--overlay .uxc-media::before {
	content: none;
}

.uxc--overlay .uxc-media > img,
.uxc--overlay .uxc-media > .uxc-media__link {
	position: absolute;
	inset: 0;
}

/* Gradyan katmanı */
.uxc--overlay .uxc-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(var(--uxc-ovd, to top), var(--uxc-ovf, rgba(10, 10, 14, .85)), var(--uxc-ovt, rgba(10, 10, 14, 0)));
	pointer-events: none;
}

.uxc--overlay .uxc-body {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-height: 340px;
	justify-content: flex-end;
	padding: calc(var(--uxc-cpad, 24px) + 6px);
}

.uxc--overlay[style*="--uxc-ovp:center"] .uxc-body { justify-content: center; }
.uxc--overlay[style*="--uxc-ovp:top"]    .uxc-body { justify-content: flex-start; }

/* Overlay metin renkleri global tipografiyi ezer */
.uxc--overlay .uxc-title   { color: var(--uxc-ovtc, #ffffff); }
.uxc--overlay .uxc-meta    { color: var(--uxc-ovmc, rgba(255, 255, 255, .75)); }
.uxc--overlay .uxc-excerpt { color: var(--uxc-ovec, rgba(255, 255, 255, .85)); }

@media (max-width: 767px) {
	.uxc--overlay .uxc-card,
	.uxc--overlay .uxc-body {
		min-height: 280px;
	}
}

/* ── 9) NOKTALAR ──────────────────────────────────────────────── */

.uxc-dots {
	position: absolute;
	z-index: 6;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--uxc-dtg, 8px);
}

.uxc-dots--al-left  { justify-content: flex-start; }
.uxc-dots--al-right { justify-content: flex-end; }

.uxc-dots--bottom_in  { bottom: var(--uxc-dtoff, 14px); }
.uxc-dots--bottom_out { bottom: 0; }
.uxc-dots--top        { top: var(--uxc-dtoff, 14px); }

/* Dışarıda konum: swiper'a rezerv alan eklenir */
.uxc:has(.uxc-dots--bottom_out) .uxc-swiper {
	padding-bottom: calc(var(--uxc-dts, 8px) + var(--uxc-dtoff, 14px) + 10px);
}

.uxc:has(.uxc-dots--top) .uxc-swiper {
	padding-top: calc(var(--uxc-dts, 8px) + var(--uxc-dtoff, 14px) + 10px);
}

.uxc-dots .swiper-pagination-bullet {
	width: var(--uxc-dts, 8px);
	height: var(--uxc-dts, 8px);
	margin: 0;
	border-radius: 999px;
	background: var(--uxc-dtc, #cfcfcf);
	opacity: 1;
	cursor: pointer;
	transition:
		width var(--uxc-dttr, 300ms) cubic-bezier(.22, .61, .36, 1),
		background var(--uxc-dttr, 300ms) ease,
		transform var(--uxc-dttr, 300ms) ease;
}

.uxc-dots .swiper-pagination-bullet:hover {
	background: var(--uxc-dthc, #9a9a9a);
}

.uxc-dots .swiper-pagination-bullet-active,
.uxc-dots .swiper-pagination-bullet-active:hover {
	background: var(--uxc-dtac, #1a1a1a);
}

/* UZUN AKTİF NOKTA — imza hareket */
.uxc-dots--long .swiper-pagination-bullet-active {
	width: var(--uxc-dtaw, 28px);
}

/* Şekiller */
.uxc[style*="--uxc-dtsh:square"] .swiper-pagination-bullet {
	border-radius: 2px;
}

.uxc[style*="--uxc-dtsh:line"] .swiper-pagination-bullet {
	height: calc(var(--uxc-dts, 8px) * .45);
	width: calc(var(--uxc-dts, 8px) * 2.2);
	border-radius: 99px;
}

.uxc[style*="--uxc-dtsh:line"] .uxc-dots--long .swiper-pagination-bullet-active {
	width: var(--uxc-dtaw, 28px);
}

/* Numaralı */
.uxc-dots--numbers .swiper-pagination-bullet {
	width: auto;
	height: auto;
	padding: 4px 7px;
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--uxc-dtc, #cfcfcf);
}

.uxc-dots--numbers .swiper-pagination-bullet-active,
.uxc-dots--numbers .swiper-pagination-bullet-active:hover {
	width: auto;
	background: transparent;
	color: var(--uxc-dtac, #1a1a1a);
}

/* İlerleme çubuğu */
.uxc-dots--progress {
	height: 3px;
	overflow: hidden;
	border-radius: 99px;
	background: var(--uxc-dtc, #cfcfcf);
}

.uxc-dots--progress .swiper-pagination-progressbar-fill {
	background: var(--uxc-dtac, #1a1a1a);
}

/* ── 10) OKLAR ────────────────────────────────────────────────── */

.uxc-arrow {
	position: absolute;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--uxc-ars, 44px);
	height: var(--uxc-ars, 44px);
	color: var(--uxc-arc, #1a1a1a);
	background: var(--uxc-arbg, #ffffff);
	border: var(--uxc-arbw, 1px) solid var(--uxc-arbc, #e5e5e5);
	border-radius: var(--uxc-arr, 50%);
	box-shadow: var(--uxc-arsh, 0 6px 18px rgba(16, 18, 24, .08));
	cursor: pointer;
	user-select: none;
	transition:
		background .25s ease,
		color .25s ease,
		border-color .25s ease,
		opacity .25s ease,
		scale .25s cubic-bezier(.22, .61, .36, 1);
}

.uxc-arrow svg {
	width: var(--uxc-aris, 18px);
	height: var(--uxc-aris, 18px);
}

.uxc-arrow:hover {
	background: var(--uxc-arhbg, #1a1a1a);
	color: var(--uxc-arhc, #ffffff);
	border-color: var(--uxc-arhbg, #1a1a1a);
	scale: 1.07;
}

.uxc-arrow.swiper-button-disabled {
	opacity: var(--uxc-ardop, .35);
	pointer-events: none;
}

/* Konum: iki yanda (içeride / dışarıda) */
.uxc--arrows-sides_in .uxc-arrow,
.uxc--arrows-sides_out .uxc-arrow {
	top: 50%;
	transform: translateY(-50%);
}

.uxc--arrows-sides_in .uxc-arrow--prev  { left: var(--uxc-arox, 12px); }
.uxc--arrows-sides_in .uxc-arrow--next  { right: var(--uxc-arox, 12px); }
.uxc--arrows-sides_out .uxc-arrow--prev { left: calc(var(--uxc-arox, 12px) * -1); }
.uxc--arrows-sides_out .uxc-arrow--next { right: calc(var(--uxc-arox, 12px) * -1); }

/* Konum: köşelerde çift */
.uxc--arrows-corner_tr .uxc-arrow { top: var(--uxc-aroy, 0px); }
.uxc--arrows-corner_br .uxc-arrow { bottom: var(--uxc-aroy, 0px); }

.uxc--arrows-corner_tr .uxc-arrow--next,
.uxc--arrows-corner_br .uxc-arrow--next {
	right: 0;
}

.uxc--arrows-corner_tr .uxc-arrow--prev,
.uxc--arrows-corner_br .uxc-arrow--prev {
	right: calc(var(--uxc-ars, 44px) + 10px);
}

/* Konum: alt orta */
.uxc--arrows-bottom_center .uxc-arrow {
	top: auto;
	bottom: calc((var(--uxc-ars, 44px) + var(--uxc-aroy, 0px) + 14px) * -1);
}

.uxc--arrows-bottom_center .uxc-arrow--prev {
	left: 50%;
	transform: translateX(calc(-100% - 6px));
}

.uxc--arrows-bottom_center .uxc-arrow--next {
	left: 50%;
	transform: translateX(6px);
}

/* Sadece hover'da göster (dokunmatikte her zaman görünür) */
.uxc--arrows-hover .uxc-arrow {
	opacity: 0;
}

.uxc--arrows-hover:hover .uxc-arrow {
	opacity: 1;
}

.uxc--arrows-hover:hover .uxc-arrow.swiper-button-disabled {
	opacity: var(--uxc-ardop, .35);
}

@media (hover: none) {
	.uxc--arrows-hover .uxc-arrow {
		opacity: 1;
	}
}

/* ── 11) BOŞ DURUM (Visual Builder) ───────────────────────────── */

.uxc-empty__box {
	padding: 36px 22px;
	text-align: center;
	font-size: 14px;
	color: #8b909a;
	background: rgba(255, 255, 255, .65);
	border: 2px dashed #c9cdd4;
	border-radius: 12px;
}

/* ── 12) ERİŞİLEBİLİRLİK ──────────────────────────────────────── */

.uxc-arrow:focus-visible,
.uxc-btn:focus-visible,
.uxc-link:focus-visible,
.uxc-dots .swiper-pagination-bullet:focus-visible {
	outline: 2px solid var(--uxc-dtac, #2ea3f2);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.uxc-card,
	.uxc-media img,
	.uxc-arrow,
	.uxc-btn,
	.uxc-dots .swiper-pagination-bullet {
		transition: none !important;
	}

	.uxc--zoom .uxc-slide:hover .uxc-media img {
		transform: none;
	}
}

/* RTL */
[dir="rtl"] .uxc-rating__fg {
	left: auto;
	right: 0;
}