/* OyuncuStore Hero Slider — Main stylesheet (v2.3 — Gaming Dark Theme + variants) */

.osh { font-family: inherit; color: inherit; line-height: 0; }
.osh *, .osh *::before, .osh *::after { box-sizing: border-box; }

/* ----- Tema preset CSS değişken paketleri (font-family devralma dahil) ----- */
.osh--inherit-font, .osh--inherit-font * { font-family: inherit !important; }


/* ======================================================================
   NEON GLOW (--osh-glow-i kontrollü)
   ====================================================================== */
.osh--glow .osh__viewport {
	box-shadow:
		0 0 8px -3px var(--osh-glow, #a855f7),
		0 0 20px -8px rgba(168, 85, 247, .4),
		0 12px 35px -10px rgba(0,0,0,.5);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
	.osh--glow .osh__viewport {
		box-shadow:
			0 0 calc(15px * var(--osh-glow-i, .5)) -3px var(--osh-glow, #a855f7),
			0 0 calc(40px * var(--osh-glow-i, .5)) -8px color-mix(in srgb, var(--osh-glow, #a855f7) 40%, transparent),
			0 12px 35px -10px rgba(0,0,0,.5);
	}
}

/* ======================================================================
   CERCEVE STILLERI (--osh-bw kontrollü kalinlik)
   ====================================================================== */
.osh--border-solid .osh__viewport {
	border: var(--osh-bw, 2px) solid rgba(168, 85, 247, .5);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
	.osh--border-solid .osh__viewport {
		border-color: color-mix(in srgb, var(--osh-glow, #a855f7) 50%, transparent);
	}
}
.osh--border-gradient .osh__viewport {
	box-shadow:
		inset 0 0 0 var(--osh-bw, 2px) rgba(168, 85, 247, .6),
		0 0 15px -3px var(--osh-glow, #a855f7),
		0 12px 35px -10px rgba(0,0,0,.5);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
	.osh--border-gradient .osh__viewport {
		box-shadow:
			inset 0 0 0 var(--osh-bw, 2px) color-mix(in srgb, var(--osh-glow, #a855f7) 60%, transparent),
			0 0 15px -3px var(--osh-glow, #a855f7),
			0 12px 35px -10px rgba(0,0,0,.5);
	}
}
.osh--border-animated .osh__main,
.osh--border-animated .osh__area {
	isolation: isolate;
}
.osh--border-animated .osh__main::before,
.osh--border-animated .osh__area::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--osh-bw, 2px));
	border-radius: calc(var(--osh-r, 14px) + var(--osh-bw, 2px));
	padding: var(--osh-bw, 2px);
	background: conic-gradient(
		from var(--osh-angle, 0deg),
		var(--osh-glow, #a855f7),
		#3b82f6,
		#06b6d4,
		var(--osh-glow, #a855f7),
		#ec4899,
		var(--osh-glow, #a855f7)
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: osh-border-spin 4s linear infinite;
	pointer-events: none;
	z-index: 1;
}
@property --osh-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@keyframes osh-border-spin {
	to { --osh-angle: 360deg; }
}
/* @property desteklenmeyen tarayıcılar (eski Safari/Firefox) için hue-rotate fallback */
@supports not (background: paint(id)) {
	.osh--border-animated .osh__main::before,
	.osh--border-animated .osh__area::before {
		animation: osh-border-fallback 4s linear infinite;
	}
}
@keyframes osh-border-fallback {
	0%   { opacity: .65; filter: hue-rotate(0deg); }
	50%  { opacity: 1;   filter: hue-rotate(180deg); }
	100% { opacity: .65; filter: hue-rotate(360deg); }
}

/* ======================================================================
   CYBERPUNK — kesik köşeler + neon glow
   ====================================================================== */
.osh--border-cyberpunk .osh__main > .osh__viewport,
.osh--border-cyberpunk .osh__area > .osh__viewport {
	clip-path: polygon(
		18px 0, 100% 0, 100% calc(100% - 18px),
		calc(100% - 18px) 100%, 0 100%, 0 18px
	);
	box-shadow:
		0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7),
		0 0 18px -2px var(--osh-glow, #a855f7),
		0 14px 38px -10px rgba(0,0,0,.55);
	border-radius: 0 !important;
}
.osh--border-cyberpunk .osh__main::after,
.osh--border-cyberpunk .osh__area::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
	background:
		linear-gradient(135deg, transparent calc(18px - 2px), var(--osh-glow, #a855f7) calc(18px - 2px), var(--osh-glow, #a855f7) 18px, transparent 18px) top left/24px 24px no-repeat,
		linear-gradient(-45deg, transparent calc(18px - 2px), var(--osh-glow, #a855f7) calc(18px - 2px), var(--osh-glow, #a855f7) 18px, transparent 18px) bottom right/24px 24px no-repeat;
	filter: drop-shadow(0 0 6px var(--osh-glow, #a855f7));
}

/* ======================================================================
   HOLOGRAPHIC — gökkuşağı kayan border
   ====================================================================== */
.osh--border-holographic .osh__main,
.osh--border-holographic .osh__area { isolation: isolate; }
.osh--border-holographic .osh__main::before,
.osh--border-holographic .osh__area::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--osh-bw, 2px));
	border-radius: calc(var(--osh-r, 14px) + var(--osh-bw, 2px));
	padding: var(--osh-bw, 2px);
	background:
		linear-gradient(120deg,
			#ff00cc, #3333ff, #00ffff, #00ff66, #ffff00, #ff6600, #ff00cc
		);
	background-size: 300% 300%;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: osh-holo-shift 6s linear infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes osh-holo-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ======================================================================
   PULSE — nabız gibi parlama halkası
   ====================================================================== */
.osh--border-pulse .osh__main > .osh__viewport,
.osh--border-pulse .osh__area > .osh__viewport {
	box-shadow:
		inset 0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7),
		0 0 0 0 rgba(168, 85, 247, .55),
		0 12px 35px -10px rgba(0,0,0,.5);
	animation: osh-pulse 2.6s ease-out infinite;
}
@keyframes osh-pulse {
	0%   { box-shadow: inset 0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7), 0 0 0 0 rgba(168,85,247,.55), 0 12px 35px -10px rgba(0,0,0,.5); }
	70%  { box-shadow: inset 0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7), 0 0 0 16px rgba(168,85,247,0),   0 12px 35px -10px rgba(0,0,0,.5); }
	100% { box-shadow: inset 0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7), 0 0 0 0 rgba(168,85,247,0),     0 12px 35px -10px rgba(0,0,0,.5); }
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
	@keyframes osh-pulse {
		0%   { box-shadow: inset 0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7), 0 0 0 0  color-mix(in srgb, var(--osh-glow, #a855f7) 55%, transparent), 0 12px 35px -10px rgba(0,0,0,.5); }
		70%  { box-shadow: inset 0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7), 0 0 0 16px color-mix(in srgb, var(--osh-glow, #a855f7) 0%, transparent),  0 12px 35px -10px rgba(0,0,0,.5); }
		100% { box-shadow: inset 0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7), 0 0 0 0  color-mix(in srgb, var(--osh-glow, #a855f7) 0%, transparent),  0 12px 35px -10px rgba(0,0,0,.5); }
	}
}

/* ======================================================================
   NEON-DOUBLE — çift neon hat
   ====================================================================== */
.osh--border-neon-double .osh__main > .osh__viewport,
.osh--border-neon-double .osh__area > .osh__viewport {
	box-shadow:
		inset 0 0 0 var(--osh-bw, 2px) var(--osh-glow, #a855f7),
		inset 0 0 0 calc(var(--osh-bw, 2px) + 4px) rgba(0,0,0,.55),
		inset 0 0 0 calc(var(--osh-bw, 2px) + 6px) var(--osh-glow-2, #3b82f6),
		0 0 18px -3px var(--osh-glow, #a855f7),
		0 12px 35px -10px rgba(0,0,0,.5);
}

/* ======================================================================
   TECH-CORNERS — gaming HUD köşe işaretleri
   ====================================================================== */
.osh--border-tech-corners .osh__main,
.osh--border-tech-corners .osh__area { isolation: isolate; }
.osh--border-tech-corners .osh__main::before,
.osh--border-tech-corners .osh__area::before {
	content: "";
	position: absolute;
	inset: -3px;
	pointer-events: none;
	z-index: 4;
	border-radius: calc(var(--osh-r, 14px) + 3px);
	background:
		/* sol üst */
		linear-gradient(var(--osh-glow, #a855f7), var(--osh-glow, #a855f7)) top left / 22px 2px no-repeat,
		linear-gradient(var(--osh-glow, #a855f7), var(--osh-glow, #a855f7)) top left / 2px 22px no-repeat,
		/* sağ üst */
		linear-gradient(var(--osh-glow, #a855f7), var(--osh-glow, #a855f7)) top right / 22px 2px no-repeat,
		linear-gradient(var(--osh-glow, #a855f7), var(--osh-glow, #a855f7)) top right / 2px 22px no-repeat,
		/* sol alt */
		linear-gradient(var(--osh-glow, #a855f7), var(--osh-glow, #a855f7)) bottom left / 22px 2px no-repeat,
		linear-gradient(var(--osh-glow, #a855f7), var(--osh-glow, #a855f7)) bottom left / 2px 22px no-repeat,
		/* sağ alt */
		linear-gradient(var(--osh-glow, #a855f7), var(--osh-glow, #a855f7)) bottom right / 22px 2px no-repeat,
		linear-gradient(var(--osh-glow, #a855f7), var(--osh-glow, #a855f7)) bottom right / 2px 22px no-repeat;
	filter: drop-shadow(0 0 5px var(--osh-glow, #a855f7));
}
.osh--border-tech-corners .osh__main > .osh__viewport,
.osh--border-tech-corners .osh__area > .osh__viewport {
	box-shadow: 0 12px 35px -10px rgba(0,0,0,.5);
}

/* ======================================================================
   HOVER — sadece glow varsa ve intensity > 0 ise (osh--hover class)
   ====================================================================== */
.osh--hover .osh__viewport {
	transition: box-shadow .35s ease;
}
.osh--hover.osh--glow .osh__main:hover > .osh__viewport,
.osh--hover.osh--glow .osh__area:hover > .osh__viewport {
	box-shadow:
		0 0 13px -3px var(--osh-glow, #a855f7),
		0 0 30px -10px rgba(168, 85, 247, .5),
		0 20px 50px -12px rgba(0,0,0,.6);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
	.osh--hover.osh--glow .osh__main:hover > .osh__viewport,
	.osh--hover.osh--glow .osh__area:hover > .osh__viewport {
		box-shadow:
			0 0 calc(25px * var(--osh-glow-i, .5)) -3px var(--osh-glow, #a855f7),
			0 0 calc(60px * var(--osh-glow-i, .5)) -10px color-mix(in srgb, var(--osh-glow, #a855f7) 50%, transparent),
			0 20px 50px -12px rgba(0,0,0,.6);
	}
}

/* ======================================================================
   KEN BURNS (gorsel buyutme — sadece osh--kenburns varsa)
   ====================================================================== */
.osh--kenburns .osh__slide .osh__pic img {
	transition: transform 7s ease-out;
	transform: scale(1.015);
	will-change: transform;
}
.osh--kenburns .osh__slide.is-active .osh__pic img { transform: scale(1.05); }

/* ======================================================================
   SLAYT GECIS
   ====================================================================== */
.osh__slide { opacity: .6; transition: opacity .5s ease; }
.osh__slide.is-active { opacity: 1; }

/* Link hover parlama */
a.osh__slide { cursor: pointer; display: block; }
a.osh__slide::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 3;
}
a.osh__slide:hover::after { opacity: 1; }
a.osh__slide:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* ======================================================================
   NAV OKLARI — 3 stil (minimal, rounded, square)
   ====================================================================== */

/* Minimal: sadece ok, arka plan yok */
.osh--nav-arrows-minimal .osh__nav {
	background: transparent !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	width: 36px !important;
	height: 36px !important;
	opacity: 0;
}
.osh--nav-arrows-minimal .osh__nav > svg {
	filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) !important;
}
.osh--nav-arrows-minimal .osh__main:hover .osh__nav { opacity: .7; }
.osh--nav-arrows-minimal .osh__nav:hover { opacity: 1 !important; }

/* Rounded: varsayilan daire (critical CSS'teki) */
.osh--nav-arrows-rounded .osh__nav {
	border-radius: 50% !important;
}

/* Square: koseli yuvarlak */
.osh--nav-arrows-square .osh__nav {
	border-radius: 8px !important;
}

/* Neon: gaming, glow + cam efektli */
.osh--nav-arrows-neon .osh__nav {
	background: rgba(11, 14, 20, .65) !important;
	border-radius: 10px !important;
	box-shadow:
		0 0 0 1px var(--osh-glow, #a855f7),
		0 0 14px -3px var(--osh-glow, #a855f7),
		0 6px 18px rgba(0,0,0,.4) !important;
	color: var(--osh-glow, #a855f7) !important;
}
.osh--nav-arrows-neon .osh__nav > svg {
	color: var(--osh-glow, #a855f7) !important;
	filter: drop-shadow(0 0 4px var(--osh-glow, #a855f7)) !important;
}
.osh--nav-arrows-neon .osh__nav:hover {
	background: var(--osh-glow, #a855f7) !important;
	color: #fff !important;
	box-shadow:
		0 0 0 1px var(--osh-glow, #a855f7),
		0 0 22px -2px var(--osh-glow, #a855f7),
		0 8px 22px rgba(0,0,0,.45) !important;
}
.osh--nav-arrows-neon .osh__nav:hover > svg {
	color: #fff !important;
	filter: drop-shadow(0 0 6px rgba(255,255,255,.7)) !important;
}

/* Ortak hover */
.osh--nav-arrows-rounded .osh__nav:hover,
.osh--nav-arrows-square .osh__nav:hover {
	background: var(--osh-glow, #a855f7) !important;
	box-shadow: 0 6px 18px rgba(168, 85, 247, .4) !important;
	transform: translateY(-50%) scale(1.05) !important;
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
	.osh--nav-arrows-rounded .osh__nav:hover,
	.osh--nav-arrows-square .osh__nav:hover {
		background: color-mix(in srgb, var(--osh-glow, #a855f7) 80%, #000) !important;
		box-shadow: 0 6px 18px color-mix(in srgb, var(--osh-glow, #a855f7) 40%, transparent) !important;
	}
}
.osh__nav:focus-visible {
	opacity: 1 !important;
	transform: translateY(-50%) scale(1) !important;
	outline: 2px solid var(--osh-glow, #a855f7) !important;
	outline-offset: 3px !important;
}
.osh__nav:active { transform: translateY(-50%) scale(.96) !important; }

@media (hover: none) {
	.osh__nav { opacity: 1 !important; transform: translateY(-50%) scale(1); }
}

/* ======================================================================
   SWIPE / DRAG
   ====================================================================== */
.osh__viewport {
	cursor: grab;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.osh__viewport:active { cursor: grabbing; }
.osh__track.is-dragging { transition: none !important; }
.osh__slide,
a.osh__slide,
.osh__slide img,
.osh__pic img {
	-webkit-user-drag: none;
}
.osh__slide img,
.osh__pic img {
	pointer-events: none;
}

/* ======================================================================
   TEMA UYUMU + ELEMENTOR + WOODMART
   ====================================================================== */
.osh a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
body.woodmart-theme .osh,
body.woocommerce .osh { font-family: inherit; }
.elementor-editor-active .osh__nav { pointer-events: none; }

/* Woodmart lazy load uyumu */
body.woodmart-theme .osh__pic img.wd-lazy-load { opacity: 1 !important; }
body.woodmart-theme .osh__pic img[data-wood-src] { opacity: 1 !important; }

/* Woodmart z-index uyumu: slider sticky header ve modalların altında kalmalı */
.osh { position: relative; z-index: 1; }

/* Woodmart container override korunması */
body.woodmart-theme .osh__viewport,
body.woodmart-theme .osh__slide,
body.woodmart-theme .osh__pic img {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* ======================================================================
   REDUCED MOTION
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.osh__slide,
	.osh--kenburns .osh__slide .osh__pic img,
	.osh--kenburns .osh__slide.is-active .osh__pic img { transition: none !important; transform: none !important; }
	.osh--border-animated .osh__main::before,
	.osh--border-animated .osh__area::before,
	.osh--border-holographic .osh__main::before,
	.osh--border-holographic .osh__area::before { animation: none !important; }
	.osh--border-pulse .osh__main > .osh__viewport,
	.osh--border-pulse .osh__area > .osh__viewport { animation: none !important; }
	.osh--hover .osh__viewport { transition: none !important; }
}

/* ======================================================================
   POPULAR BAR — Slider altı bilgi barı (Popüler Oyunlar vb.)
   ====================================================================== */
.osh-pbar {
	--osh-pbar-accent: #a855f7;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	font-family: inherit;
	line-height: 1.4;
}
.osh-pbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 22px;
	background: linear-gradient(135deg, #0f1218 0%, #161b24 50%, #0f1218 100%);
	border: 1px solid rgba(255, 255, 255, .06);
	border-top: 1px solid rgba(255, 255, 255, .03);
	border-radius: 0 0 14px 14px;
	box-shadow:
		0 4px 16px -4px rgba(0, 0, 0, .4),
		inset 0 1px 0 rgba(255, 255, 255, .03);
}
.osh-pbar__content {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	min-width: 0;
}
.osh-pbar__title {
	font-size: 15px;
	font-weight: 700;
	color: #f1f5f9;
	white-space: nowrap;
	letter-spacing: .01em;
}
.osh-pbar__subtitle {
	font-size: 13px;
	font-weight: 400;
	color: #94a3b8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.osh-pbar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
	flex-shrink: 0;
}
.osh-pbar__btn:hover,
.osh-pbar__btn:focus-visible {
	background: var(--osh-pbar-accent);
	border-color: var(--osh-pbar-accent);
	color: #fff;
	box-shadow: 0 0 14px -3px var(--osh-pbar-accent), 0 4px 12px -4px rgba(0, 0, 0, .4);
	text-decoration: none;
}
.osh-pbar__btn:active {
	transform: scale(.97);
}
.osh-pbar__btn--static {
	cursor: default;
	pointer-events: none;
}
.osh-pbar__btn:focus-visible {
	outline: 2px solid var(--osh-pbar-accent);
	outline-offset: 2px;
}

/* Accent border sol kenar efekti */
.osh-pbar__inner::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 20px;
	border-radius: 3px;
	background: var(--osh-pbar-accent);
	box-shadow: 0 0 8px var(--osh-pbar-accent);
	opacity: .8;
}
.osh-pbar__inner {
	position: relative;
	padding-left: 38px;
}

/* WoodMart / tema uyumu */
body.woodmart-theme .osh-pbar,
body.woocommerce .osh-pbar { font-family: inherit; }
body.woodmart-theme .osh-pbar__btn { border: 1px solid rgba(255, 255, 255, .12); }

@media (max-width: 768px) {
	.osh-pbar__inner {
		padding: 12px 16px 12px 32px;
		border-radius: 0 0 10px 10px;
		gap: 12px;
	}
	.osh-pbar__inner::before {
		left: 14px;
		height: 16px;
	}
	.osh-pbar__content {
		gap: 6px;
		flex-direction: column;
	}
	.osh-pbar__title { font-size: 14px; }
	.osh-pbar__subtitle { font-size: 12px; }
	.osh-pbar__btn { padding: 6px 14px; font-size: 11px; }
}