/* ==========================================================================
   Indri Ethnics — Site Footer (tüm sayfalar)
   Site renk paleti + parallax reveal (sabit katman, içerik üstünden kayar).
   ========================================================================== */

/* Site paleti token'ları — footer her sayfada yüklendiğinden burada da tanımlı
   (product.css yalnız tek ürün sayfasında yüklenir). Değerler ortaktır. */
:root {
	--sc-bg: #0a0a0a;
	--sc-surface: #111111;
	--sc-text: #d6d1c4;
	--sc-muted: rgba(214, 209, 196, 0.55);
	--sc-border: rgba(214, 209, 196, 0.14);
	--sc-accent: #c8f04a;
	--sc-footer-font: "JetBrains Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

.sc-site-footer,
.sc-site-footer * {
	box-sizing: border-box;
}

/* Liste sıfırlaması — bileşen kapsamlı, `li`'yi DOĞRUDAN hedefler.
   Salient'in kapsamsız `ul li { list-style: disc }` kuralı (parent temanın
   style.css'i) li'ye doğrudan uyguladığı için, ul üzerindeki `list-style: none`
   miras yoluyla ulaşamıyor ve eziliyor. takeover.php Salient CSS'ini yalnızca
   ürün/shop/kategori/text sayfalarında kaldırdığından madde imleri sadece
   anasayfa, sepet, ödeme, hesap gibi sayfalarda görünüyordu. Buradaki kural
   (0,1,1) Salient'inkinden (0,0,2) yüksek → footer her sayfada aynı. */
.sc-site-footer ul,
.sc-site-footer ol,
.sc-site-footer li {
	list-style: none;
}

.sc-site-footer li::marker,
.sc-site-footer li::before {
	content: none;
}

/* Footer normal akışta yer kaplar (doküman boyu ilk boyamada doğru → layout
   kayması yok). Parallax reveal aşağıdaki masaüstü bloğunda `sticky` ile. */
.sc-site-footer {
	background: var(--sc-bg);
	color: var(--sc-text);
	font-family: var(--sc-footer-font);
	font-size: 0.9rem;
	line-height: 1.6;
	padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4rem) 1.75rem;
	border-top: 1px solid var(--sc-border);
	-webkit-font-smoothing: antialiased;
}

/* --- Parallax reveal (yalnız masaüstü) ------------------------------------- */
/* Footer akışta yerini AYIRIR ama kaydırma boyunca `sticky` ile ekran dibine
   yapışık durur; üstündeki opak içerik katmanı onu kapatır, sayfa sonuna
   gelince yerine oturup açığa çıkar. Görsel sonuç eski `fixed` + footer.js
   kurgusuyla aynı; farkı doküman boyunun İLK boyamada doğru olması →
   mobilde 0.207 olan CLS'i (Google eşiği 0.1) sıfıra indirir ve footer artık
   JS'e bağlı değil (JS kapalıyken de görünür).

   Neden `bottom: 0`, `top: 100vh` DEĞİL: `top` sticky'yi AŞAĞI iter (kısa
   sayfada footer'ı ekran dibine yapıştırma hilesi), reveal vermez. `bottom: 0`
   eleman kendi akış konumuna gelene kadar onu YUKARI çekip ekran dibinde tutar
   — aradığımız davranış budur.

   Neden yalnız masaüstü: mobilde footer (~936px) ekrandan (~800px) uzun;
   yapışık kaldığı sürece üst satırları ekranın dışında kalır ve hiç okunamaz.
   CSS eleman yüksekliğini ölçemediği için kırılım genişlik + ekran yüksekliği
   koşuluyla veriliyor. Mobilde footer düz akışta kalır — bugün footer.js'in
   ölçüp yaptığı davranışın aynısı, sadece kayma olmadan. */
@media (min-width: 901px) and (min-height: 560px) {

	.sc-site-footer {
		position: sticky;
		bottom: 0;
		z-index: 0;
	}

	/* Salient'in reset'i (parent style.css, KAPSAMSIZ) `body { overflow: hidden }`
	   basıyor → body bir kaydırma konteyneri oluyor ve içindeki `sticky` HİÇ
	   tetiklenmiyor. Bu yüzden burada geri `visible`a çekiliyor.

	   `clip` DENENDİ ve GERİ ALINDI (2026-08-10): HTML'e özgü "overflow viewport
	   propagation" kuralı — html'in overflow'u `visible` ise BODY'nin değeri
	   viewport'a uygulanır. Takeover sayfalarında (ürün/shop/kategori/metin)
	   Salient CSS'i dequeue edildiği için html gerçekten `visible` kalıyor →
	   body'deki `clip` viewport'a sızıp sayfayı komple kaydırılamaz yaptı
	   (shop/kategori/metin sayfaları hiç scroll etmedi). `visible` sızsa bile
	   zararsız: viewport'un normal davranışı.

	   Yatay taşma güvencesi kaybolmuyor: Salient CSS'li sayfalarda html zaten
	   `overflow-x: hidden` (viewport'a o propagate olur), takeover sayfaları ise
	   bu kural eklenmeden önce de body'de `visible` ile çalışıyordu.

	   Etki alanı bilinçli olarak küçük: Salient ≥1000px'te kendisi
	   `html body { overflow: visible }` diyor, takeover sayfalarında hiç kural
	   yok → bu satır PRATİKTE yalnız Salient CSS'li sayfaların 901–999px
	   bandında iş yapıyor. Parent dosyaya dokunulmuyor; child CSS Salient'ten
	   sonra yüklendiği için aynı özgüllükte kazanır. */
	body {
		overflow: visible;
	}

	/* İçerik katmanı footer'ın ÜSTÜNDE ve OPAK olmalı; yoksa yapışık footer
	   içeriğin arkasından görünür. İki iskelet var: Salient'in sarmalayıcısı
	   (`#ajax-content-wrap`, child footer.php'de kapanır) ve tek ürün sayfasının
	   kendi <main>'i (single-product.php sarmalayıcı kullanmaz). */
	#ajax-content-wrap,
	body.sc-product-page .sc-main {
		position: relative;
		z-index: 1;
	}

	/* Ürün sayfasının <main>'i body'nin DOĞRUDAN çocuğu → koyu body zeminini
	   devralır, sabit renk yazmaya gerek yok. */
	body.sc-product-page .sc-main {
		background-color: inherit;
	}

	/* Salient'in sarmalayıcısı body'nin doğrudan çocuğu DEĞİL (araya off-canvas
	   `.ocm-effect-wrap` gibi saydam bir katman giriyor) → `inherit` burada
	   saydam kalıyor, CDP ile doğrulandı. Kendi KOYU sayfalarımızda zemini zaten
	   daha yüksek özgüllüklü kurallar basıyor (ghost header ~ #ajax-content-wrap,
	   cart.css, checkout.css, page.css). Geri kalan tek sayfa Salient'in AÇIK
	   temasında duran Hesabım: orada Salient'in kendi sayfa-zemini değişkeni
	   kullanılır (panelden renk değişirse otomatik uyar), değişken bir
	   güncellemede kaybolursa nötr açık gri fallback devreye girer — her iki
	   halde de yapışık footer içeriğin arkasından görünmez. */
	#ajax-content-wrap {
		background-color: var(--nectar-page-background-color, #f9f9f9);
	}
}

.sc-site-footer a {
	position: relative;
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.sc-site-footer a:hover {
	color: var(--sc-accent);
}

/* Hover'da alt çizgi soldan sağa açılır (smooth). */
.sc-site-footer a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background: var(--sc-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.sc-site-footer a:hover::after,
.sc-site-footer a:focus-visible::after {
	transform: scaleX(1);
}

.sc-site-footer__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
	gap: clamp(1.5rem, 3vw, 3rem);
}

/* Bülten sütunu (en sağ) */
.sc-footer-col--newsletter {
	min-width: 0;
}

.sc-footer__heading {
	margin: 0 0 1.1rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sc-muted);
}

.sc-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.sc-footer__list a {
	font-size: 0.9rem;
}

/* --- Kategoriler etiket bulutu -------------------------------------------- */

.sc-footer-tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sc-footer-tag {
	position: relative;
	display: inline-block;
	padding: 0.4rem 0.85rem;
	color: var(--sc-text);
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: 999px;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: capitalize;
	line-height: 1;
	transform-origin: center;
	/* Boyut/eğim için `transform` DEĞİL, bağımsız `scale`/`rotate` özellikleri
	   kullanılıyor: style.css'teki "a, a * { transform: none !important }"
	   kuralı (Salient link hover-zoom kapatma) seçicisinde `a`'nın kendisini de
	   içeriyor ve .sc-footer-tag bir <a>. Bu yüzden transform tabanlı eğim ve
	   titreşim sessizce ölüyordu (font-size uygulanıyor, transform ezilmiş
	   halde). Bağımsız özellikler o kuraldan etkilenmez — !important gerekmez. */
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, scale 0.4s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Baloncuk etkisi: bulutun üzerine gelince tüm etiketler hafif küçülüp soluklaşır,
   sadece imlecin üstündeki büyüyüp öne çıkar. */
.sc-footer-tagcloud:hover .sc-footer-tag {
	scale: 0.9;
	opacity: 0.5;
}

/* Üstüne gelinen/odaklanan etiket: accent dolgu + koyu (siyah) yazı, titreşimli
   zoom-in (pop), kardeşlerin üstünde. .sc-site-footer ön eki genel a:hover'ı ezer. */
.sc-site-footer .sc-footer-tagcloud:hover .sc-footer-tag:hover,
.sc-site-footer .sc-footer-tag:hover,
.sc-site-footer .sc-footer-tag:focus-visible {
	color: var(--sc-bg);
	background: var(--sc-accent);
	border-color: var(--sc-accent);
	opacity: 1;
	z-index: 1;
	animation: sc-tag-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Basınca daha sert/punchlı titreşim (hover kuralından sonra → tıklamada kazanır). */
.sc-site-footer .sc-footer-tag:active {
	animation: sc-tag-press 0.4s ease forwards;
}

/* Etiketlerde genel footer link alt-çizgisi (::after) istenmez. */
.sc-footer-tag::after {
	display: none;
}

/* Titreşerek büyüme (üstüne gelince). */
@keyframes sc-tag-pop {
	0%   { scale: 1;    rotate: 0deg; }
	25%  { scale: 1.22; rotate: -3.5deg; }
	45%  { scale: 1.1;  rotate: 2.5deg; }
	65%  { scale: 1.2;  rotate: -2deg; }
	85%  { scale: 1.14; rotate: 1deg; }
	100% { scale: 1.17; rotate: 0deg; }
}

/* Basma titreşimi (önce sıkışır, sonra fırlar). */
@keyframes sc-tag-press {
	0%   { scale: 1.17; rotate: 0deg; }
	35%  { scale: 0.9;  rotate: -2.5deg; }
	70%  { scale: 1.26; rotate: 2.5deg; }
	100% { scale: 1.17; rotate: 0deg; }
}

/* Hareketi azalt tercihinde titreşim kapanır, sade büyüme kalır. */
@media (prefers-reduced-motion: reduce) {
	.sc-site-footer .sc-footer-tagcloud:hover .sc-footer-tag:hover,
	.sc-site-footer .sc-footer-tag:hover,
	.sc-site-footer .sc-footer-tag:focus-visible,
	.sc-site-footer .sc-footer-tag:active {
		animation: none;
		scale: 1.1;
	}
}

.sc-footer__address {
	margin: 1rem 0 0;
	font-style: normal;
	color: var(--sc-text);
	font-size: 0.9rem;
}

.sc-site-footer__bar {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	/* Ayraç çizgi fullwidth: footer'ın yan padding'i (--sc-gutter ile aynı değer)
	   negatif marginla taşılır, içerik hizası padding ile geri verilir. */
	margin: clamp(2.5rem, 5vw, 4rem) calc(-1 * var(--sc-gutter, 1.25rem)) 0;
	padding: 1.5rem var(--sc-gutter, 1.25rem) 0;
	border-top: 1px solid var(--sc-border);
	color: var(--sc-muted);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

/* --- Bülten formu (WPForms) ----------------------------------------------- */

.sc-site-footer .wpforms-container {
	margin: 0;
}

.sc-site-footer .wpforms-form .wpforms-field {
	padding: 0 0 0.75rem;
}

/* WPForms alan-boyutu sınıfları input'u ~%60'a daraltır; formu tam sütun
   genişliğine (onay kutusu metniyle aynı uzunlukta) çekiyoruz. */
.sc-site-footer .wpforms-form .wpforms-field-small,
.sc-site-footer .wpforms-form .wpforms-field-medium,
.sc-site-footer .wpforms-form .wpforms-field-large {
	max-width: 100%;
}

.sc-site-footer .wpforms-form input[type="text"],
.sc-site-footer .wpforms-form input[type="email"] {
	width: 100%;
	padding: 0.8rem 1.25rem;
	color: var(--sc-muted);
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: 999px;
	font: inherit;
	font-size: 0.9rem;
	transition: border-color 0.3s ease;
}

/* "e-posta adresiniz" placeholder'ı Gizlilik Sözleşmesi metniyle aynı renkte (muted).
   WPForms kendi prefix'li kuralını opacity:0.5 ile uyguluyor; özgüllüğü
   .wpforms-form sınıfıyla aşıp her prefix'i ayrı ayrı ezerek tam renk veriyoruz. */
.sc-site-footer div.wpforms-container-full .wpforms-form input::placeholder {
	color: var(--sc-muted);
	opacity: 1;
}

.sc-site-footer div.wpforms-container-full .wpforms-form input::-webkit-input-placeholder {
	color: var(--sc-muted);
	opacity: 1;
}

.sc-site-footer div.wpforms-container-full .wpforms-form input::-moz-placeholder {
	color: var(--sc-muted);
	opacity: 1;
}

.sc-site-footer .wpforms-form input[type="text"]:focus,
.sc-site-footer .wpforms-form input[type="email"]:focus {
	outline: none;
	border-color: var(--sc-accent);
}

/* Yazarken metin rengi de placeholder rengiyle aynı (muted) kalsın.
   WPForms, focus + (henüz geçersiz e-posta) state'inde metni kendi rengine
   döndürüyor (input:focus:invalid); o state dahil tüm durumları daha yüksek
   özgüllükle eziyoruz. */
.sc-site-footer div.wpforms-container-full .wpforms-form input[type="text"],
.sc-site-footer div.wpforms-container-full .wpforms-form input[type="email"],
.sc-site-footer div.wpforms-container-full .wpforms-form input[type="text"]:focus,
.sc-site-footer div.wpforms-container-full .wpforms-form input[type="email"]:focus,
.sc-site-footer div.wpforms-container-full .wpforms-form input[type="text"]:focus:invalid,
.sc-site-footer div.wpforms-container-full .wpforms-form input[type="email"]:focus:invalid {
	color: var(--sc-muted);
}

.sc-site-footer .wpforms-form .wpforms-field-label,
.sc-site-footer .wpforms-form .wpforms-field-label-inline {
	color: var(--sc-muted);
	font-size: 0.8rem;
	font-weight: 400;
}

.sc-site-footer .wpforms-form .wpforms-field-description {
	color: var(--sc-muted);
	font-size: 0.75rem;
}

/* Zorunlu onay kutusu (Gizlilik Sözleşmesi) — footer menü/link rengiyle aynı */
.sc-site-footer .wpforms-form .wpforms-field-checkbox label,
.sc-site-footer .wpforms-form .wpforms-field-checkbox li {
	color: var(--sc-text);
	font-family: var(--sc-footer-font);
	font-size: 0.8rem;
	font-weight: 400;
}

/* Onay metnindeki "Gizlilik Sözleşmesini" linki: alt çizgi YOK, yalnızca
   hover'da renk değişimi (.sc-site-footer a:hover → sarı). Çizgi animasyonunu
   (::after) bu link için iptal ediyoruz. "Gizlilik Sözleşmesini" kısmı italik. */
.sc-site-footer .wpforms-form .wpforms-field-checkbox a::after {
	display: none;
	content: none;
}

.sc-site-footer .wpforms-form .wpforms-field-checkbox a em {
	font-style: italic;
}

/* Abone Ol (gönder) butonunun görünümü paylaşılan buttons.css'ten gelir. */

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
	.sc-site-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-footer-col--newsletter {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.sc-site-footer__inner {
		grid-template-columns: 1fr;
	}

	.sc-site-footer__bar {
		flex-direction: column;
		align-items: center;
	}

	/* Mobilde etiket bulutu: oversize + dağınık (değişken boyut/eğim). */
	.sc-footer-tagcloud {
		gap: 0.7rem 0.8rem;
		align-items: center;
	}

	.sc-footer-tag {
		padding: 0.6rem 1.15rem;
		font-size: 1.05rem;
	}

	.sc-footer-tag:nth-child(4n + 1) {
		font-size: 1.25rem;
		rotate: -3deg;
	}

	.sc-footer-tag:nth-child(4n + 2) {
		font-size: 0.95rem;
		rotate: 2.5deg;
	}

	.sc-footer-tag:nth-child(4n + 3) {
		font-size: 1.15rem;
		rotate: -1.5deg;
	}

	.sc-footer-tag:nth-child(4n) {
		font-size: 1.35rem;
		rotate: 3deg;
	}
}