/**
 * Marka sayfaları (Yupo, Toffe, Oneo): üst sahne (ana sayfa banner bileşeninin tek karelik hâli) → marka plakası →
 * ürün ailesi → galeri → diğer markalar. Ambalajlar kırpılmaz/esnetilmez; görsel doğal boyutundan büyük gösterilmez.
 * Ürün yüzeyi: beyaz vitrin + ince çerçeve + kesik köşe; markaların kendi renkleri görsellerinde yaşar.
 */

/* Marka kimliği: kompakt bordo panel (gerçek HTML başlık + kaynak slogan + Portfolyo'ya dönüş); logo yuvası doluysa sağda
   beyaz vitrinde özgün oranıyla durur, yoksa tipografik başlık tek başına güçlüdür. */
.carilo-bid {
	background-color: var(--color-ivory);
	padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
}

.carilo-bid__panel {
	--notch: 30px;
	position: relative;
	display: grid;
	gap: var(--space-5) var(--space-7);
	grid-template-columns: 1fr;
	align-items: center;
	overflow: hidden;
	padding: clamp(1.5rem, 3.2vw, 3rem) clamp(1.5rem, 3.6vw, 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-bid__panel::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--notch);
	height: var(--notch);
	background: linear-gradient(135deg, transparent calc(50% - 5px), var(--color-accent-on-dark) calc(50% - 5px) 50%, transparent 50%);
	pointer-events: none;
}

.carilo-bid__route {
	position: absolute;
	right: clamp(0.5rem, 3vw, 2.5rem);
	bottom: clamp(0.5rem, 1.4vw, 1.25rem);
	width: clamp(150px, 24vw, 330px);
	height: auto;
	fill: none;
	stroke: color-mix(in srgb, var(--color-ivory-100) 38%, transparent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1.5 8;
	pointer-events: none;
}

.carilo-bid__route circle { fill: color-mix(in srgb, var(--color-ivory-100) 45%, transparent); stroke: none; }

.carilo-bid__text { position: relative; z-index: 1; min-width: 0; }

.carilo-bid__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	margin-bottom: var(--space-3);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ivory-100);
	text-decoration: none;
}

.carilo-bid__back svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.carilo-bid__back:hover,
.carilo-bid__back:focus-visible { color: var(--color-white); }
.carilo-bid__back:hover svg { transform: translateX(-3px); }

.carilo-bid__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(3.75rem, 9vw, 8rem);
	line-height: 0.92;
	letter-spacing: -0.01em;
	color: var(--color-ivory);
	overflow-wrap: anywhere;
}

.carilo-bid__slogan {
	margin: var(--space-4) 0 0;
	padding-top: var(--space-4);
	border-top: 2px solid var(--color-accent-on-dark);
	display: inline-block;
	max-width: 30ch;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.375rem, 2.2vw, 2.125rem);
	line-height: 1.2;
	color: var(--color-ivory-100);
}

.carilo-bid__logo {
	position: relative;
	z-index: 1;
	justify-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 2vw, 1.75rem);
	background-color: var(--color-white);
	box-shadow: 0 0 0 1px var(--color-line-stone);
}

.carilo-bid__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 320px);
	max-height: clamp(90px, 14vw, 180px);
}

@media (min-width: 900px) {
	.carilo-bid__panel { grid-template-columns: minmax(0, 1fr) auto; }
	.carilo-bid__logo { justify-self: end; }
}

.carilo-bid__catalog {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 48px;
	margin-top: var(--space-5);
	padding: 0 var(--space-4);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ivory);
	text-decoration: none;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ivory) 55%, transparent);
	transition: background-color var(--duration-fast) var(--ease-standard);
}

.carilo-bid__catalog svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--ease-standard); }
.carilo-bid__catalog:hover { background-color: color-mix(in srgb, var(--color-ivory) 14%, transparent); }
.carilo-bid__catalog:hover svg { transform: translateX(4px); }
.carilo-bid__catalog:focus-visible { outline: 3px solid var(--color-focus-on-dark); outline-offset: 3px; }

/* Kampanya afişi: girişten sonra büyük vitrin; oran korunur, kırpma yok. */
.carilo-camp {
	background-color: var(--color-ivory);
	padding-block: 0 clamp(1.5rem, 3vw, 2.75rem);
}

.carilo-camp__frame {
	margin: 0;
	background-color: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-line-stone), 0 24px 60px -34px rgba(63, 16, 32, 0.35);
	line-height: 0;
}

.carilo-camp__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--r, 2.4);
}

/* Bölüm başlığı (ortak). */
.carilo-sec-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.carilo-sec-head__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	line-height: 1.02;
	color: var(--color-wine-800);
}

/* Ürün vitrin yüzeyi. */
.carilo-pt {
	--pt-notch: 24px;
	--cap: 360px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: clamp(1.25rem, 2.6vw, 2.25rem);
	background-color: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-line-stone);
	clip-path: polygon(0 0, calc(100% - var(--pt-notch)) 0, 100% var(--pt-notch), 100% 100%, 0 100%);
}

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

.carilo-pt__img {
	display: block;
	width: 100%;
	max-width: min(var(--nat, 400px), var(--cap));
	height: auto;
	user-select: none;
}

.carilo-pt--main { --cap: 520px; min-height: clamp(340px, 42vw, 560px); }
.carilo-pt--support { --cap: 340px; min-height: clamp(260px, 30vw, 360px); }
.carilo-pt--gallery { --cap: 300px; min-height: clamp(240px, 26vw, 340px); }

/* Ürün ailesi. */
.carilo-family {
	background-color: var(--color-ivory);
	padding-block: clamp(3rem, 6.5vw, 6.5rem) clamp(2rem, 4vw, 4rem);
}

.carilo-family__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.carilo-family__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		grid-auto-rows: 1fr;
	}

	.carilo-family__grid .carilo-pt--main { grid-row: span 2; }
	.carilo-family__grid--nomain { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Üç marka aynı ailedir; kompozisyon görsel içeriğine göre uyarlanır. */
	.carilo-family--toffe .carilo-family__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
	.carilo-family--toffe .carilo-family__grid .carilo-pt--main { grid-column: 2; grid-row: 1 / span 2; }
	.carilo-family--toffe .carilo-family__grid .carilo-pt--support { grid-column: 1; }
	.carilo-family--oneo .carilo-family__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	.carilo-family--oneo .carilo-family__grid .carilo-pt--main { grid-column: 1 / -1; grid-row: auto; min-height: clamp(300px, 32vw, 440px); --cap: 540px; }
	.carilo-family--oneo .carilo-family__grid .carilo-pt--support { min-height: clamp(240px, 24vw, 320px); }
}

/* Galeri. */
.carilo-gallery {
	background-color: var(--color-stone-100);
	padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 6vw, 6rem);
}

.carilo-gallery__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.carilo-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Diğer markalar. */
.carilo-brand-next {
	background-color: var(--color-stone-100);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.carilo-brand-next .carilo-container {
	border-top: 1px solid var(--color-line-stone);
	padding-top: clamp(1.25rem, 2.5vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-4) var(--space-7);
}

.carilo-brand-next__label {
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.carilo-brand-next__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
}

.carilo-brand-next__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 48px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--color-wine-800);
	text-decoration: none;
}

.carilo-brand-next__list svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.carilo-brand-next__list a:hover svg,
.carilo-brand-next__list a:focus-visible svg { transform: translateX(4px); }

@media (max-width: 639px) {
	.carilo-pt { --pt-notch: 18px; }
}