/*
 * Telefonda serit halinde cizilen bloklar (adim kartlari, foto galerisi ve
 * once/sonra sonuclari) ve bunlarin actigi lightbox.
 *
 * 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 ozgullukteki
 * kurallarda son soz burada kalir.
 *
 * KAPSAM
 * ------
 * Uc blok. Ayni bilesen sitede dokuz yerde daha kullaniliyor (ana sayfada
 * yorumlar/vakalar/makaleler, ekip sayfasi, referans sayfasi); onlar bilerek
 * disarida: her birinin kart yuksekligi ve icerigi farkli, oklarin yerini
 * gorulmeden toptan degistirmek dogru olmaz.
 *
 * Adim bloklari alti sablonda, sonuclar blogu yedi sablonda ortak; asagidaki
 * secicilerin tamami o bloklarin kendi sinif adlarina bagli, sayfa basina
 * ayrica bir sey yapmak gerekmiyor.
 */

/* ---------------------------------------------------------------------- *
 * 1. Adim kartlari: masaustunde grid, telefonda serit.
 *    (Galeri ve sonuclar zaten seritti; onlarda yalnizca oklarin yeri
 *    degisiyor, bkz. bolum 2.)
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	/*
	 * Isaretleme tek: inc/fue-page-sections.php her iki durumda da ayni
	 * .hermest-fue-steps__grid'i basiyor. Grid burada seride cevriliyor;
	 * 768px ustunde app.css'in uc sutunlu duzeni oldugu gibi kaliyor.
	 *
	 * 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 asagidaki genislik veriyor.
	 */
	.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;
	}
}

/* ---------------------------------------------------------------------- *
 * 2. Oklarin yeri: kartin ustu degil, alti -- uc blokta da.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	/*
	 * Ilk halde oklar kenarlarda duruyordu. Olcu kagit uzerinde uyuyordu --
	 * buton kartin 28px'lik ic bosluguna denk geliyordu -- ama metin uzayinca
	 * satirlar o boslugu asiyor ve dugme yazinin uzerine biniyor: Almanca FUE
	 * sayfasinin "Vorbereitung" karti tam olarak buydu. Galeride ve
	 * sonuclarda metin yok, orada da oklar fotografin uzerini kapatiyordu.
	 *
	 * Kartlar esit yukseklikte (flex stretch) oldugu icin kisa kartlarin
	 * altinda zaten bos alan kaliyor; oklar oraya tasindi.
	 *
	 * Grid alanlariyla yapiliyor: butonlar HTML'de seridin oncesinde ve
	 * sonrasinda duruyor -- isaretleme masaustu icin dogru sirada kaliyor,
	 * yalnizca yerlesim burada degisiyor.
	 */
	.hermest-fue-steps__carousel,
	.hermest-fue-gallery .hermest-carousel,
	.hermest-fue-results__carousel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			'track track'
			'prev  next';
		column-gap: 1rem;
		row-gap: 1.25rem;
	}

	.hermest-fue-steps__carousel .hermest-fue-steps__grid,
	.hermest-fue-gallery .hermest-carousel__track,
	.hermest-fue-results__carousel .hermest-carousel__track {
		grid-area: track;
	}

	/*
	 * app.css butonlari mutlak konumda, dikeyde -50% oteleyerek yerlestiriyor.
	 * Akisa geri donduruluyor: inset ile left/right/top, translate ile de o
	 * oteleme sifirlaniyor -- biri kalirsa dugme yeni yerinde kayik durur.
	 */
	.hermest-fue-steps__carousel .hermest-carousel__nav,
	.hermest-fue-gallery .hermest-carousel__nav,
	.hermest-fue-results__carousel .hermest-carousel__nav {
		position: static;
		inset: auto;
		translate: none;
	}

	/* Ikisi ortada bulussun: biri sagina, digeri soluna yaslaniyor. */
	.hermest-fue-steps__carousel .hermest-carousel__nav--prev,
	.hermest-fue-gallery .hermest-carousel__nav--prev,
	.hermest-fue-results__carousel .hermest-carousel__nav--prev {
		grid-area: prev;
		justify-self: end;
	}

	.hermest-fue-steps__carousel .hermest-carousel__nav--next,
	.hermest-fue-gallery .hermest-carousel__nav--next,
	.hermest-fue-results__carousel .hermest-carousel__nav--next {
		grid-area: next;
		justify-self: start;
	}
}

/* ---------------------------------------------------------------------- *
 * 3. Masaustu: adim kartlari grid'ine donuyor, oklarin isi kalmiyor.
 *    Galeri ve sonuclarin oklari masaustunde yerinde kaliyor -- orada uc kart
 *    yan yana ve serit gercekten kaydiriliyor.
 * ---------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------- *
 * 4. Lightbox (buyutulmus gorsel): oklar telefonda gorselin altinda.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	/*
	 * Oklar vardi ama gorunmuyordu; iki sebep ust uste bindi:
	 *
	 * 1) Masaustunde .hermest-lightbox__photo'nun 80px yan boslugu var ve
	 *    oklar o boslukta, yani gorselin DISINDA, koyu ortunun uzerinde
	 *    duruyor. O bosluk 768px'in ustunde tanimli; telefonda bosluk 16px'e
	 *    dusunce oklar gorselin uzerine biniyor.
	 * 2) Butonun zemini %10 saydam beyaz, ikonu beyaz. Koyu ortu uzerinde
	 *    okunuyor, ama acik renkli bir fotografin uzerinde beyaz uzerine
	 *    beyaz kaliyor -- once/sonra kareleri cogunlukla acik zeminli.
	 *
	 * Cozum ikisini birden kaldiriyor: oklar gorselin altina, koyu ortunun
	 * uzerine aliniyor. Ayni sayfadaki serit oklariyla da ayni yerde olmus
	 * oluyor. Masaustu degismiyor -- orada oklar zaten gorselin disinda.
	 */
	.hermest-lightbox__photo {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			'image image'
			'prev  next';
		column-gap: 1rem;
		row-gap: 1.25rem;
		justify-items: center;
	}

	/*
	 * max-width: 100% -- gorselin kendi siniri 2xl (672px) ve telefon ekrani
	 * ondan dar; grid hucresi tasmasin diye acikca sinirlaniyor.
	 */
	.hermest-lightbox__image {
		grid-area: image;
		max-width: 100%;
	}

	/* Mutlak konum ve dikey oteleme sifirlaniyor, dugmeler akisa donuyor. */
	.hermest-lightbox__nav {
		position: static;
		inset: auto;
		translate: none;
	}

	.hermest-lightbox__nav--prev {
		grid-area: prev;
		justify-self: end;
	}

	.hermest-lightbox__nav--next {
		grid-area: next;
		justify-self: start;
	}
}