@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	/* Shadow */
	--shadow-cart: 0 4px 8px rgba(0, 0, 0, .4);
	--shadow-text: 0 3px 8px rgba(0, 0, 0, .3);

	/* Overlay */
	--overlay-blue: linear-gradient(180deg,
			transparent,
			transparent,
			rgba(3, 3, 185, .5));
	--overlay-red: linear-gradient(180deg,
			transparent,
			transparent,
			rgba(185, 3, 3, .5));
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Jost", sans-serif;
}

body {
	background-color: #f8f7f4;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

.container-slider {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.swiper-wrapper {
	transition-timing-function: linear !important;
}

.swiper {
	width: min(90%, 1200px);
	padding-block: 2rem;
	/* Mause ile etileşime girmesini engelledik */
	pointer-events: none;
}

.swiper-slide {
	/* Default position : relative */
	/* Default width:	: 100% */
	box-shadow: var(--shadow-cart);
}

.swiper-1 .swiper-slide {
	border-radius: 12px;
	width: 15rem;
}

.swiper-2 .swiper-slide {
	border-radius: 50%;
	width: 12rem;
}

.swiper-slide img {
	border-radius: inherit;
	filter: grayscale(1);
}

.swiper-2 .swiper-slide img {
	border-radius: 50%;
}

.overlay {
	border-radius: inherit;
	position: absolute;

	/* I. Yöntem */
	inset: 0;

	/* II. Yöntem */
	/* top: 0;
	right: 0;
	bottom: 0;
	left: 0; */

	/* III. Yöntem */
	/* top || bottom && left || right = 0 */
	/* top: 0; 
	left: 0;
	width: 100%;
	height: 100%; */
}

.swiper-1 .overlay {
	background: var(--overlay-blue);
}

.swiper-2 .overlay {
	background: var(--overlay-red);
}

.swiper-1 .swiper-slide p {
	position: absolute;
	left: 10px;
	bottom: 15px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	border: 1px solid #fff;
	border-radius: 25px;
	padding: 5px 15px;
	background: rgba(255, 255, 255, .2);
	backdrop-filter: blur(10px);
	--webkit-backdrop-filter: blur(10px);
	box-shadow: var(--shadow-text);
}