/**
 * Hizmet vitrini — twin-kit "numaralı liste + büyük görsel panel" tekniğinden uyarlandı.
 * Taban (dar ekran / JS'siz): üç hizmet doğal akışta alt alta; görsel → başlık → açıklama, hiçbir şey gizlenmez.
 * Masaüstü (>=900px, JS ile `--interactive`): solda numaralı liste, sağda tek büyük panel; paneller aynı ızgara
 * hücresini paylaşır (yükseklik zıplamaz). Hover/odak/tık aynı seçimi yapar.
 * Üç kompozisyon (marka ilişkisi / tedarik düzeni / ürün çeşitliliği) ortak yüzey ailesini paylaşır;
 * ürün görselleri yönetim medya yuvalarından gelir ve kırpılmaz.
 */

.carilo-services {
	background-color: var(--color-stone-100);
	padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem);
}

.carilo-services__head {
	margin-bottom: clamp(1.75rem, 3.6vw, 3rem);
}

/* İmza başlık yüzeyi: bordo zemin, fildişi serif yazı, ölçülü Carilo kavisi ve tek kırmızı ayrıntı. */
.carilo-services__plaque {
	--notch: 34px;
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 3.4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
	background: var(--gradient-brand-dark);
	color: var(--color-ivory);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}

.carilo-services__plaque::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--notch);
	height: var(--notch);
	background: linear-gradient(135deg, transparent calc(50% - 4px), var(--color-accent-on-dark) calc(50% - 4px) 50%, transparent 50%);
	pointer-events: none;
}

.carilo-services__curve {
	position: absolute;
	right: 0;
	top: 0;
	width: min(52%, 640px);
	height: 100%;
	pointer-events: none;
}

.carilo-services__curve-line { fill: none; stroke: color-mix(in srgb, var(--color-ivory) 26%, transparent); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.carilo-services__curve-red { fill: none; stroke: var(--color-accent-on-dark); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.carilo-services__rule {
	position: relative;
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: var(--space-4);
	background-color: var(--color-accent-on-dark);
	border-radius: var(--radius-pill);
}

.carilo-services__title {
	position: relative;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.5rem, 4.6vw, 4.4rem);
	line-height: 1.02;
	overflow-wrap: anywhere;
	color: var(--color-ivory);
}

.carilo-services__nav[hidden] { display: none; }

.carilo-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.carilo-services__panels {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 8vw, 4.5rem);
}

.carilo-services__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.carilo-services__body {
	max-width: 40rem;
}

.carilo-services__idx {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1;
	font-variant-numeric: lining-nums;
	color: var(--color-wine-700);
}

/* Alt hizmet başlık şeridi: ana başlık yüzeyiyle aynı aile, daha küçük ve sade (kavis/kırmızı köşe yok). */
.carilo-services__panel-title {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 0.4em 0.95em 0.46em 0.8em;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.625rem, 6.4vw, 2rem);
	line-height: 1.1;
	overflow-wrap: anywhere;
	color: var(--color-ivory);
	background: var(--color-wine-800);
	box-shadow: inset 4px 0 0 var(--color-accent-on-dark);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.carilo-services__panel-text {
	margin: var(--space-3) 0 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: color-mix(in srgb, var(--color-ink) 86%, transparent);
	text-wrap: pretty;
}

/* ---------- Hizmet sahnesi (temsili kurumsal sahne; yönetimden değiştirilebilir) ---------- */

.carilo-svc-photo {
	position: relative;
	margin: 0;
	background-color: var(--color-stone-100);
	border: 1px solid var(--color-accent);
	line-height: 0;
}

.carilo-svc-photo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain; /* oran bozulmaz; kaynak zaten 4:3 */
}

.carilo-svc-photo__corner { display: none; }

/* ---------- Masaüstü ---------- */

@media (min-width: 900px) {
	.carilo-services__showcase {
		display: grid;
		grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
		gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}

	.carilo-services__idx { display: none; }

	.carilo-services__panel {
		display: grid;
		grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
		align-items: start;
		gap: clamp(1.5rem, 3vw, 2.75rem);
	}

	.carilo-services__body { padding-top: 0; }

	.carilo-services__tab {
		position: relative;
		display: flex;
		align-items: baseline;
		gap: var(--space-4);
		width: 100%;
		min-height: 64px;
		padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
		border: 0;
		border-bottom: 1px solid var(--color-line-stone);
		background: transparent;
		color: color-mix(in srgb, var(--color-ink) 70%, transparent);
		font: inherit;
		text-align: left;
		cursor: pointer;
		transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
	}

	.carilo-services__item:first-child .carilo-services__tab { border-top: 1px solid var(--color-line-stone); }

	.carilo-services__tab::before {
		content: "";
		position: absolute;
		left: 0;
		top: 14px;
		bottom: 14px;
		width: 3px;
		border-radius: var(--radius-pill);
		background-color: var(--color-accent);
		transform: scaleY(0);
		transform-origin: center;
		transition: transform var(--duration-base) var(--ease-out);
	}

	.carilo-services__num {
		flex: 0 0 auto;
		font-family: var(--font-display);
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 1;
		font-variant-numeric: lining-nums;
		color: var(--color-wine-500);
	}

	.carilo-services__label {
		font-weight: 700;
		font-size: 1.0625rem;
		letter-spacing: 0.01em;
	}

	.carilo-services__tab:hover,
	.carilo-services__tab:focus-visible {
		color: var(--color-wine-800);
		background-color: color-mix(in srgb, var(--color-white) 55%, transparent);
	}

	.carilo-services__tab.is-active {
		color: var(--color-wine-800);
	}

	.carilo-services__tab.is-active::before { transform: scaleY(1); }
	.carilo-services__tab.is-active .carilo-services__num { color: var(--color-wine-800); }
	.carilo-services__tab.is-active .carilo-services__label { font-weight: 800; }

	.carilo-services__panels {
		display: block;
		min-width: 0;
	}

	.carilo-services--interactive .carilo-services__panels {
		display: grid;
	}

	.carilo-services--interactive .carilo-services__panel {
		grid-area: 1 / 1;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.carilo-services--interactive .carilo-services__panel.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.carilo-services--interactive.carilo-services--ready .carilo-services__panel {
		transition: opacity 420ms var(--ease-out), visibility 0s 420ms;
	}

	.carilo-services--interactive.carilo-services--ready .carilo-services__panel.is-active {
		transition: opacity 420ms var(--ease-out), visibility 0s 0s;
	}

	.carilo-services__panel-title { font-size: clamp(1.75rem, 2.3vw, 2.25rem); }
	.carilo-services__panel-text { margin-top: var(--space-4); }
	.carilo-services__panel-text { font-size: 1.125rem; }
}

@media (max-width: 639px) {
	.carilo-services__panels { gap: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.carilo-services--interactive.carilo-services--ready .carilo-services__panel,
	.carilo-services--interactive.carilo-services--ready .carilo-services__panel.is-active,
	.carilo-services__tab,
	.carilo-services__tab::before {
		transition: none;
	}
}