/* =============================================================
   STBalloonAtelier — Hizmet menüsü ve ana sayfa hizmet kartları
   Açılış sayfalarına menüden ve ana sayfadan giriş yolu açar.
   Menü paneli Kategoriler mega menüsünün düzenini paylaşır.
   ============================================================= */

/* -------------------------------------------------------------
   Mega menü paneli
   ------------------------------------------------------------- */
.stba-hizmet-panel__liste {
	list-style: none;
	display: grid;
	gap: .25rem;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.stba-hizmet-panel__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .25rem 1rem;
	}
}

/* Sutun genisligini icerik degil izgara belirlesin; uzun ozet
   sutunun disina tasiyordu. */
.stba-hizmet-panel__liste li {
	min-width: 0;
}

.stba-hizmet-panel__liste a {
	display: block;
	min-width: 0;
	padding: .5rem .625rem;
	border-radius: var(--bs-border-radius);
	color: var(--stba-charcoal);
	transition: background var(--stba-gecis);
}

.stba-hizmet-panel__liste a:hover,
.stba-hizmet-panel__liste a:focus-visible {
	background: var(--stba-pearl);
	color: var(--stba-rosewood);
}

/*
 * Ad ve aciklama satir sinirinda uc noktayla biter; kelime ortasinda
 * kesiliyordu ("...kullanacaginiz tasarla", denetim 2026-10-21).
 */
.stba-hizmet-panel__ad {
	display: -webkit-box;
	font-weight: 500;
	line-height: 1.3;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.stba-hizmet-panel__alt {
	display: -webkit-box;
	margin-top: .1rem;
	font-size: var(--stba-fs-mikro);
	color: var(--stba-gray);
	line-height: 1.4;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

/* -------------------------------------------------------------
   Ana sayfa hizmet kartları
   ------------------------------------------------------------- */
/* HIZMET KARTLARI IZGARA DEGIL SERIT (kullanici karari, 2026-10-15).
   Izgarada kart 373x420 px cikiyordu, satira yalniz uc tanesi
   sigiyordu ve geri kalan hizmetler hic gorunmuyordu. Artik urun
   seridiyle ayni kalip: masaustunde DORT kart yan yana, otekiler ok
   dugmeleriyle geliyor. */
.stba-home-hizmet__serit {
	position: relative;
}

.stba-home-hizmet__ray {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: .25rem;
}

.stba-home-hizmet__ray::-webkit-scrollbar {
	display: none;
}

.stba-home-hizmet__ray > .stba-home-hizmet__kart {
	flex: 0 0 80%;
	scroll-snap-align: start;
}

@media (min-width: 576px) {
	.stba-home-hizmet__ray > .stba-home-hizmet__kart {
		flex-basis: calc((100% - 1rem) / 2);
	}
}

@media (min-width: 768px) {
	.stba-home-hizmet__ray > .stba-home-hizmet__kart {
		flex-basis: calc((100% - 2rem) / 3);
	}
}

@media (min-width: 992px) {
	.stba-home-hizmet__ray > .stba-home-hizmet__kart {
		flex-basis: calc((100% - 3rem) / 4);
	}
}

.stba-home-hizmet__kart {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--stba-beige);
	border-radius: var(--bs-border-radius-lg);
	background: var(--stba-white);
	overflow: hidden;
	color: inherit;
	transition: border-color var(--stba-gecis), box-shadow var(--stba-gecis), transform var(--stba-gecis);
}

.stba-home-hizmet__kart:hover,
.stba-home-hizmet__kart:focus-visible {
	border-color: var(--stba-soft-blush);
	box-shadow: var(--bs-box-shadow);
	transform: translateY(-2px);
	color: inherit;
}

.stba-home-hizmet__gorsel {
	display: block;
	background: var(--stba-blush);
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.stba-home-hizmet__gorsel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--stba-gecis);
}

.stba-home-hizmet__kart:hover .stba-home-hizmet__gorsel img {
	transform: scale(1.03);
}

/* Dort kart yan yana durunca govde de sikisir. */
.stba-home-hizmet__govde {
	display: grid;
	gap: .25rem;
	padding: .75rem .875rem 1rem;
}

.stba-home-hizmet__ad {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.3;
	min-height: calc(2 * 1.3em);
}

/* Aciklama iki satirla sinirli: kartlarin boyu esit kalsin. */
.stba-home-hizmet__alt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--stba-fs-kucuk);
}

.stba-home-hizmet__etiket {
	justify-self: start;
	padding: .15rem .625rem;
	border-radius: var(--bs-border-radius-pill);
	background: var(--stba-blush);
	color: var(--stba-rosewood);
	font-size: var(--stba-fs-mikro);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.stba-home-hizmet__etiket--urun {
	background: var(--stba-pearl);
	color: var(--stba-gray);
}

.stba-home-hizmet__ad {
	font-family: var(--stba-font-baslik);
	font-size: var(--stba-fs-buyuk);
	line-height: 1.25;
	color: var(--stba-charcoal);
}

.stba-home-hizmet__kart:hover .stba-home-hizmet__ad {
	color: var(--stba-rosewood);
}

.stba-home-hizmet__alt {
	font-size: var(--stba-fs-kucuk);
	color: var(--stba-gray);
}

.stba-home-hizmet__tumu {
	margin: 1.75rem 0 0;
	text-align: center;
}

@media (max-width: 575.98px) {
	.stba-home-hizmet__tumu .btn {
		width: 100%;
	}
}