/*
 * Adim kartlari: telefonda carousel, masaustunde grid.
 *
 * NEDEN AYRI DOSYA
 * ----------------
 * Temanin app.css'i baska bir yerde Tailwind ile derlenip assets/dist'e
 * yukleniyor; derleme araclari sunucuda yok. Derlenmis dosyaya yazilan bir kural
 * bir sonraki derlemede kaybolurdu. Bu dosya derlemenin disinda durur ve
 * hermest-app'ten SONRA yuklenir (inc/enqueue.php), boylece ayni ozgulluk
 * seviyesinde son soz burada kalir.
 *
 * NE YAPIYOR
 * ----------
 * Isaretleme tek: inc/fue-page-sections.php her iki durumda da ayni
 * .hermest-fue-steps__grid'i basiyor. 768px altinda o grid kaydirilabilir bir
 * seride cevriliyor, ustunde hicbir sey degismiyor -- masaustunun uc sutunlu
 * duzeni app.css'ten oldugu gibi geliyor.
 *
 * Kaydirmayi hermestCarousel() suruyor (assets/dist/app.js): bir tiklamada bir
 * kart genisligi + gap kadar ilerliyor, sona gelince basa donuyor. Kartin tam
 * genislik olmasi her kaydirmada tam bir kart demek; JS'e ayri bir ayar
 * gerekmiyor, olcuyu buradaki flex-basis veriyor.
 */

@media (max-width: 767px) {
	.hermest-fue-steps__carousel .hermest-fue-steps__grid {
		display: flex;
		grid-template-columns: none;
		gap: 1.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;

		/* Serit kendi kaydirma cubugunu gostermiyor: oklar zaten orada. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.hermest-fue-steps__carousel .hermest-fue-steps__grid::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Tam genislik: ekranda her seferinde tek bir adim duruyor. flex:none
	 * olmasa kartlar sigmak icin buzulur ve alti birden yan yana gorunurdu.
	 */
	.hermest-fue-steps__carousel .hermest-fue-steps__card {
		flex: none;
		width: 100%;
		scroll-snap-align: start;
	}
}

/*
 * Masaustunde uc sutunlu grid geri geliyor; oklarin isi kalmiyor.
 * display:none, sadece gorsel gizleme degil: buton klavye sirasindan da
 * cikiyor, yoksa gorunmez iki durak birakirdi.
 */
@media (min-width: 768px) {
	.hermest-fue-steps__carousel .hermest-carousel__nav {
		display: none;
	}
}