/* ==========================================================================
   Indri Ethnics — Site Header (tüm sayfalar)
   Logo + menü + arama + sepet. Animasyon: scroll'da daralma / gizlenme.
   ========================================================================== */

: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-header-font: "JetBrains Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	/* --sc-header-h = header bloğunun TOPLAM yüksekliği (varsa duyuru şeridi
	   dahil) — sayfa içerikleri üst boşluğunu bundan hesaplar.
	   --sc-bar-h    = yalnız logo/menü çubuğunun kendi yüksekliği.
	   Şerit açıkken --sc-header-h'yi announce.css büyütür (html.sc-announce-on);
	   çubuk kendi boyunu koruduğu için ikisi ayrı tutulur. */
	--sc-header-h: 5rem;
	--sc-bar-h: 5rem;
	--sc-header-h-shrunk: 3.5rem;
	/* Sayfa yatay boşluğu — shop/home gibi product.css yüklemeyen sayfalar da
	   kullanır; burada tanımsız kalırsa var() geçersiz olup padding'i sıfırlıyordu. */
	--sc-gutter: clamp(1.25rem, 4vw, 4rem);
}

/* Metin seçimi: Windows mavisi yerine marka accent'i (site geneli; header.css
   her sayfada yüklenir). */
::selection {
	background: var(--sc-accent);
	color: var(--sc-bg);
}

::-moz-selection {
	background: var(--sc-accent);
	color: var(--sc-bg);
}

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

/* Anasayfa henüz takeover kapsamında değil (bkz. inc/takeover.php, aşama 3
   yapılmadı) — Salient'in kendi CSS'i (colors.php/woocommerce.css) hâlâ
   yüklü ve var(--nectar-accent-color) (mor) kullanıyor. Header alanında
   bunu kendi accent'imize sabitleyip sızıntıyı kaynağında kapatıyoruz
   (buttons.css'teki footer WPForms çözümüyle aynı yöntem). */
.sc-site-header {
	--nectar-accent-color: var(--sc-accent);
}

/* Mobilde dokununca tarayıcının bastığı yarı saydam vurgu (cihaza göre
   mor/gri parlama) bizim buton/linklerde kapalı; klavye odağı için hemen
   altta kendi accent halkamız var (erişilebilirlik korunur). */
.sc-site-header a,
.sc-site-header button,
.sc-mobile-menu a,
.sc-mobile-menu button,
.sc-cart-drawer a,
.sc-cart-drawer button {
	-webkit-tap-highlight-color: transparent;
}

.sc-site-header a:focus-visible,
.sc-site-header button:focus-visible,
.sc-mobile-menu a:focus-visible,
.sc-mobile-menu button:focus-visible,
.sc-cart-drawer a:focus-visible,
.sc-cart-drawer button:focus-visible {
	outline: 2px solid var(--sc-accent);
	outline-offset: 2px;
}

/* Salient "skip to content" linki — takeover sayfalarında Salient CSS yokken
   görünür kalıp header'ı bozuyordu. Ekran-okuyucu için gizle (akıştan çıkar),
   klavye Tab focus'unda accent kutu olarak görünür yap (erişilebilirlik korunur). */
.nectar-skip-to-content {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nectar-skip-to-content:focus {
	left: 1rem;
	top: 1rem;
	z-index: 1100;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	background: var(--sc-accent);
	color: var(--sc-bg);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sc-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	color: var(--sc-text);
	font-family: var(--sc-header-font);
	/* Default: tam opak site siyahı (yarı saydam değil → arkadan renk sızmaz). */
	background: var(--sc-bg);
	/* Header ile içeriği ayıran her zaman görünen soluk gri çizgi
	   (header/body aynı koyu renkte). Scroll'da accent çizgi (::after) üstüne biner. */
	border-bottom: 1px solid var(--sc-border);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
}

/* Alt kenarda soldan sağa sönümlenen accent çizgi (süs) — scroll'da belirginleşir. */
.sc-site-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--sc-accent), transparent);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.sc-site-header.is-shrunk::after {
	opacity: 0.7;
}

/* Mobil menü açılınca header'ın altını ayıran accent (sarı) çizgi:
   soldan sağa çizilir (scaleX), kapanışta geri toplanır. */
.sc-site-header::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--sc-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
	pointer-events: none;
}

.sc-site-header.is-menu-open::before {
	transform: scaleX(1);
}

/* Sayfa başında: tam opak site siyahı (site arka planıyla birebir aynı). */
.sc-site-header.is-top {
	background: var(--sc-bg);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Aşağı kaydırınca: derin siyah + cam blur. */
.sc-site-header.is-shrunk {
	background: rgba(10, 10, 10, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Derine inip aşağı kaydırınca: gizlen. */
.sc-site-header.is-hidden {
	transform: translateY(-100%);
}

/* WordPress admin bar (giriş yapmış kullanıcı) header'ı örtmesin. */
.admin-bar .sc-site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sc-site-header {
		top: 46px;
	}
}

/* Fixed header'ın içeriği örtmemesi için sarmalayıcının üst boşluğu.
   Bilerek CSS'te: eskiden header.js bu padding'i ilk boyamadan SONRA inline
   yazıyordu → mobilde her sayfada tek başına ~0.10 CLS (ölçüldü). Değer artık
   --sc-header-h token'ından geliyor; duyuru şeridi açık/kapalı farkı da
   kendiliğinden doğru (announce.css token'ı büyütür) ve kapanış animasyonu
   announce.css'teki padding-top geçişiyle yumuşak kalır. */
#ajax-content-wrap {
	padding-top: var(--sc-header-h);
}

/* İki istisna — bu sayfalarda boşluğu başkası yönetir:
   anasayfada hero en tepeden başlar (ghost header görselin üstünde yüzer),
   tek ürün sayfasında üst boşluk product.css'in .sc-main'inde. */
body.home #ajax-content-wrap,
body.sc-product-page #ajax-content-wrap {
	padding-top: 0;
}

.sc-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	/* Şerit dahil toplam (--sc-header-h) değil, çubuğun kendi boyu. */
	height: var(--sc-bar-h);
	/* Header fullwidth hissi: içerik sayfa gutter'ına (--sc-gutter) değil,
	   ekran kenarına yakın durur (masaüstünde ~24px). */
	padding: 0 clamp(1.25rem, 2vw, 1.5rem);
	transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-site-header.is-shrunk .sc-site-header__inner {
	height: var(--sc-header-h-shrunk);
}

/* --- Logo ----------------------------------------------------------------- */

.sc-site-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	color: inherit;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-site-header__logo:hover {
	transform: scale(1.04);
}

.sc-site-header__logo:hover .sc-site-header__logo-img {
	filter: drop-shadow(0 0 10px rgba(200, 240, 74, 0.45));
}

/* Selektör header'a sabitlendi (0,2,0): tek-ürün sayfasındaki
   .sc-product-page img { height:auto } kuralını (0,1,1) ezsin diye. */
.sc-site-header .sc-site-header__logo-img {
	display: block;
	width: auto;
	/* Header çubuğunun iç yüksekliğine oranlı: dengeli dikey boşluk bırakır,
	   taşmaz. Duyuru şeridi dahil toplam (--sc-header-h) değil, çubuk boyu. */
	height: calc(var(--sc-bar-h) - 2rem);
	max-height: 100%;
	object-fit: contain;
	transition: height 0.35s ease, filter 0.4s ease;
}

.sc-site-header.is-shrunk .sc-site-header__logo-img {
	height: calc(var(--sc-header-h-shrunk) - 1.4rem);
}

/* Header daralınca menü/sepet fontu da logo gibi küçülür. */
.sc-site-header.is-shrunk .sc-menu a,
.sc-site-header.is-shrunk .sc-site-header__cart {
	font-size: clamp(0.85rem, 1.15vw, 1.05rem);
}

.sc-site-header__logo-text {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* --- Menü ------------------------------------------------------------------ */

.sc-site-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.sc-menu {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-menu li {
	position: relative;
}

/* Liste sıfırlaması — header'ın TÜM bileşenlerinde (menü, arama, mobil menü,
   sepet drawer'ı), `li`'yi DOĞRUDAN hedefleyerek. Salient'in kapsamsız
   `ul li { list-style: disc }` kuralı li'ye doğrudan uygulandığı için ul'daki
   `list-style: none` miras yoluyla ulaşamıyor. takeover.php Salient CSS'ini
   yalnızca ürün/shop/kategori/text sayfalarında kaldırdığından madde imleri
   anasayfa/sepet/ödeme/hesap gibi sayfalarda çıkıyordu; bu kural (0,1,1)
   Salient'inkinden (0,0,2) yüksek → header her sayfada aynı. Altçizgi
   efektimiz a::after olduğundan etkilenmez. */
.sc-site-header li,
.sc-mobile-menu li,
.sc-cart-drawer li {
	list-style: none;
}

.sc-site-header li::marker,
.sc-site-header li::before,
.sc-mobile-menu li::marker,
.sc-mobile-menu li::before,
.sc-cart-drawer li::marker,
.sc-cart-drawer li::before {
	content: none;
}

.sc-menu a {
	position: relative;
	display: inline-block;
	padding: 0.5em 0;
	color: inherit;
	text-decoration: none;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color 0.3s ease, font-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accent underline soldan açılır (hover + aktif sayfa). */
.sc-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.12em;
	width: 100%;
	height: 2px;
	background: var(--sc-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-menu a:hover,
.sc-menu .current-menu-item > a {
	color: var(--sc-accent);
}

.sc-menu a:hover::after,
.sc-menu .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Dropdown header'ın alt çizgisine yapışmasın diye kutu biraz aşağı alınır
   (aşağıdaki `top`). Aradaki boşlukta imleç menüden çıkıp dropdown kapanmasın
   diye li'nin altına görünmez bir hover köprüsü konur — köprü bilerek li'ye
   veriliyor: .sub-menu'nun kendi ::before'u ghost varyantındaki
   `overflow: hidden` (bkz. .sc-header--ghost .sc-menu .sub-menu) tarafından
   kırpılırdı. Yükseklik dropdown'ın boşluğuyla aynı değerde tutulmalı. */
.sc-menu > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.6rem;
}

/* Alt menü (ör. Shop ▸ T-Shirt/Sweatshirt/Atlet) — masaüstü dropdown */
.sc-menu .sub-menu {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	transform: translateY(8px);
	min-width: 12rem;
	margin: 0;
	padding: 0.75rem 0;
	list-style: none;
	background: rgba(10, 10, 10, 0.98);
	border: 1px solid var(--sc-border);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.sc-menu li:hover > .sub-menu,
.sc-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sc-menu .sub-menu li {
	display: block;
}

.sc-menu .sub-menu a {
	display: block;
	padding: 0.55rem 1.25rem;
	white-space: nowrap;
	/* Üst menüden gelen uppercase'i ez: kategori isimleri ilk harf büyük,
	   gerisi kendi (küçük) hâliyle (ör. "Sweatshirt"). */
	text-transform: capitalize;
}

/* Dropdown linkleri üst menüden bir tık küçük. İkinci seçici, header daralınca
   devreye giren .is-shrunk .sc-menu a kuralını (aynı specificity, sonra geldiği
   için) ezerek alt menünün boyutunu iki durumda da sabit tutar. */
.sc-menu .sub-menu a,
.sc-site-header.is-shrunk .sc-menu .sub-menu a {
	font-size: clamp(0.9rem, 1.15vw, 1.1rem);
}

.sc-menu .sub-menu a::after {
	display: none;
}

/* --- Sağ aksiyonlar (arama / sepet / hamburger) --------------------------- */

.sc-site-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.sc-site-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	/* button elemanının native OS/tarayıcı görünümünü (bazı Android/Chrome
	   sürümlerinde köşeli kutu + sistem rengi) tamamen kapat. */
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font: inherit;
	transition: color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-site-header__icon:hover {
	color: var(--sc-accent);
	transform: scale(1.15);
}

/* İkon boyutu header fontuyla uyumlu (menü metninden bir tık büyük). */
.sc-site-header__icon svg {
	width: clamp(1.3rem, 1.8vw, 1.65rem);
	height: clamp(1.3rem, 1.8vw, 1.65rem);
}

/* Sepet: ikon (arama ile uyumlu) + köşede accent sayı rozeti. */
.sc-site-header__cart {
	position: relative;
	text-decoration: none;
}

.sc-cart-count {
	position: absolute;
	top: -0.5rem;
	right: -0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.28rem;
	background: var(--sc-accent);
	color: var(--sc-bg);
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1;
}

/* Sepet boşken (sayaç 0 → boş span) rozeti gizle; ikon temiz kalır. */
.sc-cart-count:empty {
	display: none;
}

/* --- Arama paneli --------------------------------------------------------- */

/* Panel header'ın altından grid-rows (0fr→1fr) ile süzülerek açılır;
   kapalıyken yükseklik 0 ve etkileşime kapalı. */
.sc-site-header__search {
	position: relative;
	display: grid;
	grid-template-rows: 0fr;
	background: rgba(10, 10, 10, 0.98);
	transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-site-header__search.is-open {
	grid-template-rows: 1fr;
}

/* Üstte soldan-sağa çizilen ince accent çizgi (mobil menüyle aynı dil). */
.sc-site-header__search::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--sc-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
	pointer-events: none;
	z-index: 1;
}

.sc-site-header__search.is-open::before {
	transform: scaleX(1);
}

/* grid-rows animasyonu için iç sarmalın taşması gizlenir. */
.sc-site-header__search-inner {
	min-height: 0;
	overflow: hidden;
	border-top: 1px solid var(--sc-border);
}

.sc-search-form {
	display: flex;
	gap: 0.75rem;
	max-width: 44rem;
	margin: 0 auto;
	padding: 1.25rem clamp(1.25rem, 4vw, 4rem);
	/* Açılırken içerik hafifçe yukarıdan süzülür. */
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.4s ease 0.08s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.sc-site-header__search.is-open .sc-search-form {
	opacity: 1;
	transform: translateY(0);
}

/* İçinde gömülü büyüteç ikonu olan tek satır arama alanı. */
.sc-search-form__field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
}

.sc-search-form__input {
	width: 100%;
	padding: 0.9rem 1.5rem;
	color: var(--sc-text) !important;
	background: var(--sc-surface) !important;
	border: 1px solid var(--sc-border) !important;
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	transition: border-color 0.3s ease;
}

.sc-search-form__input::placeholder {
	color: var(--sc-muted);
	letter-spacing: 0.04em;
}

.sc-search-form__input:focus {
	outline: none;
	border-color: var(--sc-accent) !important;
}

.sc-search-form__submit {
	padding: 0.9rem 1.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sc-bg) !important;
	background: var(--sc-accent) !important;
	border: 1px solid var(--sc-accent) !important;
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Salient'in colors.php'si `button[type=submit]:hover/:focus{background-color:accent!important}`
   diye KAPSAMSIZ (her <button type="submit">'e) bir kural basıyor; bunun özgüllüğü
   (element+attribute+pseudo) bizim tek class'lı kuralımızla eşit-üstü olduğundan
   (aynı !important'ta) mor kazanıyordu. `.sc-site-header` ata class'ı ekleyip
   özgüllüğü artırarak kesin kazandırıyoruz — aynı örnek zaten #wpforms-submit-1595
   ve checkout place-order butonunda kullanıldı. */
.sc-site-header .sc-search-form__submit:hover,
.sc-site-header .sc-search-form__submit:focus {
	background: transparent !important;
	color: var(--sc-accent) !important;
}

/* --- Giriş animasyonu: sayfa açılışında öğeler sırayla yukarıdan süzülür --- */

@keyframes sc-header-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sc-site-header__logo,
.sc-site-header__actions {
	animation: sc-header-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sc-site-header__logo { animation-delay: 0.05s; }
.sc-site-header__actions { animation-delay: 0.18s; }

/* Hareketi azalt tercihinde giriş animasyonunu kapat (içerik görünür kalır). */
@media (prefers-reduced-motion: reduce) {
	.sc-site-header__logo,
	.sc-site-header__actions {
		animation: none;
	}
}

/* --- Hamburger butonu (MENÜ ⇄ KAPAT + çizgi → X) --------------------------- */
/* Yalnız mobilde görünür (aşağıdaki media query'de açılır). */

.sc-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
}

/* İki çizgili ikon → X morph. */
.sc-burger {
	display: block;
	position: relative;
	width: 24px;
	height: 10px;
	flex: 0 0 auto;
}

.sc-burger::before,
.sc-burger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.sc-burger::before {
	top: 0;
}

.sc-burger::after {
	bottom: 0;
}

.sc-site-header.is-menu-open .sc-burger::before {
	transform: translateY(4.25px) rotate(45deg);
}

.sc-site-header.is-menu-open .sc-burger::after {
	transform: translateY(-4.25px) rotate(-45deg);
}

/* --- Mobil tam-ekran menü (overlay) --------------------------------------- */

.sc-mobile-menu {
	display: none; /* masaüstünde tamamen kapalı; media query'de açılır */
	position: fixed;
	inset: 0;
	z-index: 999; /* header (1000) üstte kalsın: logo + kapatma ikonu görünür */
	flex-direction: column;
	padding: calc(var(--sc-header-h) + 2.5rem) clamp(1.5rem, 7vw, 4rem) 3rem;
	background: var(--sc-bg); /* düz siyah, vurgu/ışıltı yok */
	color: var(--sc-text); /* kırık beyaz/gri — site geneliyle aynı */
	/* Overlay header'ın DIŞINDA olduğundan header fontunu miras almaz; her
	   sayfada (shop/ürün dahil) aynı görünsün diye açıkça atanır. */
	font-family: var(--sc-header-font);
	overflow: hidden; /* nav bounce'unun taşan üst/alt kısmını kırp */
	overscroll-behavior: contain;
	text-align: left;
	/* Siyah zemin belirir/söner; asıl hareket nav bloğunun düşmesi/kayması.
	   Kapanışta visibility, nav yukarı kayışı (0.5s) bitene kadar gecikir. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.65s ease, visibility 0s linear 0.75s;
}

.sc-mobile-menu * {
	box-sizing: border-box;
}

.sc-mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s;
}

/* Menü bloğu dikeyde ortalı + yatayda sola yaslı (margin-left:0).
   Genişlik = en uzun öğe (max-content) → baş harfler aynı dikey çizgide,
   blok ekranın soluna yapışır. overflow-x:hidden → yatay scroll çubuğu çıkmaz. */
.sc-mobile-menu__nav {
	margin: auto auto auto 0;
	width: max-content;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 100%;
}

/* JS hazır olduğunda (harfler bölündü): blok başlangıçta gizli, açılışta
   yukarıdan düşüp alta değince geri sekerek oturur. JS yoksa görünür kalır. */
.sc-mobile-menu.is-ready .sc-mobile-menu__nav {
	opacity: 0;
	/* Kapalı: yukarıda. Kapanışta buraya yavaş, yumuşak (ease-in-out) yukarı kayar. */
	transform: translateY(-110%);
	transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.55s ease;
}

.sc-mobile-menu.is-ready.is-open .sc-mobile-menu__nav {
	opacity: 1;
	transition: opacity 0.25s ease;
	/* Açılış: çoklu-bounce keyframe (transform'u devralır, base geçişini ezer). */
	animation: sc-nav-drop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Düşüş + bounce: üstten gelir, alta değer (3% taşar), geri seker (-2%),
   küçük sekme (1%), oturur. Yumuşak çoklu sekme. */
@keyframes sc-nav-drop {
	0%   { transform: translateY(-110%); }
	55%  { transform: translateY(3%); }
	74%  { transform: translateY(-2%); }
	88%  { transform: translateY(1%); }
	100% { transform: translateY(0); }
}

.sc-mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: stretch; /* öğeler blok genişliğine yayılır → çizgiler eşit */
}

/* Öğeler arasına ince, soluk gri ayraç (yalnız aralarda, dış kenarlarda yok). */
.sc-mobile-menu__list > li:not(:last-child) {
	border-bottom: 1px solid var(--sc-border);
}

.sc-mobile-menu__list a {
	display: block;
	padding: 1.1rem 0;
	color: inherit;
	text-decoration: none;
	text-align: left; /* baş harfler aynı dikey çizgide */
	font-size: clamp(1.75rem, 9vw, 3.25rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.sc-mobile-menu__list a:hover,
.sc-mobile-menu__list .current-menu-item > a {
	color: var(--sc-accent);
}

/* Harf-harf yazım: JS her üst-link harfini .sc-ltr span'ine sarar.
   Kapalıyken saydam; açılışta --sc-i (madde) + --sc-l (harf) sırasıyla belirir. */
.sc-ltr {
	display: inline-block;
}

.sc-mobile-menu.is-ready .sc-ltr {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.sc-mobile-menu.is-ready.is-open .sc-ltr {
	opacity: 1;
	transition-delay: calc(var(--sc-i, 0) * 0.09s + var(--sc-l, 0) * 0.03s + 0.15s);
}

/* Alt menü (Shop) — başlık sola hizalı (harf span'leri akışta kalsın diye
   flex DEĞİL block); + işareti sağa mutlak konumlanır. */
.sc-mobile-menu .menu-item-has-children > a {
	position: relative;
	padding-right: 1.5em;
}

.sc-mobile-menu .menu-item-has-children > a::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	font-size: 0.6em;
	font-weight: 300;
	line-height: 1;
	transform: translateY(-50%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-mobile-menu .menu-item-has-children.is-open > a::after {
	transform: translateY(-50%) rotate(45deg);
}

/* Akordiyon: grid-template-rows 0fr→1fr → tam içerik yüksekliğine yağ gibi
   açılır (max-height tahmininin sonda yarattığı takılma olmaz). */
.sc-mobile-menu .menu-item-has-children {
	display: grid;
	grid-template-rows: auto 0fr;
	justify-items: stretch; /* başlık + alt menü blok genişliğine yayılır */
	transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-mobile-menu .menu-item-has-children.is-open {
	grid-template-rows: auto 1fr;
}

.sc-mobile-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 0;
	overflow: hidden;
}

.sc-mobile-menu .menu-item-has-children.is-open > .sub-menu {
	padding-top: 1rem;
}

.sc-mobile-menu .sub-menu a {
	padding: 0.5rem 0;
	text-align: left;
	font-size: clamp(1.05rem, 4vw, 1.4rem);
	font-weight: 400;
	color: var(--sc-muted);
	/* Üst menüden gelen uppercase'i ez: kategori isimleri ilk harf büyük,
	   gerisi küçük (ör. "Sweatshirt"). */
	text-transform: capitalize;
}

.sc-mobile-menu .sub-menu a:hover,
.sc-mobile-menu .sub-menu .current-menu-item > a {
	color: var(--sc-accent);
}

/* Hareketi azalt tercihinde: bounce/yazım kapanır, içerik anında görünür. */
@media (prefers-reduced-motion: reduce) {

	.sc-mobile-menu.is-ready .sc-mobile-menu__nav,
	.sc-mobile-menu.is-ready.is-open .sc-mobile-menu__nav {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	.sc-mobile-menu.is-ready .sc-ltr {
		opacity: 1;
		transition: none;
	}

	.sc-mobile-menu.is-ready.is-open .sc-ltr {
		transition-delay: 0s;
	}

	.sc-mobile-menu .menu-item-has-children {
		transition: none;
	}

	.sc-burger::before,
	.sc-burger::after {
		transition: none;
	}
}

/* --- Mobil kırılım: masaüstü menüyü gizle, hamburger + overlay'i aç -------- */

@media (max-width: 880px) {

	.sc-site-header__nav {
		display: none;
	}

	.sc-menu-toggle {
		display: inline-flex;
	}

	.sc-mobile-menu {
		display: flex;
	}

	/* Eski/klasik bar (ghost olmayan sayfalar: sepet/ödeme/hesabım) mobilde
	   hamburger + arama ikonuna da yuvarlak buton kutusu verir. Ghost varyantı
	   zaten yüksek specificity'li kendi border-radius: 50% kuralına sahip
	   (header.css "Ghost header varyantı" bölümü), bu yüzden ghost sayfalarında
	   bu kural sessizce ezilir; çakışma yok. */
	/* border-radius'ta istisnai !important: Salient'in "Button Style" (Nectar
	   Options) ayarı body[data-button-style*="slightly_rounded"] button {
	   border-radius:4px !important } gibi site geneli bir kural üretiyor
	   (uploads/salient/salient-dynamic-styles.css). Bu, <button> etiketi
	   taşıyan HER elementi (bizimkiler dahil) etkiliyor; sepet <a> olduğu
	   için etkilenmiyor. !important olmayan hiçbir specificity bunu ezemez —
	   bu yüzden yalnızca burada zorunlu istisna yapılır. */
	.sc-menu-toggle,
	.sc-search-toggle {
		width: 2.5rem;
		height: 2.5rem;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid var(--sc-border);
		border-radius: 50% !important;
		transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	}

	.sc-menu-toggle:hover,
	.sc-menu-toggle:focus-visible,
	.sc-search-toggle:hover,
	.sc-search-toggle:focus-visible {
		background: var(--sc-accent);
		color: var(--sc-bg);
		border-color: var(--sc-accent);
	}

	/* Mobil yerleşim: arama solda (logonun eski yerinde) — logo ortada —
	   sepet + hamburger sağda. Markup aynı kalır (tek header partial'ı);
	   logo akıştan çıkarılıp bar'a göre ortalanır, aksiyon şeridi tüm
	   genişliği alır, arama `margin-right: auto` ile sola itilir. */
	.sc-site-header__inner {
		position: relative;
		gap: 0;
	}

	.sc-site-header__logo {
		position: absolute;
		left: 50%;
		top: 50%;
		/* transform DEĞİL: style.css'teki `a { transform: none !important }`
		   kuralı her <a> üstündeki transform'u öldürüyor. Bağımsız `translate`
		   özelliği o kuraldan etkilenmez. */
		translate: -50% -50%;
		/* Tıklanabilirlik için zorunlu: aksiyon şeridi (aşağıda flex:1 ile barın
		   tamamını kaplıyor) giriş animasyonunun `both` fill'i yüzünden kalıcı
		   `transform: translateY(0)` taşıyor → yığın bağlamı oluşturuyor ve
		   DOM'da logodan SONRA geldiği için şeffaf kutusu logonun üstüne
		   boyanıp tıklamayı yutuyordu. z-index logoyu tekrar üste alır. */
		z-index: 1;
	}

	/* Logo mobilde komşu daire butonlarla aynı kutu yüksekliğine iner (base'teki
	   `--sc-header-h - 2rem` ölçeği küçük ekranda iri duruyor). Değerler yukarıdaki
	   .sc-search-toggle/.sc-menu-toggle (2.5rem) ve ghost .sc-site-header__icon
	   (2.75rem, daralınca 2.4rem) kutularıyla birebir aynı. */
	.sc-site-header .sc-site-header__logo-img,
	.sc-site-header.is-shrunk .sc-site-header__logo-img {
		height: 2.5rem;
	}

	.sc-site-header.sc-header--ghost .sc-site-header__logo-img {
		height: 2.75rem;
	}

	.sc-site-header.sc-header--ghost.is-shrunk .sc-site-header__logo-img {
		height: 2.4rem;
	}

	.sc-site-header__actions {
		flex: 1 1 auto;
	}

	.sc-search-toggle {
		margin-right: auto;
	}
}

/* --- Sepet drawer'ı (sağdan açılır mini-cart) ----------------------------- */

body.sc-cart-open {
	overflow: hidden;
}

.sc-cart-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1090;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.sc-cart-drawer-backdrop.is-open {
	opacity: 1;
}

.sc-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	width: min(420px, 90vw);
	height: 100%;
	color: var(--sc-text);
	font-family: var(--sc-header-font);
	background: var(--sc-bg);
	border-left: 1px solid var(--sc-border);
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.sc-cart-drawer.is-open {
	transform: translateX(0);
}

.sc-cart-drawer.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.sc-cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem);
	border-bottom: 1px solid var(--sc-border);
}

.sc-cart-drawer__title {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sc-cart-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--sc-text);
	background: transparent;
	border: 1px solid var(--sc-border);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.sc-cart-drawer__close:hover {
	color: var(--sc-accent);
	border-color: var(--sc-accent);
}

/* Gövde: kayan ürün listesi. */
.sc-cart-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.sc-cart-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin: 2rem 0;
	color: var(--sc-muted);
	text-align: center;
	font-size: 0.85rem;
}

.sc-cart-drawer__empty p {
	margin: 0;
}

/* "Tüm Ürünler" — görünüm .sc-btn'den; renk, checkout butonundaki gibi
   Salient link kuralı araya girmesin diye drawer'a sarılarak sabitlenir. */
.sc-cart-drawer .sc-cart-drawer__shoplink {
	color: var(--sc-bg);
}

.sc-cart-drawer .sc-cart-drawer__shoplink:hover,
.sc-cart-drawer .sc-cart-drawer__shoplink:focus {
	color: var(--sc-accent);
}

.sc-cart-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sc-cart-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 0.9rem;
	align-items: start;
}

.sc-cart-item__media {
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
}

.sc-cart-item__media .sc-cart-item__img,
.sc-cart-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sc-cart-item__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sc-cart-item__name {
	color: var(--sc-text);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: color 0.3s ease;
}

.sc-cart-item__name:hover {
	color: var(--sc-accent);
}

.sc-cart-item__meta {
	color: var(--sc-muted);
	font-size: 0.72rem;
	line-height: 1.4;
}

.sc-cart-item__meta p {
	margin: 0;
}

.sc-cart-item__price {
	color: var(--sc-accent);
	font-size: 0.8rem;
}

/* Adet sayacı: tek çerçeve içinde [− n +]. */
.sc-cart-qty {
	display: inline-flex;
	align-items: stretch;
	align-self: flex-start;
	border: 1px solid var(--sc-border);
}

.sc-cart-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	color: var(--sc-text);
	background: transparent;
	border: 0;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease;
}

.sc-cart-qty__btn:hover {
	color: var(--sc-bg);
	background: var(--sc-accent);
}

.sc-cart-qty__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.sc-cart-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--sc-muted);
	background: transparent;
	border: 0;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.3s ease;
}

.sc-cart-item__remove:hover {
	color: var(--sc-accent);
}

/* Alt: ara toplam + temizle + linkler. */
.sc-cart-drawer__foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-top: 1px solid var(--sc-border);
}

.sc-cart-drawer.is-empty .sc-cart-drawer__foot {
	display: none;
}

.sc-cart-drawer__subline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.sc-cart-drawer__subtotal-label {
	color: var(--sc-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-cart-drawer__subtotal {
	color: var(--sc-text);
	font-size: 1rem;
	font-weight: 700;
}

/* "Sepeti Temizle" ürün listesinin en altında, sağa hizalı. */
.sc-cart-drawer .sc-cart-drawer__clearrow {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.9rem;
}

/* Boyut Salient'in button/link kurallarına göre değişmesin diye drawer'a
   sararak (specificity) ve font özelliklerini tek tek vererek kesin sabitliyoruz. */
.sc-cart-drawer .sc-cart-drawer__clear {
	padding: 0;
	color: var(--sc-muted);
	background: transparent;
	border: 0;
	font-family: var(--sc-header-font);
	font-size: 0.72rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: none;
	cursor: pointer;
	transition: color 0.3s ease;
}

.sc-cart-drawer .sc-cart-drawer__clear:hover {
	color: var(--sc-accent);
}

.sc-cart-drawer__links {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* İki link birebir aynı boyda olmalı: ikisi de tam genişlik blok-flex, aynı
   padding/border/box-sizing. inline-flex + parent'a esneme yerine sabit width
   kullanınca Salient araya girse de boy oynamaz ("sürekli değişiyor" çözümü). */
.sc-cart-drawer .sc-cart-drawer__cartlink {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	/* "Ödemeye geç" (.sc-btn) ile birebir aynı boy: padding/font/line-height eşit. */
	padding: 1rem 2rem;
	color: var(--sc-text);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--sc-border);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.sc-cart-drawer .sc-cart-drawer__cartlink:hover {
	color: var(--sc-accent);
	border-color: var(--sc-accent);
}

/* "Ödemeye geç" .sc-btn'den görünümünü alır; tam genişlik.
   Renk .sc-btn'e bırakılınca Salient'in link renk kuralı araya girip yazıyı
   karartabiliyordu ("bazen siyah bazen değil"); drawer'a sararak specificity'i
   yükseltip kendi rengini sabitliyoruz (!important'sız). */
.sc-cart-drawer .sc-cart-drawer__checkout {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem 2rem;
	color: var(--sc-bg);
}

.sc-cart-drawer .sc-cart-drawer__checkout:hover,
.sc-cart-drawer .sc-cart-drawer__checkout:focus {
	color: var(--sc-accent);
}

/* ==========================================================================
   "Ghost" header varyantı (sc-header--ghost)
   Bar tamamen şeffaf; logo, menü öğeleri ve ikonlar tek tek buton-görünümlü
   (hap/cam) sticky öğeler olarak durur. Varyant header-custom.php'de header'a
   verilen sc-header--ghost class'ıyla açılır; class silinirse eski siyah bar
   stillerine (yukarıdaki kurallar) otomatik geri dönülür.
   ========================================================================== */

.sc-site-header.sc-header--ghost,
.sc-site-header.sc-header--ghost.is-top,
.sc-site-header.sc-header--ghost.is-shrunk {
	/* Cam görünüm token'ı — yalnız dropdown (sub-menu) kullanıyor;
	   hap butonlar opak siyah zeminli. */
	--sc-pill-blur: blur(14px);
	background: transparent;
	border-bottom: 0;
	/* Barın kendisinde blur yok (blur öğelerde); ayrıca header'da
	   backdrop-filter fixed torunlar için containing block oluşturur. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Bar şeffafken alt kenar süs çizgisi (scroll accent'i) anlamsız — kapat. */
.sc-site-header.sc-header--ghost::after {
	display: none;
}

/* Arama paneli kapalıyken (grid 0fr) inner'ın border-top'u yine de 1px çizgi
   olarak taşar; opak barda bunu header'ın kendi alt çizgisi örtüyordu, şeffaf
   barda header altında asılı gri çizgi olarak görünür — kaldır. Panel açıkken
   ayırıcı görevi zaten ::before accent çizgisinde. */
.sc-site-header.sc-header--ghost .sc-site-header__search-inner {
	border-top: 0;
}

/* header.js içeriği fixed header'ın altına padding-top ile iter; bar siyahken
   o şeridi header örtüyordu, şeffafken altından beyaz body zemini görünür.
   Ghost yalnız koyu sayfalarda aktif olduğundan içerik sarmalını site
   siyahına boyamak güvenli (header ile #ajax-content-wrap body altında
   sibling → ~ ile seçilir). */
.sc-site-header.sc-header--ghost ~ #ajax-content-wrap {
	background-color: var(--sc-bg);
}

/* --- Logo: hapsız, sade — base stiller (hover scale + glow) aynen geçerli --- */

/* --- Menü öğeleri: her biri siyah zeminli hap buton --- */

.sc-site-header.sc-header--ghost .sc-menu {
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.sc-site-header.sc-header--ghost .sc-menu > li > a {
	padding: 0.5em 1.15em;
	background: var(--sc-bg);
	color: var(--sc-text);
	/* İnce + soluk accent çerçeve: yüksek DPI'da 0.5px hairline çizer (1x'te
	   1px'e yuvarlanır); renk accent'in %35 saydam hâli (rgba = #c8f04a). */
	border: 0.5px solid rgba(200, 240, 74, 0.35);
	border-radius: 999px;
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
	font-weight: 700;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-site-header.sc-header--ghost.is-shrunk .sc-menu > li > a {
	padding: 0.35em 0.95em;
}

/* Butonda alt çizgi efekti kullanılmaz; hover/aktif dili ters çevrim
   (accent zemin + siyah yazı). */
.sc-site-header.sc-header--ghost .sc-menu > li > a::after {
	content: none;
}

.sc-site-header.sc-header--ghost .sc-menu > li > a:hover,
.sc-site-header.sc-header--ghost .sc-menu > li.current-menu-item > a {
	background: var(--sc-accent);
	color: var(--sc-bg);
	border-color: var(--sc-accent);
}

/* Dropdown: yuvarlatılmış, hafif cam zemin. */
.sc-site-header.sc-header--ghost .sc-menu .sub-menu {
	border-radius: 1.1rem;
	overflow: hidden;
	background: rgba(10, 10, 10, 0.88);
	-webkit-backdrop-filter: var(--sc-pill-blur);
	backdrop-filter: var(--sc-pill-blur);
}

/* --- İkonlar (arama / sepet / hamburger): yuvarlak butonlar --- */
/* display bilinçli olarak verilmiyor: hamburger'ın masaüstünde gizlenmesi
   (.sc-menu-toggle { display:none }) bozulmasın. */

.sc-site-header.sc-header--ghost .sc-site-header__actions {
	gap: 0.6rem;
}

.sc-site-header.sc-header--ghost .sc-site-header__icon {
	width: 2.75rem;
	height: 2.75rem;
	background: var(--sc-bg);
	color: var(--sc-text);
	border: 1px solid var(--sc-border);
	/* !important zorunlu: Salient'in "Button Style" ayarı her <button>'a
	   border-radius:4px !important veriyor (yukarıdaki mobil kural bloğundaki
	   not aynen geçerli). Kural search/menu-toggle + cart (<a>) için ortak
	   olduğundan cart'ta değer zaten aynı (50%), etkisi yok/zararsız. */
	border-radius: 50% !important;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, width 0.35s ease, height 0.35s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-site-header.sc-header--ghost.is-shrunk .sc-site-header__icon {
	width: 2.4rem;
	height: 2.4rem;
}

.sc-site-header.sc-header--ghost .sc-site-header__icon:hover {
	background: var(--sc-accent);
	color: var(--sc-bg);
	border-color: var(--sc-accent);
	transform: scale(1.06);
}

/* Rozet butonun köşesine otursun (renkler base: accent zemin + siyah sayı —
   siyah butonda görünür). Hover'da buton sarıya dönünce rozet ters çevrilir
   ki kaybolmasın. */
.sc-site-header.sc-header--ghost .sc-cart-count {
	top: -0.2rem;
	right: -0.2rem;
}

.sc-site-header.sc-header--ghost .sc-site-header__cart:hover .sc-cart-count {
	background: var(--sc-bg);
	color: var(--sc-accent);
}