/*
 * Bolumler arasi bosluk duzeltmeleri.
 *
 * NEDEN AYRI DOSYA
 * ----------------
 * Tema stili baska bir yerde Tailwind ile derlenip assets/dist'e yukleniyor;
 * derleme araclari sunucuda yok, derlenmis dosyaya yazilan kural bir sonraki
 * derlemede kaybolurdu. Bu dosya derlemenin disinda durur ve hermest-app'ten
 * sonra yuklenir.
 */

/*
 * Degerlendirme seridinin alt boslugu.
 *
 * .hermest-fue-assessment section'inin app.css'te hicbir kurali yok -- ne
 * padding ne margin. Kutu section'in sinirinda bitiyor ve bir sonraki bolum
 * hemen orada basliyor.
 *
 * Cogu sayfada bu goze batmiyordu cunku sonraki bolumun zemini beyazdi ve
 * kenar kendiliginden okunuyordu. Trassiz Sac Ekimi sayfasinda ise hemen
 * altinda adimlar bolumu var: kutunun kendi zemini (#f0f4f8) ile adimlar
 * bolumunun zemini ayni renk, aralarinda beyaz kalmayinca ikisi tek bir blok
 * gibi goruluyordu -- kutunun nerede bitip bolumun nerede basladigi belli
 * degildi.
 *
 * Bosluk section'in kendisine veriliyor, assessment + steps komsulugu icin
 * ozel bir kurala degil: bir bolumun kendi dikey boslugu olmasi zaten dogru
 * olan, ve assessment'in altina ileride baska bir acik zeminli bolum gelirse
 * ayni sorun tekrarlanmaz.
 *
 * Ust bosluga dokunulmuyor: o, kendinden onceki bolumun alt boslugundan
 * geliyor ve ekranda dogru duruyor; buraya bir de padding-top eklemek o
 * araligi iki katina cikarirdi.
 */
.hermest-fue-assessment {
	padding-bottom: 40px;
}

@media (min-width: 768px) {
	.hermest-fue-assessment {
		padding-bottom: 56px;
	}
}

/*
 * Ana sayfa About bolumu: iki sutun esit yukseklikte.
 *
 * app.css bu grid'e align-items:flex-start veriyor, yani her sutun kendi
 * icerigi kadar uzuyor. Sol sutun video + dort sertifika karti tasidigi icin
 * sagdaki metin kartindan uzun kaliyor ve kartin altinda bos bir seritanas
 * olusuyordu.
 *
 * stretch grid'in zaten varsayilani; burada yalnizca geri aliniyor. Kartin
 * kendi icerigi ustte hizali kalmaya devam ediyor, uzayan sey kartin zemini.
 *
 * Medya sorgusuna gerek yok: dar ekranda grid tek sutuna dusuyor ve orada
 * stretch'in gorunur bir etkisi olmuyor.
 */
.hermest-about__grid {
	align-items: stretch;
}

/*
 * Ana sayfanin iki metin+gorsel bolumu: gorsel metinle ayni hizada bitsin.
 * Achieve Perfect Hair (.hermest-perfect), Maximum Density (.hermest-density)
 * ve yontem sekmeleri (.hermest-methods) ayni kaliptan cikmis: ayni grid
 * ayari, ayni kirilma noktasi -- ucu tek blokta duzeltiliyor. Yontem
 * bolumunde 600px siniri zaten yok, oradaki sorunun tamami grid ayarindan
 * ve gorselin satir yuksekligini belirlemesinden geliyor.
 *
 * Iki engel ust uste biniyordu:
 *
 * 1) Grid'de align-items:flex-start var (ayni sey About bolumunde de vardi),
 *    yani sutunlar kendi icerigi kadar uzuyor. Gorsel sutunu metinden kisa
 *    kalinca altinda bos bir alan olusuyordu.
 *
 * 2) Gorselin max-height:600px siniri var ve bu sinir medya sorgusu disinda,
 *    yani her ekranda gecerli. Birinci madde duzeltilse bile gorsel 600px'te
 *    durur, metin daha uzunsa hiza yine tutmazdi.
 *
 * Ikisi de yalnizca 768px ustunde geri aliniyor. Telefonda sutunlar zaten alt
 * alta ve orada 600px siniri ise yariyor: dar ekranda tam yukseklige uzayan
 * bir gorsel ekrani tek basina doldurup metni asagi iterdi.
 *
 * Gorselin kendi object-fit:cover'i app.css'te duruyor, yani uzayan gorsel
 * esneyip bozulmuyor, kirpiliyor.
 */
@media (min-width: 768px) {
	.hermest-perfect__intro,
	.hermest-density__inner,
	.hermest-methods__panel {
		align-items: stretch;
	}

	/*
	 * Gorsel satirin yuksekligini BELIRLEMESIN, ona UYSUN.
	 *
	 * Ilk denemede yalnizca max-height kaldirilmisti; o zaman gorsel dogal
	 * boyuna uzadi ve bu kez satiri kendisi buyuterek metnin altinda bosluk
	 * biraktir -- sorun taraf degistirmis oldu.
	 *
	 * Mutlak konum bunu kokunden cozuyor: img artik satir yuksekligine hic
	 * katkida bulunmuyor, yalnizca sutunu dolduruyor. Satirin yuksekligini
	 * metin sutunu belirliyor, gorsel de tam o kadar oluyor.
	 *
	 * object-fit:cover app.css'ten geliyor, yani gorsel esnemiyor, kirpiliyor.
	 */
	.hermest-perfect__media,
	.hermest-density__media,
	.hermest-methods__media {
		position: relative;
	}

	.hermest-perfect__media img,
	.hermest-density__media img,
	.hermest-methods__media img {
		position: absolute;
		inset: 0;
		max-height: none;
		height: 100%;
		width: 100%;
	}
}

/*
 * Tablet dikey: dort istatistik yan yana.
 *
 * .hermest-stats__grid 640px ustunde flex + wrap ile diziliyor ve her oge
 * flex-basis 160px, aralarindaki bosluk 40px. Dordu icin gereken yer
 * 4x160 + 3x40 = 760px; kartin ic genisligi iPad dikeyde bunun altinda
 * kaldigi icin dorduncu oge alt satira dusuyor ve 3+1 gibi duruyordu.
 *
 * 640px'in ALTINDA tema zaten dort sutunlu bir grid kullaniyor -- yani bu
 * duzen temanin kendi cozumu, burada yalnizca tablet araligina da
 * uygulaniyor. Sutun boslugu 20px: 40px dort sutunu tasirir, dar ekrandaki
 * 8px ise tablette gereksiz sikisik durur.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hermest-stats__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: start;
		column-gap: 1.25rem;
	}
}

/*
 * Tablet dikey: bes yontem sekmesi tek sirada.
 *
 * Sekmeler 640px ustunde flex + wrap ile diziliyor ve her biri kendi metni
 * kadar genis. Bes etiketin toplami ("Unshaven Hair Transplant" en uzunu)
 * iPad dikeyde satira sigmiyor, besincisi alta dusup 4+1 gibi duruyordu.
 *
 * Grid'e cevriliyor: bes esit sutun, sigmayan etiket iki satira sariyor ama
 * sekmeler tek sirada kaliyor. Tema 640px altinda zaten ayni sekilde grid
 * kullaniyor (orada iki sutun), yani yontem temanin kendi cozumu.
 *
 * Yazi ve ic bosluk da dar ekrandaki degerlere cekiliyor; birakilsaydi
 * sutunlar dolar ve her etiket iki satira inerdi.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hermest-methods__tablist {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.hermest-methods__tab {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		font-size: 13px;
		line-height: 1.3;
	}
}

/*
 * Tablet dikey: yontem paneli tek sutuna dusuyor -- gorsel ustte, metin altta.
 *
 * Once iki sutun korunup gorsel yalnizca esit yukseklikten muaf tutulmustu.
 * Asil sorun ondan onceydi: iPad dikeyde iki sutun zaten cok dar. Metin
 * sutunu daralinca yazi uzuyor, gorsel sutunu da o kadar daraliyor ve
 * object-fit:cover kirpmasi geriye yalnizca arka plani birakiyordu --
 * olculdu, Unshaven sekmesinde fotografta yalnizca beyaz onluk goruluyor,
 * hasta da hekim de kadraj disinda kaliyordu.
 *
 * Tek sutun ikisini birden cozuyor: gorsel tam genislikte ve kendi oraninda
 * duruyor, metin altinda rahat bir olcude akiyor. Tema 768px'in ALTINDA zaten
 * tek sutun kullaniyor; burada o duzen tablet dikeyine de genisletiliyor.
 *
 * position/height sifirlamalari duruyor: tek sutunda gorseli mutlak konumda
 * birakmak onu yuksekligi olmayan bir kutuya hapsederdi.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hermest-methods__panel {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.hermest-methods__media {
		position: static;
	}

	/*
	 * Yukseklik tavani: tek sutuna gecince gorsel tam genislikte ve kendi
	 * oraninda ciziliyordu, bu da iPad dikeyde ekranin buyuk kismini kaplayan
	 * bir blok demekti -- metne ulasmak icin bir ekran boyu kaydirmak
	 * gerekiyordu.
	 *
	 * 400px'te kesiliyor. object-fit:cover app.css'ten geldigi icin gorsel
	 * esnemiyor; tavani asan kisim ustten ve alttan esit kirpiliyor, yani
	 * kadrajin ortasi -- fotograflarin konusu orada -- korunuyor.
	 */
	.hermest-methods__media img {
		position: static;
		height: auto;
		max-height: 400px;
	}
}

/*
 * Tablet dikey: Maximum Density bolumu de tek sutun -- gorsel ustte.
 *
 * Yontem sekmeleriyle ayni gerekce: iPad dikeyde iki sutun cok dar kaliyor,
 * metin uzuyor ve gorsel incecik bir seride donusup konusunu kaybediyordu.
 *
 * order:-1 GEREKLI. Bu bolumun isaretlemesinde metin once geliyor
 * (homepage-sections.php: __content satir 726, __media satir 765), yani tek
 * sutuna dusunce gorsel dogal olarak ALTA inerdi. order gorseli one aliyor;
 * isaretlemeye dokunulmuyor, cunku genis ekranda metnin solda olmasi dogru.
 *
 * Yukseklik tavani yine 400px: gorsel tam genislikte kendi oraninda cizilse
 * ekranin buyuk kismini kaplar ve metne ulasmak icin bir ekran boyu kaydirmak
 * gerekirdi. object-fit:cover app.css'ten geldigi icin kirpma ortadan
 * yapiliyor.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hermest-density__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.hermest-density__media {
		order: -1;
		position: static;
	}

	.hermest-density__media img {
		position: static;
		height: auto;
		max-height: 400px;
	}
}

/*
 * Tablet dikey: Achieve Perfect Hair bolumu de tek sutun -- gorsel ustte.
 *
 * Density ve yontem sekmeleriyle ayni gerekce: iPad dikeyde iki sutun cok dar,
 * metin uzuyor ve gorsel dar bir seride donusup konusunu kaybediyor.
 *
 * Burada order'a gerek yok: bu bolumun isaretlemesinde gorsel zaten once
 * geliyor (homepage-sections.php: __media satir 794, __content satir 798),
 * yani tek sutuna dusunce kendiliginden uste geciyor. Density'de tersi oldugu
 * icin orada order:-1 yazilmisti.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hermest-perfect__intro {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.hermest-perfect__media {
		position: static;
	}

	.hermest-perfect__media img {
		position: static;
		height: auto;
		max-height: 400px;
	}
}

/*
 * Tablet ve alti: analiz formu ortada.
 *
 * .hermest-analysis__form-col'da margin-left:auto var; 1024px ustunde bu
 * dogru, cunku orada duzen block'a donuyor, fotograf mutlak konumda sola
 * oturuyor ve form sag tarafta ona yer aciyor.
 *
 * 1024px altinda ise duzen tek sutunlu bir flex; fotograf formun ALTINA
 * geciyor (order:2) ve solda kimse kalmiyor. margin-left:auto orada
 * karsiligi olmayan bir yaslanma birakiyor: form 512px'lik genisligiyle sag
 * kenara yapisip solunda bos bir seride birakiyordu -- iPad dikeyde en belirgin
 * hali.
 *
 * margin-inline:auto ile ortalaniyor. Telefonda bir sey degismiyor: orada
 * ekran formun max-width'inden dar oldugu icin auto kenar boslugu zaten sifir.
 */
@media (max-width: 1023.98px) {
	.hermest-analysis__form-col {
		margin-inline: auto;
	}
}

/*
 * Tablet dikey: About bolumu de tek sutun.
 *
 * Diger metin+gorsel bolumleriyle ayni gerekce: iPad dikeyde iki sutun cok
 * dar kaliyor, metin uzayip incecik bir sutuna sikisiyordu -- ekran
 * goruntusunde sag sutun neredeyse iki kat uzunlukta akiyor ve solda sertifika
 * kartlarinin altinda genis bir bosluk kaliyordu.
 *
 * order'a gerek yok: isaretlemede medya sutunu (video + sertifikalar) zaten
 * once geliyor, tek sutuna dusunce kendiliginden uste geciyor.
 *
 * Yukarida bu grid'e verilen align-items:stretch tek sutunda etkisiz --
 * her oge kendi satirinda oldugu icin esitlenecek bir komsusu kalmiyor.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hermest-about__grid {
		grid-template-columns: 1fr;
	}

	/*
	 * Dort sertifika tek sirada.
	 *
	 * app.css bu kartlari iki sutuna diziyor; iki sutunlu duzende medya sutunu
	 * dar oldugu icin dogruydu. Tek sutuna gecince medya sutunu tam genislige
	 * cikti ve 2x2 dizilim genis bir alanda gereksiz iki satir kapliyor.
	 */
	.hermest-about__certificates {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Tablet dikey: hasta vakalari ve basin seritlerinde iki kart yan yana.
 *
 * app.css 768px ustunde serit kartlarini uce boluyor
 * (calc((100% - 2 * gap) / 3)). Genis ekranda dogru, ama iPad dikeyde uc kart
 * ~220px'lik sutunlara sikisiyor: metin satir basina uc-dort kelimeye dusuyor
 * ve kartlar gereksiz uzuyor.
 *
 * Ikiye bolunuyor; bolen degisirken gap hesabi da degisiyor -- iki kart
 * arasinda tek bosluk var, ucte iki vardi.
 *
 * Serit davranisi aynen duruyor: kalan kartlara parmakla kaydirarak ya da
 * oklarla gecilıyor, hermestCarousel her adimda bir kart ilerletiyor.
 *
 * Vakalar (.hermest-cases) ve basin (.hermest-press) seritleri: ikisinin de
 * kartlari uzun metin tasiyor. Yorumlar seridi disarida -- oradaki kartlar
 * kisa ve uc sutun sikismiyor.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hermest-cases .hermest-carousel__track > *,
	.hermest-press .hermest-carousel__track > * {
		width: calc((100% - var(--spacing) * 6) / 2);
	}
}

/*
 * Tablet dikey: yontem kartlari bolumu -- baslik ustte, kartlar altinda uclu.
 *
 * app.css 768px ustunde bu bolumu iki sutuna ayiriyor: solda 320px'lik sabit
 * bir intro (baslik + metin + dugme), sagda kalan alanda uc sutunluk kart
 * grid'i. Genis ekranda dogru duruyor, ama iPad dikeyde 320px cikinca kartlara
 * ~140px kaliyor: basliklar uc satira boluniyor, metin kelime kelime akiyor.
 *
 * Dis grid tek sutuna cevriliyor; intro tam genislikte uste geciyor ve kartlar
 * altinda rahat bir uclu duzene yayiliyor (alti kart = 3+3). Kart grid'ine
 * dokunmak gerekmiyor, uclu duzen app.css'te zaten tanimli.
 *
 * KAPSAM: bolumun kullanildigi her yer. Once yalnizca FUE sablonunda denendi,
 * gorulup onaylandiktan sonra (2026-09-09) sablon on eki kaldirildi. Blok yedi
 * sablonda ortak: FUE, DHI, Unique FUE, Long Hair FUE, Unshaven, Beard, Female.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hermest-fue-methods__inner {
		grid-template-columns: 1fr;
	}
}

/*
 * Footer'daki harita ve sanal tur dugmeleri tek satirda.
 *
 * Ust kap (.hermest-site-footer__contact) flex-direction:column; iletisim
 * bilgileri alt alta dizilsin diye oyle ve oyle kalmali. Dugmeler bu yuzden
 * footer.php'de kendi kabina alindi -- bu kural o kabi yatay yapiyor.
 *
 * flex-wrap: dar ekranda ya da uzun etiketlerde dugmeler tasmak yerine alt
 * satira geciyor; gap ikisinin arasini hem yatayda hem dikeyde ayni tutuyor,
 * yani sarma durumunda ayrica bir kural gerekmiyor.
 */
.hermest-site-footer__btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}