/* Anasayfa: slider / carousel / vitrin yerleşim ve kayma (CLS) düzeltmeleri + kaydırdıkça yükleme görünümü.
   Kullanan: pages/anasayfa.php (assets/js/anasayfa-lazy.js ile birlikte). main.php'den sonra yüklenir. */

/* Yatay taşma güvenliği (fixed/sticky öğeleri etkilemez; desteklemeyen tarayıcıda yok sayılır) */
.ana-sayfa { overflow-x: clip; }

/* ---------------- Hero slider ---------------- */
/* Slayt yüksekliği genişliğe orantılı (görsel 2138x736 ~ 3:1). Eski sabit px yükseklikler ve slider kabına verilen
   350px/210px yükseklikler 992-1199px arasında slayt ile uyuşmayıp taşma/boşluk yaratıyordu. */
.ana-sayfa .hero-slider-1.ana-slider { height: auto !important; }
.ana-sayfa .hero-slider-1 .single-hero-slider {
	position: relative;
	height: auto !important;
	aspect-ratio: 3 / 1;
	overflow: hidden;
	background: #f4f6fa;
	background-image: none;
}
@media (max-width: 1024px) { .ana-sayfa .hero-slider-1 .single-hero-slider { aspect-ratio: 2.6 / 1; } }
/* Telefon: slider görselleri kendi üzerinde yazı içeriyor; 16:10'a kırpmak yazıları kesiyordu. Görsel oranı (~2.9:1) korunur. */
@media (max-width: 767px) {
	.ana-sayfa .hero-slider-1 .single-hero-slider { aspect-ratio: 2138 / 736; min-height: 0; }
	.ana-sayfa .hero-slider-1 .single-hero-slider > .slide-img { object-fit: contain; }
	.ana-sayfa .hero-slider-1 .slick-dots { bottom: -26px; }
	.ana-sayfa .home-slide-cover { margin-bottom: 36px; }
	.ana-sayfa .slider-arrow { display: none; }
}
/* slick başlamadan önce yalnız ilk slayt görünür (aksi halde tüm slaytlar alt alta dizilip sayfa sonradan çöküyordu) */
.ana-sayfa .hero-slider-1:not(.slick-initialized) > .single-hero-slider:not(:first-child) { display: none; }
.ana-sayfa .hero-slider-1 .single-hero-slider > .slide-img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	max-height: none;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
	display: block;
}
.ana-sayfa .hero-slider-1 .single-hero-slider > video {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.ana-sayfa .hero-slider-1 .single-hero-slider .slider-content { z-index: 2; max-width: 88%; }

/* ---------------- Kategori carousel ---------------- */
/* slick başlamadan önce kartlar yan yana dizilir (aksi halde alt alta yığılıp sayfa sonradan çöküyordu).
   Sütun sayıları main.js'deki slick ayarıyla aynıdır: 8 / <1025: 4 / <768: 3 / <480: 2. */
.ana-sayfa .carausel-8-columns:not(.slick-initialized) { display: flex; flex-wrap: nowrap; overflow: hidden; }
.ana-sayfa .carausel-8-columns:not(.slick-initialized) > .card-2 { flex: 0 0 calc(12.5% - 16px); min-width: 0; }
@media (max-width: 1024px) { .ana-sayfa .carausel-8-columns:not(.slick-initialized) > .card-2 { flex-basis: calc(25% - 16px); } }
@media (max-width: 767px) { .ana-sayfa .carausel-8-columns:not(.slick-initialized) > .card-2 { flex-basis: calc(33.3333% - 16px); } }
@media (max-width: 479px) { .ana-sayfa .carausel-8-columns:not(.slick-initialized) > .card-2 { flex-basis: calc(50% - 16px); } }
.ana-sayfa .card-2 figure img { display: inline-block; width: 100px; height: 100px; object-fit: cover; background: #e9edf3; }

/* ---------------- Banner ---------------- */
/* tema <=768px'te .banner-img'i float yapıyor; sütun yüksekliği görsel yüklenene dek 20px kalıp sonra sıçrıyordu */
.ana-sayfa .banner-img { float: none; width: 100%; margin-bottom: 20px; }
.ana-sayfa .banner-img img { display: block; width: 100%; height: auto; background: #f4f6fa; }

/* ---------------- Vitrin ürünleri ---------------- */
.ana-sayfa .product-cart-wrap .product-img { background: #f4f6fa; }
/* aynı satırdaki kartlar eşit yükseklikte (başlık 1-2 satır olunca alt kenarlar hizasız kalıyordu) */
.ana-sayfa .product-grid-4 > .ana-kart { display: flex; }
.ana-sayfa .product-grid-4 > .ana-kart > .product-cart-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ana-sayfa .product-grid-4 .product-content-wrap { flex: 1 1 auto; }
.ana-sayfa .product-cart-wrap .product-img-action-wrap .product-img a img { display: block; width: 100%; height: 300px; object-fit: cover; }
@media (max-width: 575px) { .ana-sayfa .product-cart-wrap .product-img-action-wrap .product-img a img { height: auto; aspect-ratio: 1 / 1; } }
.ana-sayfa .ana-kart.ana-yeni { animation: ana-giris .45s ease both; }
@keyframes ana-giris { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* kaydırdıkça yükleme göstergesi */
.ana-sentinel { min-height: 64px; display: flex; align-items: center; justify-content: center; margin: 4px 0 28px; }
.ana-sentinel.bitti { display: none; }
.ana-sentinel .ana-spinner {
	width: 34px; height: 34px; border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, .1); border-top-color: #253D4E;
	animation: ana-don .8s linear infinite; opacity: 0; transition: opacity .2s;
}
.ana-sentinel.yukleniyor .ana-spinner { opacity: 1; }
@keyframes ana-don { to { transform: rotate(360deg); } }
.ana-sentinel .ana-daha-fazla { border: 1px solid #ddd; background: #fff; border-radius: 30px; padding: 10px 28px; font-weight: 600; cursor: pointer; }
.ana-sentinel .ana-daha-fazla[hidden] { display: none; }
.ana-sentinel .ana-daha-fazla:hover { background: #f4f6fa; }

/* ---------------- Instagram ---------------- */
.ana-instagram-yer { min-height: 1px; }
.ana-sayfa .ana-instagram { animation: ana-giris .5s ease both; }
.ana-sayfa .instagram-image-link img { display: block; }

@media (prefers-reduced-motion: reduce) {
	.ana-sayfa .ana-kart.ana-yeni, .ana-sayfa .ana-instagram, .ana-sentinel .ana-spinner { animation: none; }
}

/* ---------------- Çerez bildirimi (mobil taşma) ---------------- */
/* Tema 400px sabit genişlikle sola 30px yaslıyor; 375px ekranda sağdan 55px taşıyordu. */
/* (mobil çerez düzeni artık assets/css/mobil.css'te) */