/*
 * Eurotherm static prototype v5 -- design/IA/user-flow prototype only.
 * No WordPress, no backend, no real form submission, no live SEO.
 *
 * Brand tokens are placeholders approximating "red sampled from the
 * packaging logo / black-anthracite / white / light grey / metallic grey."
 * No logo image file has been shared in this project -- the header/footer
 * logo below is a deliberate text-based lockup in the brand colours, not a
 * recreation of the real mark. Swap in a real <img> the moment a vector or
 * high-res logo file is provided; the markup is written so that's a
 * one-line change (see PROTOTIP-NOTLARI.md).
 */

:root {
	--eurotherm-red: #C8102E;
	--eurotherm-black: #1A1A1A;
	--eurotherm-white: #FFFFFF;
	--eurotherm-grey-light: #F5F5F5;
	--eurotherm-grey-mid: #B5B5B5;
	--eurotherm-grey-metallic: #8C8C8C;
	--eurotherm-amber: #B8860B;

	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--container-width: 1200px;
	--radius: 3px;

	/* v7p: hierarchical corner-radius + soft-depth scale (visual softening pass) */
	--radius-card: 18px;   /* product cards, category cards */
	--radius-box: 16px;    /* big content/service boxes, reference/advantage/info cards, notices */
	--radius-form: 10px;   /* form fields, selects, textarea, buttons, small controls */
	--radius-modal: 20px;  /* modal / quote dialog windows */
	--radius-image: 14px;  /* product image frames, certificate/catalogue boxes, table container */
	--radius-pill: 999px;  /* small tags / badges, capsule shape */
	--border-soft: #E1E4E8;
	--shadow-soft: 0 8px 24px rgba(17, 26, 31, 0.07);
	--shadow-soft-hover: 0 12px 28px rgba(17, 26, 31, 0.11);
	--shadow-modal: 0 20px 48px rgba(17, 26, 31, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

/* Belt-and-braces: some browsers let an author CSS rule with higher
   specificity than the UA default override [hidden]. This guarantees
   anything marked hidden actually disappears -- relevant to the product
   360 modal, which should never be visible unless explicitly opened. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--eurotherm-black);
	background: var(--eurotherm-white);
	line-height: 1.55;
	font-size: 16px;
	overflow-x: hidden; /* belt-and-braces against any stray wide element on very small screens */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--eurotherm-red); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin-block-start: 0; color: var(--eurotherm-black); }
p { color: #333; }

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 24px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	width: auto; height: auto;
	background: var(--eurotherm-black);
	color: var(--eurotherm-white);
	padding: 12px 16px;
	z-index: 2000;
	clip: auto;
}

/* Visible keyboard focus everywhere -- spec section 12 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--eurotherm-red);
	outline-offset: 2px;
}

/* Buttons -- flat, industrial, minimal rounding */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: 12px;
	padding-inline: 24px;
	border-radius: var(--radius-form);
	font-weight: 700;
	font-size: 0.95rem;
	border: 2px solid var(--eurotherm-red);
	cursor: pointer;
	line-height: 1.2;
}
.btn--primary { background: var(--eurotherm-red); color: var(--eurotherm-white); }
.btn--primary:hover { background: #a70d25; border-color: #a70d25; text-decoration: none; }
.btn--outline { background: transparent; color: var(--eurotherm-black); border-color: var(--eurotherm-black); }
.btn--outline:hover { background: var(--eurotherm-black); color: var(--eurotherm-white); text-decoration: none; }
.btn--small { padding-block: 9px; padding-inline: 16px; font-size: 0.82rem; }
.btn--large { padding-block: 15px; padding-inline: 32px; font-size: 1.05rem; }
.btn--full { width: 100%; }
.btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.btn--outline:disabled:hover { background: transparent; color: var(--eurotherm-black); }

/* ==========================================================================
   Brand logo (text-based lockup -- see file header note)
   ========================================================================== */
.brand-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	max-width: 100%;
}
.brand-logo:hover { text-decoration: none; }
.brand-logo__image {
	height: 42px;
	width: auto;
	display: block;
	max-width: 100%;
}
.brand-logo--footer .brand-logo__image { height: 30px; }
.brand-logo__text-fallback {
	display: none; /* only shown by the <img onerror> handler if the real logo file is missing */
	align-items: center;
	gap: 10px;
}
@media (max-width: 400px) {
	.brand-logo__image { height: 32px; }
	.brand-logo--footer .brand-logo__image { height: 26px; }
}
.brand-logo__mark {
	flex-shrink: 0;
	width: 36px; height: 36px;
	background: var(--eurotherm-red);
	color: var(--eurotherm-white);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 1.05rem;
	border-radius: 4px;
}
.brand-logo__text { min-width: 0; }
.brand-logo__name {
	display: block;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--eurotherm-black);
	font-size: 1.1rem;
	line-height: 1.1;
	white-space: nowrap;
}
.brand-logo__tagline {
	display: block;
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	color: var(--eurotherm-grey-metallic);
	font-weight: 700;
	text-transform: uppercase;
	margin-block-start: 2px;
	white-space: nowrap;
}
.brand-logo--footer .brand-logo__mark { width: 30px; height: 30px; font-size: 0.9rem; }
.brand-logo--footer .brand-logo__name { color: var(--eurotherm-white); font-size: 1rem; }
.brand-logo--footer .brand-logo__tagline { color: #999; }

@media (max-width: 400px) {
	.brand-logo__mark { width: 30px; height: 30px; font-size: 0.9rem; }
	.brand-logo__name { font-size: 0.95rem; }
	.brand-logo__tagline { font-size: 0.55rem; letter-spacing: 0.1em; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	border-block-end: 1px solid var(--eurotherm-grey-mid);
	position: sticky;
	inset-block-start: 0;
	background: var(--eurotherm-white);
	z-index: 100;
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 14px;
}
.site-header__nav { display: flex; align-items: center; }
.site-header__menu {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0; padding: 0;
	flex-wrap: wrap;
}
.site-header__menu a {
	color: var(--eurotherm-black);
	font-size: 0.92rem;
	font-weight: 600;
	padding-block: 6px;
}
.site-header__menu a.is-current {
	color: var(--eurotherm-red);
	border-block-end: 2px solid var(--eurotherm-red);
}
.site-header__actions { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.site-header__mobile-cta { display: none; }

/* Real, working TR/EN language switcher -- plain text, no flags. TR/EN
   sites are two fully separate static folders (root = Turkish, /en/ =
   English), so this is a genuine link to a different page, not a toggle. */
.language-switcher {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 700;
}
.language-switcher [aria-current="page"] {
	color: var(--eurotherm-black);
}
.language-switcher span[aria-hidden="true"] {
	color: var(--eurotherm-grey-mid);
	font-weight: 400;
}
.language-switcher a {
	color: var(--eurotherm-grey-metallic);
}
.language-switcher a:hover {
	color: var(--eurotherm-red);
	text-decoration: none;
}

/* v7s5: the inactive TR/EN link's tap target was only as big as its
   text (~20x20px) on mobile/tablet -- too small for reliable touch.
   Give it a real 44x44px minimum hit area without changing its visual
   text size or the active (non-link) language's appearance. */
@media (max-width: 1180px) {
	.language-switcher a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

.site-header__menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-form);
	width: 44px; height: 44px;
	cursor: pointer;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--eurotherm-black);
	position: relative;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.site-header__menu-icon::before { content: ""; position: absolute; inset-block-start: -6px; }
.site-header__menu-icon::after { content: ""; position: absolute; inset-block-start: 6px; }
/* v7s5: the open-state icon used translateY + rotate on pseudo-elements
   that were still offset above/below center, which reads as a skewed
   ">" instead of a symmetric X. Re-centering both bars on the icon's own
   center line (inset-block-start: 0) before rotating fixes this -- the
   closed-state 3-line hamburger above is untouched. */
.site-header__menu-icon::before,
.site-header__menu-icon::after {
	inset-inline-start: 0;
	transform-origin: center;
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon { background: transparent; }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::before,
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::after {
	inset-block-start: 0;
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::before {
	transform: rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::after {
	transform: rotate(-45deg);
}

@media (max-width: 1180px) {
	.site-header__menu-toggle { display: flex; }
	.site-header__nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		background: var(--eurotherm-white);
		border-block-end: 1px solid var(--eurotherm-grey-mid);
		box-sizing: border-box;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
	}
	.site-header__nav.is-open { display: block; }
	.site-header__menu {
		flex-direction: column;
		gap: 0;
		padding: 8px 24px 16px;
	}
	.site-header__menu a {
		display: block;
		padding-block: 14px;
		border-block-end: 1px solid var(--eurotherm-grey-light);
		font-size: 1rem;
	}
	.site-header__menu a.is-current { border-block-end-color: var(--eurotherm-red); }
	.site-header__mobile-cta { display: block; padding: 16px 24px 8px; }
	/* Header CTA button lives inside the open menu on mobile instead of
	   competing with the hamburger + language switcher for space. */
	.site-header__actions .site-header__cta { display: none; }
}

@media (max-width: 400px) {
	.site-header__inner { gap: 8px; padding-block: 10px; }
	/* v7s5: the EN language link's new 44px min touch target eats into
	   the tight 320px header row (logo + language switcher + hamburger).
	   Small, controlled reclaim of a few px via tighter internal gaps --
	   logo size is untouched. */
	.language-switcher { gap: 4px; }
}

/* Desktop-only: keep the full nav menu on a single line. Below this width
   the header switches to the hamburger menu (see the max-width: 1180px
   block above), so this rule only has to hold up between 1181px and
   whatever the widest supported viewport is. */
@media (min-width: 1181px) {
	.site-header__menu {
		flex-wrap: nowrap;
		gap: clamp(14px, 1.35vw, 22px);
	}
	.site-header__menu a,
	.site-header__cta {
		white-space: nowrap;
	}
	.site-header__nav {
		min-width: 0;
	}
	.brand-logo,
	.site-header__actions {
		flex-shrink: 0;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { background: var(--eurotherm-grey-light); }
.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	padding-block: 56px;
}
.hero__headline { font-size: clamp(1.6rem, 3vw, 2.35rem); margin-block-end: 18px; }
.hero__support { color: #444; margin-block-end: 26px; max-width: 46ch; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Product "showcase" frame: contains the catalogue photo (white background)
   inside a bounded, quiet white card, product fully visible and centred,
   never cropped -- spec section 2. object-fit: contain (never cover) so the
   valve's handle and both connection ends always stay inside the frame. */
.hero__media {
	background: var(--eurotherm-white);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-box);
	box-shadow: var(--shadow-soft);
	padding: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	overflow: hidden;
}
.hero__media img {
	display: block;
	width: min(100%, 500px);
	height: auto;
	max-height: 420px;
	object-fit: contain;
	object-position: center;
}
.hero__media-caption {
	margin-block-start: 10px;
	font-size: 0.72rem;
	color: var(--eurotherm-grey-metallic);
	text-align: center;
}
@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; padding-block: 40px; }
	.hero__media { order: -1; padding: 18px; min-height: 0; }
	.hero__media img { max-height: 320px; }
}
@media (max-width: 480px) {
	.hero__media { padding: 14px; }
	.hero__media img { max-height: 300px; }
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */
.section { padding-block: 52px; }
.section--tinted { background: var(--eurotherm-grey-light); }
.section--accent { background: #FFF3F3; }
.section__title { font-size: 1.5rem; margin-block-end: 22px; }
.section__intro { color: #444; max-width: 62ch; margin-block-end: 24px; }
@media (max-width: 600px) {
	.section { padding-block: 36px; }
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
@media (max-width: 900px) {
	.split { grid-template-columns: 1fr; }
	.split--reverse { direction: ltr; }
}

/* Generic placeholder frame -- deliberately looks like a design placeholder
   (dashed border + label), never like a broken/missing image. */
.image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--eurotherm-grey-light);
	border: 1px dashed var(--eurotherm-grey-mid);
	border-radius: var(--radius-image);
	aspect-ratio: 4 / 3;
	color: var(--eurotherm-grey-metallic);
	font-size: 0.78rem;
	padding: 12px;
}

/* ==========================================================================
   Category grid / product grid / cards
   ========================================================================== */
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.category-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-card);
	overflow: hidden;
	color: inherit;
	height: 100%;
	box-shadow: var(--shadow-soft);
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.category-card:hover { text-decoration: none; border-color: var(--eurotherm-red); transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); }
.category-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--eurotherm-white);
}
.category-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 6px;
}
.category-card__title { display: block; padding: 12px 14px 4px; font-weight: 700; font-size: 0.92rem; }
.category-card__cta { display: block; padding: 0 14px 14px; margin-block-start: auto; color: var(--eurotherm-red); font-size: 0.82rem; }
@media (max-width: 1100px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .category-card { border-radius: 16px; } }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-card);
	overflow: hidden;
	height: 100%;
	box-shadow: var(--shadow-soft);
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
/* v7s8: real 1200x1200 product photos were being cropped by
   object-fit: cover inside the 4:3 card frame -- valve handles, both
   pipe-connection ends, and the top/bottom of taller vertical products
   were getting cut off. Switching to object-fit: contain guarantees the
   whole photo is always visible; the 4:3 frame, card height, and grid are
   unchanged, only how the image fits inside that frame changes. */
.product-card__image,
.product-card > img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	object-position: center;
	background: var(--eurotherm-white);
	padding: 6px;
}
.product-card:hover { border-color: var(--eurotherm-red); transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); }
.product-card__image-placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; aspect-ratio: 4/3;
	background: var(--eurotherm-grey-light);
	border-bottom: 1px dashed var(--eurotherm-grey-mid);
	color: var(--eurotherm-grey-metallic);
	font-size: 0.72rem;
	text-align: center;
	padding: 10px;
}
.product-card__body { padding: 14px; display: flex; flex-direction: column; flex-grow: 1; }
.product-card__title {
	font-size: 0.98rem;
	margin-block-end: 6px;
	/* keep long product names from stretching card heights unevenly */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}
.product-card__title { color: var(--eurotherm-black); }
.product-card__title a { color: var(--eurotherm-black); }
.product-card__code {
	font-size: 0.78rem;
	color: #555;
	margin-block-end: 4px;
	font-variant-numeric: tabular-nums;
}
.product-card__meta-tag {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--eurotherm-amber);
	background: #FFF8E1;
	border: 1px solid #E6D08A;
	border-radius: var(--radius-pill);
	padding: 1px 6px;
	margin-block-end: 8px;
	align-self: flex-start;
}
.product-card__link { font-size: 0.85rem; font-weight: 700; margin-block-start: auto; padding-block-start: 8px; }
a.product-card {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
a.product-card:hover {
	color: inherit;
	text-decoration: none;
}
a.product-card:focus-visible {
	outline: 3px solid rgba(200, 16, 46, 0.35);
	outline-offset: 3px;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .product-card { border-radius: 16px; } }
@media (max-width: 420px) { .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* ==========================================================================
   Generic page chrome (used by the content pages: products/production/
   private-label/export/about/catalogues/contact)
   ========================================================================== */
.site-main { display: block; }
.page-title { font-size: 1.85rem; margin-block: 24px 14px; }
.page-content { padding-block-end: 48px; }
.page-content--narrow { max-width: 640px; }
.product-listing { padding-block-end: 48px; }
.product-detail { padding-block-end: 12px; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs { padding-block: 14px; }
.breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding-inline-start: 24px; font-size: 0.82rem; color: #666; }
.breadcrumbs__item:not(:last-child)::after { content: "/"; margin-inline-start: 6px; color: var(--eurotherm-grey-mid); }

/* ==========================================================================
   Product listing (category page) + mobile filter toggle
   ========================================================================== */
.product-listing__layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; margin-block-start: 20px; align-items: start; }
.product-listing__filters { background: var(--eurotherm-grey-light); padding: 18px; border-radius: var(--radius-box); }
.filters-toggle { display: none; }
.filters-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.filters-form legend { font-weight: 700; margin-block-end: 8px; padding: 0; font-size: 0.88rem; }
.filters-form__pill {
	display: block;
	padding: 7px 4px;
	font-size: 0.88rem;
	color: #333;
	border-radius: var(--radius-form);
	cursor: pointer;
	background: none;
	border: none;
	text-align: start;
	width: 100%;
}
.filters-form__pill:hover { background: #ECECEC; text-decoration: none; }
.filters-form__pill.is-active { color: var(--eurotherm-red); font-weight: 700; }
.product-listing__count { color: #666; margin-block-end: 14px; font-size: 0.9rem; }

@media (max-width: 900px) {
	.product-listing__layout { grid-template-columns: 1fr; }
	.filters-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background: var(--eurotherm-grey-light);
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-form);
		padding: 12px 16px;
		font-weight: 700;
		cursor: pointer;
		margin-block-end: 12px;
	}
	.product-listing__filters { display: none; }
	.product-listing__filters.is-open { display: block; }
}

/* ==========================================================================
   Product detail
   ========================================================================== */
.product-detail__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; padding-block: 28px; }
.product-detail__gallery,
.product-detail__summary {
	min-width: 0;
	max-width: 100%;
}
.product-detail__main-image {
	aspect-ratio: 1/1;
	background: var(--eurotherm-grey-light);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-image);
	overflow: hidden;
	position: relative;
}
.product-detail__main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__eyebrow { color: #555; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; margin-block-end: 6px; text-transform: uppercase; }
.product-detail__title { font-size: 1.7rem; margin-block-end: 6px; }
.product-detail__code { color: #555; margin-block-end: 16px; font-variant-numeric: tabular-nums; }
.product-detail__description { margin-block-end: 20px; }
.product-detail__summary .btn { margin-block-end: 22px; }
.product-detail__cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; }
.product-detail__cta-row .btn { margin-block-end: 0; }
@media (max-width: 900px) {
	.product-detail__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* Draft/admin content box -- for copy that is NOT verified and must never
   be mistaken for real published content (spec section 9). */
.draft-box {
	background: #FFF3F3;
	border: 1px dashed var(--eurotherm-red);
	border-radius: var(--radius-box);
	padding: 14px 16px;
	font-size: 0.85rem;
	color: #7a0f20;
	margin-block: 14px;
}
.draft-box__label {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	background: var(--eurotherm-red);
	color: #fff;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	margin-block-end: 6px;
}

/* Tables -- horizontal scroll wrapper on mobile instead of squeezing/breaking */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 0; border-radius: var(--radius-image); margin-block-start: 14px; width: 100%; max-width: 100%; }
table.variant-table, table.spec-table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	margin-block-start: 0;
}
table.variant-table caption { text-align: start; font-weight: 700; margin-block-end: 8px; font-size: 0.9rem; }
.variant-table th, .variant-table td, .spec-table th, .spec-table td {
	border: 1px solid var(--eurotherm-grey-mid);
	padding: 10px 12px;
	text-align: start;
	font-size: 0.88rem;
	white-space: nowrap;
}
.variant-table thead th, .spec-table th[scope="row"] { background: var(--eurotherm-grey-light); }
.variant-table tbody tr.is-selected { background: #FFF3F3; }
.variant-table tbody tr.is-selected td { font-weight: 700; }
.variant-select-btn { white-space: nowrap; }

/* Tighten the gap between the variant table's per-row action buttons and
   the CTA row below it -- .product-detail__summary .btn's 22px bottom
   margin (needed for the main Teklif Al / WhatsApp buttons) was also
   landing on every in-table .variant-select-btn, making rows taller than
   necessary and leaving a large gap before the CTA row. */
.product-detail__summary .variant-table .variant-select-btn {
	margin-block-end: 0;
}
.variant-table td:last-child {
	vertical-align: middle;
}
.table-scroll + .product-detail__cta-row {
	margin-block-start: 6px;
}

.product-detail__specs, .product-detail__applications, .product-detail__downloads,
.product-detail__more-info, .product-detail__related, .product-detail__quote-form { padding-block: 28px; }
.product-detail__more-info { border-block-start: 1px solid var(--eurotherm-grey-light); }
.product-detail__more-info h2 { font-size: 1.15rem; margin-block-end: 8px; }
.product-detail__more-info p { margin-block-end: 8px; }
.product-detail__private-label { padding: 28px; text-align: center; border-radius: var(--radius-box); margin-block: 20px; }
.downloads-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* ==========================================================================
   Variant choice modal -- opened from a product detail page's per-variant
   "Bu varyant için teklif al" button. Fully independent of the product image
   lightbox (see the "Product image lightbox" section below): separate class
   namespace, separate open/close state, never nested inside it. Reuses the
   same brand colours/buttons/typography as the rest of the site -- no new
   design system.
   ========================================================================== */
.variant-choice-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, 0.86);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.variant-choice-modal {
	position: relative;
	width: min(460px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--eurotherm-white);
	border-radius: var(--radius-modal);
	box-shadow: var(--shadow-modal);
	padding: 24px;
	box-sizing: border-box;
}
.variant-choice-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 16px;
}
.variant-choice-modal__title {
	font-size: 1.05rem;
	margin: 0;
}
.variant-choice-modal__close {
	flex-shrink: 0;
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: var(--eurotherm-white);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-form);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	color: var(--eurotherm-black);
}
.variant-choice-modal__product-info {
	background: var(--eurotherm-grey-light);
	border-radius: var(--radius-box);
	padding: 14px 16px;
	margin-block-end: 20px;
	font-size: 0.92rem;
}
.variant-choice-modal__product-info p { margin: 0; padding-block: 3px; }
.variant-choice-modal__product-info strong { font-weight: 700; }
.variant-choice-modal__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.variant-choice-modal__actions .btn { width: 100%; text-align: center; }
.variant-choice-modal__close-text {
	display: block;
	width: 100%;
	margin-block-start: 14px;
	padding: 10px 18px;
	border-radius: var(--radius-form);
	border: 2px solid var(--eurotherm-black);
	background: var(--eurotherm-white);
	color: var(--eurotherm-black);
	font-weight: 700;
	cursor: pointer;
	text-align: center;
}
@media (max-width: 480px) {
	.variant-choice-modal { padding: 18px; }
	.variant-choice-modal__title { font-size: 1rem; }
}

/* ==========================================================================
   Certificate grid
   ========================================================================== */
.certificate-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 18px; }
.certificate-filters__pill { border: 1px solid var(--eurotherm-grey-mid); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; color: #333; background: none; cursor: pointer; }
.certificate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-block-end: 36px; }
.certificate-card { border: 1px solid var(--border-soft); border-radius: var(--radius-image); padding: 16px; }
.certificate-card--draft { grid-column: 1 / -1; background: #FFF3F3; border-color: var(--eurotherm-red); text-align: center; font-weight: 700; color: var(--eurotherm-red); }
@media (max-width: 900px) { .certificate-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .certificate-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Info-block layout (used by uretim/ozel-marka-uretim/ihracat/hakkimizda)
   ========================================================================== */
.info-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.info-block {
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-box);
	padding: 20px;
}
.info-block h3 { font-size: 1rem; margin-block-end: 8px; }
.info-block p { font-size: 0.9rem; margin-block-end: 0; }
@media (max-width: 700px) { .info-blocks { grid-template-columns: 1fr; } }

/* ==========================================================================
   Hakkımızda/About page layout only -- v7s20: replaces the v7s18/v7s19
   .info-block-based cards with a dedicated, more prestigious "company
   summary + mission + timeline" layout. Entirely scoped to .about-*
   classes so .info-block/.info-blocks/.fact-list base rules (still used
   by uretim/ozel-marka-uretim/ihracat) are completely untouched.
   ========================================================================== */
.about-intro {
	max-width: 760px;
	margin-block-end: 32px;
}

.about-overview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	margin-block-end: 52px;
}

.about-facts-card,
.about-mission-card {
	border-radius: var(--radius-box);
	padding: 28px;
}

.about-facts-card h2,
.about-mission-card h2 {
	font-size: 1.1rem;
	margin-block-end: 16px;
}

.about-facts-card {
	background: var(--eurotherm-grey-light);
}

/* .fact-list's base rule (main.css, "Info-block layout" section above)
   gives a border-block-end the same colour as this card's own background,
   so it becomes invisible here -- override with a slightly darker, still
   subtle divider, scoped to this card only. Red checkmarks are inherited
   from the base .fact-list li::before rule and kept as-is. */
.about-facts-card .fact-list li {
	border-block-end-color: rgba(26, 26, 26, 0.1);
}
.about-facts-card .fact-list li:last-child {
	border-block-end: none;
}

.about-mission-card {
	position: relative;
	overflow: hidden;
	background: var(--eurotherm-black);
	color: #fff;
}

.about-mission-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 4px;
	background: var(--eurotherm-red);
}

.about-mission-card h2 {
	color: #fff;
}

.about-mission-card p {
	color: #e8e8e8;
	font-size: 0.95rem;
	margin-block-end: 0;
}

.about-history-section {
	max-width: 1040px;
	margin-inline: auto;
}

.about-history-heading {
	margin-block-end: 26px;
	text-align: center;
}

.about-history-heading__eyebrow {
	display: block;
	margin-block-end: 6px;
	color: var(--eurotherm-red);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.about-history-heading h2 {
	font-size: 1.4rem;
	margin-block-end: 0;
}

.about-timeline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 34px;
}

.about-timeline__item {
	border-inline-start: 3px solid var(--eurotherm-red);
	padding-inline-start: 18px;
}

.about-timeline__period {
	color: var(--eurotherm-red);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	margin-block-end: 4px;
}

.about-timeline__title {
	font-size: 1rem;
	margin-block-end: 8px;
}

.about-timeline__item p:not(.about-timeline__period) {
	font-size: 0.92rem;
	color: #444;
	margin-block-end: 0;
}

@media (max-width: 800px) {
	.about-overview {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-block-end: 32px;
	}

	.about-timeline {
		grid-template-columns: 1fr;
		row-gap: 26px;
	}

	.about-history-heading {
		text-align: start;
	}
}

/* Three-card variant of .info-blocks (Üretim, İhracat, Özel Marka Üretim
   info cards after the v6h prototype-language cleanup -- same visual
   family, just an extra column on desktop). */
.info-blocks--triple { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .info-blocks--triple { grid-template-columns: 1fr; } }

/* Brand-mark placeholder card -- used only where the source catalogue has
   no product photo at all (Bahçe Musluğu). Shows the Eurotherm logo plus a
   plain caption instead of a fabricated product photo or a "hazırlanıyor"
   note, so it never reads as a real product image. */
.brand-placeholder-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--eurotherm-grey-light);
	border-bottom: 1px solid var(--eurotherm-grey-mid);
	padding: 16px;
}
.brand-placeholder-card--square {
	aspect-ratio: 1 / 1;
	height: 100%;
	border: 1px solid var(--border-soft);
	border-bottom: 1px solid var(--border-soft);
	border-radius: var(--radius-image);
}
.brand-placeholder-card__logo { max-width: 55%; max-height: 40px; width: auto; height: auto; }
.brand-placeholder-card__logo-fallback {
	font-weight: 800;
	letter-spacing: 0.06em;
	font-size: 0.95rem;
	color: var(--eurotherm-black);
}
.brand-placeholder-card__caption {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--eurotherm-grey-metallic);
	text-align: center;
}

/* Homepage "Eurotherm by Ekpar" brand card -- replaces the old empty
   "Fabrika / marka görseli eklenecek" placeholder with a clean, responsive
   panel built from the logo we actually have, rather than a fabricated
   factory photo. */
.brand-showcase {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--eurotherm-white);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-box);
	box-shadow: var(--shadow-soft);
	padding: 40px 28px;
	min-height: 260px;
}
.brand-showcase img { width: min(100%, 260px); height: auto; }
.brand-showcase__fallback {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.brand-showcase__fallback strong { font-size: 1.4rem; letter-spacing: 0.04em; }
.brand-showcase__fallback span { font-size: 0.85rem; color: var(--eurotherm-grey-metallic); }
@media (max-width: 480px) { .brand-showcase { padding: 28px 18px; min-height: 200px; } }

/* Homepage "Üretim" section product collage -- three real, already-verified
   product photos standing in for a future factory photo. Explicitly
   presented as product examples (see the alt text/caption), never implied
   to be a production-line photo. */
.product-collage {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.product-collage img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--eurotherm-white);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-image);
	padding: 10px;
}
.product-collage__caption {
	grid-column: 1 / -1;
	font-size: 0.76rem;
	color: var(--eurotherm-grey-metallic);
	text-align: center;
	margin-block-start: 4px;
}
@media (max-width: 480px) { .product-collage { gap: 6px; } }

/* Quiet, visitor-friendly info box (teklif-al.html) -- explains the form
   isn't wired to a live backend yet, without looking like a warning/error
   or a developer note. */
.form-info-notice {
	background: var(--eurotherm-grey-light);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-box);
	padding: 14px 18px;
	font-size: 0.88rem;
	color: #333;
	margin-block-end: 22px;
}

/* Simple info panel used by pages that need a single centred call-to-action
   block instead of a grid of placeholder cards (Kalite ve Sertifikalar). */
.info-panel {
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-box);
	padding: 32px;
	max-width: 68ch;
}
.info-panel p { color: #444; margin-block-end: 20px; }


.fact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fact-list li {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 0.92rem;
	padding-block: 8px;
	border-block-end: 1px solid var(--eurotherm-grey-light);
}
.fact-list li::before { content: "✓"; color: var(--eurotherm-red); font-weight: 800; flex-shrink: 0; }

/* Catalogue cards */
.catalogue-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.catalogue-card {
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-image);
	padding: 20px;
	display: flex; flex-direction: column; gap: 10px;
}
.catalogue-card--draft { border-style: dashed; }
@media (max-width: 700px) { .catalogue-grid { grid-template-columns: 1fr; } }

/* Real catalogue PDF download area -- the one card in this section that
   links to an actual file (assets/docs/eurotherm-urun-katalogu.pdf) rather
   than being a design placeholder. Kept visually in the same family as
   .catalogue-card (border/radius/padding) but wider/standalone since it's
   the primary action on the page. */
.catalogue-download {
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-image);
	padding: 28px;
	margin-block-end: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.catalogue-download__title { margin: 0; font-size: 1.3rem; }
.catalogue-download__desc { margin: 0; color: #444; max-width: 62ch; }
.catalogue-download__meta {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--eurotherm-grey-metallic);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.catalogue-download__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-block-start: 6px;
}
.catalogue-download__actions .btn svg { flex-shrink: 0; }
.catalogue-download__view-link { font-weight: 600; font-size: 0.92rem; }
.catalogue-download__note {
	margin: 4px 0 0;
	font-size: 0.82rem;
	color: var(--eurotherm-grey-metallic);
}
@media (max-width: 480px) {
	.catalogue-download { padding: 20px; }
	.catalogue-download__actions { flex-direction: column; align-items: stretch; gap: 10px; }
	.catalogue-download__actions .btn { width: 100%; }
}

/* Contact page layout */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-grid dt { font-weight: 700; font-size: 0.85rem; color: var(--eurotherm-grey-metallic); margin-block-start: 14px; }
.contact-grid dd { margin: 2px 0 0; font-size: 1rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Contact page map -- real Google Maps embed (no API key required), fixed
   16:9 frame so the map never stretches/distorts regardless of viewport
   width. A plain-text link below opens the verified Google Maps place page
   in a new tab for visitors who want the full interactive map / directions. */
.contact-map { display: flex; flex-direction: column; gap: 10px; }
.contact-map__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-box);
	overflow: hidden;
	background: var(--eurotherm-grey-light);
}
.contact-map__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.contact-map__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	align-self: flex-start;
}

.contact-map__privacy-gate {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 24px;
	background: var(--eurotherm-grey-light);
	border-radius: var(--radius-box);
}
.contact-map__privacy-gate p {
	max-width: 46ch;
	font-size: 0.9rem;
	color: var(--eurotherm-black);
	margin: 0;
}
.contact-map__privacy-gate .btn {
	white-space: nowrap;
}

.legal-content {
	max-width: 72ch;
	margin: 0 auto;
	padding-block: 8px 48px;
}
.legal-content .section__intro { max-width: 72ch; }
.legal-content section { margin-block-start: 36px; }
.legal-content h2 {
	font-size: 1.15rem;
	margin-block-end: 10px;
	padding-block-start: 8px;
	border-block-start: 1px solid var(--eurotherm-grey-mid);
}
.legal-content section:first-of-type h2 { border-block-start: 0; padding-block-start: 0; }
.legal-content h3 { font-size: 1rem; margin-block: 16px 8px; }
.legal-content p { margin-block-end: 12px; line-height: 1.6; }
.legal-content ul, .legal-content ol { margin: 0 0 12px; padding-inline-start: 22px; }
.legal-content li { margin-block-end: 6px; line-height: 1.6; }
.legal-content a { text-decoration: underline; text-underline-offset: 2px; }
.legal-content .legal-meta { color: var(--eurotherm-grey-metallic); font-size: 0.85rem; margin-block-end: 24px; }


/* Homepage İletişim section map -- v7s13: reuses the same .contact-map
   system as the İletişim page, only overriding the frame's height (desktop
   ~320-380px, mobile ~260-320px) instead of a 16:9 ratio, so the map stays
   visually aligned with the shorter contact text column next to it instead
   of towering over it. */
.split__media .contact-map { width: 100%; }
.split__media .contact-map__frame {
	aspect-ratio: unset;
	height: clamp(320px, 28vw, 380px);
}
@media (max-width: 900px) {
	.split__media .contact-map__frame { height: clamp(260px, 60vw, 320px); }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block-start: 16px; }
.quote-form__row { display: flex; flex-direction: column; gap: 6px; }
.quote-form__row--full { grid-column: 1 / -1; }
.quote-form label { font-size: 0.85rem; font-weight: 700; }
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form select,
.quote-form textarea {
	padding: 10px 12px;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-form);
	font-family: inherit;
	font-size: 0.95rem;
	background: #fff;
}
.quote-form__row--checkbox { flex-direction: row; align-items: center; gap: 8px; }
.quote-form__row--checkbox label { font-weight: 500; }
.quote-form__row--locked input { background: var(--eurotherm-grey-light); }
.quote-form__privacy-note { font-size: 0.85rem; color: var(--eurotherm-grey-metallic); max-width: 60ch; margin-block-end: 4px; }
.phone-field { display: flex; gap: 8px; max-width: 100%; }
.phone-field__code { flex: 0 0 auto; width: 42%; max-width: 190px; min-width: 108px; }
.phone-field input[type="tel"] { flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) {
	.phone-field { flex-wrap: wrap; }
	.phone-field__code, .phone-field input[type="tel"] { width: 100%; max-width: none; }
}
.required { color: var(--eurotherm-red); }
.quote-form button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 700px) { .quote-form { grid-template-columns: 1fr; } }

.form-success {
	display: none;
	background: #F0FAF0;
	border: 1px solid #2E7D32;
	color: #1b5e20;
	border-radius: var(--radius-box);
	padding: 16px 18px;
	margin-block-start: 16px;
	font-size: 0.92rem;
}
.form-success.is-visible { display: block; }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Global content-to-footer spacing -- v7s22: replaces the old page-specific
   Contact-only padding (v7s14/v7s15, removed above) with one shared rule
   that applies sitewide, on every page, in both languages. Uses the adjacent
   sibling selector so it only ever adds space directly above the black
   footer, never touching the footer's own background, padding, or content.
   clamp() keeps it from being too large on mobile or too small on desktop. */
.site-main + .site-footer {
	margin-block-start: clamp(56px, 6vw, 80px);
}

.site-footer { background: var(--eurotherm-black); color: #ccc; padding-block-start: 40px; }
.site-footer__top { padding-block-end: 24px; border-block-end: 1px solid #333; margin-block-end: 28px; }
.site-footer__brand-statement { color: #ccc; font-size: 0.88rem; margin-block-start: 12px; max-width: 60ch; }
.site-footer h2 { color: var(--eurotherm-white); font-size: 0.92rem; margin-block-end: 12px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block-end: 30px; }
.site-footer__grid a { color: #ccc; font-size: 0.85rem; display: block; margin-block-end: 8px; }
.site-footer__grid p { color: #ccc; font-size: 0.85rem; margin: 0 0 6px; }
.site-footer__grid a:hover { color: #fff; }
.site-footer__bottom { border-block-start: 1px solid #333; padding-block: 18px; font-size: 0.78rem; color: #888; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-block-start: 10px; }
.site-footer__legal a { color: var(--eurotherm-grey-mid); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--eurotherm-white); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

.admin-notice {
	background: #FFF8E1;
	border: 1px dashed #C9A227;
	padding: 12px 16px;
	border-radius: var(--radius-box);
	font-size: 0.85rem;
	color: #6b5900;
}

.link-arrow { font-weight: 700; display: inline-block; }

[dir="rtl"] .breadcrumbs__item:not(:last-child)::after { content: "\\"; }

/* ==========================================================================
   v7r homepage visual rhythm experiment
   Scoped entirely under body.page-home (index.html / en/index.html only).
   Removing the "page-home" class from <body> removes this experiment
   completely; it has zero effect on any other page.
   ========================================================================== */

/* -- Hero: more breathing room around headline/support/actions, warmer
   near-white background. Image itself is not resized/cropped -- only the
   surrounding whitespace and background tone change. -- */
body.page-home .hero { background: #FAFAF8; }
body.page-home .hero__inner { padding-block: 84px; }
body.page-home .hero__headline { margin-block-end: 22px; }
body.page-home .hero__support { margin-block-end: 32px; }
body.page-home .hero__actions { gap: 18px; }

/* -- Section background rhythm -- */
body.page-home .section--categories { background: var(--eurotherm-white); }
body.page-home .section--manufacturing { background: var(--eurotherm-white); }
body.page-home .section--quality { background: var(--eurotherm-white); }
body.page-home .section--catalogue { background: var(--eurotherm-white); }
body.page-home .section--tinted { background: #F5F6F7; } /* Eurotherm by Ekpar + Öne Çıkan Ürünler */
body.page-home .section--contact { background: #F5F6F7; }
/* .section--accent (Özel Marka Üretimi, final CTA) intentionally left
   untouched -- keeps the existing red-accent structure as instructed. */

/* -- Section vertical rhythm (desktop ~72-88px, varied per section rather
   than one mechanical value) -- */
body.page-home .section--categories { padding-block: 80px; }
body.page-home .section--brand { padding-block: 76px; }
body.page-home .section--manufacturing { padding-block: 80px; }
body.page-home .section--private-label { padding-block: 76px; }
body.page-home .section--quality { padding-block: 76px; }
body.page-home .section--selected-products { padding-block: 84px; }
body.page-home .section--catalogue { padding-block: 72px; }
body.page-home .section--final-cta { padding-block: 80px; }
body.page-home .section--contact { padding-block: 84px; }

/* -- Small corporate red accent above section titles -- v7s restricts this
   to exactly three sections (Ürün Kategorileri, Üretim, Kalite Yaklaşımı).
   40px x 3px, 12px above the title, brand red, lightly rounded ends. -- */
body.page-home .section--categories .section__title,
body.page-home .section--manufacturing .section__title,
body.page-home .section--quality .section__title {
	position: relative;
}
body.page-home .section--categories .section__title::before,
body.page-home .section--manufacturing .section__title::before,
body.page-home .section--quality .section__title::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--eurotherm-red);
	margin-block-end: 12px;
}
body.page-home .section--quality .section__title::before {
	margin-inline: auto;
}

/* -- Tablet: ~60-72px rhythm -- */
@media (max-width: 900px) {
	body.page-home .hero__inner { padding-block: 64px; }
	body.page-home .section--categories { padding-block: 64px; }
	body.page-home .section--brand { padding-block: 64px; }
	body.page-home .section--manufacturing { padding-block: 64px; }
	body.page-home .section--private-label { padding-block: 64px; }
	body.page-home .section--quality { padding-block: 64px; }
	body.page-home .section--selected-products { padding-block: 68px; }
	body.page-home .section--catalogue { padding-block: 64px; }
	body.page-home .section--final-cta { padding-block: 64px; }
	body.page-home .section--contact { padding-block: 68px; }
}

/* -- Mobile: ~48-60px rhythm -- */
@media (max-width: 600px) {
	body.page-home .hero__inner { padding-block: 52px; }
	body.page-home .section--categories { padding-block: 52px; }
	body.page-home .section--brand { padding-block: 48px; }
	body.page-home .section--manufacturing { padding-block: 52px; }
	body.page-home .section--private-label { padding-block: 52px; }
	body.page-home .section--quality { padding-block: 52px; }
	body.page-home .section--selected-products { padding-block: 56px; }
	body.page-home .section--catalogue { padding-block: 48px; }
	body.page-home .section--final-cta { padding-block: 52px; }
	body.page-home .section--contact { padding-block: 56px; }
}

/* ==========================================================================
   v7s homepage refinement pass (typography scale, 3x2 category grid, trust
   strip, reduced repetition). Also scoped entirely under body.page-home --
   builds on the v7r block above rather than replacing it wholesale.
   ========================================================================== */

/* -- Typography scale: font-FAMILY was intentionally left unchanged in this
   round. Barlow Semi Condensed / Source Sans 3 could not be sourced as real,
   licensed local WOFF2 files in this environment (see report), and per
   instruction no placeholder/corrupt font files were created. The
   requested size / line-height / weight / letter-spacing rhythm is still
   applied here using the existing system font stack. -- */
body.page-home .hero__headline {
	font-size: clamp(2.125rem, 4vw, 3rem);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.015em;
}
body.page-home .section__title {
	font-size: clamp(1.625rem, 2.6vw, 1.875rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* -- Product category grid: 3x2 on desktop instead of a single 6-wide row. -- */
body.page-home .category-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
/* Reserve consistent vertical space for the title line so a 2-line category
   name in one card doesn't visibly unbalance its row against 1-line names. */
body.page-home .category-card__title { min-height: 2.4em; }

/* -- v7s3: modest ~10% desktop scale-down. Centering the 3x2 grid inside a
   narrower max-width (rather than shrinking gap/columns) makes the whole
   block read a bit less oversized without touching card internals. -- */
body.page-home .section--categories .category-grid {
	width: 100%;
	max-width: 1040px;
	margin-inline: auto;
}

@media (max-width: 900px) {
	body.page-home .category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
}
@media (max-width: 480px) {
	body.page-home .category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}
/* Very small screens: keep the 2-column layout, just tighten type/padding
   so nothing overflows at 360px and below. */
@media (max-width: 380px) {
	body.page-home .category-card__title { font-size: 0.86rem; padding: 10px 10px 3px; min-height: 2.3em; }
	body.page-home .category-card__cta { padding: 0 10px 10px; font-size: 0.78rem; }
}

/* -- Hero trust strip (v7s1 rewrite): a single, quiet, dark corporate
   band -- not a set of separate cards. No icons, no per-item background,
   no shadow, no rounded boxes. Thin, low-opacity internal grid dividers
   only; a small brand-red line marks the top edge. -- */
body.page-home .home-trust {
	background: #171A1D;
	color: #FFFFFF;
	border-block-start: 3px solid var(--eurotherm-red);
	padding-block: 22px;
}
body.page-home .home-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.page-home .home-trust__list li {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #FFFFFF;
	text-align: center;
	padding-inline: 18px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}
body.page-home .home-trust__list li:first-child {
	border-inline-start: 0;
}

/* -- v7s4: EN-only fix. Some EN trust-strip items wrap to two lines,
   which stretches the grid row and leaves single-line items sitting
   near the top of their cell instead of centered. Flex-center each
   item vertically and horizontally within its own cell -- TR is
   unaffected since this selector is scoped to html[lang="en"]. -- */
html[lang="en"] body.page-home .home-trust__list li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	line-height: 1.3;
}

@media (max-width: 900px) {
	body.page-home .home-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Reset the desktop vertical dividers; tablet/mobile use a 2-col
	   grid with its own top/left divider logic below. */
	body.page-home .home-trust__list li {
		border-inline-start: 0;
		border-block-start: 1px solid rgba(255, 255, 255, 0.14);
		padding: 12px;
	}

	/* First row (items 1-2) needs no top divider. */
	body.page-home .home-trust__list li:nth-child(-n+2) {
		border-block-start: 0;
	}

	/* Right-hand column gets a vertical divider instead. */
	body.page-home .home-trust__list li:nth-child(even) {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
	}
}
@media (max-width: 700px) {
	body.page-home .home-trust {
		padding-block: 16px;
	}

	body.page-home .home-trust__list li {
		font-size: 0.8rem;
		padding-inline: 12px;
	}
}

/* -- v7s1: refined shadow/hover for homepage category + featured-product
   cards only (Ürün Kategorileri + Öne Çıkan Ürünler). Does not touch
   urunler.html/en/urunler.html product cards or any other page. No red
   border on hover here -- uses the same neutral border in both states. -- */
body.page-home .category-card,
body.page-home .product-card {
	box-shadow: 0 4px 14px rgba(17, 26, 31, 0.05);
	border-color: var(--border-soft);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
body.page-home .category-card:hover,
body.page-home .product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(17, 26, 31, 0.09);
	border-color: var(--border-soft);
}

@media (prefers-reduced-motion: reduce) {
	body.page-home .category-card,
	body.page-home .product-card {
		transition: none;
	}
	body.page-home .category-card:hover,
	body.page-home .product-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   v7s3 scale-down pass
   Scoped entirely under body.page-home (index.html / en/index.html only).
   Only changes: hero/section title clamp() sizes (edited above, in place)
   and centered max-width constraints on the categories/selected-products
   grids below. No layout redesign, no card-internal changes, no other
   page affected.
   ========================================================================== */

/* -- Featured Products grid: same centered max-width treatment as the
   category grid above, so the two homepage grids read at a matching
   visual scale. Card internals (image, title, price/CTA, hover, radius)
   are untouched -- only the outer grid width is constrained. -- */
body.page-home .section--selected-products .product-grid {
	width: 100%;
	max-width: 1040px;
	margin-inline: auto;
}

/* -- Below 1100px the grids should behave exactly as they did before this
   round: full-width, letting the existing 3x2 / 2-col responsive column
   rules (defined above) take over without an artificial width cap. -- */
@media (max-width: 1100px) {
	body.page-home .section--categories .category-grid,
	body.page-home .section--selected-products .product-grid {
		max-width: 100%;
	}
}

/* ==========================================================================
   Product image lightbox (assets/js/product-image-lightbox.js)
   Replaces the retired 360-degree prototype viewer. Two pieces:
   1. .product-image-zoom-trigger -- small button injected by JS into the
      bottom-right corner of .product-detail__main-image (which already has
      position: relative, set above; its size/aspect-ratio is untouched).
   2. .product-image-lightbox -- the modal overlay, built + torn down on
      each open/close, never left in the DOM while closed.
   ========================================================================== */
.product-image-zoom-trigger {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	min-height: 40px;
	background: rgba(26, 26, 26, 0.72);
	color: var(--eurotherm-white);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-form);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.product-image-zoom-trigger:hover,
.product-image-zoom-trigger:focus-visible {
	background: var(--eurotherm-red);
	border-color: var(--eurotherm-red);
}
.product-image-zoom-trigger:focus-visible {
	outline: 2px solid var(--eurotherm-white);
	outline-offset: 2px;
}
.product-image-zoom-trigger__icon { flex: none; }
.product-image-zoom-trigger__text { white-space: nowrap; }

@media (max-width: 600px) {
	.product-image-zoom-trigger {
		inset-block-end: 8px;
		inset-inline-end: 8px;
		padding: 8px 10px;
	}
	.product-image-zoom-trigger__text { display: none; }
}

.product-image-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, 0.86);
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.product-image-lightbox__dialog {
	position: relative;
	width: auto;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-image-lightbox__close {
	position: absolute;
	inset-block-start: -14px;
	inset-inline-end: -14px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--eurotherm-white);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-form);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--eurotherm-black);
	cursor: pointer;
	z-index: 1;
}
.product-image-lightbox__close:hover,
.product-image-lightbox__close:focus-visible {
	color: var(--eurotherm-white);
	background: var(--eurotherm-red);
	border-color: var(--eurotherm-red);
}
.product-image-lightbox__close:focus-visible {
	outline: 2px solid var(--eurotherm-white);
	outline-offset: 2px;
}
.product-image-lightbox__image-wrap {
	max-width: 92vw;
	max-height: 88vh;
	background: var(--eurotherm-white);
	border-radius: var(--radius-image);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box;
}
.product-image-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	max-width: min(1200px, 88vw);
	max-height: calc(88vh - 24px);
	object-fit: contain;
}
.product-image-lightbox__error {
	font-size: 0.9rem;
	color: var(--eurotherm-red);
	text-align: center;
	padding: 40px 20px;
	margin: 0;
}

@media (max-width: 600px) {
	.product-image-lightbox { padding: 12px; }
	.product-image-lightbox__dialog { max-width: 96vw; max-height: 90vh; }
	.product-image-lightbox__image-wrap { max-width: 96vw; max-height: 90vh; padding: 8px; }
	.product-image-lightbox__image { max-width: 92vw; max-height: calc(90vh - 16px); }
	.product-image-lightbox__close {
		inset-block-start: 8px;
		inset-inline-end: 8px;
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-image-zoom-trigger { transition: none; }
}

/* ==========================================================================
   404 page (v7s27) -- scoped, self-contained block. Reuses existing tokens
   (colors, .btn, .container, .page-title) so the error page stays visually
   consistent with the rest of the site without touching any shared rule.
   ========================================================================== */
.page-404__content {
	max-width: 640px;
	margin-inline: auto;
	padding-block: 64px 96px;
	text-align: center;
}
.page-404__code {
	font-size: clamp(3rem, 12vw, 5.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--eurotherm-red);
	margin-block: 0 8px;
}
.page-404__content .page-title { margin-block-end: 14px; }
.page-404__text {
	color: #333;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 52ch;
	margin-inline: auto;
	margin-block-end: 32px;
}
.page-404__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
@media (max-width: 480px) {
	.page-404__actions { flex-direction: column; align-items: stretch; }
}