/* ============================================================================
   our-funfact-modern.css — Ana sayfa villa kategori SLIDER'ı (YALNIZCA görsel)
   ----------------------------------------------------------------------------
   GÜVENLİK: PHP loop, href, .anasayfataxlar/.panel/.katadi KORUNUR.
   row->.swiper, col->.swiper-slide minimal markup ile dönüştürülmüştür.
   Swiper (YEREL) ile yatay, draggable; autoplay yok. CLS-safe (genişlik CSS'te,
   yükseklik aspect-ratio ile rezerve). Tüm kurallar .our-funfact altına scope'lu.
   ============================================================================ */

.our-funfact{
	padding: 52px 0;
	background: linear-gradient(180deg, #fbfcfe 0%, #f5f7fb 100%);
}

/* ---- Slider kabı ---- */
.our-funfact .our-funfact-swiper{
	position: relative;
	padding: 6px 4px 40px;        /* alt: pagination için boşluk */
	overflow: hidden;
}
.our-funfact .our-funfact-swiper .swiper-wrapper{ align-items: stretch; }

/* Slide genişlikleri (slidesPerView:'auto') -> görünür kart sayısı + "peek"
   mobil ~1.3 / ≥576 ~2.2 / ≥768 ~3 / ≥992 ~4 */
.our-funfact .our-funfact-swiper .swiper-slide{
	width: 76%;
	height: auto;
}
@media (min-width: 576px){ .our-funfact .our-funfact-swiper .swiper-slide{ width: calc(45% - 10px); } }
@media (min-width: 768px){ .our-funfact .our-funfact-swiper .swiper-slide{ width: calc(33.333% - 13px); } }
@media (min-width: 992px){ .our-funfact .our-funfact-swiper .swiper-slide{ width: calc(25% - 15px); } }

.our-funfact .anasayfataxlar{ display: block; text-decoration: none; height: 100%; }

/* ---- Büyük premium kart ---- */
.our-funfact .panel{
	position: relative;
	margin: 0;
	width: 100%;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #eaeef4;
	box-shadow: 0 6px 18px rgba(12,22,54,.08);
	aspect-ratio: 3 / 4;                  /* büyük showcase; CLS-safe */
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.our-funfact .panel img{
	width: 100%; height: 100%;
	display: block;
	object-fit: cover;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.our-funfact .panel::after{
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,14,30,.66) 0%, rgba(8,14,30,.12) 50%, transparent 74%);
	pointer-events: none;
}

/* caption */
.our-funfact .katadi{
	position: absolute;
	left: 16px; right: 16px; bottom: 14px;
	z-index: 2; margin: 0; color: #fff;
	font-size: 16px; font-weight: 600; line-height: 1.3;
	letter-spacing: .2px; text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.our-funfact .katadi::before{
	content: ""; display: block;
	width: 24px; height: 2px; margin-bottom: 8px;
	border-radius: 2px; background: #faa914; opacity: .95;
	transform: scaleX(.7); transform-origin: left center;
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
}

/* hover: subtle (neon/glow yok) */
.our-funfact .anasayfataxlar:hover .panel{
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(12,22,54,.13);
}
.our-funfact .anasayfataxlar:hover .panel img{ transform: scale(1.04); }
.our-funfact .anasayfataxlar:hover .katadi::before{ transform: scaleX(1); }
.our-funfact .anasayfataxlar:focus-visible .panel{ outline: 2px solid #faa914; outline-offset: 3px; }

/* ---- Navigation: minimal oklar ---- */
.our-funfact .swiper-button-prev,
.our-funfact .swiper-button-next{
	width: 40px; height: 40px;
	margin-top: -28px;                    /* pagination alanını dengele */
	background: rgba(255,255,255,.9);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(12,22,54,.14);
	color: #1c2942;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: background .2s ease, transform .2s ease;
}
.our-funfact .swiper-button-prev:hover,
.our-funfact .swiper-button-next:hover{ background: #fff; transform: scale(1.05); }
.our-funfact .swiper-button-prev::after,
.our-funfact .swiper-button-next::after{ font-size: 15px; font-weight: 700; }
@media (max-width: 767px){
	.our-funfact .swiper-button-prev,
	.our-funfact .swiper-button-next{ display: none; }   /* mobilde swipe yeterli */
}

/* ---- Pagination: modern turuncu ---- */
.our-funfact .swiper-pagination{ bottom: 8px; }
.our-funfact .swiper-pagination-bullet{
	width: 8px; height: 8px; background: #c7d0de; opacity: 1;
	transition: width .25s ease, background .25s ease;
}
.our-funfact .swiper-pagination-bullet-active{
	width: 22px; border-radius: 6px; background: #faa914;
}

/* ---- Responsive section padding ---- */
@media (max-width: 991px){ .our-funfact{ padding: 42px 0; } }
@media (max-width: 575px){
	.our-funfact{ padding: 32px 0; }
	.our-funfact .katadi{ font-size: 15px; }
}

@media (prefers-reduced-motion: reduce){
	.our-funfact *{ transition: none !important; }
}