/* ═══════════════════════════════════════════
   GunesX — TRENDYOL TARZI İNCE-UZUN SLIDER
   ═══════════════════════════════════════════ */

.gx-hs{
	position:relative;
	width:100%;
	overflow:hidden;
	border-radius:12px;
	background:#f4f4f5;
	margin:0 0 20px;
	/* Trendyol oranı: ince-uzun banner */
	aspect-ratio:1200/280;
	touch-action:pan-y;
	user-select:none;
	-webkit-user-select:none;
	isolation:isolate;
}

.gx-hs-track{position:absolute;inset:0}

.gx-hs-slide{
	position:absolute;inset:0;
	display:block;
	opacity:0;visibility:hidden;
	background:var(--hs-bg,#e30613);
	color:var(--hs-fg,#fff);
	text-decoration:none;
	will-change:transform,opacity;
	transition:opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.gx-hs-slide.is-active{opacity:1;visibility:visible;z-index:2}

/* Arka plan görseli */
.gx-hs-bg{position:absolute;inset:0;display:block}
.gx-hs-bg img{
	width:100%;height:100%;
	object-fit:cover;object-position:center;
	display:block;pointer-events:none;
}

/* Metin bloğu */
.gx-hs-copy{
	position:absolute;
	left:clamp(16px,3.5vw,48px);
	top:50%;transform:translateY(-50%);
	z-index:2;
	max-width:min(56%,560px);
	display:flex;flex-direction:column;gap:4px;
	text-shadow:0 1px 3px rgba(0,0,0,.22);
}
.gx-hs-tag{
	font-size:clamp(10px,1.1vw,13px);
	font-weight:800;letter-spacing:.14em;text-transform:uppercase;
	opacity:.92;line-height:1.2;
}
.gx-hs-title{
	font-size:clamp(15px,2.5vw,32px);
	font-weight:800;line-height:1.15;letter-spacing:-.01em;
}
.gx-hs-sub{
	font-size:clamp(10px,1.35vw,17px);
	font-weight:500;opacity:.94;line-height:1.3;
}
.gx-hs-btn{
	align-self:flex-start;margin-top:8px;
	background:var(--hs-fg,#fff);color:var(--hs-bg,#e30613);
	font-size:clamp(10px,1.1vw,14px);font-weight:800;
	padding:clamp(5px,.8vw,10px) clamp(12px,1.6vw,22px);
	border-radius:999px;text-shadow:none;
	transition:transform .18s ease, box-shadow .18s ease;
}
.gx-hs-slide:hover .gx-hs-btn{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.22)}

/* Sağ alt sayaç (Trendyol'daki 3/9 rozeti) */
.gx-hs-num{
	position:absolute;right:12px;bottom:12px;z-index:3;
	background:rgba(0,0,0,.42);color:#fff;
	font-size:11px;font-weight:700;
	padding:3px 9px;border-radius:999px;
	backdrop-filter:blur(4px);
	line-height:1.5;
}

/* Oklar */
.gx-hs-nav{
	position:absolute;top:50%;transform:translateY(-50%);
	z-index:5;width:36px;height:36px;
	border:0;border-radius:50%;
	background:rgba(255,255,255,.9);color:#1f2937;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;padding:0;
	opacity:0;transition:opacity .25s ease, background .2s ease;
	box-shadow:0 2px 10px rgba(0,0,0,.16);
}
.gx-hs-nav svg{width:19px;height:19px}
.gx-hs-prev{left:12px}
.gx-hs-next{right:12px}
.gx-hs:hover .gx-hs-nav,.gx-hs:focus-within .gx-hs-nav{opacity:1}
.gx-hs-nav:hover{background:#fff}

/* Noktalar */
.gx-hs-dots{
	position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
	z-index:5;display:flex;gap:6px;align-items:center;
}
.gx-hs-dots button{
	width:20px;height:16px;padding:0;border:0;background:none;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
}
.gx-hs-dots button i{
	display:block;width:7px;height:7px;border-radius:50%;
	background:rgba(255,255,255,.55);
	box-shadow:0 0 0 1px rgba(0,0,0,.12);
	transition:width .3s ease, background .3s ease, border-radius .3s ease;
}
.gx-hs-dots button.is-on i{width:20px;border-radius:4px;background:#fff}

/* İlerleme çubuğu */
.gx-hs-progress{
	position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;
	background:rgba(255,255,255,.2);
}
.gx-hs-progress i{
	display:block;height:100%;width:0;
	background:rgba(255,255,255,.9);
	transform-origin:left;
}
.gx-hs.is-playing .gx-hs-progress i{animation:gxHsBar linear forwards}
@keyframes gxHsBar{from{width:0}to{width:100%}}

/* Sürükleme sırasında geçişleri kapat */
.gx-hs.is-dragging .gx-hs-slide{transition:none}
.gx-hs.is-dragging{cursor:grabbing}

/* ═══════════════════════════════════════════
   9 ANİMASYON — giriş efektleri
   ═══════════════════════════════════════════ */

/* 1 — Fade */
.gx-anim-fade{transform:none}
.gx-anim-fade.is-active{opacity:1}

/* 2 — Slide (yandan kayma) */
.gx-anim-slide{transform:translateX(24%)}
.gx-anim-slide.is-active{transform:translateX(0)}
.gx-anim-slide.is-back{transform:translateX(-24%)}

/* 3 — Zoom */
.gx-anim-zoom{transform:scale(1.12)}
.gx-anim-zoom.is-active{transform:scale(1)}

/* 4 — Flip */
.gx-anim-flip{transform:perspective(1200px) rotateY(24deg);transform-origin:left center}
.gx-anim-flip.is-active{transform:perspective(1200px) rotateY(0)}

/* 5 — Blur */
.gx-anim-blur{filter:blur(14px);transform:scale(1.05)}
.gx-anim-blur.is-active{filter:blur(0);transform:scale(1)}

/* 6 — Rise (aşağıdan yükselme) */
.gx-anim-rise{transform:translateY(16%)}
.gx-anim-rise.is-active{transform:translateY(0)}

/* 7 — Drop (yukarıdan düşme) */
.gx-anim-drop{transform:translateY(-16%)}
.gx-anim-drop.is-active{transform:translateY(0)}

/* 8 — Skew (eğik kayma) */
.gx-anim-skew{transform:translateX(18%) skewX(-6deg)}
.gx-anim-skew.is-active{transform:translateX(0) skewX(0)}

/* 9 — Reveal (perde açılışı) */
.gx-anim-reveal{clip-path:inset(0 0 0 100%)}
.gx-anim-reveal.is-active{clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.65,0,.35,1),opacity .3s ease}

/* Metin gecikmeli giriş — her slaytta */
.gx-hs-slide .gx-hs-copy > *{opacity:0;transform:translateY(10px)}
.gx-hs-slide.is-active .gx-hs-copy > *{
	animation:gxHsCopy .55s cubic-bezier(.22,.61,.36,1) forwards;
}
.gx-hs-slide.is-active .gx-hs-copy > *:nth-child(1){animation-delay:.10s}
.gx-hs-slide.is-active .gx-hs-copy > *:nth-child(2){animation-delay:.20s}
.gx-hs-slide.is-active .gx-hs-copy > *:nth-child(3){animation-delay:.30s}
.gx-hs-slide.is-active .gx-hs-copy > *:nth-child(4){animation-delay:.40s}
@keyframes gxHsCopy{to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════
   MOBİL
   ═══════════════════════════════════════════ */
@media (max-width:767px){
	.gx-hs{aspect-ratio:800/260;border-radius:8px;margin:0 0 14px}
	.gx-hs-nav{display:none}
	.gx-hs-copy{max-width:62%;left:14px;gap:3px}
	.gx-hs-num{right:8px;bottom:8px;font-size:10px;padding:2px 7px}
	.gx-hs-dots{bottom:7px}
	.gx-hs-dots button{width:16px;height:14px}
	.gx-hs-dots button i{width:6px;height:6px}
	.gx-hs-dots button.is-on i{width:16px}
}
@media (max-width:420px){
	.gx-hs{aspect-ratio:720/250}
	.gx-hs-copy{max-width:66%}
}

/* RTL (Arapça) */
[dir="rtl"] .gx-hs-copy{left:auto;right:clamp(16px,3.5vw,48px);text-align:right}
[dir="rtl"] .gx-hs-btn{align-self:flex-end}
[dir="rtl"] .gx-hs-num{right:auto;left:12px}
[dir="rtl"] .gx-hs-prev{left:auto;right:12px}
[dir="rtl"] .gx-hs-next{right:auto;left:12px}
[dir="rtl"] .gx-anim-slide{transform:translateX(-24%)}
[dir="rtl"] .gx-anim-slide.is-active{transform:translateX(0)}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
	.gx-hs-slide,.gx-hs-slide .gx-hs-copy > *{transition:opacity .2s ease!important;animation:none!important;transform:none!important;filter:none!important;clip-path:none!important;opacity:1}
	.gx-hs-slide:not(.is-active){opacity:0}
	.gx-hs.is-playing .gx-hs-progress i{animation:none;width:100%}
}

/* ═══════════════════════════════════════════
   ARAMA PANELİ — popüler + öneri iki bölüm
   ═══════════════════════════════════════════ */
.gx-sb-suggest .gx-sb-sec + .gx-sb-sec{
	border-top:1px solid #eceff1;
	margin-top:6px;padding-top:6px;
}
.gx-sb-suggest .gx-sb-sec--pop{position:relative}
.gx-sb-suggest .gx-sb-sec--sug .gx-sg-group:first-child{padding-top:2px}

/* ═══════════════════════════════════════════
   POPÜLER ARAMA TERİMLERİ — sayaç rozeti
   ═══════════════════════════════════════════ */
.gx-pop-term{position:relative;display:inline-flex;align-items:center;gap:6px}
.gx-pop-term .gx-pop-n{
	font-style:normal;font-size:10px;font-weight:700;
	background:rgba(0,0,0,.07);color:#6b7280;
	padding:1px 7px;border-radius:99px;line-height:1.7;
	white-space:nowrap;flex:0 0 auto;
}
@media(max-width:380px){
	.gx-pop-term .gx-pop-n{font-size:9px;padding:1px 5px}
}
.gx-pop-term.is-hot .gx-pop-n{background:#fff1e6;color:#ea580c}