/* ============ Case Carousel ============ */
.cc {
	/* Ayarlanabilir değişkenler */
	--cc-gutter: clamp(50px, 10vw, 150px);   /* soldaki boşluk */
	--cc-gap: 20px;                          /* kartlar arası */
	--cc-w: 450px;                           /* normal kart genişliği */
	--cc-w-active: 495px;                    /* büyüyen kart genişliği */
	--cc-ratio: 1.39;                        /* görsel en/boy oranı */
	--cc-bar: 18px;                          /* görsel altındaki renk şeridi */
	--cc-accent: #3396f7;                    /* pasif şerit rengi */
	--cc-accent-active: #ef6b6d;             /* aktif şerit rengi */
	--cc-ease: cubic-bezier(.22, .61, .36, 1);
	--cc-speed: .55s;

	/* Tema container'ından taşıp tam genişlik olsun */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	color: #111;
}

.cc__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	padding: 0 var(--cc-gutter);
	margin-bottom: clamp(40px, 8vw, 170px);
}

.cc__title {
	margin: 0;
	max-width: 15em;
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.cc__nav { display: flex; gap: 20px; padding-top: 1.2em; flex-shrink: 0; }

.cc__arrow {
	appearance: none;
	background: none;
	border: 0;
	padding: 4px;
	color: #111;
	cursor: pointer;
	line-height: 0;
	transition: opacity .2s;
}
.cc__arrow:disabled { opacity: .35; cursor: default; }
.cc__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --- Track --- */
.cc__track {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-gap);
	padding: 0 var(--cc-gutter) 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-padding-left: var(--cc-gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.cc__track::-webkit-scrollbar { display: none; }
.cc__track::after { content: ""; flex: 0 0 1px; } /* sağ kenar boşluğu */

/* --- Kart --- */
.cc__item {
	flex: 0 0 var(--cc-w);
	text-decoration: none;
	color: inherit;
	transition: flex-basis var(--cc-speed) var(--cc-ease);
}
.cc__item.is-active { flex-basis: var(--cc-w-active); }

.cc__media {
	position: relative;
	aspect-ratio: var(--cc-ratio);
	background: var(--cc-accent);
	overflow: hidden;
	transition: background-color var(--cc-speed) var(--cc-ease);
}
.cc__item.is-active .cc__media { background: var(--cc-accent-active); }

.cc__media img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100% !important;
	height: calc(100% - var(--cc-bar)) !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
}

.cc__name {
	margin: 56px 0 0;
	font-size: clamp(22px, 1.9vw, 30px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.cc__desc {
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.4;
	color: #666;
}

.cc__item:focus-visible { outline: 2px solid #111; outline-offset: 6px; }

/* --- Tablet / mobil --- */
@media (max-width: 1024px) {
	.cc { --cc-w: 420px; --cc-w-active: 520px; }
}
@media (max-width: 768px) {
	.cc { --cc-w: 78vw; --cc-w-active: 78vw; }
	.cc__track { scroll-snap-type: x mandatory; }
	.cc__item { scroll-snap-align: start; }
	.cc__nav { display: none; }
	.cc__name { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.cc { --cc-speed: 0s; }
	.cc__track { scroll-behavior: auto; }
}