/*
 * Mağaza sayfası sitenin "dark" sayfa arka planının üstüne açık (light) bir panel
 * olarak oturuyor — aynı Hakkımızda / İletişim sayfalarında kullanılan mavi tonu
 * (#1e73be) ve açık/okunabilir renk paleti kullanılıyor. Tema/sayfa arka planından
 * renk sızmasını önlemek için arka plan ve metin renkleri !important ile sabitlendi.
 */
/*
 * Avada'nın sayfa içerik sütunu genellikle header'dan çok daha dar (sidebar/
 * container genişliği). .tm-shop'a verilen max-width bu dar üst kapsayıcının
 * İÇİNDE kaldığı için tek başına işe yaramıyordu — bu yüzden dış sarmalayıcı,
 * hangi kapsayıcının içine konursa konsun kendini görünüm genişliğine (viewport)
 * taşıyor; gerçek panel genişliği hâlâ içerideki .tm-shop'un max-width'i ile sınırlı.
 */
/*
 * Bu renk değişkenleri bilerek :root'a (sayfanın tamamına) tanımlanıyor, sadece
 * .tm-shop'a değil. Sebep: ürün pop-up'ı (.tm-modal) JS ile <body>'nin doğrudan
 * altına taşınıyor (bkz. frontend.js) — yani artık .tm-shop'un İÇİNDE değil, onun
 * KARDEŞİ. Değişkenler sadece .tm-shop'ta tanımlı kalsaydı, pop-up onları hiç
 * göremez ve var(--tm-accent) gibi kullanımlar (fallback'siz) tamamen boşa
 * düşerdi — tam olarak "Ara butonu kayboluyor" ve "başlık soluk görünüyor"
 * hatalarının sebebi buydu. --tm-* öneki benzersiz olduğu için :root'a
 * tanımlamak temanın hiçbir şeyiyle çakışmaz.
 */
:root {
	--tm-accent: #1e73be;
	--tm-accent-dark: #15548c;
	--tm-text: #1a2027;
	--tm-text-muted: #5b6672;
	--tm-radius: 14px;
	--tm-border: #e4e8ec;
}

.tm-shop-outer {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.tm-shop {
	max-width: 1680px;
	margin: 0 auto;
	padding: 32px 40px 48px;
	box-sizing: border-box;
	background: #ffffff !important;
	border-radius: 20px;
	box-shadow: 0 1px 3px rgba(20, 30, 50, .06);
}
.tm-shop,
.tm-shop * {
	box-sizing: border-box;
}
.tm-shop p,
.tm-shop h1,
.tm-shop h2,
.tm-shop h3,
.tm-shop span,
.tm-shop button,
.tm-shop input,
.tm-shop a {
	text-shadow: none !important;
}

.tm-shop__header {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	margin-bottom: 28px;
}
.tm-shop__title {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 800;
	margin: 0 0 8px !important;
	color: var(--tm-text) !important;
}
.tm-shop__subtitle {
	display: block !important;
	text-align: center !important;
	font-size: 16px;
	color: var(--tm-text-muted) !important;
	max-width: 640px;
	margin: 0 auto !important;
}

.tm-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.tm-shop__tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.tm-tab {
	border: 1px solid var(--tm-border);
	background: #f5f7f9 !important;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-text) !important;
	cursor: pointer;
	transition: all .15s ease;
}
.tm-tab:hover {
	border-color: var(--tm-accent);
	color: var(--tm-accent) !important;
}
.tm-tab.is-active {
	background: var(--tm-accent) !important;
	border-color: var(--tm-accent);
	color: #fff !important;
}

.tm-shop__search input {
	border: 1px solid var(--tm-border) !important;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	min-width: 220px;
	outline: none;
	background: #ffffff !important;
	color: var(--tm-text) !important;
}
.tm-shop__search input::placeholder {
	color: #9aa2ab !important;
	opacity: 1;
}
.tm-shop__search input:focus {
	border-color: var(--tm-accent) !important;
}

.tm-shop__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
}

/* Çok geniş ekranlarda kartların aşırı büyüyüp boşluk hissi vermesini önler. */
@media (min-width: 1100px) {
	.tm-shop__grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
		justify-content: start;
	}
}

.tm-card-urun {
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	overflow: hidden;
	background: #ffffff !important;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: box-shadow .2s ease, transform .2s ease;
}
.tm-card-urun:hover {
	box-shadow: 0 10px 24px rgba(20, 30, 50, .1);
	transform: translateY(-2px);
}
/* Kartın kendisi tıklanabilir (ürün önizlemesini açar); WhatsApp/Ara butonları
   kendi bağlantısını normal şekilde çalıştırmaya devam eder (imleç normale döner). */
.tm-card-urun__actions .tm-btn {
	cursor: pointer;
}

.tm-card-urun__img {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: #f4f6f8 !important;
	overflow: hidden;
}
/* Galeri fotoğrafları birbirinin üstünde üst üste durur; sadece .is-active
   olan gösterilir — birden fazla görsel arasında ok ile geçiş bu şekilde yapılır. */
.tm-card-urun__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}
.tm-card-urun__foto.is-active {
	display: block;
}
.tm-card-urun__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tm-icon-box {
	width: 48px;
	height: 48px;
	border: 3px solid #cfd4d9;
	border-radius: 10px;
	display: inline-block;
}

.tm-pill {
	position: absolute;
	top: 10px;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	color: #fff !important;
}
.tm-pill--star {
	left: 10px;
	background: #f0ab00 !important;
	color: #332700 !important;
}
.tm-pill--tukendi {
	right: 10px;
	background: #c0392b !important;
}

/* Galeri ok/nokta göstergeleri: ana kartta tıklamaya gerek yok (zaten pop-up açar),
   bu yüzden burada gizli kalır — sadece pop-up açıldığında (.tm-modal__img içinde)
   görünür ve tıklanabilir hâle gelir. */
.tm-galeri-ok,
.tm-galeri-noktalar {
	display: none;
}
.tm-modal__img .tm-galeri-ok {
	display: flex !important;
}
.tm-modal__img .tm-galeri-noktalar {
	display: flex !important;
}
.tm-galeri-ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--tm-text, #1a2027);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	padding: 0;
}
.tm-galeri-ok:hover {
	background: #fff;
}
.tm-galeri-ok--prev {
	left: 10px;
}
.tm-galeri-ok--next {
	right: 10px;
}
.tm-galeri-noktalar {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	justify-content: center;
	align-items: center;
	gap: 6px;
	z-index: 3;
}
.tm-galeri-nokta {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
}
.tm-galeri-nokta.is-active {
	background: #fff;
	width: 16px;
	border-radius: 3px;
}

.tm-card-urun__body {
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	background: #ffffff !important;
}
.tm-card-urun__ad {
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	color: var(--tm-text) !important;
	line-height: 1.35;
}
.tm-card-urun__aciklama {
	font-size: 13px;
	color: var(--tm-text-muted) !important;
	margin: 0;
	line-height: 1.4;
}
/* Uzun açıklama ana kartta hiç görünmez; sadece pop-up açıldığında
   (.tm-modal__body içinde) aşağıdaki kural ile ortaya çıkar. */
.tm-card-urun__uzun-aciklama {
	display: none;
}
.tm-modal__body .tm-card-urun__uzun-aciklama {
	display: block !important;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--tm-border, #e4e8ec);
	font-size: 13px;
	color: var(--tm-text-muted, #5b6672) !important;
	line-height: 1.6;
}
.tm-modal__body .tm-card-urun__uzun-baslik {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tm-text, #1a2027) !important;
	margin-bottom: 6px;
}
.tm-card-urun__fiyat {
	margin-top: auto;
}
.tm-fiyat {
	font-size: 18px;
	font-weight: 800;
	color: var(--tm-accent-dark) !important;
}
.tm-fiyat--yok {
	font-size: 13px;
	font-weight: 600;
	color: #9a6b00 !important;
	background: #fff6e0 !important;
	padding: 4px 10px;
	border-radius: 999px;
	display: inline-block;
}

.tm-card-urun__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 4px;
}
.tm-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .15s ease, transform .15s ease;
	/* Grid/flex öğeleri varsayılan olarak içeriğin tamamı kadar minimum genişlik
	   ister (min-width:auto); bu da dar kartlarda sağdaki butonun kırpılmasına
	   yol açıyordu. min-width:0 ile butonun gerektiğinde küçülmesine izin verip,
	   metni taşma yerine üç nokta ile kesiyoruz — "Ara" kelimesi artık kesilmez. */
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tm-btn:hover {
	opacity: .88;
	transform: translateY(-1px);
}
.tm-btn__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.tm-btn--whatsapp {
	background: #25d366 !important;
	color: #fff !important;
}
.tm-btn--ara {
	background: var(--tm-accent) !important;
	color: #fff !important;
}

.tm-shop__empty,
.tm-shop__noresult {
	text-align: center;
	color: var(--tm-text-muted) !important;
	padding: 40px 0;
	font-size: 15px;
}

@media (max-width: 480px) {
	.tm-shop {
		padding: 24px 16px 36px;
		border-radius: 14px;
	}
	.tm-shop__toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	/* Kategori sekmeleri (Tümü / Aksesuarlar / Telefonlar) her zaman yan yana,
	   tek satırda kalsın; sığmazsa alt satıra düşmek yerine yana doğru kayar. */
	.tm-shop__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
		margin: 0 -16px;
		padding-left: 16px;
		padding-right: 16px;
	}
	.tm-shop__tabs::-webkit-scrollbar {
		display: none;
	}
	.tm-tab {
		flex: 0 0 auto;
		padding: 7px 14px;
		font-size: 13px;
		white-space: nowrap;
	}
	.tm-shop__search input {
		width: 100%;
	}
	.tm-shop__grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 14px;
	}
	/* 150-190px genişliğindeki dar kartlarda WhatsApp + Ara butonları yan yana
	   sığmıyordu ("Ara" kırpılıyordu). Mobilde butonları alt alta, tam genişlikte
	   göstererek her iki metnin de her zaman tam okunmasını garantiliyoruz. */
	.tm-card-urun__actions {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.tm-btn {
		padding: 10px;
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------ */
/* Ürün hızlı önizleme (quick view) popup'ı                            */
/* ------------------------------------------------------------------ */

.tm-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.tm-modal.is-open {
	display: flex;
}
.tm-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 16, 22, .62);
}
.tm-modal__box {
	position: relative;
	background: #ffffff;
	border-radius: 18px;
	width: 100%;
	max-width: 420px;
	max-height: 88vh;
	overflow-y: auto;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	animation: tm-modal-in .18s ease;
}
@keyframes tm-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.tm-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .92);
	color: var(--tm-text, #1a2027);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.tm-modal__close:hover {
	background: #fff;
}
.tm-modal__img {
	border-radius: 18px 18px 0 0;
	overflow: hidden;
}
/* Modal içine klonlanan .tm-card-urun__img zaten 3:4 oranını ve rozetleri
   taşıyor; burada sadece üst köşeleri yuvarlayan bir çerçeve görevi görür. */
.tm-modal__img .tm-card-urun__img {
	aspect-ratio: 3 / 4;
	max-height: 50vh;
}
.tm-modal__body {
	padding: 4px 2px;
}
.tm-modal__body .tm-card-urun__ad {
	font-size: 19px;
}
.tm-modal__body .tm-card-urun__body {
	padding: 16px 20px 22px;
	gap: 10px;
}
.tm-modal__body .tm-fiyat {
	font-size: 22px;
}

@media (max-width: 480px) {
	.tm-modal {
		padding: 0;
		align-items: flex-end;
	}
	.tm-modal__box {
		max-width: 100%;
		max-height: 85vh;
		border-radius: 18px 18px 0 0;
		animation: tm-modal-in-mobile .2s ease;
	}
	@keyframes tm-modal-in-mobile {
		from { opacity: 0; transform: translateY(24px); }
		to { opacity: 1; transform: translateY(0); }
	}
}