/* İdol Mobilya – hero slider: full-screen collection photos sliding sideways. */

body.has-idol-hero {
	overflow-x: clip;
}

/* The page title "Anasayfa" is redundant above the hero. */
body.has-idol-hero .entry-header {
	display: none;
}

.idol-hero {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 520px;
	overflow: hidden;
	background: #111617;
	color: #fff;
	outline: none;
}

/* Slides: the incoming photo slides in from the side while the outgoing one drifts the other way (half speed). */
.idol-hero__slide {
	--x: 100%;
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	transform: translateX(var(--x));
	transition: transform 1.1s cubic-bezier(0.77, 0, 0.18, 1);
}

.idol-hero__slide.is-active {
	z-index: 2;
}

.idol-hero__slide.is-leaving {
	z-index: 1;
}

.idol-hero__slide.no-anim,
.idol-hero__slide.no-anim .idol-hero__img {
	transition: none !important;
}

body.idol-site .idol-hero img.idol-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	transform: scale(1.06);
	transition: transform 7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* The active photo eases out of a slight zoom while it is on screen. */
body.idol-site .idol-hero .is-active img.idol-hero__img {
	transform: scale(1);
}

/* Readability: dark at the top (under the header) and at the bottom (caption, controls). */
.idol-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		linear-gradient(to bottom, rgb(17 22 23 / 0.45) 0%, rgb(17 22 23 / 0) 22%),
		linear-gradient(to top, rgb(17 22 23 / 0.78) 0%, rgb(17 22 23 / 0.45) 22%, rgb(17 22 23 / 0) 48%);
	pointer-events: none;
}

/* Caption + controls */
.idol-hero__bar {
	position: absolute;
	inset: auto 0 0;
	z-index: 4;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	width: min(100% - 2 * var(--idol-gutter, 24px), max(1600px, var(--idol-wrap, 1320px)));
	margin-inline: auto;
	padding-bottom: clamp(36px, 6vh, 64px);
}

.idol-hero__captions {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 5.6em;
}

.idol-hero__cap {
	position: absolute;
	inset: auto 0 0;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.idol-hero__cap.is-active {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease 0.45s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

.idol-hero__eyebrow {
	display: block;
	margin: 0 0 6px;
	color: rgb(255 255 255 / 0.8);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.idol-hero__label {
	display: block;
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.02;
	text-shadow: 0 2px 24px rgb(0 0 0 / 0.25);
}

.idol-hero__controls {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

.idol-hero__arrow {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.45);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.idol-hero__arrow:hover,
.idol-hero__arrow:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #111617;
}

.idol-hero__arrow span {
	width: 9px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: translateX(-2px) rotate(45deg);
}

.idol-hero__arrow--prev span {
	transform: translateX(2px) rotate(-135deg);
}

body.idol-site .idol-hero .idol-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	margin-left: 6px;
	padding: 0 1.6em;
	border: 1px solid rgb(255 255 255 / 0.45);
	border-radius: 999px;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body.idol-site .idol-hero .idol-hero__cta:hover,
body.idol-site .idol-hero .idol-hero__cta:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #111617;
}

/* Dots: thin bars along the bottom; the active one fills over the autoplay interval. */
.idol-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 6px;
	z-index: 4;
	display: flex;
	gap: 6px;
	width: min(100% - 2 * var(--idol-gutter, 24px), max(1600px, var(--idol-wrap, 1320px)));
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateX(-50%);
}

.idol-hero__dots li {
	flex: 1;
	max-width: 96px;
	margin: 0;
}

.idol-hero__dot {
	position: relative;
	display: block;
	width: 100%;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.idol-hero__dot::before,
.idol-hero__dot::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	height: 2px;
	background: rgb(255 255 255 / 0.3);
}

.idol-hero__dot::after {
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

.idol-hero__dot.is-active::after {
	transform: scaleX(0.12);
}

.idol-hero.is-timing .idol-hero__dot.is-active::after {
	transform: scaleX(1);
	transition: transform var(--idol-interval, 6000ms) linear;
}

/* Phones: a shorter hero, and a Ken Burns pan: a portrait screen shows only a slice of the wide photo, so the
   active photo pans from its left edge to its right edge over the slide interval, so the whole set is seen
   before the next slide. */
@media (max-width: 699px) {
	.idol-hero {
		height: 72svh;
		min-height: 480px;
		max-height: 680px;
	}

	body.idol-site .idol-hero img.idol-hero__img {
		transform: none;
		transition: none;
		object-position: 50% 50%;
	}

	body.idol-site .idol-hero .is-active img.idol-hero__img,
	body.idol-site .idol-hero .is-leaving img.idol-hero__img {
		animation: idol-kb-pan var(--idol-interval, 9000ms) cubic-bezier(0.45, 0, 0.55, 1) forwards;
	}

	.idol-hero__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		padding-bottom: 40px;
	}

	.idol-hero__arrow {
		width: 46px;
		height: 46px;
	}

	body.idol-site .idol-hero .idol-hero__cta {
		height: 46px;
		margin-left: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.idol-hero__slide,
	body.idol-site .idol-hero img.idol-hero__img {
		transition: none;
		transform: none;
	}

	.idol-hero__slide:not(.is-active) {
		visibility: hidden;
	}
}

@keyframes idol-kb-pan {
	from { object-position: 0% 50%; transform: scale(1.02); }
	to { object-position: 100% 50%; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
	body.idol-site .idol-hero img.idol-hero__img {
		animation: none !important;
	}
}

/* Drag/swipe: vertical page scrolling stays with the browser, sideways moves go to the slider. */
.idol-hero {
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

@media (hover: hover) and (pointer: fine) {
	.idol-hero {
		cursor: grab;
	}

	.idol-hero.is-dragging {
		cursor: grabbing;
	}
}

.idol-hero img {
	-webkit-user-drag: none;
	pointer-events: none;
}