/* ========================================================
   Verachemicals — Redesign v3
   Modeled on the Özen İplik (ozeniplik.com) visual language:
   corporate blue, Roboto + Poiret One, top bar, watermark
   section titles, showcase split blocks, clean cards.
   ======================================================== */

:root {
  /* ---- Vera brand palette (from the logo: orange + green) ---- */
  --blue: #e87c19;          /* PRIMARY = Vera orange (var name kept for compatibility) */
  --blue-mid: #ef8526;      /* lighter orange */
  --blue-dark: #cc680c;     /* deep orange / hover */
  --blue-tint: #fdeedd;     /* warm light orange tint */
  --blue-tint-2: #fef6ec;
  --green: #00913f;         /* Vera logo green (secondary accent) */
  --green-dark: #007a34;
  --ink: #2c2620;           /* warm near-black text */
  --gray: #8a817a;          /* warm muted text */
  --gray-light: #b9b0a6;
  --bg: #ffffff;
  --bg-warm: #fbf6ef;       /* page background — warm cream, harmonious w/ orange */
  --bg-soft: #f7efe3;       /* soft warm section background */
  --bg-soft-2: #efe5d6;     /* watermark / deeper warm */
  --line: #ece3d5;          /* warm hairline */
  --line-soft: #f3ece0;
  --top-bar: #d9700f;       /* Vera brand orange strip */

  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-display: 'Space Grotesk', 'Inter', sans-serif;

  --maxw: 1200px;
  --gutter: 24px;
  --r: 4px;
  --t: 0.3s ease;
  --t-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  --shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 40px rgba(232, 124, 25, 0.18);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--blue-dark); }
button { font-family: inherit; cursor: pointer; }
p { margin: 0 0 1.1em; }
ul { padding-left: 1.3em; }
::selection { background: var(--blue-mid); color: #fff; }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.22; color: var(--ink); font-weight: 700; font-family: var(--f-display); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container--tight { max-width: 920px; }
.section-py { padding: clamp(64px, 8vw, 100px) 0; }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--blue-tint); }
.section--blue { background: linear-gradient(120deg, #ef8526 0%, #d96c10 100%); color: #fff; }
.section--blue h1, .section--blue h2, .section--blue h3 { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  border-radius: var(--r);
  transition: all var(--t);
  white-space: nowrap;
}
.btn--blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn--outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn--outline-light:hover { background: #fff; color: var(--blue); border-color: #fff; }
.btn--sm { padding: 7px 14px; font-size: 0.8rem; }
.btn .arrow { transition: transform var(--t); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   TOP BAR  (matches ozeniplik thin dark bar)
   ============================================================ */
.top-bar {
  background: var(--top-bar);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
}
.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
}
.top-bar__social { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.top-bar__social a {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: color var(--t);
}
.top-bar__social a:hover { color: #fff; }
.top-bar__social svg { width: 15px; height: 15px; }
.top-bar__right { display: flex; align-items: center; gap: 20px; }
.top-bar__finder {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.top-bar__finder:hover { color: #fff; }
.top-bar__finder svg { width: 15px; height: 15px; }
.top-lang { display: flex; gap: 2px; }
.top-lang a {
  padding: 3px 9px;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 3px;
  transition: all var(--t);
}
.top-lang a.is-active { background: #fff; color: var(--blue-dark); }
.top-lang a:not(.is-active):hover { color: #fff; }
.top-bar__finder { color: #fff; }
.top-bar__social a { color: rgba(255,255,255,0.82); }

/* ============================================================
   HEADER / NAV  (white, clean, like ozeniplik)
   ============================================================ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--t);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}
.site-logo { flex-shrink: 0; display: flex; align-items: center; }
.site-logo img { height: 58px; width: auto; transition: opacity var(--t); }
.site-logo:hover img { opacity: 0.85; }

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav > a, .site-nav .menu-item > a {
  display: block;
  padding: 14px 18px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  position: relative;
  transition: color var(--t);
  white-space: nowrap;
}
.site-nav > a:hover, .site-nav .menu-item > a:hover,
.site-nav > a.is-active, .site-nav .menu-item.is-active > a { color: var(--blue); }
.site-nav > a::after, .site-nav .menu-item > a::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 6px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t);
}
.site-nav > a:hover::after, .site-nav .menu-item:hover > a::after,
.site-nav > a.is-active::after, .site-nav .menu-item.is-active > a::after { transform: scaleX(1); }
.site-nav .menu-item { position: relative; }
.site-nav .menu-item > a .caret { font-size: 0.65em; margin-left: 5px; opacity: 0.6; }
.site-nav .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 270px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  box-shadow: var(--shadow);
  padding: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all var(--t);
}
.site-nav .menu-item:hover .submenu,
.site-nav .menu-item:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav .submenu a {
  display: block;
  padding: 11px 16px;
  font-size: 0.9rem;
  color: var(--ink);
  border-radius: 2px;
  transition: all var(--t);
}
.site-nav .submenu a:hover { background: var(--blue-tint); color: var(--blue); padding-left: 22px; }

.mobile-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  width: 46px; height: 46px;
  border-radius: var(--r);
  color: var(--blue);
}
.mobile-toggle svg { width: 24px; height: 24px; margin: 0 auto; }

/* mobile drawer */
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 90vw);
  background: #fff; z-index: 200;
  transform: translateX(105%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,0.12);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.mobile-nav__head img { height: 40px; }
.mobile-nav__close { background: none; border: none; width: 40px; height: 40px; color: var(--blue); }
.mobile-nav__close svg { width: 24px; height: 24px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 14px; flex: 1; overflow-y: auto; }
.mobile-nav li { margin-bottom: 1px; }
.mobile-nav a { display: block; padding: 13px 14px; color: var(--ink); font-weight: 500; border-radius: var(--r); transition: all var(--t); }
.mobile-nav a:hover, .mobile-nav a.is-active { background: var(--blue-tint); color: var(--blue); }
.mobile-nav .sub a { padding-left: 30px; font-size: 0.9rem; color: var(--gray); }
.mobile-nav__foot { padding: 18px 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.mobile-nav__foot a { color: var(--blue); }

.backdrop { position: fixed; inset: 0; background: rgba(43,43,43,0.5); z-index: 150; opacity: 0; visibility: hidden; transition: all var(--t); }
.backdrop.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   HERO SLIDER  (full-width image slider, ozeniplik-style)
   ============================================================ */
/* Hero = full marketing-banner slider (banners shown complete, never cropped) */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1903 / 650;   /* matches the source banners exactly → no cropping */
  overflow: hidden;
  background: #dbe8f3;
}
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* container ratio == image ratio, so the whole banner shows */
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.hero__slide { z-index: 0; }
.hero__slide.is-active { opacity: 1; }
/* Left-side scrim so the caption is legible while the right-side product stays bright */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(24,16,6,0.64) 0%, rgba(24,16,6,0.33) 42%, rgba(24,16,6,0) 70%),
    linear-gradient(to top, rgba(24,16,6,0.28) 0%, rgba(24,16,6,0) 42%);
}
.hero__caption {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center;
  pointer-events: none;
}
.hero__caption .container { width: 100%; }
.hero__cap { max-width: 580px; pointer-events: auto; animation: heroIn 0.9s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero__cap-eyebrow {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; background: rgba(232,124,25,0.95);
  padding: 6px 15px; border-radius: 30px; margin-bottom: 16px;
}
.hero__cap-title {
  font-family: var(--f-display); font-weight: 700;
  color: #fff; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.06;
  margin: 0 0 16px; letter-spacing: -0.02em;
  text-shadow: 0 2px 28px rgba(0,0,0,0.5);
}
.hero__cap-text {
  color: rgba(255,255,255,0.92); font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.55; max-width: 460px; margin: 0 0 26px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero__cap-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* CTA strip beneath the hero (kept for non-hero use) */
.hero-cta { background: #fff; border-bottom: 1px solid var(--line); }
.hero-cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 20px 0; flex-wrap: wrap;
}
.hero-cta__inner p { margin: 0; font-size: 1.12rem; font-weight: 500; color: var(--ink); }
.hero-cta__inner p strong { color: var(--blue); font-weight: 700; }
.hero-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
}
.hero__caption .container { width: 100%; }
.hero__caption-inner { max-width: 640px; color: #fff; }
.hero__sub {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.16);
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.hero__caption h1 {
  font-family: var(--f-display);
  color: #fff;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 18px;
}
.hero__caption p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: 30px;
  max-width: 520px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__dots {
  position: absolute; bottom: 24px; left: 0; right: 0; z-index: 4;
  display: flex; justify-content: center; gap: 10px;
}
.hero__dots button {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent; padding: 0;
  transition: all var(--t);
}
.hero__dots button.is-active { background: var(--blue); border-color: var(--blue); width: 30px; border-radius: 6px; }

/* ============================================================
   WATERMARK SECTION TITLE  (the "Markalar / Markalar" effect)
   ============================================================ */
.sec-title {
  position: relative;
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
  padding-top: 30px;
}
.sec-title h2 {
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--blue);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-block;
}
.sec-title h2::after {
  content: "";
  display: block;
  width: 46px; height: 3px;
  background: var(--blue);
  margin: 14px auto 0;
}
.sec-title .watermark {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--f-display);
  font-size: clamp(3.4rem, 8vw, 6rem);
  font-weight: 400;
  color: var(--bg-soft-2);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  opacity: 0.8;
}
.sec-title p { margin-top: 18px; color: var(--gray); font-size: 1.05rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.sec-title--light h2 { color: #fff; }
.sec-title--light h2::after { background: #fff; }
.sec-title--light .watermark { color: rgba(255,255,255,0.12); }
.sec-title--light p { color: rgba(255,255,255,0.85); }

/* ============================================================
   SHOWCASE  (alternating image + text block)
   ============================================================ */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.showcase + .showcase { margin-top: clamp(48px, 7vw, 90px); }
.showcase--reverse { grid-template-columns: 1.4fr 1fr; }
.showcase--reverse .showcase__media { order: 2; }
.showcase__content .kicker {
  display: inline-block;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.showcase__content h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 18px; color: var(--ink); }
.showcase__content p { color: var(--gray); font-size: 1.04rem; line-height: 1.8; margin-bottom: 1.1em; }
.showcase__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-weight: 600; color: var(--blue);
}
.showcase__link:hover { gap: 12px; }
.showcase__media img {
  width: 100%;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* ---------- Feature highlights (Why Vera) ---------- */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue-tint);
  border-radius: var(--r); padding: 30px 26px; transition: all var(--t);
}
.feature:hover { box-shadow: var(--shadow); border-top-color: var(--blue); transform: translateY(-4px); }
.feature__ic {
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--blue-tint); color: var(--blue);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  transition: all var(--t);
}
.feature:hover .feature__ic { background: var(--blue); color: #fff; }
.feature__ic svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.12rem; margin-bottom: 9px; color: var(--ink); }
.feature p { color: var(--gray); font-size: 0.93rem; line-height: 1.6; margin: 0; }
@media (max-width: 1024px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

/* ============================================================
   PRODUCT CARDS  (clean white cards w/ blue accents)
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.prod-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue-tint);
  border-radius: var(--r);
  overflow: hidden;
  transition: all var(--t);
  display: flex; flex-direction: column;
}
.prod-card:hover { box-shadow: var(--shadow-lg); border-color: var(--line); border-top-color: var(--blue); transform: translateY(-5px); }
.prod-card__img {
  aspect-ratio: 1 / 1;   /* matches the 700x700 series images exactly → full-bleed, no crop, no bands */
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
.prod-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.prod-card:hover .prod-card__img img { transform: scale(1.02); }
/* Product-photo cards: square box, full image (keeps the baked-in name band visible) */
.prod-card__img--product { aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; }
.prod-card__img--product img { object-fit: contain; width: 100%; height: 100%; }
.prod-card:hover .prod-card__img--product img { transform: scale(1.015); }
.prod-card__body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.prod-card__kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.prod-card__body h3 { font-size: 1.5rem; line-height: 1.15; margin-bottom: 12px; color: var(--ink); letter-spacing: -0.02em; }
.prod-card__body p { color: var(--gray); font-size: 0.97rem; line-height: 1.6; margin-bottom: 22px; flex: 1; }
.prod-card__kicker { letter-spacing: 0.18em; }
.prod-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--blue); font-size: 0.92rem;
  align-self: flex-start;
}
.prod-card__link:hover { gap: 12px; }

/* ============================================================
   PRODUCT DETAIL BLOCKS
   ============================================================ */
.product-block { padding: clamp(40px, 5vw, 68px) 0; border-bottom: 1px solid var(--line); }
.product-block:last-child { border-bottom: none; }
.product-block__grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: flex-start;
}
.product-block__media {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.product-block__media img { max-width: 88%; max-height: 88%; object-fit: contain; transition: transform var(--t-slow); }
.product-block:hover .product-block__media img { transform: scale(1.02); }
.product-block__media .badge {
  position: absolute; top: 16px; left: 16px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--blue); padding: 5px 12px; border-radius: 30px;
}
.product-block__body .kicker { display: inline-block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.product-block__body h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 18px; }
.product-block__body > p { color: var(--gray); line-height: 1.8; margin-bottom: 26px; }

/* Product comparison table */
.compare { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.compare table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.94rem; }
.compare th, .compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.compare thead th { background: var(--blue-tint); color: var(--blue-dark); font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
.compare thead th:first-child { font-family: var(--f-body); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.compare tbody th { font-weight: 600; color: var(--ink); width: 26%; }
.compare tbody td { color: var(--gray); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare tbody tr:hover td, .compare tbody tr:hover th { background: var(--bg-soft); }

.spec-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin-bottom: 26px; }
.spec-table tr { border-bottom: 1px solid var(--line-soft); }
.spec-table tr:first-child { border-top: 2px solid var(--blue); }
.spec-table th {
  text-align: left; padding: 13px 0; width: 42%;
  font-weight: 600; color: var(--ink);
}
.spec-table td { padding: 13px 0; color: var(--gray); }

.block-h4 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); margin: 26px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.block-h4::before { content: ""; width: 22px; height: 2px; background: var(--blue); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.tag-list li { padding: 6px 14px; background: var(--blue-tint); color: var(--blue-dark); border-radius: 30px; font-size: 0.82rem; font-weight: 500; }

.pdf-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pdf-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  font-weight: 600; font-size: 0.85rem; color: var(--ink);
  transition: all var(--t);
}
.pdf-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.pdf-btn svg { width: 16px; height: 16px; opacity: 0.7; }
.pdf-btn:hover svg { opacity: 1; }

.note {
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  padding: 16px 20px; margin: 16px 0;
  font-size: 0.92rem; color: var(--ink);
}
.note strong { display: block; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-dark); margin-bottom: 4px; }

/* ============================================================
   INDUSTRIES (applications) — clean tile grid
   ============================================================ */
.industries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.industry {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 32px 22px;
  text-align: center;
  transition: all var(--t);
}
.industry:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.industry__icon {
  width: 78px; height: 78px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-tint); color: var(--blue);
  border-radius: 50%;
  transition: background var(--t), color var(--t), transform var(--t);
}
.industry__icon svg { width: 36px; height: 36px; }
.industry:hover .industry__icon { background: rgba(255,255,255,0.2); color: #fff; transform: scale(1.08); }
.industry { padding: 36px 22px 32px; display: block; text-decoration: none; color: inherit; cursor: pointer; }
.industry__name { font-weight: 500; color: var(--ink); font-size: 1rem; transition: color var(--t); }
.industry:hover .industry__name { color: #fff; }

/* ============================================================
   STATS  (blue band)
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.stat { text-align: center; }
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 700; line-height: 1; color: #fff; margin-bottom: 8px; letter-spacing: -0.03em;
}
.stat__unit { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 6px; }
.stat__label { color: rgba(255,255,255,0.9); }
.stats--onlight .stat__num { color: var(--blue); }
.stats--onlight .stat__unit { color: var(--blue-mid); }
.stats--onlight .stat__label { color: var(--gray); }

/* ============================================================
   FAIRS / NEWS cards
   ============================================================ */
.fairs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.fair {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: all var(--t);
}
.fair:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.fair__img { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 22px; background: #fff; }
.fair__img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(70%); transition: filter var(--t); }
.fair:hover .fair__img img { filter: grayscale(0); }
.fair__name { padding: 14px; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--blue); border-top: 1px solid var(--line); }

/* ============================================================
   PHOTO GRID (production)
   ============================================================ */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.photo-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); transition: transform var(--t); }
.photo-grid img:hover { transform: scale(1.03); }

/* ============================================================
   PAGE HERO (inner pages) — blue band w/ image
   ============================================================ */
.page-hero {
  position: relative;
  background: linear-gradient(120deg, #2a2520 0%, #4a3a28 100%);
  color: #fff;
  padding: clamp(64px, 9vw, 110px) 0;
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: -28px; background-size: cover; background-position: center; opacity: 0.20; will-change: transform; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,37,32,0.28), rgba(42,37,32,0.55)); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; color: #fff; margin: 0 0 14px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: rgba(255,255,255,0.75); }
.breadcrumb a { color: rgba(255,255,255,0.9); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb .sep { opacity: 0.5; }

/* ---------- Content blocks ---------- */
.content p { font-size: 1.05rem; line-height: 1.85; color: var(--ink); margin-bottom: 1.2em; }
.content .lead { font-size: 1.2rem; color: var(--blue-dark); font-weight: 500; line-height: 1.6; margin-bottom: 1.3em; }
.content h2 { margin-top: 1.6em; color: var(--ink); }
.content h2:first-child { margin-top: 0; }
.content h3 { color: var(--blue); margin-top: 1.4em; font-size: 1.15rem; }
.content ul li { margin-bottom: 0.5em; color: var(--ink); }
.content ul li::marker { color: var(--blue); }
.content--center { text-align: center; }

/* ============================================================
   CTA strip
   ============================================================ */
.cta {
  background: #3a2c18;
  background-image: linear-gradient(120deg, #2f2415 0%, #6b4d24 100%);
  color: #fff;
  padding: clamp(54px, 7vw, 80px) 0;
}
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.cta h2 { color: #fff; margin: 0 0 6px; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
.cta p { color: rgba(255,255,255,0.88); margin: 0; font-size: 1.08rem; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 70px); }
.contact-info .kicker { display:inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.contact-item:last-of-type { border-bottom: none; }
.contact-item__ic { flex: 0 0 46px; height: 46px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: flex; align-items: center; justify-content: center; transition: all var(--t); }
.contact-item:hover .contact-item__ic { background: var(--blue); color: #fff; }
.contact-item__ic svg { width: 20px; height: 20px; }
.contact-item__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); display: block; margin-bottom: 3px; }
.contact-item__val { color: var(--ink); font-size: 1.04rem; }
.contact-item__val a { color: var(--ink); }
.contact-item__val a:hover { color: var(--blue); }
.contact-socials { display: flex; gap: 10px; margin-top: 22px; }
.contact-socials a { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--blue); transition: all var(--t); }
.contact-socials a:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.contact-socials svg { width: 18px; height: 18px; }

.contact-form { background: var(--bg-soft); border-radius: var(--r); padding: clamp(30px, 4vw, 48px); }
.contact-form .kicker { display:inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.contact-form h2 { margin-bottom: 10px; }
.contact-form > p { color: var(--gray); margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 7px; color: var(--ink); }
.field input, .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,112,184,0.12); }
.field textarea { resize: vertical; min-height: 120px; }
.field .req { color: var(--blue); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #29241f; color: rgba(255,255,255,0.7); padding: clamp(56px, 7vw, 80px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(30px, 4vw, 60px); padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-about__logo img { height: 60px; margin-bottom: 18px; }
.footer-about p { color: rgba(255,255,255,0.6); font-size: 0.94rem; line-height: 1.7; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #fff; transition: all var(--t); }
.footer-socials a:hover { background: var(--blue); transform: translateY(-2px); }
.footer-socials svg { width: 16px; height: 16px; }
.site-footer h4 { color: #fff; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; margin: 0 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 11px; }
.site-footer ul a { color: rgba(255,255,255,0.65); font-size: 0.94rem; }
.site-footer ul a:hover { color: var(--blue-mid); padding-left: 5px; }
.footer-contact p { font-size: 0.94rem; line-height: 1.7; color: rgba(255,255,255,0.65); margin: 0 0 10px; }
.footer-contact a { color: rgba(255,255,255,0.82); }
.footer-contact a:hover { color: var(--blue-mid); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-size: 0.86rem; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 12px; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--t-slow), transform 0.8s var(--t-slow); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.3s; }
[data-reveal][data-delay="4"] { transition-delay: 0.4s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .site-nav { display: none; }
  .mobile-toggle { display: inline-flex; align-items: center; }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .fairs { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: 1fr; gap: 28px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase, .showcase--reverse { grid-template-columns: 1fr; }
  .showcase--reverse .showcase__media { order: 0; }
  .product-block__grid { grid-template-columns: 1fr; }
  .product-block__media { max-width: 440px; }
  .contact-grid { grid-template-columns: 1fr; }
  .card-grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .top-bar__social { display: none; }
  .site-header__inner { height: 70px; }
  .site-logo img { height: 44px; }
  .industries { grid-template-columns: 1fr 1fr; }
  .fairs { grid-template-columns: 1fr 1fr; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* utils */
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   v4 — Cinematic hero, motion polish, floating tools,
   spec gauges, branded micro-details
   ============================================================ */

/* ---- Scroll progress bar (top) ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  z-index: 300; transition: width 0.1s linear;
}

/* ---- Floating tools (contact + back to top) ---- */
.floating-tools {
  position: fixed; right: clamp(14px, 2.5vw, 26px); bottom: clamp(14px, 2.5vw, 26px);
  z-index: 250; display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s ease, background 0.25s ease;
  border: none; cursor: pointer;
}
.fab svg { width: 23px; height: 23px; }
.fab--call { background: var(--blue); }
.fab--call:hover { background: var(--blue-dark); }
.fab--mail { background: var(--green); }
.fab--mail:hover { background: var(--green-dark); }
.fab--top { background: var(--ink); opacity: 0; visibility: hidden; transform: translateY(10px); }
.fab--top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(0,0,0,0.24); }
.fab__tip {
  position: absolute; right: 62px; white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 0.8rem; font-weight: 500;
  padding: 6px 11px; border-radius: 6px; opacity: 0; transform: translateX(6px);
  transition: all 0.25s ease; pointer-events: none;
}
.fab-wrap { position: relative; display: flex; align-items: center; }
.fab-wrap:hover .fab__tip { opacity: 1; transform: translateX(0); }
@media (max-width: 600px) { .fab { width: 48px; height: 48px; } .fab__tip { display: none; } }

/* ---- Cinematic hero glow + parallax ---- */
.hero__glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 46vw; max-width: 620px; aspect-ratio: 1; border-radius: 50%;
  left: -8vw; top: 50%; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(232,124,25,0.28) 0%, rgba(232,124,25,0) 68%);
  animation: glowPulse 7s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.hero__cap { will-change: transform; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.hero__slide { will-change: transform; }

/* light sweep across hero */
.hero::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; z-index: 1;
  left: -50%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
  animation: heroSweep 9s ease-in-out 2s infinite;
}
@keyframes heroSweep { 0% { left: -50%; } 35%,100% { left: 130%; } }

/* ---- Motion polish ---- */
.btn, .prod-card, .industry, .feature, .fair, .pdf-btn { will-change: transform; }
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero__glow, .hero::before, [data-reveal] { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}



/* ============================================================
   v5 — Texture, cursor light, marquee, 3D tilt, product rail,
   scrollytelling, view transitions
   ============================================================ */

/* ---- Cross-document view transitions (smooth page changes) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.28s ease both; }
::view-transition-new(root) { animation: vtIn 0.34s ease both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

/* ---- Film grain texture ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Signature gradient accents ---- */
.sec-title h2::after { background: linear-gradient(90deg, var(--blue), var(--green)); }

/* ---- Cursor light (glows on dark sections via screen blend) ---- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%; pointer-events: none; z-index: 60; opacity: 0;
  background: radial-gradient(circle, rgba(244,150,60,0.55) 0%, rgba(244,150,60,0) 65%);
  mix-blend-mode: screen; transition: opacity 0.4s ease;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
@media (pointer: coarse) { .cursor-glow { display: none; } }

/* ---- Marquee strip ---- */
.marquee {
  background: var(--ink); color: #fff; overflow: hidden; white-space: nowrap;
  padding: 16px 0; border-top: 3px solid var(--blue);
}
.marquee__track { display: inline-flex; align-items: center; gap: 26px; animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-family: var(--f-body); font-weight: 600; font-size: clamp(1rem, 1.8vw, 1.4rem); letter-spacing: 0.04em; }
.marquee .dot { color: var(--blue); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- 3D tilt + shine on cards ---- */
.prod-card, .srail-card, .feature, .industry { transform-style: preserve-3d; }
.prod-card { position: relative; }
.prod-card::after, .srail-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.35) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.7s ease; opacity: 0;
}
.prod-card:hover::after, .srail-card:hover::after { transform: translateX(120%); opacity: 1; }

/* ---- Apple-style product rail (horizontal scroll-snap) ---- */
.showcase-rail {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px clamp(16px, 5vw, 80px) 24px; scroll-padding-left: clamp(16px, 5vw, 80px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--blue) var(--line);
}
.showcase-rail::-webkit-scrollbar { height: 6px; }
.showcase-rail::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 10px; }
.showcase-rail::-webkit-scrollbar-track { background: var(--line); border-radius: 10px; }
.srail-card {
  flex: 0 0 clamp(208px, 22vw, 258px); scroll-snap-align: start;
  position: relative; overflow: hidden; border-radius: 10px;
  background: #fff; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-top: 3px solid var(--accent, var(--blue));
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease, ease), box-shadow 0.4s ease;
}
.srail-card__img {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--blue)) 16%, #fff), #fff);
}
.srail-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.srail-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line); }
.srail-card:hover .srail-card__img img { transform: scale(1.02); }
.srail-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.srail-card__kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, var(--blue)); }
.srail-card h3 { color: var(--ink); font-size: 1.08rem; margin: 0; letter-spacing: -0.01em; }
.srail-card__go { font-size: 0.82rem; font-weight: 600; color: var(--gray); display: inline-flex; gap: 5px; margin-top: 4px; transition: color var(--t); }
.srail-card:hover .srail-card__go { color: var(--accent, var(--blue)); }
.srail-card:hover .srail-card__go .arrow { transform: translateX(3px); }

/* Rail navigation arrows */
.rail-wrap { position: relative; }
.rail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: #fff; color: var(--blue); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t); opacity: 0.96;
}
.rail-arrow:hover { background: var(--blue); color: #fff; transform: translateY(-50%) scale(1.08); }
.rail-arrow svg { width: 22px; height: 22px; }
.rail-arrow--next { right: clamp(8px, 2vw, 28px); }
.rail-arrow--prev { left: clamp(8px, 2vw, 28px); }
.rail-arrow[hidden] { display: none; }
@media (pointer: coarse) { .rail-arrow { display: none; } }
.srail-hint { text-align: center; color: var(--gray); font-size: 0.85rem; margin-top: 6px; }


/* ============================================================
   v6 — Quick-access band + Sustainability accents
   ============================================================ */
.quicknav { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quicknav__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.quicknav__item {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 32px 18px; border-right: 1px solid var(--line); color: var(--ink); transition: all var(--t);
}
.quicknav__item:last-child { border-right: none; }
.quicknav__item:hover { background: #fff; color: var(--blue); transform: translateY(-3px); }
.quicknav__ic { width: 44px; height: 44px; color: var(--blue); display: flex; align-items: center; justify-content: center; }
.quicknav__ic svg { width: 100%; height: 100%; }
.quicknav__t { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.quicknav__s { font-size: 0.83rem; color: var(--gray); }
.quicknav__item:hover .quicknav__s { color: var(--blue-dark); }
@media (max-width: 760px) {
  .quicknav__inner { grid-template-columns: 1fr 1fr; }
  .quicknav__item:nth-child(2) { border-right: none; }
  .quicknav__item:nth-child(1), .quicknav__item:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* Eco (green) icon variant for sustainability cards */
.feature--eco .feature__ic { background: rgba(0,145,63,0.12); color: var(--green); }
.feature--eco:hover .feature__ic { background: var(--green); color: #fff; }
.feature--eco:hover { border-top-color: var(--green); }
.feature--eco { border-top-color: rgba(0,145,63,0.25); }

/* ---- E-katalog product cards ---- */
.ekat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ekat-card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue-tint);
  border-radius: var(--r); padding: 26px 28px; transition: all var(--t);
}
.ekat-card:hover { box-shadow: var(--shadow); border-top-color: var(--blue); transform: translateY(-3px); }
.ekat-card__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.ekat-card h3 { font-size: 1.3rem; margin: 0 0 8px; }
.ekat-card p { color: var(--gray); font-size: 0.95rem; line-height: 1.6; margin: 0 0 18px; min-height: 44px; }
.ekat-card .pdf-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) { .ekat-grid { grid-template-columns: 1fr; } }

/* ---- Fair / news cards ---- */
.fairlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.fair-card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r); padding: 22px 24px; transition: all var(--t);
}
.fair-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-left-color: var(--green); }
.fair-card__year { display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--blue); background: var(--blue-tint); padding: 3px 11px; border-radius: 20px; margin-bottom: 12px; }
.fair-card h3 { font-size: 1.12rem; margin: 0 0 6px; }
.fair-card__meta { font-size: 0.87rem; color: var(--gray); line-height: 1.5; }

/* ---- Sustainability / Çevreye Duyarlılık ---- */
.eco-hero {
  background: linear-gradient(120deg, #0a7d3a 0%, #00913f 55%, #2bb673 100%);
  color: #fff; border-radius: var(--r); padding: clamp(36px, 6vw, 60px);
  position: relative; overflow: hidden;
}
.eco-hero::after {
  content: ""; position: absolute; right: -30px; bottom: -50px; width: 260px; height: 260px; opacity: 0.14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.eco-hero .kicker { color: rgba(255,255,255,0.85); }
.eco-hero h2 { color: #fff; margin-bottom: 14px; }
.eco-hero p { color: rgba(255,255,255,0.94); max-width: 640px; margin: 0; font-size: 1.08rem; }
.eco-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; margin: 6px 0 0; padding: 0; list-style: none; }
.eco-benefits li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink); }
.eco-benefits li svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--green); margin-top: 3px; }
@media (max-width: 680px) { .eco-benefits { grid-template-columns: 1fr; } }

/* ---- News / fair image cards (ozeniplik-style) ---- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.news-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: all var(--t); }
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.news-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.news-card:hover .news-card__img img { transform: scale(1.06); }
.news-card__body { padding: 18px 20px 20px; }
.news-card__year { display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: 0.74rem; color: var(--blue); background: var(--blue-tint); padding: 3px 11px; border-radius: 20px; margin-bottom: 10px; }
.news-card h3 { font-size: 1.1rem; margin: 0 0 6px; }
.news-card__meta { font-size: 0.86rem; color: var(--gray); line-height: 1.5; }
.ekat-group + .ekat-group { margin-top: 48px; }

/* ---- Çevreye Duyarlılık split blocks (ozeniplik-style) ---- */
.eco-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.eco-split--rev { grid-template-columns: 1.15fr 1fr; }
.eco-split--rev .eco-split__text { order: 2; }
.eco-split__img img { width: 100%; border-radius: 14px; box-shadow: var(--shadow-lg); }
.eco-split h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 20px; }
.eco-quote { background: var(--bg-soft); border-radius: 14px; padding: 26px 28px; color: var(--ink); font-size: 1.04rem; line-height: 1.7; border-left: 3px solid var(--green); }
.eco-quote p { margin: 0; }
.eco-more { display: inline-flex; align-items: center; gap: 13px; margin-top: 24px; font-weight: 600; color: var(--ink); }
.eco-more__ic { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; transition: all var(--t); }
.eco-more:hover { color: var(--green-dark); }
.eco-more:hover .eco-more__ic { background: var(--green-dark); transform: translateX(3px); }
@media (max-width: 820px) { .eco-split, .eco-split--rev { grid-template-columns: 1fr; } .eco-split--rev .eco-split__text { order: 0; } }

/* ---- Sustainability feature (homepage, creative) ---- */
.sustain-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
.sustain-feature__media { position: relative; }
.sustain-feature__media img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-lg); display: block; }
.sustain-feature__badge { position: absolute; left: 18px; bottom: 18px; background: var(--green); color: #fff; font-weight: 600; font-size: 0.88rem; padding: 9px 16px; border-radius: 30px; display: inline-flex; gap: 8px; align-items: center; box-shadow: var(--shadow); }
.sustain-feature__badge svg { width: 16px; height: 16px; }
.sustain-list { list-style: none; padding: 0; margin: 22px 0 28px; display: flex; flex-direction: column; gap: 18px; }
.sustain-list li { display: flex; gap: 16px; align-items: flex-start; }
.sustain-list__ic { flex: 0 0 48px; height: 48px; border-radius: 13px; background: rgba(0,145,63,0.12); color: var(--green); display: flex; align-items: center; justify-content: center; transition: all var(--t); }
.sustain-list li:hover .sustain-list__ic { background: var(--green); color: #fff; transform: scale(1.06); }
.sustain-list__ic svg { width: 24px; height: 24px; }
.sustain-list b { display: block; font-family: var(--f-display); font-size: 1.06rem; margin-bottom: 3px; color: var(--ink); letter-spacing: -0.01em; }
.sustain-list span { color: var(--gray); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 820px) { .sustain-feature { grid-template-columns: 1fr; } }

/* ---- News card as link + fair detail ---- */
a.news-card { text-decoration: none; color: inherit; }
.fair-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.fair-detail__img img { width: 100%; border-radius: 14px; box-shadow: var(--shadow-lg); }
.fair-detail__body h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 6px 0 12px; }
.fair-meta { color: var(--blue); font-weight: 600; margin-bottom: 18px; }
@media (max-width: 820px) { .fair-detail { grid-template-columns: 1fr; } }

/* ---- Fair detail gallery ---- */
.fair-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 40px; }
.fair-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow); transition: transform var(--t); }
.fair-gallery a:hover img { transform: scale(1.03); }
.fair-detail__body p { font-size: 1.04rem; line-height: 1.75; }

/* ===== v8: e-katalog photo cards + eco banner/quote ===== */
.ekat-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ekat-card__img { aspect-ratio: 4 / 3; background: #f3f3f4; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 14px; }
.ekat-card__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .5s ease; }
.ekat-card:hover .ekat-card__img img { transform: scale(1.04); }
.ekat-card__body { padding: 22px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.ekat-card__body p { min-height: 0; }
.ekat-specs { list-style: none; margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.ekat-specs li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.88rem; }
.ekat-specs li span { color: var(--gray); }
.ekat-specs li b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ekat-card .pdf-row { margin-top: auto; }

.eco-banner { display: block; background: var(--green); color: #fff; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.25; padding: 16px 28px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 10px 26px rgba(0,144,64,.22); }
.eco-split__text p + p { margin-top: 14px; }
.eco-lead-quote { font-family: var(--f-display); font-weight: 500; font-style: italic; font-size: clamp(1.12rem, 2vw, 1.35rem); line-height: 1.6; color: var(--ink); margin: 6px 0 24px; padding-left: 20px; border-left: 4px solid var(--green); }
.container--narrow { max-width: 880px; }

/* ===== v9: sustainability visual upgrade ===== */
/* every heading -> green banner */
.eco-banner { display: inline-block; width: auto; }
.eco-banner { color: #fff !important; }
h2.eco-banner, .content h2.eco-banner, .eco-split h2.eco-banner { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 22px; color: #fff !important; }

/* Geri Dönüşüm: quote card + 2-col + cycle */
.eco-quote-card { display: flex; gap: 22px; align-items: center; background: linear-gradient(120deg, #eaf6ee, #f5faf3); border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-left: 5px solid var(--green); border-radius: 16px; padding: 28px 32px; margin-bottom: 28px; }
.eco-quote-card__ic { flex: 0 0 56px; width: 56px; height: 56px; color: var(--green); }
.eco-quote-card__ic svg { width: 100%; height: 100%; }
.eco-quote-card p { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--ink); }
.eco-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.eco-2col p { margin: 0; line-height: 1.75; }
.eco-cycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.eco-cycle__step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 22px 24px; text-align: center; transition: all var(--t); }
.eco-cycle__step:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.eco-cycle__step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -12px; width: 24px; height: 24px; transform: translateY(-50%); z-index: 3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2300913f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
.eco-cycle__ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.eco-cycle__ic svg { width: 26px; height: 26px; }
.eco-cycle__step h4 { margin: 0 0 6px; font-size: 1.06rem; }
.eco-cycle__step p { margin: 0; font-size: 0.9rem; color: var(--gray); line-height: 1.5; }
.eco-cycle__num { position: absolute; top: 12px; right: 16px; font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; color: color-mix(in srgb, var(--green) 28%, #fff); }
@media (max-width: 760px) { .eco-2col { grid-template-columns: 1fr; gap: 18px; } .eco-cycle { grid-template-columns: 1fr; } .eco-cycle__step:not(:last-child)::after { display: none; } .eco-quote-card { flex-direction: column; text-align: center; } }

/* Benefit cards */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 16px; margin-top: 6px; }
.benefit-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 18px 20px; transition: all var(--t); }
.benefit-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.benefit-card__ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--green) 13%, #fff); color: var(--green); display: flex; align-items: center; justify-content: center; }
.benefit-card__ic svg { width: 20px; height: 20px; }
.benefit-card span:last-child { font-size: 0.95rem; line-height: 1.5; color: var(--ink); }

/* Çevre bilinci panel */
.eco-panel { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 14px; padding: 28px 32px; box-shadow: var(--shadow); }
.eco-panel__ic { flex: 0 0 48px; width: 48px; height: 48px; color: var(--green); }
.eco-panel__ic svg { width: 100%; height: 100%; }
.eco-panel p { margin: 0; line-height: 1.75; }

/* Ürün yaklaşımı feature cards */
.eco-feat2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.eco-feat { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 14px; padding: 26px 28px; transition: all var(--t); }
.eco-feat:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.eco-feat__ic { width: 50px; height: 50px; border-radius: 12px; background: color-mix(in srgb, var(--green) 13%, #fff); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.eco-feat__ic svg { width: 26px; height: 26px; }
.eco-feat h4 { margin: 0 0 8px; font-size: 1.16rem; }
.eco-feat p { margin: 0; color: var(--gray); line-height: 1.65; }
@media (max-width: 760px) { .eco-feat2 { grid-template-columns: 1fr; } }

/* İş & işçi sağlığı cards */
.isg-lead { margin: 0 0 20px; font-weight: 600; color: var(--ink); }
.isg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.isg-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 24px; transition: all var(--t); }
.isg-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.isg-card__n { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.isg-card p { margin: 0; line-height: 1.6; font-size: 0.95rem; }
@media (max-width: 760px) { .isg-grid { grid-template-columns: 1fr; } }

/* ===== v10: homepage lead/quote form ===== */
.leadform { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.leadform__intro h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.leadform__intro > p { color: var(--gray); line-height: 1.7; margin-bottom: 22px; max-width: 460px; }
.leadform__points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.leadform__points li { font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.lf-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--green) 14%, #fff); color: var(--green); font-weight: 700; font-size: 0.85rem; flex: 0 0 24px; }
.leadform__contact { display: flex; flex-wrap: wrap; gap: 20px; }
.leadform__contact a { font-weight: 600; color: var(--green); }
.leadform__contact a:hover { color: var(--green-dark); }
.leadform .contact-form { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
@media (max-width: 820px) { .leadform { grid-template-columns: 1fr; } }

/* ===== v11: inner pages (apps / vision / about / certs) + sustain ===== */
/* Applications */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.app-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-top: 3px solid transparent; border-radius: 16px; padding: 28px 26px; text-decoration: none; color: inherit; transition: all var(--t); }
.app-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-top-color: var(--green); }
.app-card__ic { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--green) 13%, #fff); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: all var(--t); }
.app-card__ic svg { width: 27px; height: 27px; }
.app-card:hover .app-card__ic { background: var(--green); color: #fff; }
.app-card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.app-card p { margin: 0 0 18px; color: var(--gray); line-height: 1.6; font-size: 0.95rem; flex: 1; }
.app-card__link { font-weight: 600; color: var(--green); font-size: 0.92rem; }
.app-card__link em { font-style: normal; display: inline-block; transition: transform var(--t); }
.app-card:hover .app-card__link em { transform: translateX(4px); }

/* Vision & Mission */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vm-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(28px, 3.5vw, 40px); }
.vm-card__ic { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.vm-card__ic svg { width: 30px; height: 30px; }
.vm-card h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 12px; }
.vm-card p { margin: 0; line-height: 1.75; color: var(--ink); }
.vm-card--vision { border-top: 4px solid var(--green); }
.vm-card--vision .vm-card__ic { background: color-mix(in srgb, var(--green) 14%, #fff); color: var(--green); }
.vm-card--mission { border-top: 4px solid var(--blue); }
.vm-card--mission .vm-card__ic { background: color-mix(in srgb, var(--blue) 14%, #fff); color: var(--blue); }
@media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } }

/* Values / quality cards */
.values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.value-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; transition: all var(--t); }
.value-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.value-card__ic { width: 54px; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--green) 13%, #fff); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.value-card__ic svg { width: 28px; height: 28px; }
.value-card h3 { margin: 0 0 10px; font-size: 1.18rem; }
.value-card p { margin: 0; color: var(--gray); line-height: 1.65; font-size: 0.95rem; }

/* About */
.about-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.about-split__text .kicker { display: inline-block; margin-bottom: 10px; }
.about-split__text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 18px; }
.about-split__text p { line-height: 1.8; margin: 0 0 14px; color: var(--ink); }
.about-split__img img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-lg); }
@media (max-width: 820px) { .about-split { grid-template-columns: 1fr; } }
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.ab-stat b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--blue); line-height: 1; }
.ab-stat span { display: block; margin-top: 8px; color: var(--gray); font-size: 0.95rem; font-weight: 500; }
@media (max-width: 620px) { .ab-stats { grid-template-columns: 1fr 1fr; gap: 26px; } }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
.tl-item { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 14px; padding: 24px 20px; transition: all var(--t); }
.tl-item:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.tl-item:nth-child(even) { border-top-color: var(--blue); }
.tl-year { display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; color: #fff; background: var(--green); padding: 4px 13px; border-radius: 20px; margin-bottom: 12px; }
.tl-item:nth-child(even) .tl-year { background: var(--blue); }
.tl-item h4 { margin: 0 0 8px; font-size: 1.05rem; }
.tl-item p { margin: 0; font-size: 0.9rem; color: var(--gray); line-height: 1.55; }
@media (max-width: 820px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } }
.about-quote { margin-top: 42px; text-align: center; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.6; color: var(--ink); padding: 0 16px; }
.about-quote p { margin: 0; }

/* Certs note */
.cert-note p { max-width: 560px; margin: 0 auto 22px; color: var(--gray); line-height: 1.7; }

/* Homepage sustain enhancements */
.sustain-feature__media { position: relative; }
.sustain-feature__stat { position: absolute; right: 16px; top: 16px; background: rgba(255,255,255,0.95); border-radius: 12px; padding: 9px 15px; font-size: 0.9rem; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); }
.sustain-feature__stat b { color: var(--green); font-family: var(--f-display); font-size: 1.12rem; margin-right: 4px; }
.sustain-list li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: all var(--t); }
.sustain-list li:hover { box-shadow: var(--shadow); transform: translateX(4px); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
/* ---- homepage sustainability photo background ---- */
.home-eco { position: relative; background-size: cover; background-position: center; }
.home-eco::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(9,38,21,.62), rgba(9,38,21,.40)); }
.home-eco > .container { position: relative; z-index: 2; }
.home-eco .feature { background: rgba(255,255,255,.97); }
.sec-title--light h2 { color: #fff; }
.sec-title--light p { color: rgba(255,255,255,.9); }
.sec-title--light .watermark { color: rgba(255,255,255,.10); }

/* ---- inner page hero: Vera production photo background ---- */
.page-hero { background-image: linear-gradient(120deg, rgba(31,26,20,.58), rgba(52,42,31,.42)), url(../img/uretim-bg.jpg); background-size: cover; background-position: center; }


/* ============================================================
   v18 — Visual depth & premium polish (site-wide, appended)
   Lifts shared components: section titles, sector/app cards,
   icon tiles, inner page heroes. Tasteful, brand-true.
   ============================================================ */

/* ---------- Section titles: gradient ink + gradient rule ---------- */
.sec-title h2{
  background:linear-gradient(92deg,var(--blue-dark),var(--blue) 52%,var(--blue-mid));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sec-title h2::after{
  width:60px;height:4px;border-radius:99px;margin-top:18px;
  background:linear-gradient(90deg,var(--blue),var(--green));
}
.sec-title .watermark{opacity:.5;letter-spacing:.05em;}
.sec-title--light h2{background:none;-webkit-text-fill-color:#fff;}

/* ---------- Resting elevation for all card types ---------- */
.industry,.app-card,.prod-card,.srail-card,.value-card,.vm-card{
  box-shadow:0 3px 16px rgba(44,38,32,.06);
}

/* ---------- Sector / industry cards (homepage grid) ---------- */
.industries{gap:24px;}
.industry{
  border-radius:20px;border-color:var(--line-soft);
  padding:42px 24px 36px;position:relative;overflow:hidden;
  background:radial-gradient(125% 85% at 50% -12%,rgba(232,124,25,.05),transparent 60%) #fff;
  transition:transform var(--t-slow),box-shadow var(--t),border-color var(--t);
}
.industry::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow);
}
.industry:hover{
  background:#fff;border-color:transparent;
  transform:translateY(-8px);box-shadow:0 24px 54px rgba(232,124,25,.20);
}
.industry:hover::before{transform:scaleX(1);}
.industry__icon{
  width:88px;height:88px;
  background:radial-gradient(circle at 32% 26%,rgba(232,124,25,.20),rgba(0,145,63,.10));
  color:var(--blue);box-shadow:inset 0 0 0 1px rgba(232,124,25,.16);
  transition:transform var(--t-slow),box-shadow var(--t),color var(--t);
}
.industry:hover .industry__icon{
  color:var(--green);transform:translateY(-4px) scale(1.08);
  box-shadow:inset 0 0 0 1px rgba(0,145,63,.28),0 12px 26px rgba(0,145,63,.18);
}
.industry__name{font-weight:600;letter-spacing:-.01em;font-size:1.07rem;}
.industry:hover .industry__name{color:var(--ink);}

/* ---------- App / value / vm icon tiles: gradient + hover ---------- */
.app-card{border-radius:18px;}
.app-card:hover{transform:translateY(-7px);box-shadow:0 24px 54px rgba(232,124,25,.20);}
.app-card__ic,.value-card__ic,.vm-card__ic{
  background:linear-gradient(140deg,var(--blue-tint),#fff);
  box-shadow:inset 0 0 0 1px rgba(232,124,25,.14);
}
.app-card:hover .app-card__ic{background:linear-gradient(140deg,var(--blue),var(--green));color:#fff;}

/* ---------- Product / rail cards: rounder ---------- */
.prod-card,.srail-card{border-radius:16px;}

/* ---------- Inner page hero: richer, branded ---------- */
.page-hero{padding:clamp(76px,10vw,130px) 0;}
.page-hero__bg{opacity:.30;}
.page-hero::after{
  background:
    radial-gradient(115% 130% at 80% -5%,rgba(232,124,25,.22),transparent 52%),
    linear-gradient(180deg,rgba(26,22,18,.32),rgba(26,22,18,.58));
}
.page-hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--blue),var(--green));
}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);text-shadow:0 2px 20px rgba(0,0,0,.25);}
.page-hero .breadcrumb{
  display:inline-flex;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);
  padding:8px 16px;border-radius:999px;margin-top:4px;
}


/* ============================================================
   v19 — Bolder pass: cinematic hero, about, product/ekat cards,
   section-background rhythm. (appended, brand-true)
   ============================================================ */

/* ---------- Homepage hero: cinematic ---------- */
.hero__slide.is-active{ animation: kenburns 10s ease-out both; }
@keyframes kenburns{ from{ transform:scale(1.001); } to{ transform:scale(1.075); } }
.hero::after{
  background:
    linear-gradient(90deg, rgba(20,13,4,0.68) 0%, rgba(20,13,4,0.36) 44%, rgba(20,13,4,0) 72%),
    radial-gradient(95% 130% at 10% 50%, rgba(232,124,25,0.20), transparent 55%),
    linear-gradient(to top, rgba(20,13,4,0.34) 0%, rgba(20,13,4,0) 46%);
}
.hero__cap-eyebrow{
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  box-shadow:0 8px 22px rgba(232,124,25,.45); letter-spacing:.24em;
}
.hero__cap-title{ font-size:clamp(2.2rem,4.9vw,4rem); text-shadow:0 4px 34px rgba(0,0,0,.55); }
.hero__cap-text{ font-size:clamp(1.02rem,1.6vw,1.22rem); }
.hero__dots button.is-active{ background:linear-gradient(90deg,var(--blue),var(--green)); border-color:transparent; width:34px; }

/* ---------- About: stat cards + framed image + quote ---------- */
.ab-stats{ gap:24px; }
.ab-stat{
  background:linear-gradient(160deg,#fff,var(--blue-tint-2));
  border:1px solid var(--line-soft); border-radius:18px; padding:32px 18px;
  box-shadow:0 3px 16px rgba(44,38,32,.06);
  transition:transform var(--t-slow),box-shadow var(--t);
}
.ab-stat:hover{ transform:translateY(-7px); box-shadow:0 22px 50px rgba(232,124,25,.18); }
.ab-stat b{
  font-size:clamp(2.4rem,5vw,3.4rem);
  background:linear-gradient(135deg,var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ab-stat span{ font-weight:600; color:var(--ink); }
.about-split__img{ position:relative; }
.about-split__img::before{
  content:""; position:absolute; right:-16px; bottom:-16px; width:64%; height:72%; z-index:0;
  border-radius:20px; background:linear-gradient(135deg,var(--blue),var(--green)); opacity:.16;
}
.about-split__img img{ position:relative; z-index:1; border-radius:20px; box-shadow:0 28px 64px rgba(44,38,32,.20); }
.about-quote{ position:relative; }
.about-quote::before{
  content:"\201C"; font-family:var(--f-display); font-size:4.2rem; line-height:.5;
  color:var(--blue); opacity:.28; display:block; margin-bottom:10px;
}

/* ---------- Light stat numbers get the gradient too ---------- */
.stats--onlight .stat__num{
  background:linear-gradient(135deg,var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Product + e-catalog cards: bolder ---------- */
.prod-card:hover{ transform:translateY(-9px); box-shadow:0 28px 58px rgba(232,124,25,.22); }
.prod-card__kicker,.ekat-card__kicker,.srail-card__kicker{
  background:linear-gradient(90deg,var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ekat-card{ border-radius:18px; box-shadow:0 3px 16px rgba(44,38,32,.06); border-top:3px solid transparent; }
.ekat-card:hover{ transform:translateY(-8px); box-shadow:0 26px 56px rgba(232,124,25,.20); border-top-color:var(--green); }
.ekat-card__img{ background:linear-gradient(160deg,#fafafa,#eef0f1); }
.ekat-card:hover .ekat-card__img img{ transform:scale(1.07); }

/* ---------- Section-background rhythm (subtle warm/green glows) ---------- */
.section--soft{
  background:
    radial-gradient(1100px 400px at 82% -10%, rgba(232,124,25,.055), transparent 60%),
    radial-gradient(900px 380px at -5% 112%, rgba(0,145,63,.045), transparent 60%),
    var(--bg-soft);
}


/* ============================================================
   v20 — Premium headings + ORANGE-forward palette
   (orange = Vera's primary; green minimised to logo + eco theme)
   ============================================================ */

/* ---- Premium kicker label (consistent on every inner page) ---- */
.kicker{
  color:var(--blue); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.eco-hero /* ---- Beautified section headings (orange display gradient) ---- */
.about-split__text h2,
.vm-card h2,
.content h2:not(.eco-banner){
  font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(118deg,var(--blue-dark) 0%,var(--blue) 48%,var(--blue-mid) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.about-split__text h2{ font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.1; margin-bottom:22px; }
.about-split__text h2::after{
  content:""; display:block; width:66px; height:4px; border-radius:4px; margin-top:18px;
  background:linear-gradient(90deg,var(--blue),var(--blue-mid));
}

/* ---- ORANGE-forward: retune every green-heavy accent ---- */
.sec-title h2{ background:linear-gradient(118deg,var(--blue-dark),var(--blue) 50%,var(--blue-mid)); -webkit-background-clip:text; background-clip:text; }
.sec-title h2::after{ background:linear-gradient(90deg,var(--blue),var(--blue-mid)); }
.industry::before{ background:linear-gradient(90deg,var(--blue),var(--blue-mid)); }
.industry__icon{
  background:radial-gradient(circle at 32% 26%,rgba(232,124,25,.24),rgba(232,124,25,.06));
  box-shadow:inset 0 0 0 1px rgba(232,124,25,.18); color:var(--blue);
}
.industry:hover .industry__icon{
  color:var(--blue-dark);
  box-shadow:inset 0 0 0 1px rgba(232,124,25,.34),0 12px 26px rgba(232,124,25,.20);
}
.page-hero::before{ background:linear-gradient(90deg,var(--blue),var(--blue-mid)); }
.app-card:hover .app-card__ic{ background:linear-gradient(140deg,var(--blue),var(--blue-dark)); }
.hero__dots button.is-active{ background:linear-gradient(90deg,var(--blue),var(--blue-mid)); }
.ab-stat b{ background:linear-gradient(135deg,var(--blue-dark),var(--blue) 55%,var(--blue-mid)); -webkit-background-clip:text; background-clip:text; }
.stats--onlight .stat__num{ background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid)); -webkit-background-clip:text; background-clip:text; }
.prod-card__kicker,.ekat-card__kicker,.srail-card__kicker{ background:linear-gradient(90deg,var(--blue-dark),var(--blue-mid)); -webkit-background-clip:text; background-clip:text; }
.about-split__img::before{ background:linear-gradient(135deg,var(--blue),var(--blue-mid)); opacity:.18; }
.section--soft{
  background:
    radial-gradient(1100px 420px at 82% -10%, rgba(232,124,25,.07), transparent 60%),
    radial-gradient(820px 360px at -5% 112%, rgba(232,124,25,.035), transparent 60%),
    var(--bg-soft);
}


/* ============================================================
   v21 — Homepage "Why Vera" photo-background section
   (same concept as home-eco, warm/orange-forward overlay)
   ============================================================ */
.home-why{ position:relative; background-size:cover; background-position:center; }
.home-why::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(30,16,4,.64), rgba(78,42,12,.42)); }
.home-why > .container{ position:relative; z-index:2; }
.home-why .feature{
  background:rgba(255,255,255,.97); border-color:transparent; border-radius:16px;
  box-shadow:0 14px 38px rgba(0,0,0,.18);
}
.home-why .feature:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(0,0,0,.28); }

/* ===== v22 — Homepage stats band over factory photo ===== */
.home-stats{ position:relative; background-size:cover; background-position:center; }
.home-stats::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(176,84,12,.72), rgba(64,32,9,.55)); }
.home-stats > .container{ position:relative; z-index:2; }

/* ===== v27 — Applications section photo background (brand image, blur-safe) ===== */
.home-apps{ position:relative; background-size:cover; background-position:center; }
.home-apps::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(22,13,5,.50), rgba(52,28,9,.36)); }
.home-apps > .container{ position:relative; z-index:2; }
.home-apps .industry{ box-shadow:0 16px 40px rgba(0,0,0,.22); }

/* ===== v28 — Production showcase as photo background ===== */
.home-prod{ position:relative; background-size:cover; background-position:center; }
.home-prod::before{ content:''; position:absolute; inset:0; background:linear-gradient(108deg, rgba(20,12,5,.68) 0%, rgba(40,24,10,.50) 52%, rgba(40,24,10,.22) 100%); }
.home-prod > .container{ position:relative; z-index:2; }
.home-prod__content{ max-width:560px; color:#fff; }
.home-prod__content .kicker{ color:#fff; }
.home-prod__content h2{ color:#fff; -webkit-text-fill-color:#fff; background:none; }
.home-prod__content p{ color:rgba(255,255,255,.92); }
.home-prod__content .showcase__link, .home-prod__content .showcase__link:hover{ color:#fff; }


/* ===== v29 — site search overlay ===== */
.vsearch{ position:fixed; inset:0; z-index:300; display:none; align-items:flex-start; justify-content:center; padding:12vh 20px 20px; background:rgba(20,13,6,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.vsearch.is-open{ display:flex; }
.vsearch__box{ width:min(640px,100%); background:#fff; border-radius:18px; box-shadow:0 40px 90px rgba(0,0,0,.45); overflow:hidden; animation:vsIn .25s cubic-bezier(.22,1,.36,1) both; }
@keyframes vsIn{ from{ opacity:0; transform:translateY(-12px);} to{opacity:1;transform:none;} }
.vsearch__bar{ display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid var(--line); }
.vsearch__bar svg{ width:22px; height:22px; color:var(--blue); flex:0 0 auto; }
.vsearch__input{ width:100%; border:0; padding:20px 0; font-size:1.15rem; font-family:var(--f-body); color:var(--ink); outline:none; background:transparent; }
.vsearch__results{ max-height:54vh; overflow:auto; }
.vsearch__item{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 22px; color:var(--ink); border-bottom:1px solid var(--line-soft); font-weight:600; transition:background .15s; }
.vsearch__item:last-child{ border-bottom:0; }
.vsearch__item:hover{ background:var(--blue-tint); color:var(--blue-dark); }
.vsearch__go{ color:var(--blue); opacity:.6; }
.vsearch__empty{ padding:22px; color:var(--gray); text-align:center; }
.top-bar__finder{ cursor:pointer; }

/* ===== v31 — top-bar search-field look ===== */
.top-bar__finder{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.32); border-radius:999px; padding:5px 16px; color:rgba(255,255,255,.92); font-weight:500; font-size:.85rem; gap:8px; transition:background .25s,border-color .25s; }
.top-bar__finder:hover{ background:rgba(255,255,255,.27); border-color:rgba(255,255,255,.55); color:#fff; }
@media (max-width:600px){ .top-bar__finder{ padding:5px 12px; } }

/* ===== v32 — sustainability: unify text blocks (cream + green-left) ===== */
.eco-panel{ background:var(--bg-soft); }
.benefit-card{ background:var(--bg-soft); border-left:3px solid var(--green); }
.isg-card{ background:var(--bg-soft); border-left:3px solid var(--green); }


/* ===== v33 — manifesto + angled transitions + grain ===== */
.manifesto{ position:relative; overflow:hidden; color:#fff; padding:clamp(84px,12vw,158px) 0; background:radial-gradient(130% 150% at 12% -10%, #4a2c12 0%, #20140a 52%, #100a05 100%); clip-path:polygon(0 1.8vw,100% 0,100% 100%,0 100%); margin-top:-1px; }
.manifesto__grain{ position:absolute; inset:0; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.manifesto .container{ position:relative; z-index:2; }
.manifesto__kicker{ display:inline-block; color:var(--blue-mid); font-family:var(--f-display); font-weight:700; letter-spacing:.3em; font-size:.78rem; margin-bottom:22px; }
.manifesto__title{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,5.6vw,4.6rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 26px; color:#fff; }
.manifesto__title em{ font-style:normal; background:linear-gradient(120deg,var(--blue),var(--blue-mid)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.manifesto__text{ max-width:620px; color:rgba(255,255,255,.82); font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.7; margin:0; }
.home-apps,.home-stats,.home-why,.home-prod,.home-eco{ clip-path:polygon(0 1.6vw,100% 0,100% 100%,0 100%); margin-top:-1px; }

/* ===== v34 — uretim intro stats + gallery polish ===== */
.uretim-stats{ display:flex; gap:40px; margin-top:28px; }
.uretim-stats b{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1; background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.uretim-stats span{ display:block; margin-top:6px; color:var(--gray); font-size:.92rem; font-weight:500; }
.photo-grid{ gap:18px; margin-top:48px; }
.photo-grid img{ aspect-ratio:4/3; border-radius:14px; box-shadow:0 6px 22px rgba(44,38,32,.10); }
.photo-grid img:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 16px 40px rgba(44,38,32,.16); }


/* ===== v35 — ince ayar / micro-polish ===== */
/* 1. Başlıklarda satır dengeleme + paragraflarda yetim-kelime önleme */
h1,h2,h3{ text-wrap:balance; }
p,.lead,.hero__cap-text{ text-wrap:pretty; }
body{ text-rendering:optimizeLegibility; }
/* 2. Klavye ile gezinince markalı, erişilebilir odak halkası */
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:3px; }
:focus:not(:focus-visible){ outline:none; }
/* 3. Çapa tıklamaları sabit header'ın altında kalmasın */
html{ scroll-padding-top:96px; }
/* 4. Butona basınca his + mobilde temiz dokunuş */
a,button,.btn,.industry,.app-card,.prod-card,.srail-card{ -webkit-tap-highlight-color:transparent; }
.btn{ transition:transform .15s ease, background var(--t), color var(--t), box-shadow var(--t), border-color var(--t); }
.btn:active{ transform:translateY(1px) scale(.99); }
/* 5. Markalı ince kaydırma çubuğu (masaüstü) */
@media (pointer:fine){
  html{ scrollbar-width:thin; scrollbar-color:#eca35c transparent; }
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-thumb{ background:#eca35c; border-radius:8px; border:3px solid var(--bg-warm); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--blue); }
  ::-webkit-scrollbar-track{ background:transparent; }
}

/* ===== v36 — applications cards: yeşil → turuncu (tutarlılık) ===== */
.app-card__ic{ color:var(--blue); }
.app-card:hover{ border-top-color:var(--blue); }
.app-card__link{ color:var(--blue); }

/* ===== v37 — applications hero = homepage applications bg ===== */
.page-hero--apps::after{ background:none; }

/* ============================================================
   v38 — DEVICE PIXEL SYSTEM
   Explicit breakpoints per device class:
   • Desktop      : ≥1281px  (container 1200px — default)
   • Laptop       : 1025–1280px (container 1080px)
   • Tablet       : 641–1024px  (container fluid, 20px gutter)
   • Mobile       : 481–640px   (fluid, 16px gutter)
   • Small mobile : ≤480px      (fluid, 14px gutter)
   ============================================================ */

/* ---- Laptop / small desktop (≤1280px) ---- */
@media (max-width: 1280px) {
  :root { --maxw: 1080px; --gutter: 22px; }
  .site-logo img { height: 52px; }
}

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  :root { --gutter: 20px; }
  body { font-size: 15.5px; }
  .section-py { padding: 56px 0; }
  /* Hero: keep banner readable — give it real height instead of a thin strip */
  .hero { aspect-ratio: auto; height: 380px; }
  .hero__slide { object-fit: cover; object-position: 70% center; }
  .hero__cap { max-width: 480px; }
  .marquee { padding: 13px 0; }
  .marquee span { font-size: 1.05rem; }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }
  h1 { font-size: clamp(1.8rem, 7vw, 2.3rem); }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.8rem); }
  .section-py { padding: 44px 0; }
  .hero { height: 440px; }
  .hero__cap { max-width: 100%; }
  .hero__cap-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hero__cap-text { font-size: 0.98rem; }
  .marquee { padding: 11px 0; }
  .marquee span { font-size: 0.95rem; }
  .marquee__track { gap: 18px; }
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; gap: 18px; }
  .prod-card__body { padding: 20px 20px 24px; }
  .btn { padding: 12px 22px; font-size: 0.9rem; }
  .product-block__media { max-width: 100%; }
  .compare { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Small mobile (≤480px) ---- */
@media (max-width: 480px) {
  :root { --gutter: 14px; }
  .hero { height: 400px; }
  .site-header__inner { height: 64px; }
  .site-logo img { height: 40px; }
  .industries, .fairs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .top-bar { font-size: 0.76rem; }
}

/* ===== v39 — Lab quality split banner (from design exploration 2e) ===== */
.lab-banner{ display:grid; grid-template-columns:1fr 1.15fr; border-radius:18px; overflow:hidden; box-shadow:0 24px 60px rgba(43,33,24,.22); }
.lab-banner__img{ min-height:400px; }
.lab-banner__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.lab-banner__panel{ background:#2b2118; color:#fff; padding:clamp(30px,4.5vw,64px); display:flex; flex-direction:column; justify-content:center; }
.lab-banner__kicker{ color:var(--blue-mid); text-transform:uppercase; letter-spacing:.24em; font-size:.76rem; font-weight:700; margin-bottom:14px; }
.lab-banner__panel h2{ color:#fff; margin-bottom:14px; font-size:clamp(1.7rem,2.8vw,2.4rem); }
.lab-banner__panel p{ color:rgba(255,255,255,.85); max-width:48ch; }
.lab-banner__stats{ display:flex; margin-top:26px; flex-wrap:wrap; }
.lab-banner__stats > div{ padding:0 28px; border-left:1px solid rgba(255,255,255,.16); }
.lab-banner__stats > div:first-child{ padding-left:0; border-left:none; }
.lab-banner__stats b{ display:block; font-family:var(--f-display); font-size:1.65rem; color:var(--blue-mid); line-height:1.2; }
.lab-banner__stats span{ color:rgba(255,255,255,.62); font-size:.85rem; }
@media (max-width:820px){ .lab-banner{ grid-template-columns:1fr; } .lab-banner__img{ min-height:280px; } .lab-banner__stats{ gap:16px 0; } }

/* ===== v40 — Exploration integrations: MELT/BOND diptych, brand band, proof banner ===== */
.mb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); }
.mb-card{ display:block; overflow:hidden; }
.mb-card img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.mb-card:hover img{ transform:scale(1.02); }
@media (max-width:700px){ .mb-grid{ grid-template-columns:1fr; } }
.brand-band img{ display:block; width:100%; height:auto; }
.proof-banner{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); }
.proof-banner img{ display:block; width:100%; height:auto; }

/* ===== v41 — Product rail: centered, symmetric, dual looping arrows ===== */
.rail-wrap{ max-width: calc(var(--maxw) + 120px); margin: 0 auto; padding: 0 60px; }
.showcase-rail{ padding: 6px 10px 24px; scroll-padding-left: 10px; }
.rail-arrow--prev{ left: 4px; }
.rail-arrow--next{ right: 4px; }

/* ===== v42 — symmetric stats band, centered eco features, centered green pill headings ===== */
section.section--blue:has(.stats){ padding: 84px 0; }
section.section--blue .stat{ margin: 0; }
.home-eco .features{ grid-template-columns: repeat(3, 1fr); max-width: 1020px; margin: 0 auto; }
@media (max-width: 1024px){ .home-eco .features{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .home-eco .features{ grid-template-columns: 1fr; } }
.content .eco-banner, .eco-split__text .eco-banner{ display: table; margin-left: auto; margin-right: auto; text-align: center; }
.eco-split__text .eco-banner{ margin-left: 0; }   /* split layouts stay left-aligned with their text */
.content .isg-lead{ text-align: center; }

/* ===== v43 — quality cards: single row of four ===== */
.values-grid{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px){ .values-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .values-grid{ grid-template-columns: 1fr; } }

/* ===== v44 — fairs grouped by brand ===== */
.fair-cat{ margin-bottom: 52px; }
.fair-cat__title{ display:flex; align-items:center; gap:14px; font-size:1.15rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin-bottom:18px; }
.fair-cat__title::after{ content:""; flex:1; height:1px; background:var(--line); }
.fair-cat .news-grid{ grid-template-columns: repeat(4, 1fr); }
@media (max-width:1024px){ .fair-cat .news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .fair-cat .news-grid{ grid-template-columns:1fr; } }

/* ===== v45 — CTA with forged brand backdrop; stats symmetry; centered pills ===== */
.cta{
  background-image:
    linear-gradient(120deg, rgba(31,22,10,.88) 0%, rgba(58,40,18,.78) 100%),
    url(../img/brand-forged.jpg);
  background-size: cover; background-position: center;
}
section.section--blue:has(.stats){ padding: 72px 0; }
.stat__num{ line-height: 1.05; }
.eco-split__text .eco-banner{ margin-left: auto; }   /* center pills everywhere */

/* ===== v46 — corrections: CTA image midline, band gaps, left pills, 6-item quicknav ===== */
.cta{ background-position: center 35%; }
section.section--blue:has(.stats){ margin: 26px 0; }
.home-apps{ margin: 26px 0; }
.content .eco-banner, .eco-split__text .eco-banner{ display: table; margin: 0 0 18px; text-align: left; }
.content .isg-lead{ text-align: left; }
.quicknav__inner{ grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1024px){ .quicknav__inner{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px){ .quicknav__inner{ grid-template-columns: 1fr 1fr; } }


/* ===== v64: clickable hero slides, per-slide caption, fair lightbox ===== */
a.hero__slide { display: block; cursor: pointer; }
.hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__cap { pointer-events: none; }
.hero__cap .btn { pointer-events: auto; }
.fair-detail__img, .fair-gallery a { cursor: zoom-in; }
.vlb {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(24,16,6,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.vlb.is-open { opacity: 1; visibility: visible; }
.vlb img { max-width: 92vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
.vlb__close {
  position: absolute; top: 18px; right: 22px; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.12);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  transition: background 0.2s ease;
}
.vlb__close:hover { background: rgba(255,255,255,0.28); }


/* ===== v65: packaging showcase ===== */
.pkg-showcase { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: stretch; }
.pkg-viewer { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); display: flex; align-items: center; justify-content: center; padding: 34px; min-height: 470px; }
.pkg-viewer img { max-height: 430px; max-width: 100%; width: auto; transition: opacity 0.18s ease; }
.pkg-viewer__badge { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 13px; border-radius: 30px; color: #fff; }
.pkg-viewer__badge--solvent { background: var(--ink); }
.pkg-viewer__badge--hotmelt { background: var(--blue); }
.pkg-panel__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin: 0 0 10px; }
.pkg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.pkg-tabs button { border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: 12px 10px; cursor: pointer; text-align: center; transition: all var(--t); font-family: var(--f-body); }
.pkg-tabs button b { display: block; font-size: 0.98rem; color: var(--ink); }
.pkg-tabs button span { font-size: 0.78rem; color: var(--gray); white-space: nowrap; }
.pkg-tabs button:hover { border-color: var(--blue); }
.pkg-tabs button.is-active { border-color: var(--blue); background: var(--blue-tint-2); box-shadow: 0 0 0 1px var(--blue) inset; }
.pkg-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.pkg-chips button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 30px; padding: 9px 16px; cursor: pointer; font-weight: 600; color: var(--ink); transition: all var(--t); font-family: var(--f-body); }
.pkg-chips button i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); display: inline-block; }
.pkg-chips button:hover { border-color: var(--c); }
.pkg-chips button.is-active { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; }
.pkg-spec { margin-bottom: 22px; }
.pkg-hotmelt { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 38px; align-items: center; }
.pkg-hotmelt__img { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); max-height: 520px; }
.pkg-hotmelt__img img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.pkg-hotmelt__body h3 { font-family: var(--f-display); font-size: 1.55rem; margin: 0 0 12px; }
.pkg-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0 0; }
.pkg-stats > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.pkg-stats b { display: block; font-family: var(--f-display); font-size: 1.12rem; color: var(--blue-dark); }
.pkg-stats span { font-size: 0.82rem; color: var(--gray); }
.pkg-table th { width: auto; background: var(--bg-soft); }
.tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 11px; border-radius: 30px; color: #fff; white-space: nowrap; }
.tag--solvent { background: var(--ink); }
.tag--hotmelt { background: var(--blue); }
@media (max-width: 900px) {
  .pkg-showcase, .pkg-hotmelt { grid-template-columns: 1fr; }
  .pkg-viewer { min-height: 340px; }
  .pkg-viewer img { max-height: 320px; }
}


/* ===== v66: clean campaign slides + per-product packaging cards ===== */
.hero::after { transition: opacity 0.8s ease; }
.hero--clean::after { opacity: 0; }
.hero__caption { transition: opacity 0.45s ease; }
.ppack { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.ppack--single { grid-template-columns: minmax(0, 440px); justify-content: center; }
.ppack__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 16px 22px; text-align: center; display: block; transition: all var(--t); }
.ppack__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue); }
.ppack__imgwrap { display: flex; align-items: center; justify-content: center; height: 215px; margin-bottom: 14px; }
.ppack__imgwrap img { max-height: 205px; max-width: 100%; width: auto; }
.ppack__card b { display: block; font-family: var(--f-display); font-size: 1.06rem; color: var(--ink); margin-bottom: 3px; }
.ppack__kg { font-size: 0.85rem; color: var(--gray); }


/* ===== v67: campaign slides show CTA buttons only, bottom-left ===== */
.hero--clean .hero__cap-eyebrow, .hero--clean .hero__cap-title, .hero--clean .hero__cap-text { display: none; }
.hero--clean .hero__caption { align-items: flex-end; }
.hero--clean .hero__cap { padding-bottom: 46px; }
.hero--clean .btn--outline-light { background: #fff; color: var(--ink); border-color: #fff; }


/* ===== v68: CTA backdrop with the full forged logo in frame ===== */
.cta {
  background-image:
    linear-gradient(120deg, rgba(31,22,10,0.84) 0%, rgba(58,40,18,0.74) 100%),
    url(../img/cta-bg.jpg);
  background-size: cover;
  background-position: center;
}
@media (max-width: 760px) {
  .cta { background-image: linear-gradient(120deg, #2f2415 0%, #6b4d24 100%); }
}


/* ===== v69 — how-to video, homepage video teaser, SH video card, brochure-based application guide ===== */
.vid{ display:grid; grid-template-columns:1.55fr 1fr; gap:28px; align-items:start; }
.vid__player{ border-radius:18px; overflow:hidden; background:#000; box-shadow:var(--shadow-lg); aspect-ratio:16/9; }
.vid__player video{ width:100%; height:100%; display:block; object-fit:cover; background:#000; }
.vid__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.vid__steps button{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 14px; cursor:pointer; transition:all var(--t); font-family:var(--f-body); color:var(--ink); }
.vid__steps button:hover{ border-color:var(--blue); transform:translateX(3px); }
.vid__steps button.is-active{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; background:var(--blue-tint-2); }
.vid__n{ flex:0 0 34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--blue-tint); color:var(--blue-dark); font-weight:700; font-size:.8rem; transition:all var(--t); }
.vid__steps button.is-active .vid__n{ background:var(--blue); color:#fff; }
.vid__txt{ flex:1; display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.vid__txt b{ font-size:.95rem; }
.vid__txt small{ color:var(--gray); font-size:.8rem; }
.vid__time{ font-size:.78rem; font-weight:600; color:var(--gray); font-variant-numeric:tabular-nums; }
@media (max-width:900px){ .vid{ grid-template-columns:1fr; } }

.vt{ display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; }
.vt__media{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow-lg); background:#000; }
.vt__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.vt__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; background:rgba(232,124,25,.92); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform var(--t); }
.vt__play svg{ width:30px; height:30px; margin-left:4px; }
.vt__play:hover{ transform:translate(-50%,-50%) scale(1.08); color:#fff; }
.vt__body h2{ margin-bottom:12px; }
.vt__body p{ color:var(--gray); margin-bottom:22px; }
@media (max-width:900px){ .vt{ grid-template-columns:1fr; gap:26px; } }

.vid-link{ display:flex; align-items:center; gap:14px; margin-top:18px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); transition:all var(--t); }
.vid-link:hover{ border-color:var(--blue); box-shadow:var(--shadow); color:var(--ink); }
.vid-link__thumb{ position:relative; flex:0 0 120px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; }
.vid-link__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-link__thumb::after{ content:"\25B6"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; background:rgba(0,0,0,.28); }
.vid-link b{ display:block; font-size:.95rem; }
.vid-link small{ color:var(--gray); font-size:.8rem; }

.ag-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.ag-card{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; scroll-margin-top:110px; transition:box-shadow var(--t), transform var(--t); }
.ag-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.ag-card:target{ box-shadow:0 0 0 3px var(--blue), var(--shadow-lg); }
.ag-card__img{ aspect-ratio:16/10; overflow:hidden; }
.ag-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t-slow); }
.ag-card:hover .ag-card__img img{ transform:scale(1.02); }
.ag-card__body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.ag-card__body h3{ font-size:1.4rem; margin:0 0 4px; }
.ag-label{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:14px 0 8px; }
.ag-pairs{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.ag-pairs li{ background:var(--bg-soft); border:1px solid var(--line); border-radius:30px; padding:5px 13px; font-size:.86rem; margin:0; }
.ag-text{ color:var(--gray); margin:8px 0 0; }
.ag-note{ font-size:.8rem; color:var(--gray); margin:12px 0 0; }
.ag-bros{ display:flex; flex-wrap:wrap; gap:12px; }
.ag-bro{ width:66px; text-align:center; }
.ag-bro__cover{ display:block; border-radius:5px; overflow:hidden; box-shadow:0 4px 12px rgba(43,33,24,.18); transition:transform var(--t), box-shadow var(--t); }
.ag-bro__cover:hover{ transform:translateY(-3px) rotate(-1.5deg); box-shadow:0 10px 22px rgba(43,33,24,.26); }
.ag-bro__cover img{ display:block; width:100%; aspect-ratio:1/1.414; object-fit:cover; }
.ag-bro__code{ display:inline-block; margin-top:7px; font-size:.72rem; font-weight:700; color:#fff; background:var(--c); border-radius:30px; padding:3px 8px; }
.ag-bro__code:hover{ color:#fff; filter:brightness(.92); }
.ag-vid{ margin-top:16px; align-self:flex-start; font-weight:600; font-size:.88rem; }
.ag-card--all{ justify-content:center; align-items:center; text-align:center; background:linear-gradient(140deg,var(--blue-tint-2),#fff); padding:36px 30px; }
.ag-card--all p{ color:var(--gray); max-width:34ch; margin:6px auto 20px; }
.ag-stack{ position:relative; width:220px; height:180px; margin:0 auto 18px; }
.ag-stack img{ position:absolute; width:104px; top:8px; left:58px; border-radius:6px; box-shadow:0 8px 20px rgba(43,33,24,.22); }
.ag-stack img:nth-child(1){ transform:rotate(-12deg) translateX(-46px); }
.ag-stack img:nth-child(2){ z-index:2; }
.ag-stack img:nth-child(3){ transform:rotate(12deg) translateX(46px); }
@media (max-width:820px){ .ag-grid{ grid-template-columns:1fr; } }
.ag-bros{ gap:9px; }
.ag-bro{ width:54px; }
.ag-bro__code{ font-size:.68rem; padding:3px 6px; }
.ag-card__img--circle{ display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 120% at 80% 20%, #e3f4f7 0%, #f7fbfc 55%, #fff 100%); }
.ag-card__img--circle img{ width:auto; height:78%; aspect-ratio:1/1; border-radius:50%; border:8px solid #1b8fb8; box-shadow:0 14px 34px rgba(27,143,184,.25); object-fit:cover; }
.ag-card:hover .ag-card__img--circle img{ transform:scale(1.03); }

/* ===== v72 — responsive QA fixes (375 / 768 / desktop) ===== */
html, body { overflow-x: clip; }
.sec-title { overflow-x: clip; }
@media (max-width: 820px) {
  .product-block__grid[style] { grid-template-columns: 1fr !important; gap: 28px !important; }
}
@media (max-width: 640px) {
  .spec-table th, .spec-table td { overflow-wrap: anywhere; }
  .spec-table th { width: 40%; }
  .sec-title .watermark { font-size: clamp(2.6rem, 16vw, 4.4rem); }
  /* campaign banners keep their baked headline in frame on phones */
  .hero__slide img[src*="campaign/banner_"] { object-position: 3% center; }
  .hero__slide img[src*="slider_veramelt_type"] { object-position: 74% center; }
  /* compact 3x2 quick-access strip */
  .quicknav__inner { grid-template-columns: repeat(3, 1fr) !important; }
  .quicknav__item { padding: 16px 6px !important; gap: 6px !important; }
  .quicknav__ic svg { width: 24px !important; height: 24px !important; }
  .quicknav__t { font-size: .78rem !important; line-height: 1.25; }
  .quicknav__s { display: none !important; }
  .vid__steps button { padding: 10px 12px; gap: 10px; }
  .vid__txt small { display: none; }
  .vid-link__thumb { flex-basis: 96px; }
  .ag-card__body { padding: 20px 18px 22px; }
}


/* ===== v74 — hero QA: gentler Ken Burns (no edge text ever cropped), stacked hero ≤1024px ===== */
@keyframes kenburns { from { transform: scale(1.001); } to { transform: scale(1.03); } }
.hero--clean .hero__glow { opacity: 0 !important; animation: none; }

@media (max-width: 1024px) {
  /* banner is always shown WHOLE (1903:650) and the caption sits in a panel underneath */
  .hero {
    --hp: 196px;
    aspect-ratio: auto !important; height: auto !important;
    padding-top: calc(100% * 650 / 1903 + var(--hp));
    background: #1f1812;
  }
  .hero__slide { inset: 0 0 auto 0 !important; height: auto !important; aspect-ratio: 1903 / 650; }
  .hero__slide img { object-fit: cover !important; object-position: center center !important; }
  .hero__slide.is-active { animation: none !important; transform: none !important; }
  .hero::after, .hero__glow { display: none !important; }
  .hero__caption {
    top: auto !important; bottom: 0; height: var(--hp);
    align-items: center !important; padding: 0 0 30px;
    background: linear-gradient(180deg, #2b2118 0%, #1f1812 100%);
    border-top: 3px solid var(--blue);
  }
  .hero__cap, .hero--clean .hero__cap { max-width: 680px !important; padding: 0 !important; transform: none !important; }
  .hero__cap-eyebrow, .hero--clean .hero__cap-eyebrow { display: none !important; }
  .hero__cap-title, .hero--clean .hero__cap-title {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: clamp(1.3rem, 3.6vw, 1.85rem) !important; line-height: 1.18; margin: 0 0 8px; text-shadow: none;
  }
  .hero__cap-text {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .93rem !important; line-height: 1.5; color: rgba(255,255,255,.78); margin: 0 0 14px;
  }
  .hero--clean .hero__cap-text { display: none !important; }
  .hero--clean .hero__cap-title { margin-bottom: 14px; }
  .hero__cap-actions { gap: 10px; flex-wrap: nowrap; }
  .hero__cap-actions .btn { padding: 11px 18px; font-size: .88rem; }
  .hero--clean .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
  .hero__dots { bottom: 12px; }
  .hero__dots button { width: 9px; height: 9px; }
  .hero__dots button.is-active { width: 24px; }
}
@media (max-width: 640px) {
  .hero { --hp: 214px; }
  .hero__cap-actions .btn { padding: 10px 14px; font-size: .84rem; }
}
@media (max-width: 380px) {
  .hero__cap-actions .btn--outline-light { display: none; }  /* contact stays one tap away via the floating buttons */
}
@media (max-width: 360px) { .hero { --hp: 236px; } }
@media (max-width: 1024px) { .hero { --hp: 228px; } .hero__caption { padding: 14px 0 32px !important; } }
@media (max-width: 640px)  { .hero { --hp: 232px; } }
@media (max-width: 360px)  { .hero { --hp: 252px; } }

/* ===== v77 — overlay hero (≥1025px): caption never touches products, buttons never meet the dots ===== */
@media (min-width: 1025px) {
  .hero__cap { max-width: min(520px, 36vw); }
  .hero__caption { padding-bottom: 44px; }
  .hero--clean .hero__caption { padding-bottom: 0; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .hero__cap-eyebrow { display: none !important; }
  .hero__cap-title { font-size: clamp(2rem, 3.6vw, 2.6rem) !important; margin-bottom: 12px; }
  .hero__cap-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem !important; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .hero__cap { max-width: 42vw; }
  .hero__cap-title { font-size: 2.1rem !important; }
}
/* v79 — caption width: original 580px on wide screens; narrow only where a product sits beside the text */
.hero__cap-title { font-size: clamp(2.2rem, 4.2vw, 4rem); }
@media (min-width: 1280px) { .hero__cap { max-width: 580px; } }
@media (min-width: 1025px) { .hero--narrow .hero__cap { max-width: min(460px, 36vw) !important; } }
@media (min-width: 1280px) and (max-width: 1439px) { .hero__cap-title { font-size: 3.8vw; } }
@media (min-width: 1025px) and (max-width: 1279px) { .hero--narrow .hero__cap-text { -webkit-line-clamp: 2; } .hero--narrow .hero__cap-title { font-size: 1.95rem !important; } }
.app-card { scroll-margin-top: 110px; }
.app-card:target { box-shadow: 0 0 0 3px var(--blue), var(--shadow-lg); }

/* ===== v82 — product page heroes: clean photo, product on the right, title on a soft left scrim ===== */
.page-hero--split { background-size: cover; background-repeat: no-repeat; }
.page-hero--split::after { background: linear-gradient(90deg, rgba(26,18,10,.82) 0%, rgba(26,18,10,.55) 40%, rgba(26,18,10,.12) 70%, rgba(26,18,10,0) 100%) !important; }
@media (max-width: 760px) {
  .page-hero--split::after { background: linear-gradient(180deg, rgba(26,18,10,.62) 0%, rgba(26,18,10,.78) 100%) !important; }
}

/* ===== v84 — application cards: contact notes (surfaces, per-card, page foot) ===== */
.ag-note--ask { margin: 10px 0 0; font-size: .8rem; }
.ag-note--ask a, .ag-contact a, .ag-foot a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(232,124,25,.35); text-underline-offset: 2px; }
.ag-note--ask a:hover, .ag-contact a:hover, .ag-foot a:hover { text-decoration-color: currentColor; }
.ag-card__body > :nth-last-child(2) { margin-bottom: 18px; }
.ag-contact { display: flex; gap: 10px; align-items: flex-start; margin-top: auto; padding: 12px 14px; background: var(--blue-tint-2); border: 1px solid #f6dfc6; border-radius: 12px; }
.ag-contact svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--blue); margin-top: 2px; }
.ag-contact p { margin: 0; font-size: .82rem; line-height: 1.55; color: #5d534b; }
.ag-contact strong { color: var(--text, #2b2118); }
.ag-foot { margin-top: 26px; padding: 18px 22px; border-left: 4px solid var(--blue); background: var(--bg-soft); border-radius: 0 14px 14px 0; }
.ag-foot p { margin: 0; color: #5d534b; font-size: .95rem; line-height: 1.6; max-width: 80ch; }
@media (max-width: 760px) { .ag-foot { padding: 14px 16px; } .ag-foot p { font-size: .9rem; } }

/* ===== v85 — Faydalı Bilgiler / Useful Information: solvent vs hotmelt ===== */
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.fb-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 28px 26px; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--t), transform var(--t); }
.fb-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--fb-c); }
.fb-card--solvent { --fb-c: #1b8fb8; --fb-soft: #e8f4f8; }
.fb-card--hotmelt { --fb-c: var(--blue); --fb-soft: var(--blue-tint-2); }
.fb-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.fb-card__head { margin-bottom: 18px; }
.fb-card__kicker { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-c); background: var(--fb-soft); border-radius: 30px; padding: 5px 11px; margin-bottom: 10px; }
.fb-card__head h3 { margin: 0; font-size: 1.5rem; }
.fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.fb-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); font-size: .92rem; line-height: 1.5; color: #5d534b; }
.fb-list li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.fb-list li span > b + b, .fb-list li span b b { display: inline; }
.fb-list li span:last-child b:not(:first-child) { display: inline; color: var(--fb-c); font-weight: 700; }
.fb-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--fb-c, var(--blue)); }
.fb-ic svg { width: 18px; height: 18px; }
.fb-card__link { margin-top: 20px; align-self: flex-start; font-weight: 600; font-size: .92rem; color: var(--fb-c); }
.fb-card__link .arrow { display: inline-block; transition: transform var(--t); }
.fb-card__link:hover .arrow { transform: translateX(4px); }
.fb-bars { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.fb-bar { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.fb-bar__lbl { font-weight: 600; color: var(--ink); font-size: .95rem; text-align: right; }
.fb-bar__track { background: #fff; border: 1px solid var(--line); border-radius: 40px; height: 46px; padding: 5px; }
.fb-bar__fill { height: 100%; width: var(--w); min-width: 120px; border-radius: 40px; display: flex; align-items: center; justify-content: flex-end; padding: 0 14px; color: #fff; font-weight: 700; font-size: .9rem; white-space: nowrap; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.fb-bar__fill--s { background: linear-gradient(90deg, #1b8fb8, #2fb0d3); }
.fb-bar__fill--h { background: linear-gradient(90deg, var(--blue-dark), var(--blue)); }
.fb-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 34px auto 0; }
.fb-kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; text-align: center; }
.fb-kpi__t { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; }
.fb-kpi__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-kpi__v { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; padding: 10px 8px; border-radius: 10px; }
.fb-kpi__v small { font-family: var(--f-body); font-weight: 600; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.fb-kpi__v--s { background: #e8f4f8; color: #136f91; }
.fb-kpi__v--h { background: var(--blue-tint-2); color: var(--blue-dark); }
.fb-compare table { min-width: 560px; }
.fb-compare thead th:nth-child(2) { color: #136f91; background: #e8f4f8; }
.fb-compare thead th:nth-child(3) { color: var(--blue-dark); background: var(--blue-tint); }
.fb-tips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.fb-tip { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.fb-tip .fb-ic { color: var(--blue); background: var(--blue-tint-2); border-color: #f6dfc6; }
.fb-tip b { display: block; color: var(--ink); margin-bottom: 4px; }
.fb-tip p { margin: 0; color: #5d534b; font-size: .92rem; line-height: 1.55; }
.fb-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
@media (max-width: 900px) {
  .fb-grid, .fb-tips { grid-template-columns: 1fr; }
  .fb-kpis { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 760px) {
  .fb-card { padding: 22px 18px 20px; }
  .fb-bar { grid-template-columns: 1fr; gap: 6px; }
  .fb-bar__lbl { text-align: left; }
  .fb-bar__track { height: 42px; }
  .fb-bar__fill { font-size: .82rem; min-width: 104px; padding: 0 10px; }
  .fb-kpi__v { font-size: .95rem; }
}

/* ===== v86 — About: factory photo shown as a full-width panorama (whole facade visible) ===== */
.about-split--single { grid-template-columns: 1fr; }
.about-split--single > div { max-width: 820px; }
.about-wide { margin: 44px 0 0; position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 28px 64px rgba(44,38,32,.18); }
.about-wide img { display: block; width: 100%; height: auto; aspect-ratio: 2543 / 985; object-fit: cover; }
.about-wide figcaption { position: absolute; left: 18px; bottom: 16px; padding: 7px 13px; border-radius: 30px; background: rgba(26,18,10,.62); color: #fff; font-size: .78rem; letter-spacing: .04em; backdrop-filter: blur(4px); }
@media (max-width: 760px) { .about-wide { margin-top: 28px; border-radius: 16px; } .about-wide img { aspect-ratio: 16 / 9; } .about-wide figcaption { left: 12px; bottom: 10px; font-size: .7rem; } }

/* ===== v87 — packaging: single-colour drum note under the viewer ===== */
.pkg-viewer { position: relative; flex-wrap: wrap; }
.pkg-note { flex-basis: 100%; width: 100%; display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 -10px; padding: 10px 14px; background: var(--blue-tint-2); border: 1px solid #f6dfc6; border-radius: 12px; font-size: .84rem; line-height: 1.5; color: #5d534b; }
.pkg-note svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--blue); margin-top: 2px; }
.pkg-note b { color: var(--ink); }

/* ===== v88 — small visual touches: Vizyon/Misyon, Sertifikalar, Sürdürülebilirlik, Hakkımızda ===== */
/* Vizyon & Misyon: photo band + principles */
.vm-band { position: relative; background-size: cover; background-position: center; padding: clamp(64px, 9vw, 120px) 0; color: #fff; isolation: isolate; }
.vm-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(26,18,10,.82) 0%, rgba(26,18,10,.6) 55%, rgba(26,18,10,.3) 100%); z-index: -1; }
.vm-band__inner { max-width: 620px; }
.vm-band h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 0 0 12px; letter-spacing: -0.01em; }
.vm-band p { color: rgba(255,255,255,.86); font-size: 1.08rem; line-height: 1.65; margin: 0 0 24px; }
/* Sertifikalar: ISO tiles + photo */
.cert-iso__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.cert-iso__photo { margin: 0; position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.cert-iso__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 842; object-fit: cover; }
.cert-iso__photo figcaption { position: absolute; left: 14px; bottom: 12px; padding: 6px 12px; border-radius: 30px; background: rgba(26,18,10,.62); color: #fff; font-size: .74rem; letter-spacing: .04em; }
.cert-iso__list { display: grid; gap: 14px; }
.cert-iso__item { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; transition: box-shadow var(--t), transform var(--t); }
.cert-iso__item:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.cert-iso__ic { grid-row: 1 / 4; width: 50px; height: 50px; border-radius: 14px; background: var(--blue-tint-2); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.cert-iso__ic svg { width: 26px; height: 26px; }
.cert-iso__item b { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); }
.cert-iso__item > span { color: #5d534b; font-size: .92rem; }
.cert-iso__item small { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin-top: 4px; }
/* Sürdürülebilirlik: section pills */
.eco-pills { position: sticky; top: 84px; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.eco-pills__nav { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.eco-pills__nav::-webkit-scrollbar { display: none; }
.eco-pills__nav a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 30px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .78rem; font-weight: 600; white-space: nowrap; transition: all var(--t); }
.eco-pills__nav a svg { width: 15px; height: 15px; color: var(--green); }
.eco-pills__nav a:hover { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, #fff); }
.eco-pills ~ section[id] { scroll-margin-top: 140px; }
/* Hakkımızda: timeline */
.ab-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; counter-reset: tl; }
.ab-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--blue-mid), var(--line)); opacity: .55; }
.ab-timeline li { position: relative; padding-top: 48px; }
.ab-timeline li::before { content: ""; position: absolute; left: 0; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 0 0 4px rgba(232,124,25,.18); }
.ab-timeline__year { display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--blue); margin-bottom: 6px; }
.ab-timeline li b { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; }
.ab-timeline li p { margin: 0; color: #5d534b; font-size: .92rem; line-height: 1.6; }
@media (max-width: 900px) {
  .cert-iso__grid { grid-template-columns: 1fr; }
  .ab-timeline { grid-template-columns: 1fr 1fr; }
  .ab-timeline::before { display: none; }
  .ab-timeline li { padding-top: 0; padding-left: 28px; }
  .ab-timeline li::before { top: 4px; }
}
@media (max-width: 600px) { .eco-pills { top: 70px; } }
@media (max-width: 480px) { .eco-pills { top: 64px; } }
@media (max-width: 760px) {
  .ab-timeline { grid-template-columns: 1fr; gap: 18px; }
  .vm-band__inner { max-width: 100%; }
}
.ab-stat b.ab-stat__sm { font-size: clamp(1.5rem, 3vw, 2.2rem); white-space: nowrap; padding-top: .35em; }

/* ===== v90 — factory heroes: the whole facade is always visible ===== */
.page-hero--fabrika { aspect-ratio: 2543 / 985; padding: 0; display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; }
.page-hero--fabrika .container { width: 100%; }
.page-hero--fabrika h1 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
@media (max-width: 760px) {
  .page-hero--fabrika { aspect-ratio: auto; display: block; background-size: 100% auto, 100% auto; background-position: center top; background-color: #1f1a14; padding: calc(100vw / 2.582) 0 26px; }
  .page-hero--fabrika h1 { font-size: 1.7rem; margin-top: 14px; }
}

/* ===== v91 — Sürdürülebilirlik redesign: pillars band, numbered sections, framed photos, photo band, scroll-spy pills ===== */
.eco-pillars { position: relative; padding: clamp(44px, 6vw, 72px) 0 clamp(40px, 5vw, 64px); color: #fff; background: radial-gradient(120% 140% at 85% 0%, #1fae5e 0%, #0a7a3a 40%, #065a2b 100%); overflow: hidden; }
.eco-pillars::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: rgba(255,255,255,.05); pointer-events: none; }
.eco-pillars__head { text-align: center; margin-bottom: 30px; }
.eco-pillars__head h2 { color: #fff; margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.kicker--light { color: rgba(255,255,255,.78) !important; }
.eco-pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.eco-pillar { position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 24px 22px 22px; backdrop-filter: blur(4px); transition: transform var(--t), background var(--t); }
.eco-pillar:hover { transform: translateY(-4px); background: rgba(255,255,255,.13); }
.eco-pillar__ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.eco-pillar__ic svg { width: 24px; height: 24px; color: #fff; }
.eco-pillar b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; margin-bottom: 8px; letter-spacing: -0.01em; }
.eco-pillar p { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.85); }
/* numbered sections */
.eco-num { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: .82rem; letter-spacing: .18em; color: var(--green); margin-bottom: 12px; }
.eco-num::after { content: ""; width: 42px; height: 2px; background: var(--green); opacity: .6; }
.eco-num--light { color: #fff; }
.eco-num--light::after { background: #fff; }
.eco-banner { box-shadow: 0 12px 30px rgba(0,144,64,.18); }
/* framed photos */
.eco-split__img { position: relative; }
.eco-split__img::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--green) 22%, #fff), color-mix(in srgb, var(--green) 6%, #fff)); z-index: 0; }
.eco-split--rev .eco-split__img::before { inset: 18px 18px -18px -18px; }
.eco-split__img img { position: relative; z-index: 1; border-radius: 18px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 24px 54px rgba(31,26,20,.18); }
.eco-split__img::after { content: ""; position: absolute; z-index: 2; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 20c0-8 6-14 16-14 0 10-6 16-14 16'/%3E%3Cpath d='M4 20c4-4 8-7 12-9'/%3E%3C/svg%3E") center/26px no-repeat; box-shadow: 0 10px 24px rgba(0,144,64,.35); }
.eco-split--rev .eco-split__img::after { right: auto; left: 22px; }
.eco-quote { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); box-shadow: 0 8px 24px rgba(31,26,20,.05); }
.section--soft .eco-quote { background: #fff; }
/* photo band (Çevre Bilincimiz) */
.eco-band { position: relative; background-size: cover; background-position: center; padding: clamp(72px, 10vw, 130px) 0; color: #fff; isolation: isolate; scroll-margin-top: 140px; }
.eco-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(4,46,24,.88) 0%, rgba(4,46,24,.66) 50%, rgba(4,46,24,.28) 100%); }
.eco-band__inner { max-width: 700px; }
.eco-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin: 0 0 16px; }
.eco-band p { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.65; color: rgba(255,255,255,.9); }
/* benefits + ISG polish */
.benefit-grid { grid-template-columns: repeat(3, 1fr); }
.benefit-card { background: #fff; border-left: 1px solid var(--line); box-shadow: 0 6px 18px rgba(31,26,20,.04); }
.benefit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.benefit-card__ic { background: var(--green); color: #fff; border-radius: 50%; }
.isg-card { background: #fff; border-left: 1px solid var(--line); position: relative; overflow: hidden; }
.isg-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--green), #1fae5e); }
.isg-card__n { background: linear-gradient(135deg, var(--green), #1fae5e); box-shadow: 0 8px 18px rgba(0,144,64,.3); }
/* pills: active state */
.eco-pills__nav a.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.eco-pills__nav a.is-active svg { color: #fff; }
@media (max-width: 1024px) { .eco-pillars__grid { grid-template-columns: 1fr 1fr; } .benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .eco-pillars__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .eco-pillar { padding: 18px 16px 16px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .eco-split__img::before { inset: 12px -10px -12px 12px; }
  .eco-split--rev .eco-split__img::before { inset: 12px 12px -12px -10px; }
  .eco-split__img::after { width: 44px; height: 44px; right: 14px; bottom: 14px; background-size: 22px; }
  .eco-band { scroll-margin-top: 120px; }
}
@media (max-width: 480px) { .eco-pillars__grid { grid-template-columns: 1fr; } }

/* ===== v92 — packaging summary table: proper column spacing ===== */
.pkg-table { table-layout: auto; }
.pkg-table th, .pkg-table td { padding: 14px 22px 14px 0; vertical-align: middle; white-space: normal; }
.pkg-table th:first-child, .pkg-table td:first-child { padding-left: 14px; white-space: nowrap; }
.pkg-table td:nth-child(2) { padding-right: 28px; }
.pkg-table td:nth-child(3) { white-space: nowrap; padding-right: 32px; }
.pkg-table td:last-child { padding-right: 14px; }
.pkg-table .tag { white-space: nowrap; }
@media (max-width: 600px) { .pkg-table th, .pkg-table td { padding: 12px 12px 12px 0; } .pkg-table th:first-child, .pkg-table td:first-child { padding-left: 8px; } .pkg-table td:nth-child(3) { white-space: normal; } }

/* ===== v93 — solvent application video: home two-video teaser, Faydalı Bilgiler side-by-side, ag-vid stacking ===== */
.vt2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.vt2__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform var(--t), box-shadow var(--t); }
.vt2__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.vt2__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.vt2__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
.vt2__card:hover .vt2__media img { transform: scale(1.03); }
.vt2__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; background: rgba(232,124,25,.92); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.vt2__card--h .vt2__play { background: rgba(0,145,63,.92); }
.vt2__play svg { width: 28px; height: 28px; margin-left: 3px; }
.vt2__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 20px; }
.vt2__kicker { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.vt2__card--h .vt2__kicker { color: var(--green); }
.vt2__body b { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.3; }
.vt2__cta { margin-top: 6px; font-weight: 600; font-size: .9rem; color: var(--blue); }
.vt2__card--h .vt2__cta { color: var(--green); }
.fb-videos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.fb-video { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.fb-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.fb-video figcaption { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 16px; border-top: 4px solid #1b8fb8; }
.fb-video--h figcaption { border-top-color: var(--blue); }
.fb-video figcaption b { color: var(--ink); font-size: 1rem; }
.fb-video figcaption span { color: var(--gray); font-size: .88rem; }
.ag-vid + .ag-vid { margin-top: 8px; }
@media (max-width: 900px) { .vt2, .fb-videos__grid { grid-template-columns: 1fr; } }

/* ---- v94: sec-title kicker on its own line; news/announcement tabs ---- */
.sec-title .kicker { display: block; position: relative; z-index: 2; font-size: .78rem; margin-bottom: 10px; }
.news-tabs { display: flex; justify-content: center; gap: 8px; margin: -6px 0 36px; flex-wrap: wrap; }
.news-tab { display: inline-block; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: .92rem; letter-spacing: .02em; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.news-tab:hover { border-color: var(--blue); color: var(--blue); }
.news-tab.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.news-pane[hidden] { display: none; }
.news-grid--news { grid-template-columns: repeat(3, 1fr); }
.news-card--news .news-card__img img { object-fit: cover; }
.news-empty { text-align: center; color: var(--gray); font-size: .9rem; margin-top: 28px; }
@media (max-width: 1024px) { .news-grid--news { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-grid--news { grid-template-columns: 1fr; } .news-tab { padding: 9px 16px; font-size: .86rem; } }

/* ---- v95: interactive news & announcements (featured card + timeline + filters) ---- */
.news-tab__n { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.22); font-style: normal; font-size: .74rem; text-align: center; }
.news-tab:not(.is-active) .news-tab__n { background: var(--blue); color: #fff; }
.nw__filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: -8px 0 34px; }
.nw-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.nw-chip i { font-style: normal; color: var(--gray); margin-left: 4px; font-weight: 500; }
.nw-chip:hover { border-color: var(--blue); color: var(--blue); }
.nw-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.nw-chip.is-active i { color: rgba(255,255,255,.7); }
.nw-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.nw-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(40,25,10,.12); }
.nw-card__img { display: block; background: linear-gradient(160deg,#fbf7f2,#f1ebe3); overflow: hidden; }
.nw-card__img img { width: 100%; height: 100%; display: block; transition: transform .6s ease; }
.nw-card__img--cover img { object-fit: cover; }
.nw-card__img--contain img { object-fit: contain; padding: 18px; }
.nw-card:hover .nw-card__img img { transform: scale(1.04); }
.nw-card__body { padding: 22px 24px 24px; }
.nw-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .82rem; color: var(--gray); }
.nw-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nw-badge--urun { background: #ede8ff; color: #4b2fc0; }
.nw-badge--duyuru { background: #fff1e4; color: var(--blue-dark); }
.nw-badge--fuar { background: #e6f6ec; color: #1f8a4c; }
.nw-card h3 { margin: 0 0 8px; font-size: 1.18rem; line-height: 1.3; }
.nw-card h3 a { color: var(--ink); text-decoration: none; }
.nw-card h3 a:hover { color: var(--blue); }
.nw-card p { margin: 0; color: var(--gray); font-size: .95rem; line-height: 1.6; }
.nw-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--blue); font-weight: 600; font-size: .9rem; text-decoration: none; }
.nw-card__cta .arrow { transition: transform .25s; }
.nw-card__cta:hover .arrow { transform: translateX(4px); }
/* featured */
.nw-card--feature { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); border: none; box-shadow: 0 14px 40px rgba(40,25,10,.08); }
.nw-card--feature .nw-card__img { aspect-ratio: 5 / 4; }
.nw-card--feature .nw-card__body { display: flex; flex-direction: column; justify-content: center; padding: 36px 40px; }
.nw-card--feature h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.nw-card--feature p { font-size: 1.02rem; }
.nw-feature__tag { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-bottom: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.nw-feature__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(226,118,24,.18); animation: nwPulse 1.8s infinite; }
@keyframes nwPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(226,118,24,.18); } 50% { box-shadow: 0 0 0 8px rgba(226,118,24,.06); } }
/* timeline */
.nw__timeline { list-style: none; margin: 44px 0 0; padding: 0 0 0 34px; position: relative; }
.nw__timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--blue), var(--line)); }
.nw__timeline:empty { display: none; }
.nw__year { position: relative; margin: 0 0 18px; }
.nw__year span { display: inline-block; font-weight: 800; font-size: .9rem; letter-spacing: .1em; color: var(--blue); }
.nw__year::before { content: ""; position: absolute; left: -32px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #fff; }
.nw__item { position: relative; margin: 0 0 22px; animation: nwIn .5s both; animation-delay: calc(var(--i, 0) * 70ms); }
.nw__item::before { content: ""; position: absolute; left: -29px; top: 28px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.nw__item .nw-card { display: grid; grid-template-columns: 220px minmax(0,1fr); }
.nw__item .nw-card__img { aspect-ratio: 4 / 3; }
@keyframes nwIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .nw-card--feature, .nw__item .nw-card { grid-template-columns: 1fr; }
  .nw-card--feature .nw-card__img { aspect-ratio: 16 / 11; }
  .nw-card--feature .nw-card__body { padding: 24px; }
  .nw__item .nw-card__img { aspect-ratio: 16 / 9; }
}

/* ---- v96: 4 package tabs (4 kg tin added) ---- */
#pkgTabs.pkg-tabs { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) { #pkgTabs.pkg-tabs { grid-template-columns: repeat(2, 1fr); } }

/* ---- v97: home news & announcements block ---- */
.news-card__kind { display: inline-block; margin: 0 8px 10px 0; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.news-card__kind--urun { background: #ede8ff; color: #4b2fc0; }
.news-card__kind--duyuru { background: #fff1e4; color: var(--blue-dark); }
.news-card__kind--fuar { background: #e6f6ec; color: #1f8a4c; }
.home-news .news-card__year { vertical-align: middle; }
.news-card__img--contain img { object-fit: contain; padding: 14px; background: linear-gradient(160deg,#fbf7f2,#f1ebe3); }
.news-card--latest { border-color: rgba(75,47,192,.25); box-shadow: 0 10px 30px rgba(75,47,192,.08); }
.news-card--latest .news-card__meta { font-size: .9rem; line-height: 1.5; }
.home-news__btns { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- v98: tighter stacked-hero caption panel on phones (less empty space under short titles) ---- */
@media (max-width: 640px)  { .hero { --hp: 206px; } .hero__caption { padding: 12px 0 30px !important; } .hero--clean .hero__cap-title { margin-bottom: 12px; } }
@media (max-width: 360px)  { .hero { --hp: 226px; } }

/* ---- v99 (30 Ekim 2026): SADECE TELEFON (<=640px). Hero yazisi ve butonu banner ustune biner, ayri koyu panel yok.
   Masaustu ve tablet degismedi. Her slayta, banner icindeki yazilar kesilmeyecek sekilde ayri kadraj verildi. ---- */
@media (max-width: 640px) {
  .hero { --hp: 0px; padding-top: 0 !important; height: 61.3vw !important; min-height: 0 !important; background: #1f1812; }
  .hero__slide { inset: 0 !important; height: 100% !important; aspect-ratio: auto !important; }
  .hero__slide img { object-fit: cover !important; object-position: 0% center !important; }
  .hero__slide img[src*="slider_aile"],
  .hero__slide img[src*="SLIDER_VR-54"],
  .hero__slide img[src*="slider_3"],
  .hero__slide img[src*="slider_uretim"] { object-position: 100% center !important; }
  .hero__slide img[src*="slider_1_clean"] { object-position: 85% center !important; }
  .hero__slide img[src*="slider_cevre"] { object-position: 30% center !important; }
  .hero::after { display: block !important; opacity: 1 !important; content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: none !important;
    background: linear-gradient(180deg, rgba(20,14,8,0) 45%, rgba(20,14,8,.5) 72%, rgba(20,14,8,.85) 100%) !important; }
  .hero--clean::after { background: linear-gradient(180deg, rgba(20,14,8,0) 70%, rgba(20,14,8,.35) 100%) !important; }
  .hero__caption { top: 0 !important; bottom: 0 !important; height: auto !important; background: none !important; border-top: 0 !important;
    padding: 0 0 30px !important; align-items: flex-end !important; z-index: 2; }
  .hero--clean .hero__caption { padding-bottom: 24px !important; }
  .hero__cap-title { display: -webkit-box !important; max-width: 62% !important; font-size: 1.3rem !important; line-height: 1.2; margin: 0 0 10px !important; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
  .hero--clean .hero__cap-title, .hero--narrow .hero__cap-title, .hero__cap-text, .hero--clean .hero__cap-text { display: none !important; }
  .hero--clean .hero__cap { padding-bottom: 0 !important; }
  .hero .hero__cap-actions .btn { padding: 8px 13px; font-size: 0.82rem; }
  .hero .hero__cap-actions .btn--outline-light { display: none; }
  .hero__dots { bottom: 9px; z-index: 3; }
}
@media (max-width: 380px) { .hero .hero__cap-actions .btn { padding: 7px 12px; font-size: 0.8rem; } }

/* ---- v100 (30 Ekim 2026): ust seritte sosyal ikonlar, arama ve TR/EN daha belirgin; footer sosyal ikonlari buyutuldu; WhatsApp butonu ---- */
.top-bar__inner { height: 46px; }
.top-bar__social { gap: 7px; }
.top-bar__social a { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.55); color: #fff !important; transition: background .2s, color .2s, transform .2s; }
.top-bar__social a:hover { background: #fff; color: var(--blue-dark) !important; transform: translateY(-1px); }
.top-bar__social svg { width: 16px; height: 16px; }
.top-bar__finder { background: #fff !important; border: 1px solid #fff !important; color: var(--blue-dark) !important; font-weight: 600 !important; font-size: .86rem; padding: 6px 18px !important; min-width: 170px; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.top-bar__finder:hover { background: #fff8f0 !important; color: var(--ink) !important; }
.top-bar__finder svg { width: 16px; height: 16px; stroke-width: 2.4; }
.top-lang { gap: 2px; padding: 2px; border: 1.5px solid #fff; border-radius: 999px; }
.top-lang a { color: #fff !important; font-weight: 700; padding: 3px 12px; border-radius: 999px; letter-spacing: .08em; }
.top-lang a.is-active { background: #fff; color: var(--blue-dark) !important; }
.top-lang a:not(.is-active):hover { background: rgba(255,255,255,.22); }
.footer-socials { gap: 10px; }
.footer-socials a { width: 44px; height: 44px; background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(232,124,25,.35); }
.footer-socials a:hover { background: #fff; color: var(--blue-dark); }
.footer-socials svg { width: 20px; height: 20px; }
.fab--wa { background: #25D366; }
.fab--wa:hover { background: #1ebe5a; }
@media (max-width: 600px) {
  .top-bar__social { display: flex; gap: 5px; }
  .top-bar__social a { width: 28px; height: 28px; }
  .top-bar__social svg { width: 15px; height: 15px; }
  .top-bar__right { gap: 8px; }
  .top-bar__finder { min-width: 0; padding: 5px 12px !important; }
  .top-lang a { padding: 2px 8px; }
}
@media (max-width: 380px) {
  .top-bar__finder { padding: 5px 10px !important; font-size: .8rem; }
  .top-bar__social a { width: 26px; height: 26px; }
}
.contact-socials a { width: 48px; height: 48px; background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(232,124,25,.3); }
.contact-socials a:hover { background: var(--blue-dark); }
.contact-socials svg { width: 21px; height: 21px; }
.footer-contact a[href^="tel:"], .footer-contact a[href*="wa.me"] { white-space: nowrap; }