/**
 * Değer alanı: solda başlık + açıklama, sağda markalaşmış kompozisyon (mobilde metin sonra görsel).
 * Kompozisyon: taş kemer yüzeyi + üç özgün ürün görseli (yönetimdeki medya yuvaları). Görseller kırpılmaz.
 * Kırmızı vurgu yalnız ince çizgi ve halka üzerindeki tek nokta; pirinç kullanılmaz.
 */

.carilo-value {
	background-color: var(--color-ivory);
	padding-block: clamp(3.25rem, 7.5vw, 7.5rem) clamp(3.5rem, 8vw, 8rem);
}

.carilo-value__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.25rem, 5vw, 4rem);
	align-items: center;
}

.carilo-value__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: var(--space-5);
	background-color: var(--color-accent);
	border-radius: var(--radius-pill);
}

.carilo-value__title {
	margin: 0;
	max-width: 11em;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.5rem, 5.1vw, 4.9rem);
	line-height: 1.02;
	letter-spacing: -0.005em;
	color: var(--color-wine-800);
	text-wrap: balance;
}

.carilo-value__text {
	margin: var(--space-5) 0 0;
	max-width: 34em;
	font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
	line-height: 1.75;
	color: color-mix(in srgb, var(--color-ink) 86%, transparent);
	text-wrap: pretty;
}

.carilo-value__art {
	position: relative;
	container-type: inline-size;
	width: min(100%, 560px);
	aspect-ratio: 1 / 1.02;
	justify-self: center;
}

.carilo-value__arch {
	position: absolute;
	left: 9%;
	right: 9%;
	top: 0;
	bottom: 5.5%;
	border-radius: 999px 999px 0 0;
	background: linear-gradient(180deg, var(--color-white) 0%, #f4eee8 46%, var(--color-stone-100) 100%);
	box-shadow: inset 0 0 0 1px var(--color-line-stone), var(--shadow-soft);
}

.carilo-value__arch::after {
	content: "";
	position: absolute;
	inset: 3.2cqw;
	border-radius: 999px 999px 0 0;
	border: 1px solid color-mix(in srgb, var(--color-wine-800) 22%, transparent);
	border-bottom-color: transparent;
}

.carilo-value__ring {
	position: absolute;
	left: 31%;
	top: 6%;
	width: 52%;
	height: auto;
	fill: none;
	pointer-events: none;
}

.carilo-value__ring circle:first-child {
	stroke: color-mix(in srgb, var(--color-wine-800) 40%, transparent);
	stroke-width: 1.2;
	stroke-dasharray: 2 6;
	stroke-linecap: round;
}

.carilo-value__ring-dot {
	fill: var(--color-accent);
	stroke: var(--color-white);
	stroke-width: 1.5;
}

.carilo-value__floor {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 6.5%;
	height: 7%;
	background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--color-wine-950) 24%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.carilo-value__slot {
	position: absolute;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.carilo-value__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 1.6cqw 1.8cqw color-mix(in srgb, var(--color-wine-950) 26%, transparent));
}

.carilo-value__slot--a { left: 29%; bottom: 10.5%; width: 43%; aspect-ratio: 4 / 5; z-index: 2; }
.carilo-value__slot--b { left: 8%; bottom: 17%; width: 33%; aspect-ratio: 4 / 5; z-index: 1; }
.carilo-value__slot--c { right: 1%; bottom: 5%; width: 40%; aspect-ratio: 8 / 5; z-index: 3; }

@media (min-width: 900px) {
	.carilo-value__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: clamp(3rem, 6vw, 6.5rem);
	}

	.carilo-value__art {
		justify-self: end;
	}
}

@media (max-width: 639px) {
	.carilo-value__title { font-size: clamp(2.25rem, 10.5vw, 2.75rem); }
	.carilo-value__art { width: min(100%, 420px); }
}