/* ==========================================================================
   Indri Ethnics — Custom Product Page (Aşama 1 pilotu)
   Koyu, minimal, büyük tipografi. Salient'ten tamamen bağımsız.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */

: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; /* geçici accent — sonra değişecek */
	--sc-font: "JetBrains Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--sc-gutter: clamp(1.25rem, 4vw, 4rem);
	--sc-header-h: 5rem;
}

/* --- Minimal reset (başka CSS yüklenmiyor) ------------------------------ */

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

.sc-product-page {
	margin: 0;
	background: var(--sc-bg);
	color: var(--sc-text);
	font-family: var(--sc-font);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.sc-product-page h1,
.sc-product-page h2,
.sc-product-page h3,
.sc-product-page p,
.sc-product-page figure {
	margin: 0;
}

.sc-product-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

.sc-product-page button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Admin bar düzeltmesi */
.sc-product-page.admin-bar .sc-header {
	top: 32px;
}

/* --- Header -------------------------------------------------------------- */

.sc-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--sc-header-h);
	padding: 0 var(--sc-gutter);
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0));
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	text-transform: uppercase;
}

.sc-header__menu {
	justify-self: start;
	letter-spacing: inherit;
	text-transform: inherit;
	font-size: inherit;
	padding: 0.5em 0;
	transition: color 0.3s ease;
}

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

.sc-header__logo {
	justify-self: center;
	display: inline-flex;
	align-items: center;
}

.sc-header__logo-img {
	max-height: 2.5rem;
	width: auto;
	filter: invert(1) brightness(1.4); /* koyu zeminde logo — gerçek logoya göre ayarlanacak */
}

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

.sc-header__cart {
	justify-self: end;
	padding: 0.5em 0;
	transition: color 0.3s ease;
}

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

/* --- Layout: sol galeri / sağ sticky panel ------------------------------- */

.sc-main {
	min-height: 100vh;
}

/* Bildirimler akıştan çıkıp header'ın altında modal/toast olarak yüzer;
   sayfa içeriğini itmez. */
.sc-notices {
	position: fixed;
	top: var(--sc-header-h);
	left: 0;
	right: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1rem var(--sc-gutter) 0;
	pointer-events: none;
}

.sc-product-page.admin-bar .sc-notices {
	top: calc(var(--sc-header-h) + 32px);
}

.sc-notices .woocommerce-message,
.sc-notices .woocommerce-error,
.sc-notices .woocommerce-info {
	pointer-events: auto;
	width: 100%;
	max-width: 34rem;
	margin: 0;
	list-style: none;
	padding: 1rem 1.25rem;
	border: 1px solid var(--sc-border);
	border-left: 3px solid var(--sc-accent);
	border-radius: 20px;
	background: var(--sc-surface);
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
	font-size: 0.9rem;
}

.sc-notices .woocommerce-error {
	border-left-color: #e05a4e;
}

.sc-notices a.button {
	color: var(--sc-accent);
	margin-left: 0.75em;
}

/* Başarı mesajı toast gibi: fade in → bekle → fade out (JS ile yönetilir).
   Başlangıç görünür; giriş opacity'si JS verir → JS yoksa mesaj kaybolmaz. */
.sc-notices .woocommerce-message {
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.sc-notices .woocommerce-message.sc-notice--pending {
	opacity: 0;
	transform: translateY(-12px);
}

.sc-notices .woocommerce-message.sc-notice--in {
	opacity: 1;
	transform: translateY(0);
}

.sc-notices .woocommerce-message.sc-notice--out {
	opacity: 0;
	transform: translateY(-12px);
}

/* --- Breadcrumb ----------------------------------------------------------- */
/* Görünüm ortak breadcrumb.css'te; burada yalnızca ürün sayfasına özel konum. */

.sc-breadcrumb {
	/* Notices artık akıştan çıktığı için header offset'ini breadcrumb üstlenir. */
	padding: calc(var(--sc-header-h) + 1.25rem) var(--sc-gutter) 0;
}

.sc-product {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--sc-gutter);
	padding: 1.5rem var(--sc-gutter) clamp(4rem, 10vh, 8rem);
	align-items: start;
}

/* Galeri: görseller alt alta akar */

.sc-product__gallery {
	display: grid;
	gap: clamp(1rem, 2vw, 2rem);
}

.sc-gallery__item {
	overflow: hidden;
	background: var(--sc-surface);
}

.sc-gallery__img {
	width: 100%;
	object-fit: cover;
	/* Hover zoom: scale in/out yumuşak, imleç takibi (origin) anlık-yumuşak. */
	transition: transform 0.4s ease, transform-origin 0.1s ease-out;
	will-change: transform;
}

/* Masaüstü işaretleyicide görselde zoom imleci. */
@media (hover: hover) and (pointer: fine) {
	.sc-gallery__item {
		cursor: zoom-in;
	}
}

/* --- Lightbox (mobilde görselin full hali) -------------------------------- */

.sc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 1.5rem;
	background: rgba(10, 10, 10, 0.96);
}

.sc-lightbox.is-open {
	display: flex;
}

.sc-lightbox__img {
	max-width: 100%;
	/* Alttaki kapatma butonuna yer bırak. */
	max-height: calc(100% - 5rem);
	width: auto;
	object-fit: contain;
}

/* Kapatma: görselin altında, accent paletine uygun. */
.sc-lightbox__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--sc-accent);
	background: transparent;
	border: 1px solid var(--sc-accent);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* Sticky bilgi paneli */

.sc-product__panel {
	align-self: stretch;
}

.sc-panel__sticky {
	position: sticky;
	top: calc(var(--sc-header-h) + 1rem);
	display: grid;
	gap: clamp(1.5rem, 3vh, 2.5rem);
	padding-top: clamp(1rem, 4vh, 3rem);
}

.sc-panel__title {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: capitalize;
}

.sc-panel__price {
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	color: var(--sc-accent);
	letter-spacing: 0.04em;
}

.sc-panel__price del {
	/* Üstü çizili (eski) fiyat: soluk, siyaha yakın gri. */
	color: rgba(214, 209, 196, 0.3);
	margin-right: 0.6em;
}

.sc-panel__price ins {
	text-decoration: none;
}

.sc-panel__short-desc {
	color: var(--sc-muted);
	font-size: 0.95rem;
	max-width: 38ch;
}

/* --- WooCommerce add-to-cart formu --------------------------------------- */

.sc-panel__cart form.cart {
	display: grid;
	gap: 1.25rem;
}

/* Varyasyon satırları blok düzene çevrilir; "Beden:"/"Renk:" etiketleri ve
   eklentinin oraya yazdığı seçili değerler gizlenir — sadece swatch'lar kalır. */
.sc-panel__cart table.variations,
.sc-panel__cart table.variations td.value {
	display: block;
	width: 100%;
}

/* Birden çok özellik (Beden + Renk) alt alta değil yan yana dizilir. */
.sc-panel__cart table.variations tbody {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5rem;
}

.sc-panel__cart table.variations tr {
	display: block;
	width: auto;
}

.sc-panel__cart table.variations th.label {
	display: none;
}

.sc-panel__cart table.variations td.value {
	padding: 0;
	text-align: left;
}

.sc-panel__cart .variations select {
	width: 100%;
	padding: 1rem 2.75rem 1rem 1.25rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sc-bg);
	background-color: var(--sc-accent);
	border: 1px solid var(--sc-accent);
	border-radius: 999px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.25rem center;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.sc-panel__cart .variations select:hover,
.sc-panel__cart .variations select:focus {
	outline: none;
	background-color: transparent;
	color: var(--sc-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c8f04a' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Açılan native liste koyu zeminde okunur kalsın. */
.sc-panel__cart .variations select option {
	color: var(--sc-text);
	background: var(--sc-surface);
}

/* --- Varyasyon swatch butonları (Woo Variation Swatches: S/M, L/XL …) ----- */
/* Eklenti CSS'i dequeue edildi; stil tamamen burada. Sepete ekle butonuyla
   aynı dil: seçili = accent dolgu, diğerleri border'lı, hover'da accent. */

.sc-panel__cart .variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-panel__cart .variable-items-wrapper .variable-item {
	display: flex;
	margin: 0;
	border: 1px solid var(--sc-border);
	/* Header'daki hap butonlarla aynı dil: oval. */
	border-radius: 999px;
	overflow: hidden;
	background: var(--sc-surface);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	/* eklentinin sabit kare swatch boyutunu sıfırla */
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
}

.sc-panel__cart .variable-items-wrapper .variable-item .variable-item-contents {
	margin: 0;
	border: 0;
}

.sc-panel__cart .variable-items-wrapper .variable-item .variable-item-span {
	display: block;
	padding: 0.85rem 1.4rem;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sc-text);
}

.sc-panel__cart .variable-items-wrapper .variable-item:hover {
	border-color: var(--sc-accent);
}

.sc-panel__cart .variable-items-wrapper .variable-item:hover .variable-item-span {
	color: var(--sc-accent);
}

.sc-panel__cart .variable-items-wrapper .variable-item:focus,
.sc-panel__cart .variable-items-wrapper .variable-item:focus-visible {
	outline: none;
	border-color: var(--sc-accent);
}

.sc-panel__cart .variable-items-wrapper .variable-item.selected {
	background: var(--sc-accent);
	border-color: var(--sc-accent);
}

.sc-panel__cart .variable-items-wrapper .variable-item.selected .variable-item-span {
	color: var(--sc-bg);
}

/* Mevcut kombinasyonda seçilemeyen (uyumsuz) seçenek */
.sc-panel__cart .variable-items-wrapper .variable-item.disabled,
.sc-panel__cart .variable-items-wrapper .variable-item[aria-disabled="true"] {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Renk swatch'ları: yazı yerine renk kutusu. İç span'ın background'u
   eklentinin inline style'ından gelir; tanımsız renge fallback verilir. */
.sc-panel__cart .variable-items-wrapper .color-variable-item .variable-item-span-color {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background-color: var(--sc-surface);
	background-size: cover;
	background-position: center;
}

/* "Beyaz" rengi admin'de tanımsız (inline background boş) — görünür kalsın. */
.sc-panel__cart .variable-items-wrapper .color-variable-item-beyaz .variable-item-span-color {
	background-color: #f3f1ec;
}

/* Renk seçiliyse rengi gizlememek için dolgu yerine accent halka. */
.sc-panel__cart .variable-items-wrapper .color-variable-item.selected {
	background: transparent;
	border-color: var(--sc-accent);
	box-shadow: 0 0 0 2px var(--sc-accent);
}

.sc-panel__cart .reset_variations {
	font-size: 0.8rem;
	color: var(--sc-muted);
	text-decoration: underline;
}

.sc-panel__cart .woocommerce-variation-price {
	margin-bottom: 0.75rem;
}

.sc-panel__cart .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--sc-border);
	/* Header'daki hap butonlarla aynı dil: oval; iç butonlar kırpılır. */
	border-radius: 999px;
	overflow: hidden;
}

.sc-panel__cart .quantity .minus,
.sc-panel__cart .quantity .plus {
	width: 3rem;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--sc-text);
	background: var(--sc-surface);
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.sc-panel__cart .quantity .minus:hover,
.sc-panel__cart .quantity .plus:hover {
	background: var(--sc-accent);
	color: var(--sc-bg);
}

.sc-panel__cart .quantity .qty {
	width: 3.5rem;
	padding: 0.85rem 0.25rem;
	font: inherit;
	text-align: center;
	color: var(--sc-text);
	background: var(--sc-surface);
	border: 0;
	border-left: 1px solid var(--sc-border);
	border-right: 1px solid var(--sc-border);
	border-radius: 0;
	/* Native artış/azalış oklarını gizle (sadece .plus/.minus kullanılır). */
	-moz-appearance: textfield;
	appearance: textfield;
}

.sc-panel__cart .quantity .qty::-webkit-outer-spin-button,
.sc-panel__cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sc-panel__cart .quantity .qty:focus {
	outline: none;
}

.sc-panel__cart .woocommerce-variation-add-to-cart,
.sc-panel__cart form.cart:not(.variations_form) {
	display: flex;
	gap: 0.75rem;
	align-items: stretch;
}

/* Görünüm paylaşılan buttons.css'ten gelir; burada layout + oval köşe
   (header hap butonlarıyla aynı dil — yalnız ürün paneli, .sc-btn geneline değil).
   Radius selektörü body class'ıyla güçlendirildi: buttons.css'in
   .sc-panel__cart .single_add_to_cart_button { border-radius: 0 } kuralı aynı
   specificity'de ve daha sonra yükleniyor, yoksa onu ezemez. */
.sc-panel__cart .single_add_to_cart_button {
	flex: 1;
}

.sc-product-page .sc-panel__cart .single_add_to_cart_button {
	border-radius: 999px;
}

.sc-panel__cart .single_add_to_cart_button.disabled,
.sc-panel__cart .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	opacity: 0.35;
	cursor: not-allowed;
}

.sc-panel__cart .stock {
	font-size: 0.85rem;
	color: var(--sc-muted);
}

.sc-panel__cart .stock.out-of-stock {
	color: #e05a4e;
}

/* --- Accordion ------------------------------------------------------------ */

.sc-accordion {
	border-top: 1px solid var(--sc-border);
}

.sc-accordion__item {
	border-bottom: 1px solid var(--sc-border);
}

/* Toggle başlıkları h2 (SEO hiyerarşisi: h1 ürün adı → h2 bölümler).
   Button `font: inherit` aldığı için h2'nin varsayılan boyut/kalınlığı nötrlenir. */
.sc-accordion__heading {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
}

.sc-accordion__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1.1rem 0;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	transition: color 0.3s ease;
}

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

.sc-accordion__icon {
	font-size: 1.1rem;
	line-height: 1;
	transition: transform 0.35s ease;
}

.sc-accordion__item.is-open .sc-accordion__icon {
	transform: rotate(45deg);
}

/* grid-rows 0fr→1fr hilesiyle yumuşak aç/kapa */
.sc-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s ease;
}

.sc-accordion__item.is-open .sc-accordion__panel {
	grid-template-rows: 1fr;
}

.sc-accordion__content {
	overflow: hidden;
	min-height: 0;
	color: var(--sc-muted);
	font-size: 0.95rem;
}

.sc-accordion__item.is-open .sc-accordion__content {
	padding-bottom: 1.25rem;
}

/* Akordiyon içi metin tipografisi (uzun açıklama + ortak içerikler) */
.sc-accordion__content > * + * {
	margin-top: 0.85em;
}

.sc-accordion__content h3 {
	margin-top: 2em;
	margin-bottom: 2em;
	color: var(--sc-text);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Liste bitiminden sonraki paragrafa bir satır boşluk hissi */
.sc-accordion__content ul + p {
	margin-top: 2em;
}

.sc-accordion__content ul,
.sc-accordion__content ol {
	margin: 0;
	padding-left: 1.15em;
}

.sc-accordion__content li + li {
	margin-top: 0.35em;
}

.sc-accordion__content strong {
	color: var(--sc-text);
	font-weight: 500;
}

/* Metin içi bağlantılar: gövde metni gri (--sc-muted) olduğu için link beyaz +
   alt çizgili olsun, tıklanabilirliği renkten bağımsız da anlaşılsın.
   (İade & Değişim akordiyonundaki İletişim / Mesafeli Satış Sözleşmesi.) */
.sc-accordion__content a {
	color: var(--sc-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.3s ease;
}

.sc-accordion__content a:hover,
.sc-accordion__content a:focus-visible {
	color: var(--sc-accent);
}

.sc-accordion__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.sc-accordion__content table th,
.sc-accordion__content table td {
	padding: 0.5rem 0;
	text-align: left;
	border-bottom: 1px solid var(--sc-border);
}

.sc-accordion__content table th {
	color: var(--sc-text);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
	padding-right: 1rem;
}

/* --- Beden ölçü tablosu (akordiyon içi) ------------------------------------ */
/* Markup: templates/parts/size-guide.php — ürün başlığı + iki duraklı ray
   (S/M, L/XL) + seçili bedenin ölçüleri. Raydaki iki durak eşit genişlikte
   hücrelerin ortasına oturur, çizgi hücrelerin altından uçlara kadar geçer. */

.sc-sizes {
	padding-top: 0.35rem;
}

.sc-sizes__group + .sc-sizes__group {
	margin-top: 2.6rem;
	padding-top: 2.2rem;
	border-top: 1px solid var(--sc-border);
}

/* Selektör iki class'la güçlendirildi: yukarıdaki `.sc-accordion__content h3`
   kuralı (2em üst/alt boşluk) aynı özgüllükte olduğu için aksi halde kazanır. */
.sc-sizes .sc-sizes__name {
	margin: 0 0 1.9rem;
	color: var(--sc-text);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sc-sizes__track {
	position: relative;
	display: flex;
	margin-bottom: 1.6rem;
}

/* Rayın çizgisi: durak noktalarının merkez hizasında. */
.sc-sizes__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	height: 1px;
	background: var(--sc-border);
}

.sc-sizes__opt {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 0;
	color: var(--sc-muted);
	transition: color 0.3s ease;
}

.sc-sizes__label {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: opacity 0.3s ease;
}

.sc-sizes__dot {
	width: 11px;
	height: 11px;
	border: 1px solid var(--sc-border);
	border-radius: 50%;
	background: var(--sc-bg);
	transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.sc-sizes__opt:hover {
	color: var(--sc-text);
}

.sc-sizes__opt:hover .sc-sizes__dot {
	border-color: var(--sc-text);
}

.sc-sizes__opt.is-active {
	color: var(--sc-text);
}

.sc-sizes__opt.is-active .sc-sizes__dot {
	background: var(--sc-accent);
	border-color: var(--sc-accent);
	box-shadow: 0 0 0 4px rgba(200, 240, 74, 0.14);
}

.sc-sizes__opt:focus-visible {
	outline: 1px solid var(--sc-accent);
	outline-offset: 4px;
}

/* İki ölçü seti aynı grid hücresinde üst üste durur: yükseklik en uzun sete
   göre sabitlenir, beden değişiminde akordiyon zıplamaz. */
.sc-sizes__tables {
	display: grid;
}

.sc-sizes__specs {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
	gap: 1.1rem 0.75rem;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.sc-sizes__specs.is-active {
	opacity: 1;
	visibility: visible;
}

.sc-sizes__spec-label {
	margin: 0 0 0.45rem;
	color: var(--sc-text);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sc-sizes__spec-value {
	margin: 0;
	color: var(--sc-muted);
	font-size: 0.95rem;
}

.sc-sizes__unit {
	margin-left: 0.2em;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
}

/* Üst boşluk gruplar arası boşluktan (2.6rem) belirgin biçimde büyük: not,
   ölçü setinin devamı değil, bölümün kapanışı olarak okunsun.
   Selektör iki class'la güçlendirildi: sayfa başındaki `.sc-product-page p`
   reset'i (`margin: 0`) daha özgül olduğu için aksi halde kazanır. */
.sc-sizes .sc-sizes__note {
	margin-top: 3.4rem;
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--sc-muted);
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.sc-sizes__specs {
		transition: none;
	}
}

/* --- Footer ---------------------------------------------------------------- */

.sc-footer {
	border-top: 1px solid var(--sc-border);
	padding: 2.5rem var(--sc-gutter);
}

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

.sc-footer__brand {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sc-footer__meta {
	font-size: 0.8rem;
	color: var(--sc-muted);
}

/* --- Animasyon başlangıç durumları (JS yüklenince devreye girer) ----------- */
/* FOUC önleme: opacity'i CSS değil JS set eder; JS yoksa içerik görünür kalır. */

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

@media (max-width: 900px) {

	.sc-product {
		grid-template-columns: 1fr;
	}

	/* Galeri: alt alta yerine yatay, snap'li slider */
	.sc-product__gallery {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sc-product__gallery::-webkit-scrollbar {
		display: none;
	}

	.sc-gallery__item {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}

	.sc-panel__sticky {
		position: static;
		padding-top: 0;
	}

	.sc-header {
		font-size: 0.72rem;
	}
}

/* --- İlginizi Çekebilecek Ürünler (4 rastgele ürün) ------------------------ */
/* Kart görünümü paylaşılan cards.css'ten; buradaki kart iç ayarları shop
   grid'iyle (shop.css .sc-shop__grid blokları) birebir aynı tutulur. */

/* Üst boşluk küçük: ürün bölümünün kendi alt padding'i zaten geniş. */
.sc-related {
	padding: clamp(1rem, 2vh, 1.5rem) var(--sc-gutter) 0;
}

.sc-related a {
	text-decoration: none;
}

/* Boyut text sayfası gövde yazısıyla aynı (page.css .sc-textpage p: 1rem);
   büyük harf dönüşümü yok — kelime başları PHP'deki metinden geliyor.
   Selektör .sc-related ile sarılı (0,2,0): .sc-product-page h2 { margin:0 }
   kuralını (0,1,1) ezsin diye — yoksa alt boşluk sıfırlanıyor. */
.sc-related .sc-related__title {
	/* Kartlarla arasında rahat nefes payı (bitişik durmasın). */
	margin: 0 0 clamp(2.25rem, 4vw, 3rem);
	text-align: left;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--sc-text);
}

.sc-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
}

.sc-related__grid .sc-card {
	padding: 0.6rem;
	border: 0;
}

.sc-related__grid .sc-card__body {
	padding: 1rem 0.6rem 0.6rem;
}

/* .sc-product-page img { height:auto } kuralını ezer (0,2,0 > 0,1,1):
   kare kırpım (aspect-ratio + object-fit cover) korunur. */
.sc-related__grid .sc-card__img {
	height: 100%;
}

/* "İncele" — shop kartıyla aynı düz sarı link + hover'da soldan açılan çizgi. */
.sc-related__grid .sc-card__view {
	position: relative;
	margin-top: auto;
	align-self: flex-start;
	padding-top: 0.5rem;
	color: var(--sc-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.sc-related__grid .sc-card__view::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	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-related__grid .sc-card__view:hover::after,
.sc-related__grid .sc-card__view:focus-visible::after {
	transform: scaleX(1);
}

/* Mobil: 2 üstte 2 altta (site mobil kırılımıyla aynı eşik). */
@media (max-width: 880px) {
	.sc-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Başlık mobilde breadcrumb ile aynı boyutta (.sc-breadcrumb: 0.75rem). */
	.sc-related .sc-related__title {
		font-size: 0.75rem;
	}
}

@media (max-width: 520px) {
	.sc-related__grid {
		gap: 0.75rem;
	}

	.sc-related__grid .sc-card__body {
		padding: 0.85rem 0.5rem 0.5rem;
	}
}