/* ==========================================================================
   Indri Ethnics — Anasayfa (front-page) — fullwidth hero
   Kart stili paylaşılan cards.css'ten gelir. Token'lar header/footer.css'ten.
   ========================================================================== */

.sc-home {
	background: var(--sc-bg);
	color: var(--sc-text);
	font-family: "JetBrains Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	-webkit-font-smoothing: antialiased;
}

.sc-home *,
.sc-home *::before,
.sc-home *::after {
	box-sizing: border-box;
}

.sc-home a {
	color: inherit;
	text-decoration: none;
}

/* --- Kategori hero'ları (fullwidth görsel, kaft.com tarzı) -----------------
   Her kategori (tişört/atlet/sweatshirt) için bir .sc-cat-hero — markup
   templates/parts/cat-hero.php'den gelir, front-page.php her kategori için bir
   kez include eder. Buradaki kuralların hepsi class bazlı, yani kaç hero
   eklenirse eklensin ek CSS gerekmez.
   Masaüstü: tek görsel, ekran yüksekliği kadar (100svh — mobil
   tarayıcı adres çubuğu farkını da hesaba katar), object-fit:cover ile
   ortadan taşar/kırpılır. Mobil (≤900px): aynı bölüm 3 parçaya bölünmüş
   görselle yatay scroll-snap slider'a döner; burada YATAY kırpma YOK
   (genişlik %100 sabit, yükseklik orana göre otomatik) — aksi halde komşu
   slaytların birleşen kenarları kırpılıp aralarında boşluk/kayma oluşuyordu
   (bkz. front-page.php, mobil medya sorgusu). --------------------------- */

/* Görünmez başlık (SEO/erişilebilirlik) — görsel hero'da başlık yok. */
.sc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sc-cat-hero {
	position: relative;
	width: 100%;
	height: 100svh;
	overflow: hidden;
}

.sc-cat-hero__slider {
	display: block;
	width: 100%;
	height: 100%;
	/* Görsele tıklayınca kategoriye gidilir (assets/js/home.js) ama alan bir link
	   değil — imleç bilerek normal ok kalır, parmağa dönmez. Kural açıkça
	   yazılıyor ki Salient'ten miras bir cursor değeri sızarsa da değişmesin
	   (bkz. [[salient-css-sizmasi]]). */
	cursor: default;
}

.sc-cat-hero__slide,
.sc-cat-hero__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Masaüstünde slider mekaniği kapalı, kenar slaytlar (1/3) hiç render edilmez
   — lazy + display:none birleşimi tarayıcının bu görselleri hiç indirmemesini
   sağlar (layout kutusu oluşmayan lazy <img> fetch edilmez). Özgüllük
   ".sc-cat-hero__slide" ile bilerek eşit değil, üstte tutulur (iki class
   birden — 0,2,0) ki dosya sırasından bağımsız her zaman kazansın. */
.sc-cat-hero__slide.sc-cat-hero__slide--edge {
	display: none;
}

.sc-cat-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ekrandan taşan kısım dikeyde ortadan kırpılır: hero görsellerinde ürünler
	   karenin dikey merkezinde durduğu için (atlet ve sweatshirt'te ~%50) bu
	   değer üst/alt boşluğu eşitler. İstisnası olan hero aşağıda. */
	object-position: center center;
}

/* Kategoriye özel dikey kırpma noktası — kare içindeki ürünlerin yeri her
   çekimde aynı değil. Tişört görselinde ürünler karede yukarıda duruyor (dikey
   merkez ~%44); ortadan kırpınca şeffaf header'ın altında kalıp üstten
   kesiliyorlardı, o yüzden kare biraz yukarıdan alınır.
   Class kancası cat-hero.php'de slug'dan üretilir; yeni bir hero'nun kadrajı
   şaşarsa buraya tek satır eklemek yeterli, PHP'ye dokunmaya gerek yok. */
.sc-cat-hero--tisort .sc-cat-hero__img {
	object-position: center 25%;
}

.sc-cat-hero__dots {
	display: none;
}

/* --- Kategori linki (yazı) — daktilo animasyonlu, tıklayınca ilgili shop
   kategorisine gider. Font boyutu ürün sayfası h1'iyle (.sc-panel__title)
   birebir, renk metin sayfalarındaki (Hakkımızda vb.) gövde grisiyle
   (--sc-muted) aynı. Animasyon front-page.php'de senkron inline script'le
   yapılır (footer'da geç yüklenen home.js'i beklerse "önce tam yazı görünüp
   sonra silinip yeniden yazılma" gibi bir flaş olurdu). ------------------- */
/* Özgüllük bilerek ".sc-home .sc-cat-hero__cta" (0,2,0) — ".sc-home a
   { color:inherit }" (0,1,1) tek class'lı ".sc-cat-hero__cta"yı (0,1,0)
   eziyordu, yazı --sc-muted yerine miras kalan --sc-text (opak, daha açık)
   ile render oluyordu. */
.sc-home .sc-cat-hero__cta {
	position: absolute;
	/* Splash SVG yazıdan geniş (6.4em) ve yazının merkezine göre ortalanıyor,
	   yani sol kenarı yazının başlangıcından ~1.7em daha solda kalıyordu —
	   ölçümde masaüstünde 22-39px, mobilde 31-41px ekranın dışına taşıyordu.
	   Bu yüzden bağlantı gutter'dan 1.7em içeriden başlar; em olduğu için
	   yazı boyutuyla birlikte ölçeklenir, iki kırılımda da aynı hizayı verir. */
	left: calc(var(--sc-gutter) + 1.7em);
	bottom: clamp(4.5rem, 14vh, 7rem);
	z-index: 3;
	display: inline-flex;
	align-items: baseline;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.02em;
	/* Accent splash üzerine yazı — DESIGN-SYSTEM.md kuralı: "accent üzerine
	   yazı her zaman --sc-bg (koyu) olur". */
	color: var(--sc-bg);
	text-decoration: none;
	white-space: nowrap;
	/* Tarayıcı <a>'yı varsayılan sürüklenebilir kabul eder — metin üstünde
	   mouse'la sürükleme "metin seç" yerine "link'i sürükle" olarak
	   yorumlanıyordu. Kapatınca normal metin seçimi çalışır. */
	-webkit-user-drag: none;
	user-select: text;
}

/* Üstüne gelince yazının RENGİ değişmez: yazı accent (sarı) splash'in üstünde
   duruyor, açık renge dönünce okunmaz oluyordu. Bunun yerine yazının altına
   kendi rengiyle aynı çizgi soldan sağa yavaşça açılır. */
.sc-cat-hero__cta-text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.14em;
	width: 0;
	height: 0.055em;
	min-height: 2px;
	background: currentColor;
	transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-home .sc-cat-hero__cta:hover .sc-cat-hero__cta-text::after,
.sc-home .sc-cat-hero__cta:focus-visible .sc-cat-hero__cta-text::after {
	width: 100%;
}

/* Tıklayınca yazıda kısa bir titreşim (footer etiket bulutundaki his).
   `transform` DEĞİL, bağımsız `translate`/`rotate` özellikleri kullanılıyor:
   style.css'teki "a, a * { transform: none !important }" kuralı (Salient link
   hover-zoom kapatma) bu <a> içindeki her transform'u eziyor. Bağımsız
   özellikler o kuraldan etkilenmediği için burada !important gerekmiyor. */
@keyframes sc-cta-shake {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	20%      { translate: -0.035em 0; rotate: -1.2deg; }
	45%      { translate: 0.03em 0; rotate: 1deg; }
	70%      { translate: -0.02em 0; rotate: -0.6deg; }
}

.sc-cat-hero__cta:active .sc-cat-hero__cta-text {
	animation: sc-cta-shake 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.sc-cat-hero__cta:active .sc-cat-hero__cta-text {
		animation: none;
	}
}

/* Yazı sönük kalıyordu — arkasına dikkat çeken sprey/fırça izi SVG'si
   (templates/parts/spray-splash.php, tişört/atlet/sweatshirt'te aynı SVG
   tekrar kullanılıyor). Accent renginde, yazının biraz gerisinde/altında;
   metin ve imleç üstte kalsın diye z-index ile ayrılıyor. */
.sc-cat-hero__cta-splash {
	position: absolute;
	left: 50%;
	top: 52%;
	/* Bağımsız `translate` özelliği — `transform` DEĞİL: style.css'teki
	   "a, a * { transform: none !important }" kuralı (Salient link hover-zoom
	   kapatma) bu <a> içindeki her transform'u eziyor. Bağımsız özellik o
	   kuraldan etkilenmediği için ortalama artık !important istemiyor. */
	translate: -50% -50%;
	width: 6.4em;
	height: 3.6em;
	color: var(--sc-accent);
	z-index: 0;
	pointer-events: none;
}

.sc-cat-hero__cta-splash svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Splash sabit genişlikte (6.4em) olduğu için uzun kategori adları taşıyor:
   "Sweatshirt" 10 karakterle splash'in düz alanından geniş kalıyordu.
   Küçültme <a>'ya değil YAZIYA uygulanır — <a>'nın font-size'ını düşürmek
   splash'i de aynı oranda küçültür (ikisi de em), yani taşma aynen sürerdi.
   Sadece yazı küçülünce splash boyu korunur, yazı içine oturur.
   İmleç de aynı oranda küçülür, yoksa yazıdan uzun kalırdı. */
.sc-cat-hero--sweatshirt .sc-cat-hero__cta-text,
.sc-cat-hero--sweatshirt .sc-cat-hero__cta-cursor {
	font-size: 0.85em;
}

.sc-cat-hero__cta-text,
.sc-cat-hero__cta-cursor {
	position: relative;
	z-index: 1;
}

.sc-cat-hero__cta-cursor {
	display: inline-block;
	width: 0.06em;
	min-width: 2px;
	height: 0.85em;
	margin-left: 0.05em;
	background: currentColor;
	animation: sc-cursor-blink 1s step-end infinite;
}

@keyframes sc-cursor-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@media (max-width: 900px) {
	.sc-cat-hero__cta {
		/* Noktaların (.sc-cat-hero__dots) üstünde, çakışmadan dursun + kullanıcı
		   isteğiyle ~1cm (2.4rem) daha yukarı. */
		bottom: calc(clamp(1.25rem, 5vh, 2.5rem) + 3.25rem + 2.4rem);
	}
}

/* --- Mobil (≤900px): 3'lü yatay scroll-snap slider ------------------------- */

@media (max-width: 900px) {

	/* object-fit:cover'ın telefon ekranı oranına (görselin kendi oranından
	   dar/uzun) göre sağ/soldan kırpması, komşu slaytların birleşen kenarlarını
	   da kırpıp piksel devamlılığını bozuyordu (kaydırınca slaytlar arasında
	   boşluk/kayma görünüyordu). Kesin çözüm: mobilde hiç yatay kırpma yok —
	   genişlik %100 sabit, yükseklik görselin oranına göre otomatik. Section
	   artık tam 100svh değil (görsel oranı ekran oranından kısa) ama kenarlar
	   piksel piksel örtüşüyor. */
	.sc-cat-hero {
		height: auto;
	}

	.sc-cat-hero__slider {
		display: flex;
		align-items: flex-start;
		height: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sc-cat-hero__slider::-webkit-scrollbar {
		display: none;
	}

	.sc-cat-hero__slide,
	.sc-cat-hero__slide picture {
		height: auto;
	}

	.sc-cat-hero__slide {
		flex: 0 0 100%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.sc-cat-hero__slide.sc-cat-hero__slide--edge {
		display: block;
	}

	.sc-cat-hero__img {
		/* Kutu artık görselin doğal oranıyla birebir (height:auto) — object-fit
		   devre dışı kalır (kırpacak taşma yok), base kuraldan miras kalması
		   zararsız, üzerine yazmaya gerek yok. */
		height: auto;
	}

	.sc-cat-hero__dots {
		display: flex;
		gap: 0.5rem;
		position: absolute;
		left: 50%;
		bottom: clamp(1.25rem, 5vh, 2.5rem);
		transform: translateX(-50%);
		z-index: 2;
	}

	.sc-cat-hero__dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(214, 209, 196, 0.35);
		cursor: pointer;
		transition: background-color 0.25s ease, transform 0.25s ease;
	}

	.sc-cat-hero__dot.is-active {
		background: var(--sc-accent);
		transform: scale(1.25);
	}
}

/* --- DENEME (2026-07-28): bölüm bölüm scroll — SADECE masaüstü -------------
   Tek scroll hareketinde bir sonraki hero'ya tam geçiş. Beğenilmezse bu
   bloğun tamamını silmek yeterli; başka hiçbir dosyaya dokunmuyor.

   home.css yalnızca anasayfada enqueue edildiği için (functions.php,
   sc_home_assets) buradaki `html` kuralı site geneline sızmaz.

   Mobilde bilerek KAPALI: mobilde .sc-cat-hero yüksekliği görselin doğal
   oranından geliyor (height:auto), ekran yüksekliğine eşit değil — snap
   noktaları "tam ekran geçiş" hissi vermezdi. Ayrıca içerideki yatay slider
   zaten bir snap konteyneri (x ekseni), iç içe koymuyoruz.

   LENIS UYARISI (2026-08-11 doğrulandı): Lenis şu an YALNIZCA tek ürün
   sayfasında yükleniyor (inc/takeover.php → product.js), anasayfada yok —
   bu yüzden bugün çakışma yok. Ama anasayfaya Lenis eklenirse bu blok
   ÇALIŞMAZ: Lenis scroll'u JS ile yönetir, CSS snap ise tarayıcının native
   scroll'una bağlıdır. İkisinden biri seçilmeli.

   AÇIK RİSK (kullanıcı 2026-08-11'de bilerek kabul etti): `mandatory` snap,
   Ctrl+F ile sayfada arama ve Tab ile gezinmede odağı/eşleşmeyi ekran dışında
   bırakabilir. Sorun yaşanırsa çözüm `mandatory` → `proximity` (+ aşağıdaki
   scroll-snap-stop kuralını kaldır); efekt yumuşar, riskler kalkar.
   ---------------------------------------------------------------------- */

@media (min-width: 901px) {

	html {
		scroll-snap-type: y mandatory;
	}

	.sc-cat-hero {
		scroll-snap-align: start;
		/* Hızlı tekerlek/flick hareketinde iki bölümün birden atlanmasını
		   engeller — "tek scroll = tek hero" garantisi buradan geliyor. */
		scroll-snap-stop: always;
	}

	/* Son snap noktası: sayfanın DİBİ (footer tamamen açık konumu).
	   Snap noktası neden footer'ın KENDİSİNE verilmiyor: footer artık `sticky`
	   (footer.css → parallax reveal) ve yapışık elemanın snap alanı kaydırılmış
	   konumundan hesaplanıyor — CDP ile ölçüldü: footer ekran dibine yapışıkken
	   snap noktası da oraya kayıyor, dipte hiç nokta oluşmuyor ve mandatory snap
	   kullanıcıyı hero'da tutup footer'ı erişilemez kılıyor.
	   `body` ise yapışık değil ve kutusu footer dahil tüm sayfayı kapsıyor →
	   `end` hizası tam olarak "footer tamamen açık" konumunu verir. Eski çözümde
	   bu iş home.js'te footer yüksekliği ölçülüp .sc-home'a scroll-margin-bottom
	   verilerek yapılıyordu (kaldırıldı, artık JS gerekmiyor). */
	body {
		scroll-snap-align: end;
	}

	/* Header snap'li sayfada gizlenmesin.
	   header.js "derine inip aşağı kaydırınca gizle, yukarı kaydırınca göster"
	   mantığıyla çalışıyor (is-hidden). Snap'te tek hamlede bir ekran boyu
	   aşağı inildiği için header gizleniyor ve yeni bölümde gizli kalıyordu.
	   Burada sadece bölüm bölüm geçilen 3 konum var, gizle/göster mantığının
	   anlamı kalmıyor — header sürekli erişilebilir kalsın.
	   header.js'e dokunulmuyor: sınıf yine ekleniyor, sadece bu sayfada ve
	   sadece masaüstünde görsel etkisi iptal ediliyor. Özgüllük (0,3,1),
	   header.css'teki .sc-site-header.is-hidden (0,2,0) kuralını !important
	   olmadan geçer. */
	body.home .sc-site-header.is-hidden {
		transform: none;
	}
}

/* Hareket hassasiyeti olan kullanıcıda ani yapışma yerine normal scroll. */
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
	html {
		scroll-snap-type: none;
	}
}