/* =========================================================
   Güler Tuz — Kurumsal Web Sitesi
   Modern, premium, sade B2B endüstriyel tasarım
   ========================================================= */

:root {
  /* Güler Tuz kurumsal logosundan analiz edilerek türetilmiş marka paleti:
     dalga = mavi/turkuaz aile, güneş = turuncu aile, flamingo = mercan/pembe aile. */
  --navy: #0a3d52;          /* logo yazı rengi ailesinden koyulaştırılmış, başlıklar için */
  --navy-dark: #062a3a;     /* en koyu turkuaz-lacivert, hero/footer zemini */
  --steel: #0c84b4;         /* logonun büyük dalgasındaki asıl turkuaz-mavi (geniş dolgular/gradyanlar) */
  --teal: #0a6f97;          /* metin/link/ikon vurgusu için erişilebilir kontrastlı mavi tonu */
  --teal-light: #eaf4f8;    /* soluk mavi zemin (etiket/çip arka planı) */
  --accent-orange: #f08430; /* logodaki güneşten türetilen sıcak vurgu (CTA, rozet) */
  --accent-orange-dark: #d9690f;
  --accent-blue-bright: #00a8f0; /* logonun ikinci dalga şeridi, dekoratif gradyanlarda */
  --coral: #fc486c;         /* flamingodan türetilen mercan tonu, çok az ve dekoratif kullanılır */
  --gray-50: #f7f9fa;
  --gray-100: #eef1f3;
  /* Faz 5 (renk tutarlılığı turu): TEK, ortak, düz (gradyansız) nötr kırık-beyaz design
     token — TÜM ürün görsel alanları (kart küçük resmi, ana sayfa slayt, öne çıkan ürün,
     detay sayfası hero'su) için tek kaynak. Ürün fotoğraflarının dış arka planı artık
     şeffaflaştırılıp piksel bazında bu TAM renge sabitlendi (bkz. assets/img/products/
     *-unified.webp) — bu nedenle panel de gradyan değil, aynı düz rengi kullanır; aksi
     halde şeffaf görselin kenarında panelin kendi gradyanı görünür ve tutarsızlık sürer.
     Big Bag kesim (cutout) görseli dahil TÜM ürün panelleri bu tek token'ı paylaşır.
  */
  --product-media-bg: #f3eeeb;
  --gray-200: #dfe5e9;
  --gray-400: #9aa8b3;
  --gray-600: #5b7c91;
  --gray-800: #2a3b47;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 2px 14px rgba(10, 61, 82, 0.08);
  --shadow-lg: 0 8px 30px rgba(10, 61, 82, 0.14);
  --maxw: 1280px;
  --font: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.25; margin: 0 0 0.6em; }
p { margin: 0 0 1em; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-dark);
  color: #cfe0ea;
  font-size: 13px;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar a { color: #cfe0ea; }
.topbar-info { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: 6px; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.lang-switch a {
  padding: 3px 8px;
  border-radius: 5px;
  color: #cfe0ea;
}
.lang-switch a.active,
.lang-switch a[aria-current="true"] {
  background: var(--teal);
  color: #fff;
}
.lang-switch span.sep { color: #4c6478; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 20px;
}
.brand { display: flex; align-items: center; max-width: 220px; }
.brand img { height: 62px; width: auto; max-width: 100%; object-fit: contain; display: block; }

.main-nav > ul {
  display: flex;
  gap: 4px;
  list-style: none;
  align-items: center;
}
.main-nav a {
  display: block;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-800);
  border-radius: 6px;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--navy);
  background: var(--gray-100);
}

.has-dropdown { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  margin-top: 6px;
  list-style: none;
}
.dropdown li { list-style: none; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  display: block;
}
/* Ürün satırları: nokta + ürün adı güvenli bir flex düzeninde birlikte hizalanır.
   Nokta, <a> içinde bir ::before öğesidir — böylece hem satırın tamamı tıklanabilir
   kalır, hem de nokta hiçbir zaman menü kutusunun dışına taşamaz (position:absolute
   veya negatif boşluk kullanılmaz, native list-style marker'a da güvenilmez). */
.dropdown a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  border-radius: 6px;
}
.dropdown a:hover { background: var(--teal-light); color: var(--teal); }
.dropdown a:not(.dropdown-all)::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  /* Metnin ilk satırının satır kutusu içinde dikey olarak ortalanır; ürün adı ikinci
     satıra sarsa bile nokta yalnızca ilk satırla hizalı kalır, bloğun tamamıyla değil. */
  margin-top: calc((1.45em - 5px) / 2);
}
.dropdown .dropdown-all {
  border-top: 1px solid var(--gray-200);
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
  color: var(--teal);
}

.header-cta {
  display: inline-block;
  background: var(--accent-orange);
  color: var(--navy-dark) !important;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 100px;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(240,132,48,0.35); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 20px;
  color: var(--navy);
  cursor: pointer;
}

.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;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(680px 520px at 88% -10%, rgba(240, 132, 48, 0.30), transparent 60%),
    radial-gradient(520px 420px at 78% 60%, rgba(252, 72, 108, 0.20), transparent 65%),
    radial-gradient(640px 520px at 8% 110%, rgba(0, 168, 240, 0.24), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 84px 0 70px;
  overflow: hidden;
}
.hero-photo {
  background-color: var(--navy-dark);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.hero .container { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  font-weight: 700;
  color: #ffb27a;
  margin-bottom: 14px;
  display: block;
}
.hero h1 { color: #fff; font-size: 40px; margin-bottom: 18px; }
.hero p.lead { color: #cfe0ea; font-size: 17px; max-width: 560px; }
.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--accent-orange); color: var(--navy-dark); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(240,132,48,0.35); }
.btn:disabled,
.btn[disabled] { opacity: .65; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.stat-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
}
.stat-card strong { display: block; font-size: 26px; color: #fff; }
.stat-card span { font-size: 12.5px; color: #b9cddb; }

/* ---------- Hero ürün slider (Ana Sayfa) ---------- */
.hero-slider { padding: 0; overflow: hidden; }
.hero-slides { position: relative; height: 560px; transition: height .45s ease; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(14px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  z-index: 2;
  transition: opacity .6s ease, transform .6s ease;
}
/* JS, slider yüksekliğini aktif slaytın gerçek içerik yüksekliğine göre ayarlarken bu
   sınıfı anlık olarak ekler; position:static ile scrollHeight, üst kutunun zorladığı
   sabit yükseklikten değil, slaytın kendi doğal içeriğinden ölçülür. */
.hero-slide--measuring { position: static; }
.hero-slide--intro {
  display: flex;
  align-items: center;
  background-color: var(--navy-dark);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.hero-slide--intro .hero-slide-inner { width: 100%; }

/* Ürün slide'ları: metin + fotoğraf yan yana, tıklanabilir; fotoğraf alanı kenardan
   kenara dolu bir prezantasyon paneli (kutu görünümü yok), ürün asla kırpılmaz. */
.hero-slide--product {
  display: flex;
  align-items: stretch;
  color: inherit;
  text-decoration: none;
}
.hero-slide-text {
  flex: 0 1 45%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 28px;
  padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px));
}
.hero-slide-tag {
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffb27a;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.hero-slide-text h2 { color: #fff; font-size: 30px; margin-bottom: 12px; }
.hero-slide-text p {
  color: #cfe0ea;
  font-size: 15px;
  max-width: 440px;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-slide-link {
  font-weight: 700;
  color: #fff;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s ease;
}
.hero-slide--product:hover .hero-slide-link,
.hero-slide--product:focus-visible .hero-slide-link { gap: 10px; }

.hero-slide-media {
  flex: 1 1 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ürün fotoğraflarının kendi stüdyo zemini sıcak/bej tonludur (ort. #f3eeeb) — panel
     buraya kadar soğuk beyaz/gri idi ve bu uyumsuzluk fotoğrafın kare/dikdörtgen kenarını
     görünür bir "leke" gibi ortaya çıkarıyordu (bkz. Faz 5 kök neden analizi). Panel rengi
     artık fotoğrafın gerçek zeminiyle eşleşiyor; hiçbir piksel kesilmedi/değiştirilmedi. */
  background: var(--product-media-bg);
  padding: 30px 44px;
  overflow: hidden;
}
.hero-slide-media-inner { display: contents; }
/* <picture> sarmalayıcısı kutu modelinden çıkarılır (display:contents): aksi halde
   yükseklik yüzde değerleri (max-height: %) belirsiz bir üst kutuya göre çözülemediği
   için — özellikle dikey/kare ağırlıklı ürün fotoğraflarında — görsel taşabiliyordu.
   İçindeki <img> böylece doğrudan kapsayıcının (aspect-ratio ile kesin yüksekliği olan)
   flex öğesi gibi davranır ve max-width/max-height her zaman doğru hesaplanır. */
.product-card-thumb picture,
.hero-slide-media picture,
.product-hero-media picture,
.hero-spotlight picture,
.product-secondary-media picture {
  display: contents !important;
}
.hero-slide-media picture,
.hero-slide-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  transition: transform .4s ease;
}
.hero-slide--product:hover .hero-slide-media img { transform: scale(1.03); }

/* Big Bag: koyu lacivert zemin yerine, 25 kg çuval fotoğraflarındaki gibi temiz beyaz/
   açık gri stüdyo zemini + çok hafif doğal gölge (bkz. guler-tuz-mekanik-tablet-tuz.jpg
   referans fotoğrafı). Big bag'in kendisi, oranı ve logosu asla değiştirilmez — yalnızca
   arkasındaki zemin ve gölge tonu değişir. */
.hero-slide-media--spotlight { background: var(--product-media-bg); }
.hero-slide-media--spotlight picture,
.hero-slide-media--spotlight img {
  max-height: 360px;
  filter: drop-shadow(0 3px 5px rgba(42, 59, 71, 0.10)) drop-shadow(0 18px 26px rgba(42, 59, 71, 0.14));
}
.hero-slide-media--spotlight picture img { max-height: 360px; }

/* ---------- Yatay lojistik fotoğrafları (tanker/tır) — "landscape cover" sunumu ----------
   Bu fotoğraflar (tanker, damperli tır) TAM OLARAK 3:2 orandadır (1600×1066). Kapsayıcı
   kutu bilinçli olarak aynı orana (ya da sinematik bantlarda ondan biraz daha geniş bir
   orana) ayarlanır ve object-fit:cover kullanılır. Oranlar birebir eşleştiğinden pratikte
   HİÇBİR kırpma olmaz — fotoğrafın kendisi doğrudan tasarımın kendisi olur. Blur katmanı,
   arka plan kopyası veya "kutu içinde kutu" efekti YOK. Daha geniş tutulan bantlarda
   (ör. detay sayfası hero'su) yalnızca gökyüzü/zeminden simetrik pay kırpılır; kapsayıcı
   HER ZAMAN fotoğraftan geniş/kısa tutulur (asla dar/uzun), böylece aracın önü/arkası
   yanlardan kesilmez. */
.hero-slide-media--landscape {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  padding: 0;
  aspect-ratio: 3 / 2;
}
.hero-slide-media--landscape picture,
.hero-slide-media--landscape img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Kontrol çubuğu (ok + nokta göstergeleri) slaytların ÜZERİNE binen bir katman değil,
   hero'nun altında sabit, her zaman erişilebilir ayrı bir şerittir — böylece giriş
   slaytı ile ürün slaytları arasındaki yükseklik farkı hiçbir zaman içerikle çakışmaz. */
.hero-slider-controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 0;
  background: var(--navy-dark);
}
.hero-slider-arrow {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.hero-slider-arrow:hover { background: rgba(255, 255, 255, 0.18); }

.hero-slider-dots { display: flex; align-items: center; gap: 9px; }
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero-dot.is-active { background: #fff; transform: scale(1.3); }

@media (max-width: 980px) {
  .hero-slides { height: 620px; }
  .hero-slide--product { flex-direction: column; }
  .hero-slide-media { order: -1; flex: 0 0 auto; padding: 20px; min-height: 240px; }
  .hero-slide-media picture, .hero-slide-media img { max-height: 220px; }
  .hero-slide-media picture img { max-height: 220px; }
  .hero-slide-media--spotlight picture, .hero-slide-media--spotlight img { max-height: 210px; }
  .hero-slide-media--spotlight picture img { max-height: 210px; }
  .hero-slide-text { flex: 1 1 auto; padding: 22px 24px; }
  .hero-slide-text p { -webkit-line-clamp: 2; }
}
@media (max-width: 600px) {
  .hero-slides { height: 580px; }
  .hero-slide-text h2 { font-size: 24px; }
  .hero-slide-media { min-height: 200px; padding: 16px; }
  .hero-slide-media picture, .hero-slide-media img { max-height: 180px; }
  .hero-slide-media picture img { max-height: 180px; }
  .hero-slide-media--spotlight picture, .hero-slide-media--spotlight img { max-height: 170px; }
  .hero-slide-media--spotlight picture img { max-height: 170px; }
  .hero-slider-arrow { width: 34px; height: 34px; font-size: 15px; }
  /* Giriş slaytı (tanker/kurumsal) mobilde çok satır sardığı için, kontrol çubuğuna
     mümkün olduğunca az kaydırmayla ulaşılabilmesi için dikey boşluklar sıkılaştırılır —
     metinlerin kendisi değişmez, sadece satır arası boşluk/aralıklar küçülür. */
  .hero-slide--intro .hero-slide-inner { gap: 20px; }
  .hero-slide--intro .hero-eyebrow { margin-bottom: 8px; }
  .hero-slide--intro h1 { font-size: 24px; margin-bottom: 10px; }
  .hero-slide--intro p.lead { font-size: 14.5px; }
  .hero-slide--intro .hero-actions { margin-top: 14px; gap: 10px; }
  .hero-slide--intro .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-slide--intro .stat-card { padding: 10px 5px; }
  .hero-slide--intro .stat-card strong { font-size: 17px; }
  .hero-slide--intro .stat-card span { font-size: 9.5px; }
}
/* Metin/görsel dikey olarak istiflendiğinde (≤980px) tanker slaytı: yukarıdaki genel
   max-height kısıtlaması bu slayt için geçersiz kılınır — kapsayıcı kendi 3:2 oranını
   korur, fotoğraf hiçbir zaman ezilip küçük bir şeride sıkıştırılmaz. */
@media (max-width: 980px) {
  .hero-slide-media--landscape { min-height: 0; aspect-ratio: 3 / 2; padding: 0; }
  .hero-slide-media--landscape picture,
  .hero-slide-media--landscape img,
  .hero-slide-media--landscape picture img { max-height: none; width: 100%; height: 100%; }
}
@media (max-width: 600px) {
  .hero-slide-media--landscape { min-height: 0; }
  .hero-slide-media--landscape picture,
  .hero-slide-media--landscape img,
  .hero-slide-media--landscape picture img { max-height: none; width: 100%; height: 100%; }
}

/* ---------- Sections ---------- */
section { padding: 72px 0; }
.section-alt { background: var(--gray-50); }
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head.left { margin: 0 0 38px; text-align: left; }
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 10px;
}
.section-head h2 { font-size: 30px; }
.section-head p { color: var(--gray-600); font-size: 16px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gray-300, var(--gray-200)); }
.card .card-icon {
  width: 46px; height: 46px;
  border-radius: 9px;
  background: var(--teal-light);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
  margin-bottom: 14px;
}
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--gray-600); font-size: 14.5px; margin-bottom: 12px; }
.card .card-link { font-weight: 700; color: var(--teal); font-size: 14px; }
.card .card-link:hover { text-decoration: underline; }

.product-card { display: flex; flex-direction: column; overflow: hidden; }
/* Ürün kartı görsel alanı: kart genişliğiyle birebir aynı genişlikte, kenardan kenara dolu
   bir prezantasyon paneli — fotoğrafın kendi (beyaz) zeminiyle bütünleşir, küçük/ayrık bir
   "kutu" görünümü YOK. Görsel hiçbir zaman kırpılmaz (object-fit:contain), ürünün tamamı
   ve doğal en-boy oranı korunur. */
.product-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -26px -22px 16px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* Bkz. .hero-slide-media üzerindeki not: panel rengi fotoğrafın gerçek sıcak/bej stüdyo
     zeminiyle eşleşecek şekilde güncellendi (Faz 5). */
  background: var(--product-media-bg);
  padding: 12px;
}
.product-card-thumb picture,
.product-card-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 94%;
  max-height: 94%;
  object-fit: contain;
  transition: transform .35s ease;
}
/* Big Bag fotoğrafını kullanan ürünler (Sanayi, Klor-Alkali, Deri, Tekstil): 25 kg çuval
   fotoğraflarındaki gibi temiz, beyaz/açık gri premium stüdyo zemini üzerinde, çok hafif
   doğal gölgeyle. Aynı ortak sınıf tüm ürün ve sektör kartlarında kullanılır — bu sayede
   Deri/Tekstil kartları da diğer big bag kartlarıyla birebir aynı zemin, gölge ve doluluk
   oranına sahip olur. Big bag'in kendisi, oranı ve logosu asla değiştirilmez. */
.product-card-thumb--bigbag {
  background: var(--product-media-bg);
  padding: 14px;
}
.product-card-thumb--bigbag picture,
.product-card-thumb--bigbag img {
  max-width: 88%;
  max-height: 95%;
  filter: drop-shadow(0 2px 4px rgba(42, 59, 71, 0.10)) drop-shadow(0 10px 16px rgba(42, 59, 71, 0.14));
}
.product-card-thumb--bigbag picture img {
  max-width: 88%;
  max-height: 95%;
}
.product-card:hover .product-card-thumb img { transform: scale(1.05); }
/* Tanker / kamyon gibi yatay lojistik fotoğrafları: kartın görsel alanı fotoğrafın kendi
   3:2 oranıyla birebir eşleşir, object-fit:cover ile uçtan uca doldurulur — blur katmanı
   veya kutu içinde kutu efekti YOK, kırpma pratikte hiç gerçekleşmez. */
.product-card-thumb--landscape {
  position: relative;
  padding: 0;
  aspect-ratio: 3 / 2;
  background: var(--navy-dark);
}
.product-card-thumb--landscape picture,
.product-card-thumb--landscape img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-card .tag {
  align-self: flex-start;
  background: var(--teal-light);
  color: var(--teal);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 5px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.product-card .card-link { margin-top: auto; padding-top: 10px; }

/* ---------- Ürünler sayfası: kategori ayrımını güçlendiren şerit ---------- */
.products-category-head { position: relative; padding-left: 18px; }
.products-category-head::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: var(--teal);
}
.products-category-head--specific::before { background: var(--accent-orange); }
.products-category-head .eyebrow { font-size: 14px; }

/* ---------- Öne çıkan ürün kartları (Featured Products) ----------
   25–26°Bé Likit Tuz ve Klor-Alkali Tuzu, geniş/yatay ve daha büyük "öne çıkan" kartlar
   olarak sunulur; görsel her ürünün kendi doğal oranıyla (tanker = geniş yatay 3:2 cover,
   big bag = dikey spotlight) gösterilir, hiçbir zaman ortak bir kare kutuya zorlanmaz. */
.featured-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.featured-product-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
.featured-product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.featured-product-media {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Bkz. .hero-slide-media üzerindeki not: panel rengi fotoğrafın gerçek sıcak/bej stüdyo
     zeminiyle eşleşecek şekilde güncellendi (Faz 5). */
  background: var(--product-media-bg);
  padding: 18px;
}
.featured-product-media picture,
.featured-product-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  transition: transform .4s ease;
}
.featured-product-card:hover .featured-product-media img { transform: scale(1.04); }
.featured-product-media--spotlight {
  background: var(--product-media-bg);
}
.featured-product-media--spotlight picture,
.featured-product-media--spotlight img {
  max-width: 80%;
  max-height: 90%;
  filter: drop-shadow(0 3px 5px rgba(42, 59, 71, 0.10)) drop-shadow(0 16px 24px rgba(42, 59, 71, 0.14));
}
/* Tanker gibi yatay lojistik fotoğraflar: kart hücresinin tam yüksekliğine gerilmek
   yerine kendi 3:2 oranını korur (align-self:center) — böylece object-fit:cover hiçbir
   zaman aracı yanlardan kırpmaz; fotoğraf kendi doğal, geniş biçimiyle görünür. */
.featured-product-media--landscape {
  align-self: center;
  aspect-ratio: 3 / 2;
  min-height: 0;
  padding: 0;
  background: var(--navy-dark);
}
.featured-product-media--landscape picture,
.featured-product-media--landscape img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}
.featured-product-body {
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featured-product-eyebrow {
  display: inline-block;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-orange-dark);
  background: rgba(240, 132, 48, 0.12);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.featured-product-body h3 { font-size: 21px; margin-bottom: 8px; }
.featured-product-body p { color: var(--gray-600); font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
.featured-product-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.featured-product-chip {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  background: var(--teal-light);
  padding: 5px 10px;
  border-radius: 100px;
}
.featured-product-link { font-weight: 700; color: var(--teal); font-size: 14.5px; }
.featured-product-card:hover .featured-product-link { text-decoration: underline; }
@media (max-width: 900px) {
  .featured-product-grid { grid-template-columns: 1fr; }
  .featured-product-card { grid-template-columns: 1fr; }
  .featured-product-media { min-height: 200px; }
}

/* ---------- Feature list ---------- */
.feature-list { list-style: none; display: grid; gap: 14px; }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--gray-800);
}
.feature-list li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 13px;
  color: var(--gray-600);
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-200);
}
.breadcrumb a { color: var(--gray-600); }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb .sep { margin: 0 6px; color: var(--gray-400); }
.breadcrumb .current { color: var(--navy); font-weight: 600; }

/* ---------- Page header (inner pages) ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--steel) 100%);
  color: #fff;
  padding: 46px 0;
}
.page-hero h1 { color: #fff; font-size: 32px; margin-bottom: 10px; }
.page-hero p { color: #d6e6ee; max-width: 680px; font-size: 15.5px; margin: 0; }

/* ---------- Product hero / secondary media ---------- */
.product-hero-media {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  overflow: hidden;
  padding: 36px 0;
}
.product-hero-media .container { padding: 0; max-width: 1240px; }
/* Düz ürün fotoğrafları: fotoğrafın kendi (beyaz) zeminiyle bütünleşen, kenardan kenara
   dolu bir prezantasyon şeridi — küçük, ayrık bir "kutu" görünümü YOK. Görsel hiçbir zaman
   kırpılmaz (object-fit:contain), ürünün tamamı ve doğal en-boy oranı korunur. */
.product-hero-media:not(.product-hero-media--spotlight) {
  /* Bkz. .hero-slide-media üzerindeki not: panel rengi fotoğrafın gerçek sıcak/bej stüdyo
     zeminiyle eşleşecek şekilde güncellendi (Faz 5). */
  background: var(--product-media-bg);
}
.product-hero-media:not(.product-hero-media--spotlight) .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-hero-media:not(.product-hero-media--spotlight) .container  picture,
.product-hero-media:not(.product-hero-media--spotlight) .container  img {
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  max-width: min(920px, 88%);
  max-height: 540px;
  object-fit: contain;
}
/* Kare/dikey ağırlıklı ürün fotoğrafları (big bag) için: 25 kg çuval fotoğraflarındaki
   gibi temiz beyaz/açık gri zemin, kutu/çerçeve kullanmadan doğal silüetiyle çok hafif
   doğal gölgeyle "yüzen" ürün sunumu (spotlight). Koyu lacivert zemin KULLANILMAZ. */
.product-hero-media--spotlight {
  padding: 44px 0;
  background: var(--product-media-bg);
}
.hero-spotlight {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-spotlight  picture,
.hero-spotlight  img {
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  max-width: min(400px, 74%);
  max-height: 420px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(42, 59, 71, 0.10)) drop-shadow(0 20px 30px rgba(42, 59, 71, 0.14));
}
@media (max-width: 980px) {
  .hero-spotlight  picture,
  .hero-spotlight  img { max-height: none; max-width: min(360px, 70%); }
}
@media (max-width: 640px) {
  .hero-spotlight  picture,
  .hero-spotlight  img { max-width: 68%; max-height: 300px; }
  .hero-spotlight picture img { max-height: 300px; }
}

/* Tanker gibi yatay lojistik fotoğrafları için, detay sayfası hero bandı fotoğrafın kendi
   3:2 oranından bilinçli olarak biraz daha GENİŞ/KISA tutulur (asla dar/uzun) — bu sayede
   object-fit:cover ile bant uçtan uca doldurulurken yalnızca gökyüzü/zeminden simetrik bir
   pay kırpılır, aracın önü/arkası YANLARDAN ASLA kesilmez. Blur katmanı veya kutu içinde
   kutu efekti YOK — fotoğrafın kendisi doğrudan bandın tasarımıdır. */
.product-hero-media.product-hero-media--landscape {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 34vw, 620px);
  padding: 0;
  background: var(--navy-dark);
}
.product-hero-media--landscape picture,
.product-hero-media--landscape img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 640px) {
  .product-hero-media.product-hero-media--landscape { height: auto; aspect-ratio: 3 / 2; }
}

/* Klor-Alkali sayfasındaki damperli tır fotoğrafı: kart/kutu içine hapsedilmeyen, büyük,
   geniş, bağımsız bir editorial fotoğraf bandı — hemen ardından gelen "Üretim ve Tedarik
   Gücü" başlığıyla birlikte tek bir tasarım bütünü oluşturur. Fotoğrafın kendi 3:2 oranıyla
   birebir eşleşen bir kapsayıcıda object-fit:cover kullanılır; kırpma pratikte hiç
   gerçekleşmez, gereksiz çerçeve/gölge/arka plan kutusu yok. Kısa alt not, bu görselin
   ürünün kendisi değil sevkiyat kapasitesini temsil ettiğini açıkça belirtir. */
.product-secondary-block { margin: 30px 0 10px; }
.product-secondary-media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-dark);
  aspect-ratio: 3 / 2;
}
.product-secondary-media picture,
.product-secondary-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-secondary-caption {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--gray-600);
  max-width: 640px;
  line-height: 1.55;
}
.feature-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 26px;
}
.feature-chip {
  display: inline-flex;
  align-items: center;
  background: var(--teal-light);
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(10, 111, 151, 0.18);
}

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 44px;
  align-items: start;
}
.product-detail > div { min-width: 0; }
.product-detail h1 { font-size: 34px; max-width: 780px; }
.product-detail > div > p:first-of-type { font-size: 16.5px; line-height: 1.65; max-width: 640px; }
.product-detail h2 { margin-top: 36px; }
.product-detail > div > h2:first-of-type { margin-top: 30px; }
.product-detail .feature-list { margin-bottom: 4px; }
/* İlk ekranda ne satıldığı, hangi sektöre hitap ettiği ve nasıl teklif alınacağı 3 saniye
   içinde anlaşılsın diye, iki ana CTA H1/açıklamanın hemen altında, uzun SEO metninden önce
   yer alır. */
.product-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 30px;
}
.spec-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky;
  top: 88px;
}
.spec-box h3 { font-size: 16px; margin-bottom: 14px; }
.spec-box dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 14px; margin-bottom: 18px; }
.spec-box dt { color: var(--gray-600); font-weight: 600; }
.spec-box dd { margin: 0; color: var(--gray-800); }
.spec-box .btn { width: 100%; text-align: center; margin-bottom: 10px; }
.spec-box-back {
  display: block;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-600);
  margin-top: 4px;
}
.spec-box-back:hover { color: var(--teal); }

.related-industries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.related-industries a {
  background: var(--teal-light);
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
}
.related-industries a:hover { background: var(--teal); color: #fff; }

/* ---------- Industry blocks ---------- */
.industry-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--gray-200);
}
.industry-block:last-child { border-bottom: none; }
.industry-visual {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 30px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.industry-visual .glyph {
  color: var(--teal);
  display: flex;
}
.industry-visual .glyph .icon-svg {
  width: 84px;
  height: 84px;
  stroke-width: 1.3;
}
.card-icon .icon-svg { width: 22px; height: 22px; }
.topbar-icon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
.contact-info-card .icon .icon-svg { width: 18px; height: 18px; }
.nav-toggle .icon-svg { display: block; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--navy);
  color: #fff;
  padding: 50px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; font-size: 26px; margin-bottom: 10px; }
.cta-band p { color: #cfe0ea; margin-bottom: 22px; }
.cta-band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact-info-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 26px;
}
.contact-info-card h3 { font-size: 17px; }
.contact-info-card ul { list-style: none; display: grid; gap: 14px; margin-top: 18px; }
.contact-info-card li { display: flex; gap: 12px; font-size: 14.5px; }
.contact-info-card li a { color: var(--teal); font-weight: 600; }
.contact-info-card li a:hover { text-decoration: underline; }
.contact-info-card .icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--teal-light); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; font-size: 15px; font-weight: 800;
}
.placeholder-note {
  font-size: 12.5px;
  color: #b5651d;
  background: #fff4e5;
  border: 1px dashed #e0a458;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 10px;
}

form.contact-form { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Grid öğeleri varsayılan olarak min-width:auto alır; uzun <select> seçenek metinleri
   (örn. "Tekstil ve Boyahane Tuzu (Düşük Sertlikli Tuz)") bazı tarayıcılarda bu içerik
   genişliğini zorlayıp sütunu/formu taşırabilir. min-width:0 bunu güvenilir biçimde önler. */
.form-row > div { min-width: 0; }
.contact-form label { font-size: 13.5px; font-weight: 700; color: var(--gray-800); margin-bottom: 5px; display: block; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14.5px;
  background: #fff;
  color: var(--gray-800);
}
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235c7080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.contact-form select:invalid { color: var(--gray-600); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 12.5px; color: var(--gray-600); }
/* Honeypot: gerçek kullanıcılardan ve ekran okuyuculardan tamamen gizli, botların
   otomatik doldurma eğiliminde olduğu bir alan. display:none kullanılmıyor çünkü bazı
   botlar bunu algılayıp atlıyor; bunun yerine ekran dışına konumlandırılıyor. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
}
.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--navy, #0b3550);
}
.form-consent a { color: inherit; text-decoration: underline; }

.map-embed {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 20px;
  min-height: 260px;
}
.map-embed iframe { width: 100%; height: 260px; border: 0; display: block; }

/* ---------- Timeline (corporate) ---------- */
.timeline { list-style: none; display: grid; gap: 26px; margin-top: 10px; }
.timeline li { display: grid; grid-template-columns: 90px 1fr; gap: 18px; }
.timeline .year { font-weight: 800; color: var(--teal); font-size: 17px; }
.timeline h4 { margin-bottom: 4px; font-size: 16px; }
.timeline p { color: var(--gray-600); font-size: 14.5px; margin: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-dark); color: #b9cddb; padding: 56px 0 20px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid h4 { color: #fff; font-size: 14.5px; margin-bottom: 16px; letter-spacing: 0.3px; }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: #b9cddb; font-size: 14px; }
.footer-grid a:hover { color: #fff; }
.footer-product-group-label { color: #6f8ba0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; margin-top: 6px; }
.footer-product-group-label:first-child { margin-top: 0; }
.footer-logo-plate {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.footer-brand img { height: 58px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.footer-brand p { font-size: 13.5px; color: #a9bccb; max-width: 300px; }
.footer-legal-name { font-size: 12.5px; color: #a9bccb; max-width: 300px; margin-top: 8px; line-height: 1.5; }
.footer-contact { margin-top: 14px; list-style: none; display: grid; gap: 8px; }
.footer-contact a { color: #cfe0ea; font-size: 13.5px; }
.footer-contact a:hover { color: #fff; }
.footer-address { font-size: 13px; color: #a9bccb; max-width: 260px; line-height: 1.5; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  font-size: 13px;
  color: #9bb1c2;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom .flangs { display: flex; gap: 12px; }
.footer-bottom a { color: #9bb1c2; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.small { font-size: 13px; color: var(--gray-600); }

/* ---------- Kısıtlı, premium scroll-reveal animasyonu ----------
   JS ile görünür alana girdiğinde yumuşak bir fade-in + hafif yukarı kayma; hızlı, sade,
   asla göz yormayan bir hareket. prefers-reduced-motion tercih edenlerde tamamen devre dışı. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-init { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); }
  .reveal-in { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .product-detail { grid-template-columns: 1fr; }
  .spec-box { position: static; }
  .product-hero-media:not(.product-hero-media--spotlight) .container  picture,
  .product-hero-media:not(.product-hero-media--spotlight) .container  img,
  .product-hero-media:not(.product-hero-media--spotlight) .container  picture img {
    max-width: 90%;
    max-height: 380px;
  }
  .industry-block { grid-template-columns: 1fr; }
  .industry-block .industry-visual { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .main-nav { position: fixed; inset: 64px 0 0 0; background: #fff; padding: 10px 20px 30px; overflow-y: auto; transform: translateY(-110%); transition: transform .2s ease; z-index: 90; border-top: 1px solid var(--gray-200); }
  .main-nav.open { transform: translateY(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a { padding: 13px 10px; font-size: 16px; }
  .dropdown { display: block; position: static; box-shadow: none; border: none; padding-left: 14px; margin-top: 0; }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
  .nav-toggle { display: inline-block; }
  .header-cta { display: none; }
  .hero h1 { font-size: 28px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .topbar .container { justify-content: center; text-align: center; }
}

@media (max-width: 600px) {
  .product-hero-media { padding: 22px 0; }
  .product-hero-media:not(.product-hero-media--spotlight) .container  picture,
  .product-hero-media:not(.product-hero-media--spotlight) .container  img,
  .product-hero-media:not(.product-hero-media--spotlight) .container  picture img {
    max-width: 94%;
    max-height: 270px;
  }
}

/* =========================================================
   Mobil "Teklif Al / Ara" sabit (sticky) çubuğu — yalnızca dar ekranlarda
   görünür; masaüstünde tamamen gizli kalır ve sayfa akışını etkilemez.
   ========================================================= */
.mobile-sticky-cta { display: none; }

@media (max-width: 720px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    background: var(--navy-dark);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    box-shadow: 0 -6px 20px rgba(6,42,58,0.22);
  }
  .mobile-sticky-cta a {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
  }
  .mobile-sticky-cta .msc-quote { background: var(--accent-orange); color: var(--navy-dark); }
  .mobile-sticky-cta .msc-call { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
  .mobile-sticky-cta .icon-svg { width: 16px; height: 16px; }
  /* Sabit çubuk içeriğin altında kalmasın diye sayfanın en altına boşluk payı bırakılır. */
  body { padding-bottom: 62px; }
}

/* =========================================================
   Ana sayfadaki kısa teklif formu — mevcut .contact-form stillerini miras alır,
   yalnızca ortalanmış/dar bir kart görünümü için ek kapsayıcı stili eklenir.
   ========================================================= */
.home-quote-form-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.home-quote-form-note { text-align: center; margin-top: 14px; font-size: 13.5px; }
.home-quote-form-note a { color: var(--teal); font-weight: 700; }

/* =========================================================
   İhracat sayfası — Liman Uzaklıkları Haritası (SVG/HTML, ekran görüntüsü değil)
   ========================================================= */
.port-map-section { padding: 40px 0; }
.port-map-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: 20px;
  max-width: 820px;
  margin: 20px auto 0;
}
.port-map-visual { width: 100%; max-width: 460px; margin: 0 auto; }
.port-map-svg { display: block; width: 100%; height: auto; }
.port-map-caption {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--gray-600);
  text-align: center;
}
.port-map-legend {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--gray-800);
}
.port-map-legend strong { color: var(--navy); }
@media (max-width: 640px) {
  .port-map-card { padding: 14px; max-width: 100%; }
  .port-map-visual { max-width: 320px; }
  .port-map-legend { flex-direction: column; align-items: flex-start; gap: 6px; }
}