/* =============================================================
   STBalloonAtelier — Mağaza sayfası
   Düzen referans görselden: Örnek görseller/urunler-ornek.png
   ============================================================= */

/* -------------------------------------------------------------
   Genel düzen: mobilde tek sütun, masaüstünde solda filtre
   ------------------------------------------------------------- */
/* Duzen Bootstrap satir/sutunlarindan gelir: mobilde tek sutun,
   lg'de solda 3 birim filtre, sagda 9 birim liste.
   Sutunlar yukaridan hizalanir ki filtre paneli uzasa bile
   liste yukari yapisik kalsin. */
.stba-magaza-duzen {
	align-items: flex-start;
}

.stba-magaza-sonuc {
	min-width: 0;
	transition: opacity 150ms ease;
}

.stba-magaza-sonuc[data-yukleniyor="true"] {
	opacity: .45;
	pointer-events: none;
}

/* -------------------------------------------------------------
   Filtre paneli
   ------------------------------------------------------------- */
/* Panel cercevesi Bootstrap .card'dan gelir. */
.stba-filtre {
	padding: 1.25rem;
}

.stba-filtre__ust {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
	padding-bottom: .875rem;
	border-bottom: 1px solid var(--stba-beige);
}

.stba-filtre__baslik {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-family: var(--stba-font-govde);
	font-size: var(--stba-fs-orta);
	font-weight: 600;
	color: var(--stba-charcoal);
}

.stba-filtre__baslik svg {
	color: var(--stba-rosewood);
}

.stba-filtre__temizle {
	margin-left: auto;
	font-size: var(--stba-fs-kucuk);
	color: var(--stba-rosewood);
	text-decoration: underline;
	white-space: nowrap;
}

.stba-filtre__kapat {
	display: none;
}

/* Açılır kapanır grup. */
.stba-filtre__grup {
	border-bottom: 1px solid var(--stba-beige);
	padding-bottom: .75rem;
	margin-bottom: .75rem;
}

.stba-filtre__grup:last-of-type {
	border-bottom: 0;
	margin-bottom: 0;
}

.stba-filtre__grup-baslik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 0;
	font-size: var(--stba-fs-govde);
	font-weight: 600;
	color: var(--stba-charcoal);
	cursor: pointer;
	list-style: none;
}

.stba-filtre__grup-baslik::-webkit-details-marker {
	display: none;
}

/* Kendi ok işaretimiz. */
.stba-filtre__grup-baslik::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--stba-gray);
	border-bottom: 1.5px solid var(--stba-gray);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--stba-gecis);
}

.stba-filtre__grup[open] > .stba-filtre__grup-baslik::after {
	transform: rotate(-135deg) translateY(-2px);
}

.stba-filtre__liste {
	margin: .25rem 0 0;
	padding: 0;
	list-style: none;
}

.stba-onay {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 34px;
	padding: .125rem 0;
	font-size: var(--stba-fs-govde);
	color: var(--stba-gray);
	cursor: pointer;
}

.stba-onay:hover {
	color: var(--stba-charcoal);
}

.stba-onay input[type="checkbox"] {
	width: 17px;
	height: 17px;
	min-height: 0;
	flex: none;
	margin: 0;
	accent-color: var(--stba-rosewood);
	cursor: pointer;
}

.stba-renk-nokta {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: none;
	border-radius: var(--stba-r-hap);
	border: 1px solid var(--stba-beige);
}

.stba-filtre__sayi {
	margin-left: auto;
	font-size: var(--stba-fs-kucuk);
	color: var(--stba-gray);
	opacity: .8;
}

.stba-filtre__kategori {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 34px;
	color: var(--stba-gray);
	font-size: var(--stba-fs-govde);
}

.stba-filtre__kategori:hover {
	color: var(--stba-rosewood);
}

.stba-filtre__kategori--etkin {
	color: var(--stba-rosewood);
	font-weight: 600;
}

/* Fiyat kaydıraçları: iki kaydırac aynı rayı paylaşır. */
.stba-fiyat__kaydiraclar {
	position: relative;
	height: 28px;
	margin-top: .25rem;
}

.stba-fiyat__kaydiraclar input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.stba-fiyat__kaydiraclar input[type="range"]::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: var(--stba-r-hap);
	background: var(--stba-soft-blush);
}

.stba-fiyat__kaydiraclar input[type="range"]::-moz-range-track {
	height: 3px;
	border-radius: var(--stba-r-hap);
	background: var(--stba-soft-blush);
}

.stba-fiyat__kaydiraclar input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -8px;
	border: 2px solid var(--stba-white);
	border-radius: var(--stba-r-hap);
	background: var(--stba-rosewood);
	box-shadow: var(--stba-golge);
	pointer-events: auto;
	cursor: grab;
}

.stba-fiyat__kaydiraclar input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--stba-white);
	border-radius: var(--stba-r-hap);
	background: var(--stba-rosewood);
	box-shadow: var(--stba-golge);
	pointer-events: auto;
	cursor: grab;
}

.stba-fiyat__kutular {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: .625rem;
}

.stba-fiyat__kutu {
	display: flex;
	align-items: center;
	gap: .25rem;
	flex: 1;
	min-width: 0;
	padding: .5rem .625rem;
	border: 1px solid var(--stba-beige);
	border-radius: var(--stba-r-buton);
	background: var(--stba-white);
	font-size: var(--stba-fs-govde);
	color: var(--stba-charcoal);
}

.stba-fiyat__simge {
	color: var(--stba-gray);
}

.stba-fiyat__ayrac {
	color: var(--stba-gray);
}

.stba-filtre__eylem {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--stba-beige);
}

/* -------------------------------------------------------------
   Sonuç satırı: sayı, çipler, sıralama
   ------------------------------------------------------------- */
.stba-magaza-ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-bottom: 1.5rem;
}

.stba-sonuc-sayisi {
	margin: 0;
	font-size: var(--stba-fs-govde);
	font-weight: 500;
	color: var(--stba-charcoal);
	white-space: nowrap;
}

.stba-magaza-ust__siralama {
	margin-left: auto;
}

.stba-siralama {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

.stba-siralama__etiket {
	font-size: var(--stba-fs-kucuk);
	color: var(--stba-gray);
	white-space: nowrap;
}

.stba-siralama select {
	width: auto;
	min-width: 180px;
	background: var(--stba-white);
}

/* Etkin filtre çipleri. */
.stba-etkin-filtreler {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.stba-etkin-filtreler__etiket {
	display: none;
}

.stba-etkin-filtreler__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stba-cip {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	min-height: 32px;
	padding: .25rem .75rem;
	border: 1px solid var(--stba-soft-blush);
	border-radius: var(--stba-r-hap);
	background: var(--stba-blush);
	color: var(--stba-charcoal);
	font-size: var(--stba-fs-kucuk);
}

.stba-cip:hover {
	border-color: var(--stba-rosewood);
	color: var(--stba-rosewood);
}

.stba-etkin-filtreler__temizle {
	font-size: var(--stba-fs-kucuk);
	color: var(--stba-rosewood);
	text-decoration: underline;
}

/* Mobilde filtreleri açan düğme. */
.stba-magaza-filtre-ac {
	margin: 0 0 1rem;
}

.stba-filtre-ac {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

@media (min-width: 992px) {
	.stba-magaza-filtre-ac {
		display: none;
	}
}

/* -------------------------------------------------------------
   Ürün ızgarası
   ------------------------------------------------------------- */
/* Genel urun listesi: sutun sayisi kabin genisligine gore
   kendiliginden ayarlanir. Favoriler, arama ve benzer urunler gibi
   dar kaplarda da dogru diziliyor. Magaza sayfasinin kendi sutun
   sayisi asagida ayrica tanimli. */
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: var(--stba-izgara);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Telefonda iki sutun: 220 piksellik alt sinir tek sutuna
   dusuruyordu, magazada aynı anda daha az urun gorunuyordu. */
@media (max-width: 575.98px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .75rem;
	}
}

ul.products::before,
ul.products::after {
	content: none;
}

@media (min-width: 768px) {
	.stba-magaza-sonuc ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1400px) {
	.stba-magaza-sonuc ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------
   Ürün kartı
   ------------------------------------------------------------- */
/* Kart cercevesi, zemini ve kosesi Bootstrap .card sinifindan gelir.
   Burada yalniz WooCommerce'in listeye verdigi genislik/bosluk
   eziliyor ve uzerine gelince yukselme ekleniyor. */
/* Kartlar AYNI YUKSEKLIKTE olmali: izgarada da seritte de yan yana
   duruyorlar ve farkli yukseklikte olunca alt kenarlari kayiyor.

   `height: 100%` BILEREK YOK: kart hem CSS Grid hem flex seritte
   dogrudan bir izgara/esnek ogesi ve ikisinde de varsayilan
   `align-items: stretch` zaten esitliyor. Yuzde yukseklik eklenince
   tarayici yuksekligi "belirli" sayip esnemeyi iptal ediyordu;
   olculdu: 436 / 436 / 451 / 482 px (2026-10-15).

   Govde flex sutun, fiyat+dugme blogu margin-top:auto ile dibe
   yapisiyor (asagida). */
.stba-urun-kart {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	overflow: hidden;
}

.stba-urun-kart:hover {
	box-shadow: var(--bs-box-shadow);
	border-color: var(--stba-soft-blush);
}

.stba-urun-kart__gorsel {
	position: relative;
	background: var(--stba-pearl);
	aspect-ratio: 1 / 1;
	max-width: 100%;
	overflow: hidden;
}

.stba-urun-kart__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.stba-urun-kart:hover .stba-urun-kart__gorsel img {
	transform: scale(1.03);
}

/* Favori kalbi: görselin sağ üstünde. */
.stba-favori {
	position: absolute;
	top: .625rem;
	right: .625rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--stba-beige);
	border-radius: var(--stba-r-hap);
	background: rgba(255, 255, 255, .92);
	color: var(--stba-rose);
	cursor: pointer;
	transition: color var(--stba-gecis), border-color var(--stba-gecis);
}

.stba-favori:hover,
.stba-favori[aria-pressed="true"] {
	color: var(--stba-rosewood);
	border-color: var(--stba-rose);
}

.stba-urun-kart__govde {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: .875rem 1rem 1rem;
}

.stba-urun-kart__bag {
	color: inherit;
}

/* Baslik EN FAZLA IKI SATIR. Uzun urun adlari dort satira cikip
   kartin boyunu bozuyordu; iki satirda kesilip "..." konuyor ve her
   kartta ayni yeri kapliyor. */
.stba-urun-kart__ad,
.stba-urun-kart .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.3em);
	margin: 0 0 .25rem;
	font-family: var(--stba-font-baslik);
	font-size: var(--stba-fs-orta);
	font-weight: 500;
	line-height: 1.3;
	color: var(--stba-charcoal);
}

.stba-urun-kart__bag:hover .woocommerce-loop-product__title {
	color: var(--stba-rosewood);
}

/* Renk satiri tek satir; iki satira tasinca kart boyu degisiyordu. */
.stba-urun-kart__meta {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0 0 .625rem;
	font-size: var(--stba-fs-kucuk);
	color: var(--stba-gray);
}

/* Fiyat ve dugme kartin DIBINE yapisir (margin-top:auto); boylece
   baslik kisa olsa da dugmeler ayni hizada kalir.

   YAN YANA DEGIL, ALT ALTA. Yan yanayken indirimli urunde fiyat iki
   satir oluyor, dugme sigmayip alt satira kayiyor ve o kart otekilerden
   46px uzun cikiyordu. Alt alta dizilince her kart ayni kaliba oturuyor. */
.stba-urun-kart__alt {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
	margin-top: auto;
	padding-top: .5rem;
}

/* Fiyat bloguna iki satirlik yer AYRILIR: indirimli urunde ustu cizili
   eski fiyat ikinci satiri kapliyor, indirimsizde bos kaliyor. Boylece
   indirimli ve indirimsiz kartlar ayni boyda duruyor. */
.stba-urun-kart__fiyat {
	min-width: 0;
	min-height: 2.9em;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	white-space: nowrap;
}

/* "Siparis Ver" iki satira bolunmesin, kart genisligini kaplasin. */
.stba-urun-kart__eylem .btn {
	display: block;
	width: 100%;
	white-space: nowrap;
}

.stba-urun-kart__fiyat .price {
	display: block;
	margin: 0;
	font-size: var(--stba-fs-buyuk);
	font-weight: 600;
	color: var(--stba-rosewood);
}

.stba-urun-kart__fiyat del {
	display: block;
	margin: 0;
	font-size: var(--stba-fs-kucuk);
	font-weight: 400;
	color: var(--stba-gray);
}

.stba-urun-kart__fiyat ins {
	text-decoration: none;
}

/* "Sepete ekle" gorunumu Bootstrap .btn siniflarindan geliyor;
   siniflar woocommerce_loop_add_to_cart_args filtresiyle ekleniyor. */
.stba-urun-kart__eylem .added_to_cart {
	display: none;
}

.stba-urun-kart__eylem .button.loading {
	opacity: .6;
}

/* -------------------------------------------------------------
   Sayfalama
   ------------------------------------------------------------- */
/* Sayfalama Bootstrap .pagination yapisini kullanir; renkler
   marka.css icindeki --bs-pagination-* degiskenlerinden gelir. */
.woocommerce-pagination,
.stba-sayfalama {
	margin-top: 2.5rem;
}

.woocommerce-pagination .page-link,
.stba-sayfalama .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--stba-dokunma);
	min-height: var(--stba-dokunma);
}

/* -------------------------------------------------------------
   Mağaza altındaki güven kartları
   ------------------------------------------------------------- */
.stba-guven-kartlar--magaza {
	margin-top: 2.5rem;
}

@media (min-width: 768px) {
	.stba-guven-kartlar--magaza {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------
   Mobil filtre paneli
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.stba-filtre {
		position: fixed;
		inset: 0;
		z-index: var(--stba-z-menu);
		border: 0;
		border-radius: 0;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 220ms ease;
		padding: 1rem var(--stba-yan-bosluk) 2rem;
	}

	.stba-filtre[data-acik="true"] {
		transform: translateX(0);
	}

	.stba-filtre__kapat {
		display: inline-flex;
	}

	.stba-filtre__temizle {
		margin-left: 0;
	}
}