/*
 * Ana urun gamlari: dort kart yan yana, gorselin uzerinde ortalanmis baslik.
 *
 * Durur halde sade: baslik + alt baslik. Imlec gelince gorsel yakinlasir,
 * perde koyulasir, baslik yukari kayar, altindaki cizgi acilir ve Kesfet
 * butonu asagidan yukselir.
 *
 * Kart <a>, ic ogeler <span>: ic ice baglanti kurmadan tum yuzey
 * tiklanabilir kaliyor. Blok davranisi CSS ile veriliyor.
 */

/*
 * Bolum etiketi. Ekrana girdiginde soldan saga dogru kayarak geliyor;
 * onundeki kisa cizgi de ayni anda aciliyor.
 */
.k-groups__label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--forest-2);

	opacity: 0;
	transform: translateX(-26px);
	transition:
		opacity   .6s ease,
		transform .7s cubic-bezier(.22, 1, .36, 1);
}

.k-groups__label.is-in {
	opacity: 1;
	transform: none;
}

.k-groups__dash {
	display: block;
	width: 0;
	height: 2px;
	border-radius: 999px;
	background: var(--leaf);
	transition: width .7s cubic-bezier(.22, 1, .36, 1) .1s;
}

.k-groups__label.is-in .k-groups__dash { width: 34px; }

/* JS yoksa etiket gizli kalmasin. */
.no-js-groups .k-groups__label { opacity: 1; transform: none; }
.no-js-groups .k-groups__dash { width: 34px; }

.k-groups {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.k-group {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;

	/*
	 * Kare kadraj. Kaynak fotograflar 2:1 genislikte; 3:4 dikey kadraj
	 * karenin yarisini kirpiyordu. Kare hem fotografin cogunu koruyor
	 * hem de ustteki metne yeterli yuksekligi birakiyor.
	 */
	aspect-ratio: 1 / 1;
	padding: 28px 22px;
	border-radius: 16px;
	background: var(--forest);
	text-decoration: none;
	isolation: isolate;

	/* Giris: ekrana girene kadar bekler, JS .is-in ekleyince yukselir. */
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity   .6s ease,
		transform .6s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.k-group.is-in {
	opacity: 1;
	transform: none;
}

/*
 * JS calismazsa kartlar gorunmez kalmamali: betigin varligini isaretleyen
 * sinif govdede yoksa kartlar dogrudan son halinde durur.
 */
.no-js-groups .k-group {
	opacity: 1;
	transform: none;
}

.k-group__img,
.k-group > .k-placeholder {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.k-group:hover .k-group__img,
.k-group:focus-visible .k-group__img { transform: scale(1.07); }

/*
 * Koyu perde. Fotograflar farkli parlaklikta geldigi icin sabit bir perde
 * yerine asagi dogru koyulasan bir gecis: yazi her durumda okunur kaliyor.
 */
.k-group::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(8, 28, 16, .15) 0%,
		rgba(8, 28, 16, .45) 48%,
		rgba(8, 28, 16, .82) 100%
	);
	transition: background .35s ease;
}

.k-group:hover::after,
.k-group:focus-visible::after {
	background: linear-gradient(
		180deg,
		rgba(8, 28, 16, .3) 0%,
		rgba(8, 28, 16, .58) 48%,
		rgba(8, 28, 16, .9) 100%
	);
}

.k-group__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
	color: #fff;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

/* Butona yer acmak icin icerik yukari kayar. */
.k-group:hover .k-group__body,
.k-group:focus-visible .k-group__body { transform: translateY(-6px); }

.k-group__title {
	font-size: clamp(21px, 1.9vw, 26px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}

/*
 * Cizgi durur halde yok. Imlec gelince ortadan disa dogru acilir ve
 * altindan Kesfet yukselir; kart beklerken yalnizca baslik gorunur.
 */
.k-group__rule {
	display: block;
	width: 0;
	height: 2px;
	margin: 14px 0 0;
	border-radius: 999px;
	background: var(--leaf);
	opacity: 0;
	transition:
		width   .45s cubic-bezier(.22, 1, .36, 1),
		opacity .3s ease;
}

.k-group:hover .k-group__rule,
.k-group:focus-visible .k-group__rule {
	width: 58px;
	opacity: 1;
}

/*
 * Kesfet butonu durur halde gizli. Yukseklik animasyonu icin 0fr -> 1fr
 * grid hilesi: butonun yuksekligini onceden bilmeye gerek kalmiyor.
 */
.k-group__btn {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	margin-top: 0;
	padding: 0 22px;
	border: 1.5px solid rgba(255, 255, 255, .8);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition:
		grid-template-rows .4s cubic-bezier(.22, 1, .36, 1),
		opacity            .3s ease,
		margin-top         .4s cubic-bezier(.22, 1, .36, 1),
		background         .25s ease,
		border-color       .25s ease,
		color              .25s ease;
}

.k-group:hover .k-group__btn,
.k-group:focus-visible .k-group__btn {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 16px;
	background: var(--leaf);
	border-color: var(--leaf);
	color: var(--forest-3);
}

/* 0fr satirin icerigi tasmasin. */
.k-group__btn > * { overflow: hidden; }

.k-group:focus-visible {
	outline: 3px solid var(--leaf);
	outline-offset: 3px;
}

@media (max-width: 1023.98px) {
	.k-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Telefonda 2x2: dort tam genislik kart ekranin iki katini kapliyordu.
 * Kucuk karede baslik ve buton da kuculur.
 */
@media (max-width: 599.98px) {
	.k-groups { gap: 12px; }
	.k-group { padding: 16px 12px; border-radius: 14px; }
	.k-group__title { font-size: 17px; }
	.k-group__rule { margin-top: 10px; }
}

/*
 * Dokunmatik cihazda hover yok: buton ve genis cizgi bastan gorunur olsun,
 * aksi halde Kesfet hic ortaya cikmaz.
 */
@media (hover: none) {
	.k-group__btn {
		grid-template-rows: 1fr;
		opacity: 1;
		margin-top: 16px;
	}

	.k-group__rule { width: 58px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.k-group,
	.k-group__img,
	.k-group::after,
	.k-group__body,
	.k-group__rule,
	.k-group__btn {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}