/* ==========================================================================
   Selvan Tarım Gıda — style.css
   Prototip (F2) · Bootstrap 5 üzerine özelleştirme
   Palet ve tipografi kaynağı: _temp/04-tasarim-brief.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Değişkenler
   -------------------------------------------------------------------------- */
:root {
  /* Renk — kullanım kuralları için bkz. 04-tasarim-brief.md */
  --c-brand:        #1B3426;   /* ANA RENK — başlık, kicker, ikon, çizgi, koyu bölüm */
  --c-brand-dark:   #12241A;   /* en koyu yüzey — footer, overlay tabanı */
  --c-brand-soft:   #E7EDE8;   /* marka %8 — pasif zemin */
  --c-secondary:    #9D9997;   /* logo grisi — çizgi, kenarlık, pasif (metin DEĞİL) */
  --c-surface:      #FAF8F4;   /* sayfa zemini */
  --c-surface-mint: #EAF2EE;   /* üçüncül zemin — ana rengin açık tonu */
  --c-card:         #FFFFFF;   /* kart yüzeyi */
  --c-text:         #1B3426;   /* gövde ve başlık — ana renkle aynı (12.6:1) */
  --c-text-muted:   #4F6157;   /* AA uyumlu ikincil metin (6.2:1) */
  --c-accent:       #C0392B;   /* CTA — yalnızca buton, aktif durum, vurgu */
  --c-accent-dark:  #9E2B25;   /* CTA hover */
  --c-highlight:    #9C6F3B;   /* hero başlıktaki italik vurgu (bronz) */
  --c-accent-soft:  #D6A96B;   /* koyu zeminde vurgu metni — bronzun açık tonu (6.2:1) */
  --c-line:         #E3E0D7;   /* hairline ayraç */
  --c-line-dark:    #2E4437;   /* koyu zeminde ayraç */

  /* Koyu zemin üzeri metin tonları */
  --c-on-dark:       #E3EAE4;  /* gövde (10.9:1) */
  --c-on-dark-soft:  #C2D0C7;  /* lead (8.4:1) */
  --c-on-dark-muted: #A8B8AD;  /* ikincil (6.5:1) */
  --c-on-dark-dim:   #7C9184;  /* etiket (4.8:1) */
  --c-on-dark-kicker:#9FBFAC;  /* kicker (6.7:1) */

  /* Overlay ve gölge için RGB üçlüsü */
  --rgb-dark:  18, 36, 26;
  --rgb-brand: 27, 52, 38;

  --c-icon:     #7CB342;   /* süreç ikonları — organik yaprak yeşili (koyu zeminde 5.4:1) */

  --rgb-card:  255, 255, 255;

  --c-whatsapp: #25D366;

  /* Tipografi */
  --ff-head: "Playfair Display", "Times New Roman", Georgia, serif;
  --ff-body: "Outfit", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.6rem, 5.6vw, 4.5rem);
  --fs-h2:      clamp(2rem, 3.4vw, 3rem);
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem);
  --fs-h4:      1.1875rem;
  --fs-lead:    clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-kicker:  0.75rem;

  /* Ölçek */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --r-sm: 3px;  --r-md: 6px;  --r-lg: 10px;  --r-pill: 999px;

  --shadow-card:  0 1px 2px rgba(var(--rgb-brand),.05), 0 8px 24px -12px rgba(var(--rgb-brand),.14);
  --shadow-lift:  0 2px 4px rgba(var(--rgb-brand),.06), 0 24px 48px -20px rgba(var(--rgb-brand),.24);

  --header-h: 92px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
}

/* --------------------------------------------------------------------------
   2. Temel
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.68;
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.015em;
  margin: 0 0 var(--sp-4);
  color: var(--c-text);
}
h1 { font-size: var(--fs-display); font-weight: 500; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--ff-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 2000;
  background: var(--c-accent); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   3. Ortak parçalar
   -------------------------------------------------------------------------- */
.section { padding: var(--sp-9) 0; }
.section--tight { padding: var(--sp-8) 0; }
.section--dark { background: var(--c-brand); color: var(--c-on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--mint { background: var(--c-surface-mint); --c-map-halo: var(--c-surface-mint); }
.section--white { background: var(--c-card); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }

.section-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-brand); margin-bottom: var(--sp-4);
}
.section-kicker::before {
  content: ""; width: 28px; height: 1px; background: var(--c-accent); flex: none;
}
.section--dark .section-kicker { color: var(--c-on-dark-kicker); }

.section-lead { font-size: var(--fs-lead); color: var(--c-text-muted); max-width: 42rem; }
.section--dark .section-lead { color: var(--c-on-dark-soft); }

/* Butonlar */
.btn-selvan,
.btn-selvan-ghost,
.btn-selvan-light {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 48px; padding: 0 var(--sp-6);
  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .02em; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-selvan { background: var(--c-accent); color: #fff; }
.btn-selvan:hover { background: var(--c-accent-dark); color: #fff; transform: translateY(-2px); }

.btn-selvan-ghost { background: transparent; color: var(--c-text); border-color: var(--c-secondary); }
.btn-selvan-ghost:hover { border-color: var(--c-text); color: var(--c-text); transform: translateY(-2px); }

.btn-selvan-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-selvan-light:hover { background: #fff; color: var(--c-brand-dark); transform: translateY(-2px); }

.btn-selvan .icon-arrow,
.btn-selvan-light .icon-arrow { transition: transform var(--dur) var(--ease); }
.btn-selvan:hover .icon-arrow,
.btn-selvan-light:hover .icon-arrow { transform: translateX(4px); }

/* Metin bağlantısı */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent);
  padding-block: var(--sp-2);
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--c-accent-dark); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--c-accent-soft); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  height: var(--header-h);
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(var(--rgb-dark),.80) 0%, rgba(var(--rgb-dark),.62) 55%, rgba(var(--rgb-dark),.22) 85%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: background var(--dur) var(--ease), height var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  height: 74px;
  background: rgba(var(--rgb-card),.94);
  backdrop-filter: blur(12px);
  background-image: none;
  border-bottom-color: var(--c-line);
  box-shadow: 0 1px 24px -8px rgba(var(--rgb-brand),.18);
}

.header-inner { display: flex; align-items: center; gap: var(--sp-5); width: 100%; }

.brand-logo { flex: none; }
.brand-logo img {
  height: 44px; width: auto;
  filter: brightness(0) invert(1);
  transition: filter var(--dur) var(--ease), height var(--dur) var(--ease);
}
.is-scrolled .brand-logo img { filter: none; height: 38px; }

.site-nav { margin-left: auto; }
.site-nav .nav-list { display: flex; align-items: center; gap: var(--sp-1); }
.nav-cta-mobile { display: none; }

.nav-item { position: relative; }
.nav-parent { display: flex; align-items: center; }

.nav-link {
  display: block; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 500; color: #fff;
  position: relative; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(var(--rgb-dark),.55);
}
/* Açık hero görsellerinde de okunur kalsın diye şeffaf durumda gölge var;
   kaydırılmış (açık zeminli) başlıkta gölge kalkar. */

/* Bootstrap'in kendi .nav-link:hover kuralı (özgüllük 0,1,1) bizim .nav-link
   kuralımızı (0,1,0) eziyor ve yazıyı koyu mavi yapıyordu. Üç durumun üçünde de
   rengi açıkça sabitliyoruz ki yükleme sırası ne olursa olsun sonuç değişmesin. */
.nav-link:hover, .nav-link:focus { color: #fff; }
.is-scrolled .nav-link:hover, .is-scrolled .nav-link:focus { color: var(--c-text); }
.nav-caret-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 32px; margin-left: -8px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(var(--rgb-dark),.55));
}
.nav-caret {
  display: block; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur) var(--ease);
}
.is-scrolled .nav-caret-btn { color: var(--c-text); filter: none; }
.has-sub.is-open > .nav-parent .nav-caret { transform: rotate(225deg) translate(-1px, -1px); }

.nav-sub {
  position: absolute; top: calc(100% - 4px); left: 0; z-index: 40;
  min-width: 15.5rem; padding: var(--sp-3) 0;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.has-sub:hover > .nav-sub,
.has-sub:focus-within > .nav-sub,
.has-sub.is-open > .nav-sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.nav-sub a {
  display: block; padding: .55rem var(--sp-5);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-text);
}
.nav-sub a:hover, .nav-sub a.is-active { color: var(--c-accent); background: var(--c-surface); }
.has-sub:hover > .nav-parent .nav-caret { transform: rotate(225deg) translate(-1px, -1px); }
.nav-link::after {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 6px;
  height: 1.5px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.is-scrolled .nav-link { color: var(--c-text); text-shadow: none; }

.header-tools { display: flex; align-items: center; gap: var(--sp-4); flex: none; }

.lang-switch { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; }
.lang-switch a { padding: var(--sp-2) var(--sp-2); color: rgba(255,255,255,.6); letter-spacing: .06em; }
.lang-switch a.is-active { color: #fff; }
.lang-switch .lang-sep { color: rgba(255,255,255,.32); }
.is-scrolled .lang-switch a { color: var(--c-secondary); }
.is-scrolled .lang-switch a.is-active { color: var(--c-text); }
.is-scrolled .lang-switch .lang-sep { color: var(--c-line); }

.header-cta { min-height: 42px; padding: 0 var(--sp-5); font-size: var(--fs-xs); }

/* Mobil menü tetikleyici */
.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: #fff; position: relative;
  transition: background var(--dur) var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: inherit;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.is-scrolled .nav-toggle span, .is-scrolled .nav-toggle span::before, .is-scrolled .nav-toggle span::after { background: var(--c-text); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); background: var(--c-text); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); background: var(--c-text); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--sp-7));
  padding-bottom: var(--sp-9);
  overflow: hidden;
  background: var(--c-brand-dark);
}
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img, .hero-slide video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Video hazır olana kadar poster görseli görünür kalır */
.hero-slide video { opacity: 0; transition: opacity .6s var(--ease); }
.hero-slide video.is-ready { opacity: 1; }

/* Yavaş yakınlaşma yalnızca görsel slaytta; video slaytı kendi hareketini taşır */
.hero-slide--pan img { transform: scale(1); transition: transform 9s linear; }
.hero-slide--pan.is-active img { transform: scale(1.06); }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(var(--rgb-dark),.38) 0%, rgba(var(--rgb-dark),.10) 42%, rgba(var(--rgb-dark),.62) 100%),
    linear-gradient(90deg,
      rgba(var(--rgb-dark),.88) 0%,
      rgba(var(--rgb-dark),.78) 26%,
      rgba(var(--rgb-dark),.34) 48%,
      rgba(var(--rgb-dark),0)   66%);
}
.hero-content { position: relative; z-index: 2; color: #fff; }

.hero-title { color: #fff; max-width: 15ch; margin-bottom: var(--sp-5); text-wrap: balance; }
.hero-title em { font-style: italic; color: var(--c-highlight); }

.hero-lead { font-size: var(--fs-lead); color: rgba(255,255,255,.88); max-width: 38rem; margin-bottom: var(--sp-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.hero-progress {
  display: flex; gap: var(--sp-3); margin-top: var(--sp-7);
}
.hero-progress-item {
  width: 56px; height: 32px; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: flex; align-items: center;
}
.hero-progress-item::before {
  content: ""; display: block; width: 100%; height: 2px;
  background: rgba(255,255,255,.28); position: relative; overflow: hidden;
}
.hero-progress-item span {
  position: absolute; left: 0; height: 2px; width: 56px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
}
.hero-progress-item.is-active span { transform: scaleX(1); }

/* Masaüstünde hero yüksekliği en geniş slaytın oranına (2156/757) bağlanır;
   böylece geniş banner'lar object-fit:cover ile yanlardan kırpılmaz.
   Mobilde konteyner dikey olduğu için bu oran uygulanamaz — orada merkezden
   kırpma (cover) sürer. */
@media (min-width: 992px) {
  .hero {
    /* 100vw / 2.848 = 35.11vw — aspect-ratio yerine min-height, çünkü oran sabit
       verilince başlık hero'dan taşıp kırpılıyordu. Böylece geniş ekranda tam
       kadraj çıkar, dar ekranda hero metne göre uzar (küçük bir kırpma kalır). */
    min-height: 35.11vw;
    padding-top: calc(var(--header-h) + var(--sp-5));
    padding-bottom: var(--sp-7);
  }
}

/* --------------------------------------------------------------------------
   6. Güven şeridi
   -------------------------------------------------------------------------- */
.trust-bar { background: var(--c-card); border-bottom: 1px solid var(--c-line); }
.trust-list { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: var(--sp-6) var(--sp-5); border-left: 1px solid var(--c-line); }
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-value {
  font-family: var(--ff-head); font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  font-weight: 600; line-height: 1; color: var(--c-brand-dark); margin-bottom: var(--sp-2);
}
.trust-value sup { font-size: .5em; color: var(--c-accent); top: -.7em; }
.trust-label { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   7. Öne çıkan ürün — Güneşte Kurutulmuş Domatesler
   -------------------------------------------------------------------------- */
.feature-panel {
  background: var(--c-brand); color: var(--c-on-dark);
  padding: var(--sp-8) var(--sp-7);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.feature-panel::after {
  content: "01"; position: absolute; right: .04em; bottom: -.16em;
  font-family: var(--ff-head); font-size: 11rem; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.055); pointer-events: none;
}
.feature-panel h2 { color: #fff; margin-bottom: var(--sp-5); }
.feature-panel .section-kicker { color: var(--c-on-dark-kicker); }
.feature-text { color: var(--c-on-dark-soft); margin-bottom: var(--sp-6); position: relative; z-index: 1; }
.feature-actions { position: relative; z-index: 1; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); height: 100%; }

.product-card {
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--sp-5); display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.product-card-media {
  aspect-ratio: 4 / 3; margin-bottom: var(--sp-4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--r-md); background: var(--c-surface);
}
.product-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.product-card:hover .product-card-media img { transform: scale(1.05); }
.product-card > a { color: inherit; display: flex; flex-direction: column; height: 100%; }
.product-card h4 { margin-bottom: var(--sp-2); }
.product-card h4 span {
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease); padding-bottom: 2px;
}
.product-card:hover h4 span { background-size: 100% 1.5px; }
.product-card p { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   8. Ürün grupları
   -------------------------------------------------------------------------- */
.group-card {
  position: relative; display: block; height: 100%;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.group-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.group-card-media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-surface); }
.group-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.group-card:hover .group-card-media img { transform: scale(1.06); }
.group-card-body { padding: var(--sp-5); }
.group-card-body h3 { font-size: 1.1875rem; font-family: var(--ff-body); font-weight: 600; letter-spacing: 0; margin-bottom: var(--sp-2); }
.group-card-body p { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-4); }
.group-card-count {
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-brand); font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. Hakkımızda
   -------------------------------------------------------------------------- */
.about-visual { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.about-visual img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 42%; }
.about-quote {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-7) var(--sp-6) var(--sp-5);
  background: linear-gradient(180deg, transparent, rgba(var(--rgb-dark),.9));
  color: #fff; font-family: var(--ff-head); font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.4;
}
.about-body { padding-left: var(--sp-6); }

/* Üç sütunlu künye bloğu — görsel + metin satırının altında */
.fact-row { margin-top: var(--sp-8); }
.fact-card {
  height: 100%; margin: 0; padding-top: var(--sp-5);
  border-top: 2px solid var(--c-brand);
}
.fact-term {
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-brand); font-weight: 600; margin-bottom: var(--sp-3);
}
.fact-icon {
  display: block; width: 40px; height: 40px; margin-bottom: var(--sp-4);
  color: var(--c-icon);
}
.fact-icon svg { width: 100%; height: 100%; display: block; }
.fact-desc { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   10. Üretim
   -------------------------------------------------------------------------- */
.process-list { display: grid; gap: var(--sp-5); }
.process-step {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line-dark);
}
.process-step:last-child { border-bottom: 0; padding-bottom: 0; }
.process-icon {
  flex: none; width: 40px; height: 40px; margin-top: -2px;
  color: var(--c-icon);
  transition: transform var(--dur) var(--ease);
}
.process-icon svg { width: 100%; height: 100%; display: block; }
.process-step:hover .process-icon { transform: translateY(-2px); }
.process-step h4 { margin-bottom: var(--sp-1); }
.process-step p { font-size: var(--fs-sm); color: var(--c-on-dark-muted); margin: 0; }

.production-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.production-shot { position: relative; border-radius: var(--r-md); overflow: hidden; }
.production-shot:first-child { grid-column: 1 / -1; }
.production-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.production-shot:first-child img { aspect-ratio: 16 / 9; }
.production-shot figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, transparent, rgba(var(--rgb-dark),.86));
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: #fff;
}

/* --------------------------------------------------------------------------
   11. İhracat haritası
   -------------------------------------------------------------------------- */
.export-map { position: relative; margin-top: var(--sp-7); }
.map-frame { position: relative; width: 100%; aspect-ratio: 360 / 139; }
.map-canvas, .map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-route {
  fill: none; stroke: var(--c-accent); stroke-width: 1.2; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  opacity: .85;
}
.export-map.is-visible .map-route { animation: route-draw 1.5s var(--ease) forwards; }
@keyframes route-draw { to { stroke-dashoffset: 0; } }

.map-node { fill: var(--c-accent); opacity: 0; }
.export-map.is-visible .map-node { animation: node-in .45s var(--ease) forwards; }
@keyframes node-in { to { opacity: 1; } }

.map-origin-ring { fill: none; stroke: var(--c-accent); stroke-width: 1.2; transform-origin: center; }
.export-map.is-visible .map-origin-ring { animation: origin-pulse 2.6s var(--ease) infinite; }
@keyframes origin-pulse {
  0%   { r: 4;  opacity: .9; }
  100% { r: 16; opacity: 0; }
}
.map-label {
  font-family: var(--ff-body); font-size: 9px; font-weight: 600;
  letter-spacing: .06em; fill: var(--c-brand-dark); opacity: 0;
  paint-order: stroke fill; stroke: var(--c-map-halo, var(--c-surface)); stroke-width: 3px;
  stroke-linejoin: round;
}
.export-map.is-visible .map-label { animation: node-in .5s var(--ease) forwards; }

.market-list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-6); }
.market-chip {
  font-size: var(--fs-xs); letter-spacing: .06em; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  color: var(--c-text-muted); background: var(--c-card);
}
.market-chip--origin { border-color: var(--c-accent); color: var(--c-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Sertifikalar
   -------------------------------------------------------------------------- */
.cert-strip { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-surface-mint); }
.cert-inner { display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; padding: var(--sp-6) 0; }
.cert-intro { flex: 1 1 16rem; }
.cert-intro p { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
.cert-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.cert-badge {
  display: flex; justify-content: center; align-items: center;
  min-width: 7.5rem; min-height: 5.75rem; padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: #fff; transition: border-color var(--dur) var(--ease);
}
.cert-badge:hover { border-color: var(--c-brand); }
.cert-logo {
  display: block; width: auto; height: 3.5rem;
  max-width: 100%; object-fit: contain;
}
/* Dar-yuksek ve genis logolari optik olarak dengeler */
.cert-logo--tall { height: 4rem; }
.cert-logo--wide { height: 2.75rem; }

/* --------------------------------------------------------------------------
   12b. Amblem — yaprak işareti (madde imi ve kicker süsü)
   -------------------------------------------------------------------------- */
.leaf-mark {
  display: inline-block; flex: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 556.9 354.3'><path fill='%2377794F' fill-rule='evenodd' d='M240%2C337.24c-80.9%2C47.1-161.3-15.2-207.2-46.2-21.5-14.5%2C207.4-204.3%2C314.4-183.4C246.5%2C59.34%2C-2.1%2C278.54%2C0%2C247.34c3.5-54.1%2C16.6-151.9%2C99.3-200.2%2C130.2-76%2C309.7-53.8%2C457.6%2C21.7-139.4%2C36.6-197.8%2C198.8-316.9%2C268.4h0Z'/></svg>") center / contain no-repeat;
}

/* Madde imi olarak yaprak — .prose listeleri ve .list-leaf */
.prose ul,
.list-leaf { list-style: none; padding-left: 0; }
.prose ul > li,
.list-leaf > li { position: relative; padding-left: 1.75rem; }
.prose ul > li::before,
.list-leaf > li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 1.05rem; height: .67rem;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 556.9 354.3'><path fill='%2377794F' fill-rule='evenodd' d='M240%2C337.24c-80.9%2C47.1-161.3-15.2-207.2-46.2-21.5-14.5%2C207.4-204.3%2C314.4-183.4C246.5%2C59.34%2C-2.1%2C278.54%2C0%2C247.34c3.5-54.1%2C16.6-151.9%2C99.3-200.2%2C130.2-76%2C309.7-53.8%2C457.6%2C21.7-139.4%2C36.6-197.8%2C198.8-316.9%2C268.4h0Z'/></svg>") center / contain no-repeat;
}
.section--dark .list-leaf > li::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 556.9 354.3'><path fill='%23B9BC8C' fill-rule='evenodd' d='M240%2C337.24c-80.9%2C47.1-161.3-15.2-207.2-46.2-21.5-14.5%2C207.4-204.3%2C314.4-183.4C246.5%2C59.34%2C-2.1%2C278.54%2C0%2C247.34c3.5-54.1%2C16.6-151.9%2C99.3-200.2%2C130.2-76%2C309.7-53.8%2C457.6%2C21.7-139.4%2C36.6-197.8%2C198.8-316.9%2C268.4h0Z'/></svg>"); }

/* Kicker süsü — kırmızı çizgi yerine yaprak */
.section-kicker--leaf::before {
  width: 1.35rem; height: .86rem;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 556.9 354.3'><path fill='%2377794F' fill-rule='evenodd' d='M240%2C337.24c-80.9%2C47.1-161.3-15.2-207.2-46.2-21.5-14.5%2C207.4-204.3%2C314.4-183.4C246.5%2C59.34%2C-2.1%2C278.54%2C0%2C247.34c3.5-54.1%2C16.6-151.9%2C99.3-200.2%2C130.2-76%2C309.7-53.8%2C457.6%2C21.7-139.4%2C36.6-197.8%2C198.8-316.9%2C268.4h0Z'/></svg>") center / contain no-repeat;
}
.section--dark .section-kicker--leaf::before,
.page-hero .section-kicker--leaf::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 556.9 354.3'><path fill='%23B9BC8C' fill-rule='evenodd' d='M240%2C337.24c-80.9%2C47.1-161.3-15.2-207.2-46.2-21.5-14.5%2C207.4-204.3%2C314.4-183.4C246.5%2C59.34%2C-2.1%2C278.54%2C0%2C247.34c3.5-54.1%2C16.6-151.9%2C99.3-200.2%2C130.2-76%2C309.7-53.8%2C457.6%2C21.7-139.4%2C36.6-197.8%2C198.8-316.9%2C268.4h0Z'/></svg>"); }

/* Ürün detayında kalite rozetleri — ana sayfadaki şeridin dar sütun sürümü */
.pdp-certs { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.pdp-certs-label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-secondary); margin-bottom: var(--sp-4);
}
.cert-list--compact { gap: var(--sp-3); }
.cert-list--compact .cert-badge {
  min-width: 0; flex: 1 1 5.5rem; min-height: 4.5rem; padding: var(--sp-3) var(--sp-4);
}
.cert-list--compact .cert-logo { height: 2.5rem; }
.cert-list--compact .cert-logo--tall { height: 2.9rem; }
.cert-list--compact .cert-logo--wide { height: 2rem; }

/* --------------------------------------------------------------------------
   13. Haberler
   -------------------------------------------------------------------------- */
.news-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--c-card); overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }

/* Fuar anahtar görselleri logo kilitleridir; kırpılmamaları için tümü aynı
   16:9 tuvale ortalanmış olarak üretildi — bu yüzden burada cover güvenli. */
.news-media {
  margin: 0; border-bottom: 1px solid var(--c-line);
  background: var(--c-brand-soft);
}
.news-media img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
}
.news-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--sp-6); }
.news-meta {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-secondary); margin-bottom: var(--sp-5);
}
.news-meta .news-tag { color: var(--c-brand); font-weight: 600; }
.news-card h3 { font-size: 1.3125rem; margin-bottom: var(--sp-3); }
.news-card p { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-5); }
.news-card .link-arrow { margin-top: auto; }

/* --------------------------------------------------------------------------
   14. CTA bandı (parallax)
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--c-brand-dark); }
.cta-media { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.cta-media img, .cta-media video { width: 100%; height: 100%; object-fit: cover; }
.cta-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.cta-media video.is-ready { opacity: 1; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(var(--rgb-dark),.90) 0%, rgba(var(--rgb-dark),.62) 46%, rgba(var(--rgb-dark),.18) 100%),
    linear-gradient(180deg, rgba(var(--rgb-dark),.18) 0%, transparent 42%, rgba(var(--rgb-dark),.24) 100%);
}
.cta-inner { position: relative; z-index: 2; padding: var(--sp-9) 0; color: #fff; }
.cta-inner .section-kicker { color: var(--c-on-dark-kicker); }
.cta-inner h2 { color: #fff; max-width: 20ch; }
.cta-inner p { color: rgba(255,255,255,.82); max-width: 34rem; margin-bottom: var(--sp-6); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-brand-dark); color: var(--c-on-dark-muted); padding-top: var(--sp-8); }
.footer-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-about { font-size: var(--fs-sm); margin-top: var(--sp-5); max-width: 24rem; }

.footer-title {
  font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-4);
}
.footer-nav li { margin-bottom: var(--sp-3); }
.footer-nav a { font-size: var(--fs-sm); }
.footer-nav a:hover { color: #fff; }

.contact-list li { margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.contact-list .contact-label {
  display: block; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-on-dark-dim); margin-bottom: 2px;
}
.contact-list a:hover { color: #fff; }

.footer-bottom {
  margin-top: var(--sp-8); padding: var(--sp-5) 0;
  border-top: 1px solid var(--c-line-dark);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  justify-content: space-between; font-size: var(--fs-xs);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   16. WhatsApp
   -------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 1040;
  display: flex; align-items: center; gap: var(--sp-3);
  height: 56px; padding: 0 var(--sp-5) 0 var(--sp-4);
  background: var(--c-whatsapp); color: #fff; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600;
  box-shadow: 0 6px 24px -6px rgba(37,211,102,.6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.whatsapp-fab:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 32px -8px rgba(37,211,102,.7); }
.whatsapp-fab svg { flex: none; }
.whatsapp-fab .whatsapp-label { white-space: nowrap; }

/* --------------------------------------------------------------------------
   17. Giriş animasyonu (reveal)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .nav-link { padding-inline: var(--sp-3); font-size: .875rem; }
  .about-body { padding-left: 0; }
}

@media (max-width: 991.98px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--c-surface);
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .34s var(--ease);
    margin-left: 0;
  }
  /* .site-nav mobilde position:fixed — akıştan çıkıyor, dolayısıyla dil seçimi
     ve menü düğmesini sağa itecek olan artık .header-tools. */
  .header-tools { margin-left: auto; }
  .site-nav.is-open { transform: none; }
  .site-nav .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--c-line); }
  .nav-parent { width: 100%; }
  .nav-link {
    color: var(--c-text); font-size: 1.125rem; font-family: var(--ff-head);
    padding: var(--sp-4) 0; flex: 1;
    text-shadow: none;
  }
  .nav-link:hover, .nav-link:focus { color: var(--c-text); }
  .nav-link::after { display: none; }
  .nav-caret-btn { color: var(--c-text); width: 44px; height: 44px; margin-left: 0; filter: none; }
  .nav-sub {
    position: static; min-width: 0; display: none;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: transparent;
    padding: 0 0 var(--sp-4) var(--sp-4);
  }
  .has-sub:hover > .nav-sub,
  .has-sub:focus-within > .nav-sub { display: none; }
  .has-sub.is-open > .nav-sub { display: block; }
  .nav-sub a {
    padding: var(--sp-3) 0; color: var(--c-text-muted);
    font-family: var(--ff-body);
  }
  /* Menü açıkken .is-scrolled'in backdrop-filter'ı kapanmalı. Filtre uygulanan
     bir öğe, içindeki position:fixed alt öğeler için içeren blok (containing
     block) oluşturur; bu yüzden .site-nav paneli viewport yerine 74px'lik
     başlığın kutusuna hapsolup sayfa içeriğinin arkasında kalıyordu. Hata
     yalnızca sayfa kaydırılınca (.is-scrolled eklenince) görünür oluyordu. */
  .site-header.has-open-nav {
    background: var(--c-surface); border-bottom-color: var(--c-line);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .site-header.has-open-nav .brand-logo img { filter: none; }
  .site-header.has-open-nav .lang-switch a { color: var(--c-secondary); }
  .site-header.has-open-nav .lang-switch a.is-active { color: var(--c-text); }
  /* Menü açıkken ikon temiz bir X olmalı: ortadaki çubuk görünmez kalır,
     yalnızca çaprazlanan ::before/::after çizgileri boyanır. (Bu kural
     eskiden span'i de boyayıp [aria-expanded="true"] ile gelen
     'background: transparent' değerini eziyor, X'in ortasında yatay bir
     çizgi bırakıyordu.) */
  .site-header.has-open-nav .nav-toggle span { background: transparent; }
  .site-header.has-open-nav .nav-toggle span::before,
  .site-header.has-open-nav .nav-toggle span::after { background: var(--c-text); }

  .header-cta { display: none; }
  .nav-cta-mobile {
    display: inline-flex; margin-top: var(--sp-6); width: 100%;
  }

  .hero { min-height: 88vh; }
  .hero-progress { margin-top: var(--sp-6); }
  .hero-progress-item { width: 44px; }
  .hero-progress-item span { width: 44px; }

  .trust-list { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-left: 0; border-top: 1px solid var(--c-line); padding-inline: 0; }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .trust-item:nth-child(even) { padding-left: var(--sp-5); }

  .feature-panel { margin-bottom: var(--sp-5); }
  .feature-panel::after { font-size: 9rem; }
  .about-visual { margin-bottom: var(--sp-6); }
  .production-gallery { margin-top: var(--sp-6); }
  .cta-media { inset: 0; }
}

@media (max-width: 767.98px) {
  :root { --sp-9: 4.5rem; }
  .section { padding: var(--sp-8) 0; }
  .product-grid { grid-template-columns: 1fr; }
  .cert-inner { gap: var(--sp-5); }
  /* Dört rozet 3+1 kırılmasın diye mobilde sabit iki sütun.
     .cert-list bir flex öğesi; width olmadan grid içerik genişliğinde kalırdı. */
  .cert-list { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .cert-badge { min-width: 0; min-height: 5rem; padding: var(--sp-3) var(--sp-4); }
  .cert-logo { height: 3rem; }
  .cert-logo--tall { height: 3.5rem; }
  .cert-logo--wide { height: 2.25rem; }
  .fact-row { margin-top: var(--sp-6); }
  .whatsapp-fab { padding: 0; width: 56px; justify-content: center; }
  .whatsapp-fab .whatsapp-label { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .map-label { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   19. Erişilebilirlik — hareket azaltma (§ B5.4)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-slide--pan img { transform: none !important; }
  .hero-progress-item.is-active span { transform: scaleX(1) !important; }
  .map-route { stroke-dashoffset: 0; }
  .map-node, .map-label { opacity: 1; }
  .cta-media { transform: none !important; }
}

/* --------------------------------------------------------------------------
   20. İç sayfalar — T1 kurumsal · T2 liste · T3 detay · T4 form
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: min(46vh, 420px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-7);
  overflow: hidden;
  background: var(--c-brand-dark);
  color: #fff;
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(var(--rgb-dark),.42) 0%, rgba(var(--rgb-dark),.22) 40%, rgba(var(--rgb-dark),.78) 100%),
    linear-gradient(90deg, rgba(var(--rgb-dark),.72) 0%, rgba(var(--rgb-dark),.28) 55%, rgba(var(--rgb-dark),0) 78%);
}
.page-hero-content { position: relative; z-index: 2; max-width: 46rem; }
.page-hero .section-kicker { color: var(--c-on-dark-kicker); }
.page-hero h1 {
  color: #fff; font-size: clamp(2rem, 4.2vw, 3.25rem);
  margin-bottom: 0; text-wrap: balance;
}
.page-hero .page-lead {
  margin-top: var(--sp-4); font-size: var(--fs-lead);
  color: rgba(255,255,255,.86); max-width: 38rem;
}

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
  font-size: var(--fs-xs); letter-spacing: .04em;
  color: rgba(255,255,255,.7); margin-bottom: var(--sp-4);
}
.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: #fff; }
.breadcrumb-sep { opacity: .45; }

.section-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}
.section-nav a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--sp-4);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  color: var(--c-text-muted); background: var(--c-card);
}
.section-nav a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.section-nav a.is-active {
  background: var(--c-brand); border-color: var(--c-brand); color: #fff;
}

.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); margin-bottom: 0; }
.prose h3 { font-family: var(--ff-body); font-size: 1.125rem; margin-top: var(--sp-6); }

.prose ol { list-style: decimal; padding-left: 1.15em; }
.prose li { margin: 0 0 var(--sp-2); }
.prose ol > li { padding-left: .2em; }
.prose a { color: var(--c-accent); text-underline-offset: 2px; text-decoration: underline; }
.prose a:hover { color: var(--c-accent-dark); }

.split-visual {
  position: sticky; top: calc(var(--header-h) + var(--sp-5));
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-surface);
}
.split-visual img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
}
.split-visual--tall img { aspect-ratio: 4 / 5; }
/* Fuar görselleri 16:9 üretildi; 5/4'e kırpılırsa logo kesilir */
.split-visual--news { border: 1px solid var(--c-line); }
.split-visual--news img { aspect-ratio: 16 / 9; }
.split-visual--fig img { object-position: left center; }
@media (max-width: 991.98px) {
  .split-visual { position: static; margin-top: var(--sp-5); }
  .split-visual img, .split-visual--tall img { aspect-ratio: 16 / 10; }
}
.prose blockquote {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--c-accent);
  font-family: var(--ff-head); font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.4;
  color: var(--c-brand);
}

.app-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; }
.app-chip {
  font-size: var(--fs-xs); letter-spacing: .06em; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  color: var(--c-text-muted); background: var(--c-card);
}

.pdp-media {
  background: var(--c-surface); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-line);
}
.pdp-media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pdp-tagline {
  font-family: var(--ff-head); font-style: italic;
  font-size: 1.15rem; color: var(--c-brand); margin-top: var(--sp-5);
}
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 991.98px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

.pack-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.pack-card {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); overflow: hidden;
}
.pack-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--c-surface); }
.pack-card p {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0;
}
@media (max-width: 767.98px) {
  .pack-gallery { grid-template-columns: 1fr; }
  .page-hero { min-height: 38vh; }
}

.contact-card {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--sp-6);
  height: 100%;
}
.contact-card .contact-label { color: var(--c-text-muted); }
.contact-card a { font-weight: 600; }
.contact-card a:hover { color: var(--c-accent); }

.form-selvan { display: grid; gap: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-field label { font-size: var(--fs-sm); font-weight: 600; }
.form-field .req { color: var(--c-accent); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; min-height: 48px; padding: .7rem 1rem;
  font-family: var(--ff-body); font-size: var(--fs-sm);
  color: var(--c-text); background: var(--c-card);
  border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease);
}
.form-field input[type="file"] { padding-top: .65rem; }
.form-field textarea { min-height: 140px; padding-top: .85rem; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--c-brand);
}
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea { border-color: var(--c-accent); }
.form-error {
  display: none; font-size: var(--fs-xs); color: var(--c-accent);
}
.form-field.is-invalid .form-error,
.form-check.is-invalid .form-error { display: block; }
.form-check { flex-wrap: wrap; }
.form-check .form-error { flex: 1 1 100%; }
.form-check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.form-check input { margin-top: .3rem; accent-color: var(--c-brand); width: 18px; height: 18px; flex: none; }
.form-success {
  display: none; padding: var(--sp-7); text-align: center;
  background: var(--c-surface-mint); border-radius: var(--r-lg);
}
.form-success.is-visible { display: block; }
.form-success h3 { margin-bottom: var(--sp-3); }
.form-wrap.is-sent .form-selvan { display: none; }
.form-wrap.is-sent .form-success { display: block; }
@media (max-width: 767.98px) {
  .form-row { grid-template-columns: 1fr; }
}

.article-meta {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-muted); margin-bottom: var(--sp-5);
}

/* --------------------------------------------------------------------------
   21. Çerez onay banner'ı (KVKK)
   Kaynak: _temp/cerez-consent-banner.html — renkler site paletine bağlandı
   -------------------------------------------------------------------------- */
:root {
    /* Çerez banner'ı — renkler site paletine bağlıdır, ayrı değer tutulmaz */
    --vc-navy: var(--c-brand);            /* ana yeşil — başlık, birincil buton */
    --vc-navy-deep: var(--c-brand-dark);  /* koyu zemin */
    --vc-sky: var(--c-icon);              /* aktif anahtar, odak halkası */
    --vc-link: var(--c-accent);           /* metin içi bağlantı */
    --vc-sky-soft: var(--c-surface-mint); /* "Tümünü Reddet" zemini */
    --vc-ink: var(--c-text);
    --vc-muted: var(--c-text-muted);
    --vc-line: var(--c-line);
    --vc-white: var(--c-card);
    --vc-radius: var(--r-lg);
    --vc-shadow: 0 12px 40px rgba(var(--rgb-brand), .22);
    --vc-font: var(--ff-body);
  }

  /* ---------- Banner ---------- */
  #vc-consent { position: fixed; inset: auto 0 0 0; z-index: 99999; font-family: var(--vc-font); }
  .vc-banner {
    max-width: 980px; margin: 0 auto 20px; padding: 22px 24px;
    background: var(--vc-white); border: 1px solid var(--vc-line);
    border-radius: var(--vc-radius); box-shadow: var(--vc-shadow);
    display: none;
  }
  .vc-banner.vc-open { display: block; animation: vc-rise .35s ease both; }
  @keyframes vc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .vc-banner.vc-open, .vc-modal.vc-open { animation: none; } }

  .vc-banner h2 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--vc-navy); }
  .vc-banner p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--vc-muted); }
  .vc-banner a { color: var(--vc-link); text-decoration: underline; text-underline-offset: 2px; }

  .vc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .vc-btn {
    appearance: none; border: 0; cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 9px;
    transition: filter .15s ease;
  }
  .vc-btn:hover { filter: brightness(1.08); }
  .vc-btn:focus-visible { outline: 3px solid var(--vc-sky); outline-offset: 2px; }
  .vc-btn-accept { background: var(--vc-navy); color: var(--vc-white); }
  .vc-btn-reject { background: var(--vc-sky-soft); color: var(--vc-navy); border: 1.5px solid var(--vc-navy); }
  .vc-btn-prefs  { background: transparent; color: var(--vc-navy); text-decoration: underline; padding-left: 8px; padding-right: 8px; }

  /* ---------- Tercih Modalı ---------- */
  .vc-overlay {
    position: fixed; inset: 0; background: rgba(10, 30, 54, 0.55);
    display: none; align-items: center; justify-content: center; padding: 16px; z-index: 100000;
  }
  .vc-overlay.vc-open { display: flex; }
  .vc-modal {
    background: var(--vc-white); border-radius: var(--vc-radius);
    max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto;
    box-shadow: var(--vc-shadow); padding: 26px;
  }
  .vc-modal.vc-open { animation: vc-rise .3s ease both; }
  .vc-modal h3 { margin: 0 0 4px; font-size: 18px; color: var(--vc-navy); }
  .vc-modal > p { margin: 0 0 18px; font-size: 13px; color: var(--vc-muted); line-height: 1.5; }

  .vc-cat { border: 1px solid var(--vc-line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
  .vc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .vc-cat-head strong { font-size: 14px; color: var(--vc-ink); }
  .vc-cat p { margin: 8px 0 0; font-size: 12.5px; color: var(--vc-muted); line-height: 1.5; }
  .vc-cat .vc-always { font-size: 12px; font-weight: 600; color: var(--vc-navy); white-space: nowrap; }

  /* Toggle */
  .vc-switch { position: relative; width: 44px; height: 24px; flex: none; }
  .vc-switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; margin: 0; }
  .vc-slider {
    position: absolute; inset: 0; background: #c3cfda; border-radius: 24px;
    transition: background .15s ease; pointer-events: none;
  }
  .vc-slider::before {
    content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
    background: var(--vc-white); border-radius: 50%; transition: transform .15s ease;
  }
  .vc-switch input:checked + .vc-slider { background: var(--vc-sky); }
  .vc-switch input:checked + .vc-slider::before { transform: translateX(20px); }
  .vc-switch input:focus-visible + .vc-slider { outline: 3px solid var(--vc-sky); outline-offset: 2px; }

  .vc-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

  @media (max-width: 560px) {
    .vc-banner { margin: 0; border-radius: var(--vc-radius) var(--vc-radius) 0 0; }
    .vc-actions .vc-btn { flex: 1 1 100%; text-align: center; }
  }

/* --------------------------------------------------------------------------
   21. Yazdırma
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .whatsapp-fab, .cta-band, #vc-consent { display: none; }
  body { background: #fff; }
}