/* ==========================================================================
   VOC PRODUCTS BLOCK WIDGET
   Confy Adult Elementor — Ürün Blok Widget Stilleri
   ========================================================================== */

/* ── Font Faces ── */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── CSS Variables ── */
.voc-products-block {
	--voc-navy-primary: #0f2b48;
	--voc-navy-dark: #0b2341;
	--voc-green-primary: #336a53;
	--voc-green-hover: #275441;
	--voc-text-dark: #0f1c2c;
	--voc-text-muted: #52637a;
	--voc-border: #e2e8f0;
	--voc-radius-md: 16px;
	--voc-shadow-sm: 0 2px 8px rgba(15, 43, 72, 0.04);
	--voc-shadow-lg: 0 16px 40px rgba(15, 43, 72, 0.12);
	--voc-transition-fast: 0.2s ease;
	--voc-transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	--voc-font-sans: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Reset ── */
.voc-products-block,
.voc-products-block * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── Block Container ── */
.voc-products-block {
	font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.1rem;
	margin: 0 auto;
	padding: 0 4%;
}

/* ==========================================================================
   SECTION TITLE WRAPPER (Icon + Title + Line)
   ========================================================================== */
.voc-section-title-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 30px;
}

.voc-section-title-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transition: transform var(--voc-transition-normal);
}

.voc-section-title-icon:hover {
	transform: scale(1.08);
}

/* Blue theme icon */
.voc-section-title-wrapper--blue .voc-section-title-icon {
	background-color: var(--voc-navy-primary);
	color: #ffffff;
}

/* Green theme icon */
.voc-section-title-wrapper--green .voc-section-title-icon {
	background-color: var(--voc-green-primary);
	color: #ffffff;
}

.voc-section-title-text {
	flex-shrink: 0;
}

.voc-section-title {
	font-family: var(--voc-font-sans);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	margin: 0;
}

.voc-section-title-wrapper--blue .voc-section-title {
	color: var(--voc-navy-primary);
}

.voc-section-title-wrapper--green .voc-section-title {
	color: var(--voc-green-primary);
}

.voc-section-subtitle {
	font-size: 0.9rem;
	color: var(--voc-text-muted);
	font-weight: 500;
	margin: 2px 0 0;
}

.voc-section-line {
	flex: 1;
	height: 1.5px;
	background-color: #dce6f0;
}

/* ==========================================================================
   PRODUCTS GRID
   ========================================================================== */
.voc-products-grid {
	display: grid;
	gap: 24px;
}

.voc-products-grid--4col {
	grid-template-columns: repeat(4, 1fr);
}

.voc-products-grid--2col {
	grid-template-columns: repeat(2, 1fr);
}

/* ==========================================================================
   PRODUCT CARD — Base
   ========================================================================== */
.voc-product-card {
	position: relative;
	background: #ffffff;
	border-radius: var(--voc-radius-md);
	border: 1px solid var(--voc-border);
	box-shadow: var(--voc-shadow-sm);
	padding: 24px 20px 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition:
		transform var(--voc-transition-normal),
		box-shadow var(--voc-transition-normal),
		border-color var(--voc-transition-fast),
		background-color var(--voc-transition-fast);
}

.voc-product-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--voc-shadow-lg);
}

/* ── Blue Card (Premium) ── */
.voc-product-card--blue {
	background: #f3f7fc;
	border: 1px solid #d9e5f3;
}

.voc-product-card--blue:hover {
	background: #e8f1fb;
	border-color: #badaf5;
}

/* ── Green Card (Konfor) ── */
.voc-product-card--green {
	background: #f2f8f4;
	border: 1px solid #d8e8de;
}

.voc-product-card--green:hover {
	background: #eaf4ed;
	border-color: #b9d8c4;
}

/* ==========================================================================
   PRODUCT CARD — Image
   ========================================================================== */
.voc-product-card__img-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 10px 0;
}

.voc-product-card__img {
	max-height: 180px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 8px 16px rgba(15, 43, 72, 0.1));
	transition: transform var(--voc-transition-normal);
}

.voc-product-card:hover .voc-product-card__img {
	transform: scale(1.04);
}

/* ==========================================================================
   PRODUCT CARD — Body
   ========================================================================== */
.voc-product-card__body {
	text-align: center;
	margin-top: 12px;
}

.voc-product-card__title {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--voc-navy-primary);
	margin-bottom: 6px;
	line-height: 1.3;
}

.voc-product-card--green .voc-product-card__title {
	color: var(--voc-green-primary);
}

.voc-product-card__desc {
	font-size: 0.95rem;
	color: var(--voc-text-muted);
	line-height: 1.45;
	margin-bottom: 18px;
	min-height: 38px;
}

/* ==========================================================================
   PRODUCT CARD — Link Button
   ========================================================================== */
.voc-product-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 0;
	border-top: 1px solid var(--voc-border);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--voc-navy-primary);
	text-decoration: none;
	transition: color var(--voc-transition-fast);
}

.voc-product-card--green .voc-product-card__link {
	color: var(--voc-green-primary);
}

.voc-product-card__link i {
	font-size: 16px;
	transition: transform var(--voc-transition-fast);
}

.voc-product-card:hover .voc-product-card__link i {
	transform: translateX(4px);
}

/* ==========================================================================
   PRODUCT CARD — Landscape (Horizontal, for 2-col layout)
   ========================================================================== */
.voc-product-card--landscape {
	flex-direction: row;
	align-items: center;
	padding: 24px 30px;
	gap: 24px;
}

.voc-product-card--landscape .voc-product-card__img-wrapper {
	width: 40%;
	min-height: 160px;
	padding: 0;
	flex-shrink: 0;
}

.voc-product-card--landscape .voc-product-card__img {
	max-height: 160px;
}

.voc-product-card--landscape .voc-product-card__body {
	width: 60%;
	text-align: left;
	margin-top: 0;
}

.voc-product-card--landscape .voc-product-card__desc {
	min-height: auto;
	margin-bottom: 16px;
}

.voc-product-card--landscape .voc-product-card__link {
	justify-content: flex-start;
	border-top: none;
	padding: 0;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ── Tablet ── */
@media (max-width: 1024px) {
	.voc-products-grid--4col {
		grid-template-columns: repeat(2, 1fr);
	}

	.voc-products-grid--2col {
		grid-template-columns: 1fr;
	}

	.voc-product-card--landscape {
		flex-direction: column;
		padding: 24px 20px 20px;
		gap: 12px;
	}

	.voc-product-card--landscape .voc-product-card__img-wrapper {
		width: 100%;
		min-height: 180px;
	}

	.voc-product-card--landscape .voc-product-card__body {
		width: 100%;
		text-align: center;
	}

	.voc-product-card--landscape .voc-product-card__link {
		justify-content: center;
		border-top: 1px solid var(--voc-border);
		padding: 10px 0;
	}
}

/* ── Mobile ── */
@media (max-width: 768px) {
	.voc-products-block {
		padding: 0 16px;
	}

	.voc-products-grid--4col {
		grid-template-columns: 1fr;
	}

	.voc-section-title-wrapper {
		flex-wrap: wrap;
		gap: 12px;
	}

	.voc-section-line {
		flex-basis: 100%;
		order: 3;
	}

	.voc-section-title {
		font-size: 1.25rem;
	}

	.voc-product-card {
		padding: 20px 16px 16px;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   RTL SUPPORT
   ────────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .voc-product-card__link i,
.rtl .voc-product-card__link i {
	transform: rotate(180deg);
}

[dir="rtl"] .voc-product-card:hover .voc-product-card__link i,
.rtl .voc-product-card:hover .voc-product-card__link i {
	transform: rotate(180deg) translateX(4px);
}

[dir="rtl"] .voc-product-card--landscape .voc-product-card__body,
.rtl .voc-product-card--landscape .voc-product-card__body {
	text-align: right;
}

@media (max-width: 1024px) {
	[dir="rtl"] .voc-product-card--landscape .voc-product-card__body,
	.rtl .voc-product-card--landscape .voc-product-card__body {
		text-align: center;
	}
}