/* ==========================================================================
   Boykim / Euromaster — Ana stil dosyası
   Figma: boykim (RJWIJTqD58GF1owhnz2F3C)
   Tuval 1920px, içerik kolonu 1440px (sağ/sol 240px boşluk)
   ========================================================================== */

:root {
  /* Figma variables */
  --beyaz: #ffffff;
  --koyu-koyu: #11161b;
  --koyu-orta: #2a2e35;
  --koyu-acik: #363b40;
  --koyu-text: #8f979e;
  --yesil-orta: #00afaa;
  --yesil-acik: #91fffc;
  --acik-zemin: #f2f2f2;

  /* Tipografi — Figma'da tüm metinler Inter Medium (500) */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-slider: 50px;   /* SliderLight */
  --fs-slogan: 30px;   /* SloganLight */
  --fs-baslik: 16px;   /* Baslik */
  --fs-aciklama: 14px; /* Aciklama */

  --container: 1440px;
  --radius: 5px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-baslik);
  line-height: normal; /* Figma: leading-[normal] ≈ 1.21 */
  color: var(--koyu-acik);
  background: var(--beyaz);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container {
  width: var(--container);
  max-width: 100%;
  margin-inline: auto;
}
/* Dar metin kapsayıcıları (yasal sayfalar, form sonuç sayfaları).
   ⚠️ Bunu satır içi style="max-width:900px" ile YAPMA: satır içi kural
   .container'ın max-width:100%'ini ezer ve 390px ekranda kapsayıcı 900px
   kalır → sayfa yatay kayar. min() ile hem sınır hem taşma koruması var. */
.container--900 { max-width: min(900px, 100%); }
.container--640 { max-width: min(640px, 100%); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Odaklanma görünürlüğü — klavye ile gezinenler için */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--yesil-acik);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   İkonlar
   images/ altındaki tüm ikonlar tek renk beyaz dolguludur. Figma bunları
   yerleştirildikleri yere göre yeniden renklendiriyor. Aynısını yapabilmek
   için ikonu mask olarak kullanıp rengi currentColor'dan alıyoruz.
   mask-image'ı PHP'deki icon() yardımcısı style niteliğine basar; buradan
   verilemez, çünkü url() adresi bu dosyanın konumuna göre çözülür.
   -------------------------------------------------------------------------- */
.icon {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--fs-baslik);
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { flex: none; }

/* Figma'da 14×16. Metnin satır kutusu 19.3px olduğu için ikon 19px'e kadar
   büyüyebilir, buton yüksekliği değişmez. mask-size:contain en boy oranını korur. */
.btn .icon { width: 17px; height: 19px; }

/* Figma "disioklu" — koyu zemin, beyaz çerçeve. Hover: çerçeve+metin+ikon YesilAcik. */
.btn--outline-light {
  color: var(--beyaz);
  border-color: var(--beyaz);
}
.btn--outline-light:hover {
  color: var(--yesil-acik);
  border-color: var(--yesil-acik);
}

/* Figma "erkekoklu" — beyaz dolgu, gri çerçeve. Hover: çerçeve+metin+ikon YesilOrta, dolgu beyaz kalır. */
.btn--outline-dark {
  background: var(--beyaz);
  color: var(--koyu-acik);
  border-color: var(--koyu-text);
}
.btn--outline-dark:hover {
  color: var(--yesil-orta);
  border-color: var(--yesil-orta);
}

/* Figma "zeminoklu" — koyu dolgu. Hover: dolgu KoyuText, çerçeve acikZemin. */
.btn--fill-dark {
  background: var(--koyu-acik);
  color: var(--beyaz);
  border-color: var(--koyu-text);
}
.btn--fill-dark:hover {
  background: var(--koyu-text);
  border-color: var(--acik-zemin);
}

/* --------------------------------------------------------------------------
   Başlıklar — Figma'da ilk satırlar Medium, vurgulu son satır Bold
   -------------------------------------------------------------------------- */
.slogan {
  font-size: var(--fs-slogan);
  font-weight: 500;
  line-height: 1.2;
}
.slogan strong { font-weight: 700; }

.section-title {
  font-size: var(--fs-slogan);
  font-weight: 500;
  line-height: 1.2;
}

.muted { color: var(--koyu-text); }

/* ==========================================================================
   HEADER / MENÜ  — Figma 35:428 (1920×95)
   ========================================================================== */
.site-header {
  position: relative; /* .mega panelleri buna göre konumlanır */
  z-index: 40;
  background: var(--koyu-koyu);
  padding: 20px 10px;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Koyu zeminde beyaz logo (euromaster_disi_logo), hover'da turkuaz (euromaster_logo). */
.logo {
  display: block; /* <a> satır içidir; blok olmazsa width/height işlemez ve logo kaybolur */
  position: relative;
  flex: none;
  width: 92px;
  height: 55px;
}
.logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .18s ease;
}
.logo__hover { opacity: 0; }
.logo:hover .logo__default { opacity: 0; }
.logo:hover .logo__hover { opacity: 1; }

/* Menü, logo ile hamburger arasındaki tüm alanı kaplar; linkler ortalanır,
   dil + katalog sağa yaslanır (Figma'daki 165px / 166px boşlukla aynı sonuç). */
.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Doğrudan çocuk: .lang-menu de bir ul ve o bu kuralı almamalı */
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 29px;
  margin-inline: auto;
}
.nav-extras {
  display: flex;
  align-items: center;
  gap: 21px;
}
/* Menüdeki katalog butonu ortak .btn'den biraz daha dar dursun */
.nav-extras .btn { padding: 9px 16px; }
.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--beyaz);
  font-size: var(--fs-baslik);
  white-space: nowrap;
  transition: color .18s ease;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a[aria-current="page"],
.main-nav > ul > li > a[aria-expanded="true"] { color: var(--yesil-acik); }

/* .lang-toggle da .main-nav içinde, bu yüzden seçici .has-mega ile sınırlı */
.has-mega .chevron {
  width: 12.78px;
  height: 12.78px;
  transition: transform .2s ease;
}
.has-mega > a[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Açılır menü (mega)
   li'nin position'ı static kalır; panel .site-header'a göre konumlandığı için
   ekran boyunca uzanır, içindeki .container onu 1440px'lik kolona hizalar.
   -------------------------------------------------------------------------- */
.has-mega { position: static; }

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 22px 10px;
  background: var(--koyu-koyu);
  border-top: 1px solid var(--koyu-acik);
  border-bottom: 1px solid var(--koyu-acik);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  animation: mega-in .18s ease;
}
.mega[hidden] { display: none; }

@keyframes mega-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Sektör öğeleri ana sayfada açık zeminde; menüde koyu zeminde duruyor */
.mega .sector { border-left-color: var(--koyu-acik); }
.mega .sector .icon { color: var(--beyaz); }
.mega .sector h3 { color: var(--beyaz); }
.mega .sector:hover h3 { color: var(--yesil-acik); }

/* --------------------------------------------------------------------------
   Dil seçici
   -------------------------------------------------------------------------- */
.lang { position: relative; }

.flag {
  width: 24px;
  height: 18px;
  flex: none;
  object-fit: cover;
  border-radius: 2px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  color: var(--beyaz);
  font-size: var(--fs-baslik);
  transition: color .18s ease;
}
.lang-toggle:hover { color: var(--yesil-acik); }
.lang-toggle .chevron {
  width: 12.78px;
  height: 12.78px;
  transition: transform .2s ease;
}
.lang-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  min-width: 196px;
  padding: 6px;
  background: var(--koyu-orta);
  border: 1px solid var(--koyu-acik);
  border-radius: var(--radius);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .4);
  animation: lang-in .16s ease;
}
.lang-menu[hidden] { display: none; }

@keyframes lang-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 4px;
  color: var(--beyaz);
  font-size: var(--fs-aciklama);
  transition: background-color .15s ease, color .15s ease;
}
.lang-menu a:hover { background: var(--koyu-acik); color: var(--yesil-acik); }
.lang-menu a[aria-current="true"] { color: var(--yesil-acik); }
.lang-menu .lang-code {
  margin-left: auto;
  color: var(--koyu-text);
  font-size: 12px;
  letter-spacing: .04em;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--beyaz);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 24px; height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after  { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

/* ==========================================================================
   HERO / SLIDER  — Figma 137:332 (1920×592)
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 592px;
  background: var(--koyu-koyu) var(--bg-slider) center / cover no-repeat;
  overflow: hidden;
}

.hero-slider {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 492px;
}
.hero-slider .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 59px;
}

.slider-arrow {
  flex: none;
  width: 49.61px; height: 49.61px;
  display: grid;
  place-items: center;
  color: var(--beyaz);
  opacity: .85;
  transition: opacity .18s ease, transform .18s ease;
}
.slider-arrow:hover { opacity: 1; transform: scale(1.08); }

.hero-track {
  flex: 1;
  min-width: 0;   /* flex öğesinin öntanımlı min-width:auto'su okları dışarı itiyordu */
  display: grid; /* slaytlar üst üste, opacity ile geçiş */
}
.hero-slide {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 59px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-copy {
  flex: none;
  width: 496px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--beyaz);
}
.hero-copy h2 {
  font-size: var(--fs-slider);
  font-weight: 500;
  line-height: 1.15;
}
.hero-copy p {
  font-size: var(--fs-aciklama);
  margin-top: 10px;
}
.hero-visual { flex: 0 1 663px; min-width: 0; max-width: 663px; }
.hero-visual img { width: 100%; height: 470px; object-fit: contain; }

/* Slayt noktaları (mobilde ok yerine) */
.hero-dots {
  display: none;
  justify-content: center;
  gap: 0;              /* dokunma alanı iç boşluktan geliyor */
  padding-bottom: 16px;
}
/* Nokta 8px görünür ama dokunma hedefi 24×24 (WCAG 2.2 – Target Size).
   Parmakla 8px'e isabet ettirmek imkânsıza yakındı. */
.hero-dots button {
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
}
.hero-dots button::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transition: background-color .18s ease;
}
.hero-dots button.is-active::before { background: var(--yesil-acik); }

/* Hero altı özellik şeridi — Figma 32:236 (1920×100) */
.hero-features {
  background: rgba(42, 46, 53, .5);
  border-top: 1px solid var(--koyu-acik);
  border-bottom: 1px solid var(--koyu-acik);
  padding: 23px 10px;
}
.hero-features .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 55px;
  padding-left: 24px;
  border-left: 1px solid var(--beyaz);
  color: var(--beyaz);
}
.feature .icon { width: 38px; height: 38px; }
.feature-text { width: 183px; }
.feature-text h3 { font-size: var(--fs-baslik); font-weight: 500; }
.feature-text p  { font-size: var(--fs-aciklama); margin-top: 2px; }

/* ==========================================================================
   ÜRÜN KATEGORİLERİ  — Figma 127:331 (1920×232)
   ========================================================================== */
.categories {
  background: var(--koyu-koyu);
  padding: 16px 10px;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17.33px;
}
.category-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 200px;
  overflow: hidden;
  background: var(--koyu-acik);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
}

/* Hover — Figma "Urunkategorileri / Variant2": köşeden turkuaza giden gradient.
   background-image geçiş yapamadığı için gradient ayrı katmanda, opacity ile açılıyor. */
.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(144.64deg, var(--koyu-acik) 42.765%, var(--yesil-orta) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
.category-card:hover::before { opacity: 1; }

.category-card__body {
  position: relative;
  /* flex:0 1 → basis 170px ama KÜÇÜLEBİLİR; min-width:0 içeriğin altına inebilmesi
     için şart. Dar sütunda (laptop/tablet/telefon) içerik sola taşıp overflow:hidden
     ile KIRPILMASIN diye. Geniş kartta flex-end + sabit basis → tasarımdaki sağ hizalı
     kompakt gövde korunur. */
  flex: 0 1 170px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-left: 14px;
  overflow-wrap: break-word;
}
.category-card__body h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--beyaz); }
.category-card__body p  { font-size: var(--fs-aciklama); color: var(--koyu-text); }
.category-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-aciklama);
  color: var(--beyaz);
}
.category-card__media { position: relative; flex: 0 1 163px; min-width: 0; height: 200px; }
.category-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   SEKTÖRLER ŞERİDİ  — Figma 44:287 (1920×220)
   ========================================================================== */
.sectors-strip {
  background: var(--beyaz);
  padding: 34px 10px;
}
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.sector {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 0 14px;
  border-left: 1px solid #e3e5e7;
  transition: transform .18s ease;
}
.sector:first-child { border-left: 0; }
.sector:hover { transform: translateY(-3px); }
.sector .icon { width: 40px; height: 40px; color: var(--koyu-acik); }
.sector h3 { font-size: var(--fs-aciklama); font-weight: 500; color: var(--koyu-acik); }
.sector p  { font-size: 12px; color: var(--koyu-text); line-height: normal; }

/* ==========================================================================
   KURUMSAL TANITIM  — Figma 81:995 (1920×380)
   ========================================================================== */
.about-band {
  background: var(--acik-zemin) var(--bg-kurumsal) center / cover no-repeat;
  padding: 10px;
}
.about-band .container {
  display: flex;
  align-items: center;
  gap: 76px;
  min-height: 380px;
}
.about-copy {
  flex: none;
  width: 607px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.about-copy .slogan { color: var(--koyu-acik); }
.about-copy p { font-size: var(--fs-baslik); color: var(--koyu-acik); line-height: normal; }

.about-stats { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.stats-card {
  width: 661px;
  max-width: 100%;
  flex-wrap: wrap;   /* 4 istatistik dar alanda alt satıra insin */
  min-height: 107px;
  display: flex;
  align-items: center;
  background: var(--acik-zemin);
  border-radius: 10px;
  padding: 10px;
}
.stat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid var(--koyu-text);
}
.stat:last-child { border-right: 0; }
.stat .icon { width: 38px; height: 38px; color: var(--koyu-acik); }
.stat strong { display: block; font-size: var(--fs-slogan); font-weight: 500; color: var(--koyu-acik); }
.stat span   { display: block; font-size: var(--fs-aciklama); color: var(--koyu-acik); }

/* ==========================================================================
   YÜKSEK TEKNOLOJİ BANDI  — Figma 95:1029 (1920×200)
   ========================================================================== */
.tech-band {
  background: var(--koyu-koyu) var(--bg-teknoloji) center / cover no-repeat;
  padding: 10px;
}
.tech-band .container {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 200px;
}
.tech-copy { flex: none; width: 506px; color: var(--beyaz); }
.tech-copy p { font-size: var(--fs-aciklama); margin-top: 8px; }

.tech-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 285px;
}
.tech-list li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-aciklama);
  color: var(--beyaz);
}
.tech-list svg { flex: none; color: var(--yesil-acik); }

/* ==========================================================================
   DÜNYA HARİTASI  — Figma 97:1074 (1920×492)
   ========================================================================== */
/* Zemin, dünya-harita.jpg'nin kendi zemini (#f2f2f2) ile aynı olmalı ki görsel dikişsiz otursun. */
.world {
  background: var(--acik-zemin);
  padding: 10px;
}
.world .container {
  display: flex;
  align-items: center;
  gap: 43px;
  min-height: 492px;
}
.world-copy {
  flex: none;
  width: 530px;
  display: flex;
  flex-direction: column;
  gap: 33px;
}
.world-copy .slogan { color: var(--koyu-acik); }
.world-copy > p { font-size: var(--fs-aciklama); color: var(--koyu-acik); line-height: normal; }

.check-list { display: flex; flex-direction: column; gap: 15px; }
.check-list li {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-acik);
}
.check-list svg { flex: none; color: var(--yesil-orta); }

.world-map { flex: 1; min-width: 0; }
.world-map img { width: 100%; height: auto; }

/* ==========================================================================
   ÇÖZÜMLER BANDI (CTA)  — Figma 114:343 (1920×350)
   ========================================================================== */
.solutions-band {
  background: var(--koyu-koyu) var(--bg-cozumler) center / cover no-repeat;
  padding: 10px;
}
.solutions-band .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  min-height: 350px;
}
.solutions-band .slogan { color: var(--beyaz); }

/* ==========================================================================
   KALİTE / GÜVEN / PERFORMANS  — Figma 121:885 (1920×250)
   ========================================================================== */
.values {
  background: var(--acik-zemin);
  padding: 55px 10px 0;
}
.values .section-title { margin-bottom: 21px; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}
.value-card {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 82px;
  padding: 10px;
  background: var(--beyaz);
  border: 1px solid #e3e5e7;
  border-radius: var(--radius);
}
.value-card .icon { width: 57.5px; height: 57.5px; color: var(--koyu-acik); }
.value-card h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--koyu-acik); }
.value-card p  { font-size: var(--fs-aciklama); color: var(--koyu-text); margin-top: 9px; line-height: 1.3; }

/* ==========================================================================
   ÜRETİM GALERİSİ  — Figma 127:332 (1920×310)
   ========================================================================== */
.gallery {
  background: var(--acik-zemin);
  padding: 30px 10px 30px;
}
.gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 10px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17.33px;
}
.gallery-grid figure {
  margin: 0;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-grid figure:hover img { transform: scale(1.05); }

/* ==========================================================================
   FOOTER  — Figma 328:4101 (1920×549)
   ========================================================================== */
.footer-cta {
  background: var(--koyu-koyu);
  padding: 26px 10px;
}
.footer-cta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.footer-cta__intro {
  display: flex;
  align-items: center;
  gap: 55px;
}
.footer-cta__intro img { width: 124px; height: 137px; object-fit: contain; flex: none; }
.footer-cta__text { width: 443px; color: var(--beyaz); display: flex; flex-direction: column; gap: 14px; }
.footer-cta__text .slogan { color: var(--beyaz); }
.footer-cta__text p { font-size: var(--fs-aciklama); line-height: normal; }

.footer-cta__actions { width: 201px; display: flex; flex-direction: column; gap: 17px; flex: none; }
.footer-cta__actions .btn { width: 100%; }
.contact-chip {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--beyaz);
  border-radius: var(--radius);
  color: var(--beyaz);
}
.contact-chip .icon { width: 34px; height: 34px; }
.contact-chip p { font-size: var(--fs-aciklama); }
.contact-chip p + p { margin-top: 3px; }

.site-footer { background: var(--koyu-koyu); color: var(--beyaz); }
.footer-main { padding: 24px 10px; border-top: 1px solid var(--koyu-acik); }
.footer-main .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.footer-brand { width: 174px; flex: none; }
.footer-brand p { font-size: var(--fs-aciklama); color: var(--koyu-text); margin: 15px 0 15px; line-height: normal; }
.social { display: flex; gap: 11px; }
.social a {
  width: 33px; height: 33px;
  display: grid; place-items: center;
  border: 1px solid var(--koyu-acik);
  border-radius: 50%;
  transition: background-color .18s ease, border-color .18s ease;
}
.social a:hover { color: var(--yesil-acik); border-color: var(--yesil-acik); }
.social .icon { width: 15px; height: 15px; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 154px);
  gap: 40px;
}
.footer-col h4 {
  font-size: var(--fs-baslik);
  font-weight: 500;
  color: var(--yesil-orta);
  margin-bottom: 19px;
}
.footer-col li a,
.footer-col address {
  display: block;
  font-size: var(--fs-aciklama);
  font-style: normal;
  color: var(--koyu-text);
  line-height: normal;
  padding: 5px 0;
  transition: color .18s ease;
}
.footer-col li a:hover { color: var(--yesil-acik); }

.footer-map {
  width: 386px;
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  padding: 10px;
}
.footer-map .icon {
  width: 100%;
  aspect-ratio: 346 / 191;
  color: var(--koyu-acik);
}
.footer-map .btn { position: absolute; }

.footer-bottom {
  border-top: 1px solid var(--koyu-acik);
  padding: 20px 10px;
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-bottom p,
.footer-bottom a { font-size: var(--fs-aciklama); color: var(--koyu-text); }
.footer-legal { display: flex; gap: 40px; align-items: center; }
.footer-legal a:hover { color: var(--yesil-acik); }
/* "Çerez Tercihleri" bir <button> (bildirimi yeniden açar, sayfa değiştirmez)
   ama yanındaki yasal bağlantılarla aynı görünmeli. */
.footer-legal .bag-dugme {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
}
.footer-legal .bag-dugme:hover { color: var(--yesil-acik); }

/* Ziyaretçi sayacı — footerın alt şeridinde, ortada */
.visitor-count { display: flex; gap: 24px; white-space: nowrap; }
.visitor-count strong { font-weight: 500; color: var(--yesil-acik); }

/* Sabit WhatsApp düğmesi sayfanın en altında yasal bağlantıların üstüne biniyor:
   alt şeritte ona yer ayır. */
.footer-bottom .container { padding-inline-end: 92px; }
:root[dir="rtl"] .footer-bottom .container { padding-inline-end: 24px; padding-inline-start: 92px; }

/* ==========================================================================
   HATA SAYFALARI (404 / 403)
   ========================================================================== */

.error-page {
  background: var(--koyu-koyu);
  color: var(--beyaz);
  padding: 120px 0 100px;
  text-align: center;
}
.error-page__code {
  font-size: 120px;
  font-weight: 500;
  line-height: 1;
  color: var(--koyu-acik);
  letter-spacing: .04em;
}
.error-page h1 {
  margin-top: 12px;
  font-size: var(--fs-slogan);
  font-weight: 500;
}
.error-page__desc {
  max-width: 520px;
  margin: 16px auto 0;
  font-size: var(--fs-aciklama);
  color: var(--koyu-text);
}
.error-page__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}
.error-page__links { margin-top: 60px; }
.error-page__links h2 {
  font-size: var(--fs-baslik);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-acik);
}
.error-page__links ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 18px;
}
.error-page__links a { font-size: var(--fs-aciklama); color: var(--koyu-text); }
.error-page__links a:hover { color: var(--yesil-acik); }

@media (max-width: 600px) {
  .error-page { padding: 70px 0 60px; }
  .error-page__code { font-size: 80px; }
  .error-page__actions .btn { width: 100%; }
}

/* ==========================================================================
   ÇEREZ BİLDİRİMİ
   ========================================================================== */

.cookie-bar {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 950;                /* WhatsApp'ın üstünde, duyuru modalinin altında */
  max-width: 420px;
  padding: 24px;
  background: var(--koyu-orta);
  border: 1px solid var(--koyu-acik);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgb(0 0 0 / .35);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.cookie-bar.is-visible { opacity: 1; transform: none; }
.cookie-bar h2 {
  font-size: var(--fs-baslik);
  font-weight: 500;
  color: var(--beyaz);
}
.cookie-bar p {
  margin-top: 10px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-text);
}
.cookie-bar a { color: var(--yesil-acik); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cookie-bar__actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

:root[dir="rtl"] .cookie-bar { left: auto; right: 24px; }

@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: opacity .25s ease; transform: none; }
}

@media (max-width: 600px) {
  .cookie-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 20px; }
  :root[dir="rtl"] .cookie-bar { right: 12px; }
  /* Bildirim açıkken WhatsApp düğmesini yukarı it, üst üste binmesinler */
  body.cookie-acik .whatsapp-fab { bottom: calc(12px + var(--cookie-yukseklik, 230px)); }
}

/* ==========================================================================
   WHATSAPP — sabit sağ alt, sayfa içeriğinden bağımsız
   ========================================================================== */

.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;               /* duyuru modalinin altında, geri kalan her şeyin üstünde */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yesil-orta);
  color: var(--beyaz);
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
  transition: background .18s ease, transform .18s ease, opacity .25s ease, visibility .25s ease;

  /* Hero'daki içeriği kapatmasın: sayfa kaydırılınca belirir (JS sınıf ekler) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
.whatsapp-fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible { background: var(--koyu-koyu); transform: scale(1.06); }

/* RTL dillerde sola geçer */
:root[dir="rtl"] .whatsapp-fab { right: auto; left: 24px; }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { transition: background .18s ease; transform: none; }
  .whatsapp-fab:hover { transform: none; }
}

@media (max-width: 600px) {
  .whatsapp-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  :root[dir="rtl"] .whatsapp-fab { left: 16px; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .visitor-count { justify-content: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 20px; }
}

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

/* İçerik kolonu daralınca kenar boşluğu ver */
@media (max-width: 1480px) {
  .container { padding-inline: 24px; }
}

/* Tablet yatay */
/* Footer üç sütunu (marka + 4 kolon + harita) 1400px'in altında yan yana
   sığmıyordu; eski kırılım 1240 olduğu için 1241–1400 arasında TÜM sayfalarda
   ~145px yatay taşma oluyordu. Sarma bu aralıkta başlar. */
@media (max-width: 1400px) {
  .hero-features .container { flex-wrap: wrap; row-gap: 24px; }
  /* Üretim şeridi: 960px görsel + 91px boşluk + yazı sütunu 1400'ün altında
     sığmıyor; 1241–1400 arasında yazı sütunu 107px'e eziliyordu. */
  .production .container { gap: 40px; }
  .production__media { width: 55%; }
  .footer-main .container { flex-wrap: wrap; }
  .footer-map { width: 100%; order: 3; }
}

@media (max-width: 1240px) {
  .hero-slider .container { gap: 24px; }
  .hero-copy { width: 42%; }
  .hero-copy h2 { font-size: 40px; }
  .hero-visual { width: 52%; }
  .hero-visual img { height: 380px; }

  .about-band .container { gap: 32px; }
  .about-copy { width: 48%; }
  .stats-card { width: 100%; }

  .world .container { gap: 24px; }
  .world-copy { width: 46%; }

  .sectors-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .sector:nth-child(4n + 1) { border-left: 0; }

  .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .footer-main .container { flex-wrap: wrap; }
  .footer-map { width: 100%; order: 3; }
}

/* Tablet dikey ve altı — mobil menü devreye girer */
/* MOBİL MENÜ KIRILIMI — 1200px.
   Masaüstü menü 7 başlık + dil + katalog ile en az ~1075px yer istiyor;
   kırılım 991 iken 992–1240 arası (iPad yatay, 1024/1200 laptop) menü taşıyor ve
   TÜM sayfalar yatay kayıyordu. Bu blok YALNIZ menü kurallarını taşır —
   diğer yerleşim kuralları 991'de kalır, tasarım değişmez. */
@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; }

  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 85vw);
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--koyu-koyu);
    padding: 96px 24px 24px;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 60;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
  .main-nav > ul > li > a {
    display: flex;
    justify-content: space-between;
    padding: 14px 4px;
    border-bottom: 1px solid var(--koyu-acik);
  }

  /* Dil ve katalog mobilde gizlenmez, menünün altına iner */
  .nav-extras {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 28px;
  }
  .nav-extras .btn { width: 100%; }

  /* Dar panelde açılır menü konumlandırılmaz, akışa girer */
  .lang-menu {
    position: static;
    width: 100%;
    margin-top: 10px;
    box-shadow: none;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 50;
  }
  .nav-backdrop.is-visible { opacity: 1; pointer-events: auto; }

  .site-header { z-index: 70; }
  .site-header .container { justify-content: space-between; }

  /* Dar ekranda açılır panel yok: link doğrudan listeleme sayfasına gider */
  .has-mega .mega { display: none; }
  .has-mega .chevron { display: none; }

}

@media (max-width: 991px) {
  /* Hero dikey akış */
  .hero { min-height: 0; }
  .hero-slider { padding: 40px 0 8px; }
  .hero-slider .container { gap: 0; }
  .slider-arrow { display: none; }
  .hero-slide { flex-direction: column-reverse; gap: 24px; text-align: center; }
  .hero-copy { width: 100%; align-items: center; }
  .hero-copy h2 { font-size: 34px; }
  .hero-visual { width: 100%; }
  .hero-visual img { height: 300px; }
  .hero-dots { display: flex; }

  /* Özellik şeridi 2×2 */
  .hero-features .container { flex-wrap: wrap; row-gap: 24px; }
  .feature { flex: 0 0 50%; }
  .feature:nth-child(odd) { border-left: 0; }

  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Dar ekranda (tablet+telefon) gövde boş alanı DOLDURSUN → metin sola yaslı,
     solunda ölü boşluk kalmasın. Masaüstündeki (>991px) flex-end kompakt sağ-hizalı
     tasarım korunur. Kırpılma zaten temel min-width:0 ile önlendi. */
  .category-card__body { flex: 1 1 auto; }

  .about-band .container,
  .world .container,
  .tech-band .container {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding-block: 48px;
  }
  .about-copy, .world-copy, .tech-copy { width: 100%; }
  .about-copy { align-items: flex-start; }
  /* Tek sütuna düşünce tam-genişlik KOYU metin, arka-plan binasının koyu kısmına
     binip okunmuyordu. Görselin üstüne yarı-saydam açık katman → metin her yerde
     okunur, bina hafif backdrop olarak kalır. (Masaüstünde metin zaten görselin
     açık/sol tarafında kaldığından katman yalnız burada, ≤991px'te.) */
  .about-band {
    background:
      linear-gradient(rgba(244, 246, 247, 0.82), rgba(244, 246, 247, 0.82)),
      var(--bg-kurumsal) center / cover no-repeat;
  }
  .tech-list { width: 100%; }

  .stats-card { flex-wrap: wrap; row-gap: 20px; }
  .stat { flex: 0 0 50%; }
  .stat:nth-child(2n) { border-right: 0; }

  .values { padding-top: 40px; }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-cta .container { flex-direction: column; align-items: stretch; }
  .footer-cta__intro { flex-direction: column; text-align: center; gap: 24px; }
  .footer-cta__intro img { margin-inline: auto; }
  .footer-cta__text { width: 100%; align-items: center; }
  .footer-cta__actions { width: 100%; }
  /* Telefon/e-posta kutusu, üstündeki buton gibi ortalansın */
  .contact-chip { justify-content: center; text-align: center; }

  /* Footer'ın tamamı ortalı */
  .footer-main .container { flex-direction: column; align-items: center; text-align: center; }
  .footer-brand { width: 100%; }
  .footer-brand .logo { margin-inline: auto; }
  .social { justify-content: center; }

  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    justify-items: center;
    width: 100%;
  }
  .footer-col { width: 154px; }
  .footer-col address { text-align: center; }

  .footer-bottom .container { flex-direction: column; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 20px; }
}

/* Telefon */
@media (max-width: 600px) {
  :root { --fs-slogan: 24px; }

  .hero-copy h2 { font-size: 28px; }
  .hero-visual img { height: 220px; }

  .feature { flex: 0 0 100%; border-left: 0; padding-left: 0; }
  .feature-text { width: auto; }

  .category-grid { grid-template-columns: 1fr; }
  /* body/media genişliği artık temel .category-card__body/__media fluid kuralından
     geliyor (flex:0 1 + min-width:0); telefonda ayrı width override'a gerek yok. */

  .sectors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector:nth-child(odd) { border-left: 0; }
  .sector:nth-child(4n + 1) { border-left: 1px solid #e3e5e7; }
  .sector:nth-child(2n + 1) { border-left: 0; }

  .stat { flex: 0 0 100%; border-right: 0; }

  .values-grid,
  .gallery-grid { grid-template-columns: 1fr; }

  .gallery-head { flex-direction: column; align-items: flex-start; }

  /* Tek kolona düşünce 154px'e sıkışmasın, adres satırı düzgün kırılsın */
  .footer-cols { grid-template-columns: 1fr; }
  .footer-col { width: auto; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PAYLAŞILAN İÇ SAYFA PARÇALARI
   Renk, tipografi ve ölçüler yukarıdaki token'lardan gelir; burada tekrar edilmez.
   ========================================================================== */

/* Sayfa başlığı bandı — Figma hakkımızda 168:857 (1920×400) */
.page-hero {
  min-height: 400px;
  display: flex;
  align-items: center;
  padding: 48px 10px;
  background: var(--koyu-koyu) center / cover no-repeat;
}
.page-hero__inner { max-width: 760px; }
.page-hero .eyebrow { color: var(--yesil-acik); margin-top: 40px; }
.page-hero h1 {
  font-size: var(--fs-slider); /* 50px — Figma SliderLight, tek ağırlık, bold yok */
  font-weight: 500;
  line-height: 1.2;
  color: var(--beyaz);
  margin: 18px 0 14px;
}
/* Figma'da satır adımı 17px ölçüldü → 14px yazı, line-height normal (≈1.21) */
.page-hero p {
  font-size: var(--fs-aciklama);
  line-height: normal;
  color: var(--beyaz);
  max-width: 720px;
}
.page-hero .btn { margin-top: 22px; }
/* Hakkımızda'da metin kutusu daha dar; açıklama iki satıra kırılıyor */
.page-hero--narrow p { max-width: 580px; }

/* Kırıntı navigasyonu — bağlantılar beyaz, bulunulan sayfa turkuaz */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-aciklama);
  letter-spacing: .06em;
  color: var(--koyu-text);
}
.breadcrumb a { color: var(--beyaz); transition: color .18s ease; }
.breadcrumb a:hover { color: var(--yesil-acik); }
.breadcrumb [aria-current] { color: var(--yesil-acik); }
.breadcrumb svg { flex: none; opacity: .6; }

/* Bölüm üstü küçük etiket */
.eyebrow {
  display: block;
  font-size: var(--fs-aciklama);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yesil-orta);
}

/* Etiket + başlık + açıklama üçlüsü */
.section-head { min-width: 0; }
.section-head h2 { overflow-wrap: anywhere; }
.section-head .eyebrow { margin-bottom: 26px; }
.section-head h2 {
  font-size: var(--fs-slogan);
  font-weight: 500;
  line-height: 1.2;
  color: var(--koyu-acik);
}
.section-head h2 strong { font-weight: 700; }
.section-head p {
  margin-top: 26px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-text);
  line-height: normal;
}
.section-head--light h2 { color: var(--beyaz); }

/* ==========================================================================
   HAKKIMIZDA
   ========================================================================== */

/* Öne çıkanlar — Figma 170:1051 (1920×360) */
.intro {
  background: var(--acik-zemin);
  padding: 46px 10px;
}
.intro .container {
  display: flex;
  align-items: center;
  gap: 114px;
}
.intro .section-head { flex: none; width: 448px; }

.pillar-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 30px 20px;
  background: var(--beyaz);
  border: 1px solid #e3e5e7;
  border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}
.pillar:hover { border-color: var(--yesil-orta); transform: translateY(-3px); }
.pillar .icon { width: 72px; height: 72px; color: var(--koyu-acik); }
.pillar h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--koyu-acik); }
.pillar p { font-size: var(--fs-aciklama); color: var(--koyu-text); line-height: normal; }

/* Rakamlarla Boykim — Figma 172:1116 (1920×380), sol görsel 963px */
.figures {
  display: grid;
  grid-template-columns: 963fr 957fr;
  background: var(--koyu-koyu);
}
.figures__media { min-height: 380px; }
.figures__media img { width: 100%; height: 100%; object-fit: cover; }
.figures__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 60px 100px;
}
.figures__body h2 {
  font-size: var(--fs-slogan);
  font-weight: 500;
  line-height: 1.2;
  color: var(--beyaz);
  max-width: 300px;
}
.figures__body h2 strong { font-weight: 700; }

.figure-row { display: flex; }
.figure {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 20px;
  border-right: 1px solid var(--koyu-acik);
}
.figure:last-child { border-right: 0; }
.figure + .figure { padding-left: 20px; }
.figure .icon { width: 38px; height: 38px; color: var(--beyaz); }
.figure strong { display: block; font-size: var(--fs-slogan); font-weight: 500; color: var(--beyaz); }
.figure span { display: block; font-size: var(--fs-aciklama); color: var(--koyu-text); }

/* Tarihçe — Figma 174:1164 (1920×388) */
.history { background: var(--beyaz); padding: 54px 10px; }
.history .container { display: flex; align-items: center; gap: 89px; }
.history .section-head { flex: none; width: 389px; }

/* Dar ekranda dikey, masaüstünde yatay zaman çizgisi */
.timeline {
  flex: 1;
  position: relative;
  display: grid;
  row-gap: 26px;
  padding-left: 30px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 4px;
  width: 1px;
  background: var(--koyu-text);
  opacity: .45;
}
.milestone { position: relative; }
.milestone::after {
  content: "";
  position: absolute;
  top: 7px;
  left: -30px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yesil-orta);
}
.milestone__year {
  font-size: var(--fs-slogan);
  font-weight: 500;
  line-height: 1.2;
  color: var(--yesil-orta);
}
.milestone--muted .milestone__year { color: var(--koyu-acik); }
.milestone p {
  margin-top: 6px;
  font-size: 12px;
  color: var(--koyu-text);
  line-height: normal;
}

@media (min-width: 992px) {
  .timeline {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;
    column-gap: 16px;
    row-gap: 0;
    padding-left: 0;
    min-height: 280px;
  }
  .timeline::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }
  .milestone { text-align: center; }
  .milestone::after { left: 50%; transform: translateX(-50%); }

  /* Kolonu açıkça ver: yalnızca grid-row verilirse otomatik yerleşim
     üst/alt çiftleri aynı kolona yığar ve 6 taş 3 kolona düşer. */
  .milestone:nth-child(1) { grid-column: 1; }
  .milestone:nth-child(2) { grid-column: 2; }
  .milestone:nth-child(3) { grid-column: 3; }
  .milestone:nth-child(4) { grid-column: 4; }
  .milestone:nth-child(5) { grid-column: 5; }
  .milestone:nth-child(6) { grid-column: 6; }

  .milestone--top {
    grid-row: 1;
    align-self: end;
    padding-bottom: 36px;
  }
  .milestone--top::after { top: auto; bottom: -4.5px; }

  .milestone--bottom {
    grid-row: 2;
    align-self: start;
    padding-top: 36px;
  }
  .milestone--bottom::after { top: -4.5px; }
}

/* Misyon & Vizyon — Figma 178:1242 (1920×278), üç eşit 480px kolon */
.mission {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--container);
  margin-inline: auto;
}
.mission__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
  min-height: 278px;
  padding: 59px 60px;
}
.mission__panel--dark { background: var(--koyu-koyu); }
.mission__panel--teal { background: var(--yesil-orta); }
.mission__panel--teal .eyebrow { color: var(--beyaz); }
.mission__panel p { font-size: var(--fs-aciklama); color: var(--beyaz); line-height: normal; }
.mission__more {
  display: inline-flex;
  align-items: center;
  color: var(--beyaz);
  transition: transform .18s ease;
}
.mission__more:hover { transform: translateX(4px); }
.mission__media { min-height: 278px; }
.mission__media img { width: 100%; height: 100%; object-fit: cover; }

/* Değerlerimiz — Figma 183:721 (1920×237) */
.values-band { background: var(--beyaz); padding: 38px 10px; }
.values-band .container { display: flex; align-items: center; gap: 58px; }
.values-band .section-head { flex: none; width: 415px; }

.value-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  transition: transform .18s ease;
}
.value:hover { transform: translateY(-3px); }
.value .icon { width: 72px; height: 72px; color: var(--koyu-acik); }
.value h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--koyu-acik); }
.value p { font-size: 12px; color: var(--koyu-text); line-height: normal; }

/* Belgelerimiz — Figma 186:937 (1920×200) */
.certs { background: var(--koyu-koyu); padding: 35px 10px; }
.certs .container { display: flex; align-items: center; gap: 83px; }
.certs .section-head { flex: none; width: 415px; }

.cert-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  align-items: center;
  justify-items: center;
}
.cert { display: grid; place-items: center; }
.cert .icon {
  width: 100px;
  height: 100px;
  color: var(--beyaz);
  opacity: .85;
  transition: opacity .18s ease, color .18s ease;
}
.cert:hover .icon { opacity: 1; color: var(--yesil-acik); }

/* Üretim & Teknoloji — Figma 187:960 (1920×394) */
.production { background: var(--acik-zemin); padding: 41px 10px; }
.production .container { display: flex; align-items: center; gap: 91px; }
.production__media {
  /* flex:none + sabit 960px, 1241–1400 arasında yazı sütununu 107px'e eziyor ve
     başlık dışarı taşıyordu. Küçülebilir yap.
     ⚠️ flex-basis SABİT verilme: 'flex: 0 1 960px' alt kırılımlardaki
     width:55% / width:100% kurallarını etkisiz bırakıyor. Basis auto kalmalı. */
  flex: 0 1 auto;
  width: 960px;
  min-width: 0;
  max-width: 100%;
}
.production__media img {
  width: 100%;
  height: 312px;
  object-fit: cover;
  border-radius: var(--radius);
}
.production .section-head { flex: 1; }

/* --------------------------------------------------------------------------
   İç sayfalar — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .intro .container { gap: 48px; }
  .intro .section-head { width: 38%; }
  .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .figures__body { padding: 48px; }
  .history .container { gap: 40px; }
  .history .section-head { width: 32%; }

  .values-band .container,
  .certs .container { gap: 40px; }
  .values-band .section-head,
  .certs .section-head { width: 32%; }
  .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .cert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }

  .production .container { gap: 40px; }
  .production__media { width: 55%; }
}

@media (max-width: 991px) {
  .page-hero { min-height: 320px; }
  .page-hero__inner { max-width: 100%; }
  .page-hero h1 { font-size: 34px; }

  .intro .container,
  .history .container,
  .values-band .container,
  .certs .container,
  .production .container {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .intro .section-head,
  .history .section-head,
  .values-band .section-head,
  .certs .section-head,
  .production__media { width: 100%; }

  .figures { grid-template-columns: 1fr; }
  .figures__media { min-height: 260px; }
  .figures__body { padding: 40px 24px; }
  .figures__body h2 { max-width: 100%; }
  .figure-row { flex-wrap: wrap; row-gap: 24px; }
  .figure { flex: 0 0 50%; padding-right: 0; border-right: 0; }
  .figure + .figure { padding-left: 0; }

  .mission { grid-template-columns: 1fr; }
  .mission__panel { min-height: 0; padding: 40px 24px; }
  .mission__media { min-height: 220px; }

  .production__media img { height: 240px; }
}

@media (max-width: 600px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figure { flex: 0 0 100%; }
}

/* ==========================================================================
   ÜRÜNLER — Figma 257:3657
   ========================================================================== */

/* Sektör şeridinin koyu varyantı (Figma Sektorler / "koyu").
   Ana sayfadaki açık varyantla aynı ölçüler, yalnız renkler değişir. */
.sectors-strip--dark { background: var(--koyu-koyu); }
.sectors-strip--dark .sector { border-left-color: var(--koyu-acik); }
.sectors-strip--dark .sector .icon { color: var(--yesil-acik); }
.sectors-strip--dark .sector h3 { color: var(--yesil-acik); }
.sectors-strip--dark .sector p { color: var(--beyaz); }

/* Kategori sekmeleri — Figma 262:2348 (1920×118), öğe 360×98 */
.category-tabs {
  background: var(--koyu-koyu);
  padding: 10px;
}
.category-tab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.category-tab {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 98px;
  padding: 0 24px;
  border-left: 1px solid var(--koyu-acik);
  transition: background-color .18s ease;
}
.category-tab:last-child { border-right: 1px solid var(--koyu-acik); }
.category-tab:hover { background: var(--koyu-orta); }
.category-tab .icon { width: 44px; height: 44px; color: var(--yesil-acik); }
.category-tab__text { flex: 1; min-width: 0; }
.category-tab__text strong {
  display: block;
  font-size: var(--fs-baslik);
  font-weight: 500;
  color: var(--yesil-acik);
}
.category-tab__text span {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-aciklama);
  color: var(--beyaz);
}
.category-tab__go { flex: none; color: var(--beyaz); transition: transform .18s ease; }
.category-tab:hover .category-tab__go { transform: translateX(4px); }

/* Katalog gövdesi — Figma 266:3309 */
.catalog {
  background: var(--acik-zemin);
  padding: 40px 10px 60px;
}

/* Araç çubuğu — Figma 266:3306 */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.toolbar__filters,
.toolbar__tools { display: flex; align-items: center; gap: 14px; }

/* Hap biçimli açılır seçim. Yerel <select> kullanıyoruz: görünüm Figma'daki hap,
   davranış tarayıcının kendi menüsü — klavye ve ekran okuyucu bedava geliyor. */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pill select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 38px 10px 20px;
  font: inherit;
  font-size: var(--fs-aciklama);
  color: var(--koyu-acik);
  background: transparent;
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.pill select:hover { border-color: var(--yesil-orta); color: var(--yesil-orta); }
.pill__chevron {
  position: absolute;
  right: 16px;
  pointer-events: none;
  color: currentColor;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 289px;
}
.search input {
  width: 100%;
  padding: 10px 44px 10px 16px;
  font: inherit;
  font-size: var(--fs-aciklama);
  color: var(--koyu-acik);
  background: transparent;
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
}
.search input::placeholder { color: var(--koyu-text); }
.search input:focus { outline: none; border-color: var(--yesil-orta); }
.search button {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  color: var(--koyu-text);
  transition: color .18s ease;
}
.search button:hover { color: var(--yesil-orta); }

.view-toggle { display: flex; gap: 14px; }
.view-toggle a {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: var(--radius);
  background: var(--koyu-koyu);
  color: var(--beyaz);
  transition: background-color .18s ease, color .18s ease;
}
.view-toggle a:hover { color: var(--yesil-acik); }
.view-toggle a[aria-pressed="true"] { background: var(--koyu-acik); }

/* Ürün ızgarası — Figma 308:3562, kart 220×381, kolon arası 24, satır arası 40 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 381px;
  padding: 20px 16px;
  text-align: center;
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}
.product-card:hover { border-color: var(--yesil-orta); transform: translateY(-3px); }

.product-card__media {
  display: grid;
  place-items: center;
  height: 170px;
  width: 100%;
}
.product-card__media img {
  max-height: 170px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.product-card__cat {
  font-size: var(--fs-aciklama);
  text-transform: uppercase;
  color: var(--yesil-orta);
  line-height: 1.3;
}
.product-card__code { font-size: var(--fs-baslik); color: var(--koyu-acik); }
.product-card h3 {
  font-size: var(--fs-baslik);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--koyu-acik);
  line-height: 1.25;
}
.product-card .btn { margin-top: auto; }

/* Liste görünümü — kart yatay akar */
.product-grid--list { grid-template-columns: 1fr; row-gap: 16px; }
.product-grid--list .product-card {
  flex-direction: row;
  align-items: center;
  gap: 28px;
  min-height: 0;
  text-align: left;
  padding: 16px 24px;
}
.product-grid--list .product-card__media { width: 110px; height: 110px; flex: none; }
.product-grid--list .product-card__media img { max-height: 110px; }
.product-grid--list .product-card__cat { order: 1; width: 190px; flex: none; }
.product-grid--list .product-card__code { order: 2; width: 90px; flex: none; }
.product-grid--list .product-card h3 { order: 3; flex: 1; }
.product-grid--list .product-card .btn { order: 4; margin-top: 0; }
.product-grid--list .product-card:hover { transform: none; border-color: var(--yesil-orta); }

/* Boş sonuç */
.empty-state {
  padding: 60px 10px;
  text-align: center;
  color: var(--koyu-text);
}

/* Sayfalama — Figma 257:3726 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 42px;
}
.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 39px;
  padding: 0 12px;
  font-size: var(--fs-baslik);
  color: var(--koyu-acik);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.pagination a:hover { border-color: var(--yesil-orta); color: var(--yesil-orta); }
.pagination [aria-current="page"] {
  background: var(--koyu-acik);
  border-color: var(--koyu-acik);
  color: var(--beyaz);
}
.pagination .pagination__gap {
  border: 0;
  min-width: 34px;
  color: var(--koyu-text);
}
.pagination .is-disabled {
  opacity: .4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Ürünler — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  /* 992–1240 arasında satır hâlinde kalıp taşıyorlardı; sarmaya izin ver. */
  .toolbar__filters,
  .toolbar__tools { flex-wrap: wrap; }

  .category-tab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-tab:nth-child(2n) { border-right: 1px solid var(--koyu-acik); }
  .category-tab:nth-child(n + 3) { border-top: 1px solid var(--koyu-acik); }

  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar__filters { flex-wrap: wrap; }
  .toolbar__tools { justify-content: space-between; }
  .search { width: 100%; }

  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .product-grid--list .product-card { flex-wrap: wrap; }
  .product-grid--list .product-card__cat,
  .product-grid--list .product-card__code { width: auto; }
  .product-grid--list .product-card h3 { flex: 0 0 100%; order: 5; }
}

@media (max-width: 600px) {
  .category-tab-grid { grid-template-columns: 1fr; }
  .category-tab { border-right: 1px solid var(--koyu-acik); }
  .category-tab:not(:first-child) { border-top: 1px solid var(--koyu-acik); }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card { min-height: 0; }
  .product-card__media { height: 130px; }
  .product-card__media img { max-height: 130px; }

  .pagination { flex-wrap: wrap; gap: 8px; }
  .pagination a, .pagination span { min-width: 42px; padding: 0 8px; }
}

/* ==========================================================================
   SEKTÖRLER — Figma 235:2231
   ========================================================================== */

/* Özellik şeridi — Figma 240:1506 (1920×152).
   Koyu bant içinde biraz daha açık, köşeleri yuvarlatılmış panel. */
.feature-band {
  background: var(--koyu-koyu);
  padding: 20px 10px;
}
.feature-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--koyu-orta);
  border-radius: 10px;
  padding: 20px 4px;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-left: 1px solid var(--koyu-acik);
}
.feature-item:first-child { border-left: 0; }
.feature-item .icon { width: 71px; height: 72px; color: var(--yesil-acik); }
.feature-item h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--yesil-acik); }
.feature-item p {
  margin-top: 14px;
  font-size: var(--fs-aciklama);
  color: var(--beyaz);
  line-height: normal;
}

/* Sektör kartları — Figma 244:2097, kart 350×456 */
.sectors-showcase {
  background: var(--acik-zemin);
  padding: 40px 10px 80px;
}
.sectors-showcase .section-head { margin-bottom: 40px; }
.sectors-showcase .section-head .eyebrow { margin-bottom: 20px; }

.sector-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 13.33px;
  row-gap: 30px;
}

.sector-card {
  display: flex;
  flex-direction: column;
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}
.sector-card:hover { border-color: var(--yesil-orta); transform: translateY(-3px); }

.sector-card__media {
  position: relative;
  height: 200px;
  border-radius: 4px 4px 0 0;
}
.sector-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}
/* Turkuaz rozet görselin alt kenarına taşar */
.sector-card__badge {
  position: absolute;
  left: 28px;
  bottom: -20px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--yesil-orta);
  border-radius: 8px;
}
.sector-card__badge .icon { width: 32px; height: 32px; color: var(--beyaz); }

.sector-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  padding: 56px 20px 20px;
}
.sector-card__body h3 {
  font-size: var(--fs-slogan);
  font-weight: 700;
  line-height: 1.1;
  color: var(--yesil-orta);
}
.sector-card__body p {
  font-size: var(--fs-aciklama); /* Figma: satır adımı 17px → 14px */
  color: var(--koyu-acik);
  line-height: normal;
}
.sector-card .btn { align-self: flex-start; margin-top: auto; }

/* --------------------------------------------------------------------------
   Sektörler — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .feature-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .feature-item:nth-child(odd) { border-left: 0; }

  .sector-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
}

@media (max-width: 991px) {
  .sector-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-card__body h3 { font-size: 24px; }
}

@media (max-width: 600px) {
  .feature-panel { grid-template-columns: 1fr; }
  .feature-item { border-left: 0; }

  .sector-card-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FORM ÖĞELERİ — iletisim ve bayilik sayfalarında ortak
   ========================================================================== */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  border-radius: var(--radius);
  font-size: var(--fs-aciklama);
}
.form-note--ok { background: rgba(0, 175, 170, .12); border: 1px solid var(--yesil-orta); color: var(--yesil-acik); }
.form-note--err { background: rgba(227, 6, 19, .1); border: 1px solid #e30613; color: #ffb3b8; }

.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  padding: 20px;
  font: inherit;
  font-size: var(--fs-baslik);
  color: var(--beyaz);
  background: transparent;
  border: 1px solid var(--koyu-acik);
  border-radius: 8px;
  transition: border-color .18s ease;
}
.field input { height: 60px; }
.field textarea { height: 205px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--beyaz); opacity: .85; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--yesil-acik); }
.field[data-hatali] input,
.field[data-hatali] textarea { border-color: #e30613; }

.form-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #ff8a92;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-aciklama);
  color: var(--beyaz);
}
.form-consent input {
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--yesil-orta);
}
.form-consent a { color: var(--yesil-acik); text-decoration: underline; }

/* ==========================================================================
   İLETİŞİM — Figma 189:1490
   ========================================================================== */

/* Adres kutucukları — Figma 199:1716 (1920×261), kutu 346×191 */
.contact-cards {
  background: var(--koyu-koyu);
  padding: 35px 10px;
}
.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18.67px;
}
.contact-card {
  display: flex;
  gap: 20px;
  min-height: 191px;
  padding: 24px 20px;
  background: var(--koyu-orta);
  border: 1px solid var(--koyu-acik);
  border-radius: 8px;
  transition: border-color .18s ease;
}
.contact-card:hover { border-color: var(--yesil-acik); }
.contact-card .icon { width: 48px; height: 48px; color: var(--yesil-acik); margin-top: 26px; }
.contact-card__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.contact-card h3 {
  font-size: var(--fs-aciklama);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yesil-acik);
}
.contact-card p {
  margin-top: 22px;
  font-size: var(--fs-baslik);
  color: var(--beyaz);
  line-height: normal;
}
.contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  font-size: var(--fs-aciklama);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-acik);
}
.contact-card__link svg { transition: transform .18s ease; }
.contact-card:hover .contact-card__link svg { transform: translateX(4px); }

/* Form + kanallar — Figma 201:1964 (1920×710) */
.contact-main {
  background: var(--koyu-koyu);
  padding: 40px 10px;
}
.contact-main .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-col { max-width: 560px; min-width: 0; }
.contact-col--right { justify-self: end; }

.contact-head { margin-bottom: 30px; }
.contact-head .eyebrow { color: var(--yesil-acik); }
.contact-head h2 {
  margin-top: 20px;
  font-size: var(--fs-slogan);
  font-weight: 500;
  color: var(--beyaz);
}

.contact-form { display: flex; flex-direction: column; gap: 17px; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form .btn { align-self: flex-start; margin-top: 13px; }

/* Diğer iletişim kanalları — iletisim-farkli bileşeni, 560×77.5 */
.channel-list { display: flex; flex-direction: column; gap: 17px; }
.channel {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  background: var(--koyu-orta);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color .18s ease;
}
.channel:hover { border-color: var(--yesil-acik); }
.channel .icon { width: 40px; height: 40px; color: var(--yesil-acik); }
.channel__body { flex: 1; min-width: 0; }
.channel h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--beyaz); }
.channel p { margin-top: 4px; font-size: var(--fs-aciklama); color: var(--koyu-text); }
.channel__go { flex: none; color: var(--yesil-acik); transition: transform .18s ease; }
.channel:hover .channel__go { transform: translateX(4px); }

.contact-highlight {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding: 10px 20px;
  background: var(--koyu-orta);
  border: 1px solid var(--koyu-acik);
  border-radius: 8px;
}
.contact-highlight .icon { width: 74px; height: 74px; color: var(--yesil-acik); }
.contact-highlight__body { border-left: 1px solid var(--koyu-acik); padding: 10px 0 10px 20px; }
.contact-highlight h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--yesil-acik); }
.contact-highlight p { margin-top: 18px; font-size: var(--fs-aciklama); color: var(--beyaz); line-height: normal; }

/* Harita — Figma 202:1975 (1920×662) */
.contact-map { position: relative; height: 662px; background: var(--koyu-koyu); }
.contact-map img { width: 100%; height: 100%; object-fit: cover; }
/* Harita grimsi (istenen "gri harita" görünümü); üzerine gelince renklenir. */
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(1) contrast(0.92); transition: filter .45s ease; }
.contact-map:hover iframe { filter: grayscale(0) contrast(1); }
.contact-map .btn {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  background: var(--beyaz);
}

/* Alt güven şeridi — Figma 202:2025 (1920×168) */
.trust-strip {
  background: var(--acik-zemin);
  padding: 36px 10px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.trust-item {
  display: flex;
  gap: 12px;
  padding: 0 22px;
  border-left: 1px solid #dcdddf;
}
.trust-item:first-child { border-left: 0; }
.trust-item .icon { width: 72px; height: 72px; color: var(--koyu-acik); }
.trust-item h3 { font-size: var(--fs-baslik); font-weight: 700; color: var(--koyu-acik); }
.trust-item p { margin-top: 9px; font-size: var(--fs-aciklama); color: var(--koyu-text); line-height: normal; }

/* --------------------------------------------------------------------------
   İletişim — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .contact-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .trust-item:nth-child(3n + 1) { border-left: 0; }
}

@media (max-width: 991px) {
  .contact-main .container { grid-template-columns: 1fr; gap: 48px; }
  .contact-col, .contact-col--right { max-width: 100%; justify-self: stretch; }
  .contact-map { height: 420px; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(3n + 1) { border-left: 1px solid #dcdddf; }
  .trust-item:nth-child(2n + 1) { border-left: 0; }
}

@media (max-width: 600px) {
  .contact-card-grid { grid-template-columns: 1fr; }
  .contact-card .icon { margin-top: 0; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-map { height: 320px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-left: 0 !important; }
  .contact-highlight { flex-direction: column; text-align: center; }
  .contact-highlight__body { border-left: 0; border-top: 1px solid var(--koyu-acik); padding: 20px 0 0; }
}

/* ==========================================================================
   HABERLER + BLOG — ortak parçalar
   Figma: haberler 212:550, blog 248:2024
   ========================================================================== */

.archive {
  background: var(--acik-zemin);
  padding: 40px 10px 80px;
}

/* Kategori süzgeci — Figma 212:1137 */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  height: 39px;
  padding: 0 20px;
  font-size: var(--fs-aciklama);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--koyu-acik);
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.filter-pill:hover { border-color: var(--yesil-orta); color: var(--yesil-orta); }
.filter-pill[aria-current="true"] {
  background: var(--koyu-acik);
  border-color: var(--koyu-acik);
  color: var(--beyaz);
}

/* Tarih ve okuma süresi rozetleri */
.date-chip,
.read-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-text);
}
.date-chip svg { color: var(--yesil-orta); }
.read-chip svg { color: var(--koyu-text); }

/* Öne çıkan yazı — Figma 212:1299 */
.featured {
  display: grid;
  grid-template-columns: 855fr 585fr;
  margin-bottom: 40px;
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  overflow: hidden;
}
.featured__media { min-height: 425px; }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 50px;
}
.featured__body h2 {
  font-size: var(--fs-slogan);
  font-weight: 700;
  line-height: 1.25;
  color: var(--koyu-acik);
}
.featured__body p { font-size: var(--fs-aciklama); color: var(--koyu-acik); line-height: normal; }
.featured__meta { display: flex; flex-wrap: wrap; gap: 26px; }
.featured .btn { align-self: flex-start; }

/* Kart ızgarası */
.post-grid { display: grid; gap: 21px; }
.post-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.post-card:hover { border-color: var(--yesil-orta); transform: translateY(-3px); }
.post-card__media { height: 270px; flex: none; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  padding: 26px 24px 24px;
}
.post-card__cat {
  font-size: var(--fs-aciklama);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-orta);
}
.post-card h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--koyu-acik);
}
.post-card p { font-size: var(--fs-aciklama); color: var(--koyu-acik); }
.post-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
}

/* Blog kartı: başlık turkuaz, gövde daha küçük — Figma card-blog 311×397 */
.post-card--blog .post-card__media { height: 190px; }
.post-card--blog .post-card__body { gap: 14px; padding: 20px; }
.post-card--blog h3 { font-size: 20px; color: var(--yesil-orta); }
.post-card--blog p { font-size: var(--fs-aciklama); color: var(--koyu-acik); }

/* Blog: içerik + kenar çubuğu */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 425px;
  gap: 50px;
  align-items: start;
}
.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.blog-toolbar h2 { font-size: var(--fs-baslik); font-weight: 500; color: var(--koyu-acik); }

/* Kenar çubuğu kutuları */
.widget {
  padding: 20px;
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
}
.widget + .widget { margin-top: 30px; }
.widget h2 {
  font-size: var(--fs-baslik);
  font-weight: 700;
  color: var(--koyu-acik);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--yesil-orta);
  display: inline-block;
}

.mini-list { display: flex; flex-direction: column; gap: 26px; margin-top: 24px; }
.mini-post { display: flex; gap: 16px; align-items: flex-start; }
.mini-post__media { flex: none; width: 99px; height: 99px; border-radius: 4px; overflow: hidden; }
.mini-post__media img { width: 100%; height: 100%; object-fit: cover; }
.mini-post h3 {
  font-size: var(--fs-baslik);
  font-weight: 700;
  line-height: 1.3;
  color: var(--koyu-acik);
  transition: color .18s ease;
}
.mini-post:hover h3 { color: var(--yesil-orta); }
.mini-post time { display: block; margin-top: 14px; font-size: var(--fs-aciklama); color: var(--koyu-text); }

/* E-bülten — Figma eposta-bulten */
.newsletter p { margin-top: 18px; font-size: var(--fs-aciklama); color: var(--koyu-acik); line-height: normal; }
.newsletter form { margin-top: 22px; }
.newsletter input {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  font: inherit;
  font-size: var(--fs-aciklama);
  color: var(--koyu-acik);
  background: transparent;
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius) var(--radius) 0 0;
}
.newsletter input::placeholder { color: var(--koyu-text); }
.newsletter input:focus { outline: none; border-color: var(--yesil-orta); }
.newsletter button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 48px;
  font-size: var(--fs-baslik);
  letter-spacing: .04em;
  color: var(--beyaz);
  background: var(--yesil-orta);
  border: 1px solid var(--yesil-orta);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: background-color .18s ease;
}
.newsletter button:hover { background: #009a95; }
.newsletter__note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-text);
  line-height: normal;
}
.newsletter__note .icon { width: 40px; height: 40px; color: var(--koyu-text); }

/* Etiketler — Figma etiket bileşeni */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-acik);
  background: var(--acik-zemin);
  border: 1px solid #dcdddf;
  border-radius: var(--radius);
  transition: border-color .18s ease, color .18s ease;
}
.tag:hover,
.tag[aria-current="true"] { border-color: var(--yesil-orta); color: var(--yesil-orta); }

/* --------------------------------------------------------------------------
   Haberler / blog — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .featured { grid-template-columns: 1fr; }
  .featured__media { min-height: 320px; }
  .featured__body { padding: 36px; }
  .post-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-layout { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .search { width: 100%; }
  .post-card h3 { font-size: 22px; }
}

@media (max-width: 600px) {
  .post-grid--3 { grid-template-columns: 1fr; }
  .featured__body { padding: 24px; }
  .post-card__media { height: 210px; }
  .post-card__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .blog-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   HABER / BLOG AYRINTI — Figma 217:849 ve 256:3258
   ========================================================================== */
.article-top {
  background: var(--koyu-koyu);
  padding: 34px 10px 40px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-text);
}
.article-meta .date-chip,
.article-meta .read-chip { color: var(--koyu-text); }
.article-meta .date-chip svg { color: var(--yesil-acik); }
.article-cat {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  font-size: var(--fs-aciklama);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--koyu-koyu);
  background: var(--yesil-acik);
  border-radius: var(--radius);
}
.article-share { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.article-share span { font-size: var(--fs-aciklama); color: var(--beyaz); }
.article-share a {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border: 1px solid var(--koyu-acik);
  border-radius: 50%;
  color: var(--beyaz);
  transition: border-color .18s ease, color .18s ease;
}
.article-share a:hover { border-color: var(--yesil-acik); color: var(--yesil-acik); }
.article-share .icon { width: 15px; height: 15px; }

.article-body { background: var(--acik-zemin); padding: 40px 10px 80px; }
.article-layout {
  display: grid;
  grid-template-columns: 1fr 425px;
  gap: 50px;
  align-items: start;
}

.article-hero {
  height: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.prose h1 { font-size: var(--fs-slogan); font-weight: 700; color: var(--koyu-acik); line-height: 1.25; }
.prose .lead { margin-top: 20px; font-size: var(--fs-baslik); color: var(--koyu-acik); line-height: normal; }
.prose h2 { margin-top: 36px; font-size: 20px; font-weight: 700; color: var(--koyu-acik); }
.prose p { margin-top: 18px; font-size: var(--fs-aciklama); color: var(--koyu-acik); }

/* Temel sıfırlama ul işaretlerini kaldırıyor; makale gövdesinde geri veriyoruz. */
.prose ul { margin-top: 18px; padding-inline-start: 22px; list-style: disc; }
.prose ol { margin-top: 18px; padding-inline-start: 22px; }
.prose li {
  margin-top: 8px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-acik);
  list-style: inherit;
}
.prose li::marker { color: var(--yesil-orta); }
.prose li strong { font-weight: 500; color: var(--koyu-koyu); }
.prose a { color: var(--yesil-orta); text-decoration: underline; text-underline-offset: 2px; }

.prose blockquote {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 34px 0 0;
  padding: 20px 24px;
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-left: 4px solid var(--yesil-orta);
  border-radius: var(--radius);
  font-size: var(--fs-baslik);
  color: var(--koyu-acik);
}
.prose blockquote .icon { width: 44px; height: 44px; color: var(--yesil-orta); }

.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; }
.article-tags > span { font-size: var(--fs-baslik); font-weight: 700; color: var(--koyu-acik); margin-right: 6px; }

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #dcdddf;
}
.article-nav a { display: block; }
.article-nav span {
  display: block;
  font-size: var(--fs-aciklama);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-orta);
}
.article-nav strong {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-baslik);
  font-weight: 700;
  color: var(--koyu-acik);
  line-height: normal;
  transition: color .18s ease;
}
.article-nav a:hover strong { color: var(--yesil-orta); }
.article-nav__next { text-align: right; }

.widget--cta { background: var(--koyu-koyu); border-color: var(--koyu-acik); padding: 30px; }
.widget--cta h2 {
  font-size: var(--fs-slogan);
  color: var(--beyaz);
  border: 0;
  padding: 0;
  line-height: 1.25;
}
.widget--cta p { margin-top: 20px; font-size: var(--fs-aciklama); color: var(--koyu-text); line-height: normal; }
.widget--cta .btn { margin-top: 26px; }

@media (max-width: 1240px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-hero { height: 340px; }
}
@media (max-width: 600px) {
  .article-share { margin-left: 0; }
  .article-hero { height: 220px; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav__next { text-align: left; }
}

/* ==========================================================================
   BAYİLİK — Figma 308:3710
   ========================================================================== */
.dealer { background: var(--koyu-koyu); padding: 40px 10px; }
.dealer .container { display: flex; flex-direction: column; gap: 40px; }

/* Koyu bant içinde açık gri, yuvarlatılmış panel — sayfadaki üç blok da böyle */
.panel {
  background: var(--koyu-orta);
  border-radius: 10px;
  padding: 30px;
}
.panel > .eyebrow { color: var(--yesil-acik); }
.panel__intro { margin-top: 22px; font-size: var(--fs-baslik); color: var(--beyaz); }

/* Avantajlar — Figma 318:3208 */
.perk-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 0 20px;
  border-left: 1px solid var(--koyu-acik);
}
.perk:first-child { border-left: 0; }
.perk .icon { width: 91px; height: 91px; color: var(--yesil-acik); }
.perk h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--yesil-acik); }
.perk p { font-size: var(--fs-aciklama); color: var(--beyaz); line-height: normal; }

/* Başvuru formu — Figma 308:3755 */
.dealer-form { margin-top: 36px; }
.dealer-form__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 60px;
}
.dealer-form__col { display: flex; flex-direction: column; gap: 17px; }
.dealer-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.dealer-form textarea { height: 190px; }

/* Koyu zemin üzerindeki açılır seçim */
.field select {
  width: 100%;
  height: 60px;
  padding: 0 44px 0 20px;
  font: inherit;
  font-size: var(--fs-baslik);
  color: var(--beyaz);
  background: transparent;
  border: 1px solid var(--koyu-acik);
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.field select:focus { outline: none; border-color: var(--yesil-acik); }
.field select option { color: var(--koyu-acik); background: var(--beyaz); }
.field--select { position: relative; }
.field--select svg { position: absolute; right: 20px; top: 26px; pointer-events: none; color: var(--beyaz); }

/* Dosya yükleme — Figma 319:3659 */
.upload {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: transparent;
  border: 1px solid var(--koyu-acik);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .18s ease;
}
.upload:hover { border-color: var(--yesil-acik); }
.upload .icon { width: 62px; height: 62px; color: var(--yesil-acik); }
.upload h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--yesil-acik); }
.upload p { margin-top: 8px; font-size: var(--fs-aciklama); color: var(--koyu-text); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__name { color: var(--yesil-acik) !important; }

.dealer-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
}

/* Bayilik sürecimiz — Figma 324:3025 */
.process {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  flex: 1;
  max-width: 268px;
}
.step .icon { width: 91px; height: 91px; color: var(--yesil-acik); }
.step h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--yesil-acik); }
.step p { font-size: var(--fs-aciklama); color: var(--beyaz); line-height: normal; }
.process__sep {
  flex: none;
  margin-top: 42px;
  color: var(--yesil-acik);
}

/* --------------------------------------------------------------------------
   Bayilik — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .perk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .perk:nth-child(3n + 1) { border-left: 0; }

  .process { flex-wrap: wrap; row-gap: 34px; }
  .process__sep { display: none; }
  .step { flex: 0 0 30%; }
}

@media (max-width: 991px) {
  .dealer-form__cols { grid-template-columns: 1fr; }
  .perk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk:nth-child(3n + 1) { border-left: 1px solid var(--koyu-acik); }
  .perk:nth-child(2n + 1) { border-left: 0; }
  .step { flex: 0 0 46%; }
}

@media (max-width: 600px) {
  .panel { padding: 20px; }
  .perk-grid { grid-template-columns: 1fr; }
  .perk { border-left: 0 !important; }
  .dealer-form__pair { grid-template-columns: 1fr; }
  .dealer-form__foot { flex-direction: column; align-items: stretch; }
  .dealer-form__foot .btn { width: 100%; }
  .step { flex: 0 0 100%; }
}

/* ==========================================================================
   SEKTÖR AYRINTI — Figma 244:2107
   ========================================================================== */
.sector-about { background: var(--acik-zemin); padding: 40px 10px 0; }
.sector-about .container {
  display: grid;
  grid-template-columns: 411fr 909fr;
  gap: 120px;
  align-items: center;
}
.sector-about h2 {
  margin-top: 26px;
  font-size: var(--fs-slogan);
  font-weight: 700;
  line-height: 1.2;
  color: var(--koyu-acik);
}
.sector-about > .container > div > p {
  margin-top: 26px;
  font-size: var(--fs-baslik);
  color: var(--koyu-acik);
  line-height: normal;
}
.sector-about__media { height: 345px; border-radius: var(--radius); overflow: hidden; }
.sector-about__media img { width: 100%; height: 100%; object-fit: cover; }

.check-list--dark { margin-top: 26px; gap: 10px; }
.check-list--dark li { color: var(--koyu-acik); font-size: var(--fs-baslik); gap: 12px; }
.check-list--dark svg { color: var(--koyu-acik); }

.sector-products { background: var(--acik-zemin); padding: 40px 10px 80px; }

/* ==========================================================================
   ÜRÜN AYRINTI — Figma 268:3822
   Ölçümler tema/urun-ayrinti.png üzerinden:
   sayfa zemini #F2F2F2 · ürün kodu ve adı 30px Medium (bold DEĞİL)
   açıklama / madde / şerit / tablo metinleri 14px, satır adımı 17px
   tablo hücreleri şeffaf, çerçeve #8F979E · üç kolon 453.33px, ara 40px
   ========================================================================== */
.product-crumbs { background: var(--koyu-koyu); padding: 30px 10px; }
.product-detail { background: var(--acik-zemin); padding: 40px 10px 80px; }

/* Sol sütun 1/3: ürün fotoğrafları uzun-dar (en/boy 0.21–0.72), dar-uzun bir
   kutu onlara 676px'lik kutudan çok daha iyi oturuyor — eski kutuda %77 boş
   beyaz kalıyordu. Sağ sütun 2/3: eski üç kolonun tamamı buraya toplandı. */
.product-top {
  display: grid;
  /* minmax(0,…) şart: yalın '1fr 2fr' = 'minmax(auto,1fr)', ve özet şeridin
     4 kolonluk min-content genişliği sol sütunu 1/3'ün üstüne itiyordu (591px). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
  align-items: start;
}

/* Görsel + şerit + butonlar birlikte kayar; sayfa uzunken görsel takip etsin. */
.product-media {
  position: sticky;
  top: 24px;
}

/* --- Galeri ------------------------------------------------------------- */
.product-gallery__stage {
  position: relative;
  /* Yükseklik ~2 katına çıktı (498 → 860) AMA viewport'u AŞMAZ: kullanıcı
     ürün görselini görmek için kaydırmak zorunda kalmasın.
     232px = sahnenin tepesi (ölçüldü: 212px — menü + kırıntı şeridi + üst
     boşluk) + 20px nefes payı. Alt sınır kısa ekranları korur. */
  height: clamp(360px, calc(100vh - 232px), 860px);
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Mutlak konum + flex: ızgarada yüzdeli max-height çözülmüyordu,
   flex kabında kesin yükseklikten çözülüyor. */
.product-gallery__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  cursor: zoom-in;
  transition: opacity .25s ease;
}
.product-gallery__slide.is-active { opacity: 1; visibility: visible; }
.product-gallery__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.product-gallery__tools {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 10px;
  z-index: 2;
}
.gallery-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--koyu-acik);
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: 50%;
  transition: color .18s ease, border-color .18s ease;
}
.gallery-btn:hover { color: var(--yesil-orta); border-color: var(--yesil-orta); }

.product-gallery__thumbs { display: flex; gap: 14px; margin-top: 14px; }
.product-gallery__thumb {
  width: 88px;
  height: 88px;
  padding: 8px;
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  transition: border-color .18s ease;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumb:hover { border-color: var(--yesil-orta); }
.product-gallery__thumb.is-active { border-color: var(--yesil-orta); box-shadow: inset 0 0 0 1px var(--yesil-orta); }

/* Büyütme katmanı */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(17, 22, 27, .92);
  animation: lb-in .18s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__figure { margin: 0; text-align: center; }
.lightbox__figure img {
  max-width: 88vw;
  max-height: 76vh;
  object-fit: contain;
  background: var(--beyaz);
  border-radius: var(--radius);
}
.lightbox__figure figcaption { margin-top: 18px; font-size: var(--fs-aciklama); color: var(--beyaz); }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--beyaz);
  border: 1px solid var(--koyu-acik);
  border-radius: 50%;
  transition: color .18s ease, border-color .18s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { color: var(--yesil-acik); border-color: var(--yesil-acik); }
.lightbox__close { top: 28px; right: 28px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 28px; }
.lightbox__nav--next { right: 28px; }

/* --- Ürün bilgisi ------------------------------------------------------- */
.product-info .eyebrow { color: var(--yesil-orta); }
.product-info__code {
  margin-top: 27px;
  font-size: var(--fs-slogan);
  font-weight: 500;
  color: var(--koyu-acik);
}
.product-info h1 {
  margin-top: 10px;
  font-size: var(--fs-slogan);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--koyu-acik);
}
/* .product-info__lead / __intro / __bullets kaldırıldı: bastıkları ozet/giris/
   maddeler alanları "Ürün Açıklaması" ve "Özellikleri" bloklarını tekrarlıyordu.
   (ozet SEO meta açıklaması olarak yaşamaya devam ediyor.) */

/* Özet şerit — dolgusuz, yalnız çerçeve. Görselin altında, raf ömrü + sıcaklık. */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
  padding: 10px;
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
}
/* Sol sütun dar (1/3): iki öğe yan yana sığar, dördü sığmazdı. */
.spec-strip--ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;            /* ızgara hücresi içeriğe göre şişmesin */
  padding: 10px 14px;
  border-left: 1px solid #dcdddf;
}
.spec:first-child { border-left: 0; }
.spec .icon { width: 40px; height: 40px; color: var(--yesil-orta); }
.spec h2 {
  font-size: var(--fs-aciklama);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-orta);
}
.spec p {
  margin-top: 5px;
  font-size: var(--fs-aciklama);
  line-height: normal;
  color: var(--koyu-acik);
}

.product-actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.btn--fill-teal {
  background: var(--yesil-orta);
  border-color: var(--yesil-orta);
  color: var(--beyaz);
}
.btn--fill-teal:hover { background: #009a95; border-color: #009a95; }
.product-actions .icon { width: 18px; height: 18px; }

/* --- Üç kolon ----------------------------------------------------------- */
/* Eski üç-kolon kabı (.product-cols/.product-col) kaldırıldı: içeriği sağ
   sütuna (.product-info) taşındı, bloklar orada alt alta akıyor. */
.product-info > .block { margin-top: 36px; }
.product-info > .block:first-of-type { margin-top: 40px; }
.block + .block { margin-top: 40px; }
.usage-block, .related, .video-block { margin-top: 40px; }

/* --- Ürün videosu -------------------------------------------------------- */
/* 16:9 kabuk: hem <video> hem YouTube cephesi/iframe'i aynı oranda oturur,
   yükleme sırasında düzen kaymaz (CLS = 0). */
.video-block .video-facade,
.video-block .video-file,
.video-block iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  background: #000;
}
.video-block .video-facade {
  position: relative;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.video-block .video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* YouTube hqdefault 4:3 gelir; üst/alt siyah şeritleri kırpar. */
}
.video-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease;
}
.video-facade:hover .video-facade__play { opacity: .85; }
.video-facade:focus-visible { outline: 2px solid var(--yesil-orta); outline-offset: 3px; }
/* Anasayfa "En Çok Bakılan" karuseli: .related'ın ürün-içi margin'ini sıfırla,
   anasayfa bölüm ritmine uygun dikey padding ver. */
.cok-bakilan.related { margin-top: 0; padding: 64px 0; }
.cok-bakilan .related__head { margin-bottom: 24px; }

.block__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.block__head .icon { width: 27px; height: 27px; color: var(--yesil-orta); }
.block__head h2 {
  font-size: var(--fs-baslik);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-orta);
}

.block__text { font-size: var(--fs-aciklama); line-height: normal; color: var(--koyu-acik); }

.feature-list { display: flex; flex-direction: column; gap: 11px; }
.feature-list li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-aciklama);
  color: var(--koyu-acik);
}
.feature-list__check { flex: none; width: 20px; height: 20px; color: var(--yesil-orta); }

/* Teknik tablo: şeffaf hücre, tek renk çerçeve, satır 27px */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th,
.spec-table td {
  height: 27px;
  padding: 4px 8px;
  font-size: var(--fs-aciklama);
  font-weight: 500;
  text-align: left;
  color: var(--koyu-acik);
  border: 1px solid var(--koyu-text);
}
.spec-table th { width: 62%; }

/* Ambalaj tablosu: 5 kolonlu, başlık satırlı. Teknik tablodaki 62%'lik th
   genişliği burada yanlış — kolonlar içeriğe göre paylaşsın. */
.spec-table--ambalaj th { width: auto; }
.spec-table--ambalaj thead th {
  font-weight: 700;
  white-space: nowrap;
  background: rgba(0, 0, 0, .03);
}
.spec-table--ambalaj td { white-space: nowrap; }

/* Dar ekranda tablo sayfayı yatay kaydırtmasın; kendi içinde kaysın. */
.tablo-kaydir { overflow-x: auto; }

/* Renk seçenekleri — yuvarlak örnek + ad */
.renk-listesi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.renk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-aciklama);
  line-height: normal;
  color: var(--koyu-acik);
}
.renk__ornek {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Beyaz/açık renkler zeminde kaybolmasın diye her örnekte çerçeve var. */
  border: 1px solid var(--koyu-text);
}

/* Dökümanlar — Figma 284:2946: kart 67.5px, aralık 13px */
.doc-list { display: flex; flex-direction: column; gap: 13px; }
.doc {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 67px;
  padding: 10px 16px;
  background: var(--beyaz);
  border: 1px solid var(--koyu-text);
  border-radius: var(--radius);
  transition: border-color .18s ease;
}
.doc:hover { border-color: var(--yesil-orta); }
.doc__file { width: 36px; height: 36px; color: var(--yesil-orta); }
.doc__body { flex: 1; min-width: 0; }
.doc h3 { font-size: var(--fs-baslik); font-weight: 500; color: var(--koyu-acik); }
.doc p { margin-top: 3px; font-size: var(--fs-aciklama); color: var(--koyu-text); }
.doc__dl { width: 24px; height: 24px; color: var(--koyu-text); transition: color .18s ease; }
.doc:hover .doc__dl { color: var(--yesil-orta); }

/* Kullanım alanları — görsel 214×143, açıklama 14px */
/* Sağ sütuna (2/3) taşındı: altı kart yan yana sığmıyordu, üçlü ızgara.
   Başlık görselin İÇİNDE (sektör kartlarındaki kalıp): kart+altyazı ızgarası
   jenerik duruyordu ve dikeyde iki kat yer kaplıyordu. */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.usage {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
/* 3:2 = kaynak görsellerin (ve Figma'daki 214x143 kartın) kendi oranı.
   Sabit 132px yükseklik kartı 2.28:1 yapıyor ve cover fotoğrafın yüksekliğinin
   ~%34'ünü kırpıp atıyordu — uygulama fotoğrafları şeride dönüyordu. */
.usage img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  transition: transform .35s ease;
}
.usage:hover img { transform: scale(1.06); }

/* Degrade: başlık her fotoğrafta okunur kalsın (açık görselde beyaz yazı kaybolur). */
.usage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 22, 28, 0) 42%, rgba(16, 22, 28, .82) 100%);
  pointer-events: none;
}
.usage figcaption {
  position: absolute;
  right: 10px;
  bottom: 9px;
  left: 10px;
  z-index: 1;
  font-size: var(--fs-aciklama);
  font-weight: 500;
  line-height: 1.3;
  color: var(--beyaz);
}

/* Görselsiz kullanım alanı — havuzdaki alanların çoğunda fotoğraf yok.
   Fotoğraflı kartın degrade + üste binen başlık düzeni burada işlemez
   (üzerine bineceği görsel yok): kart açık zeminli, başlık akış içinde. */
.usage--metin {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 16px;
  background: var(--acik-zemin);
  border-inline-start: 3px solid var(--yesil-orta);
}
.usage--metin::after { content: none; }
.usage--metin figcaption {
  position: static;
  color: var(--koyu-koyu);
}

/* .usage-track kaldırıldı: kullanım alanları artık kaydırmalı ray değil,
   kaç alan olursa olsun hepsi ızgarada görünür (alt satıra sarar). */

/* İlgili ürünler — 6 kart, oklarla kaydırılır */
.related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.related__head .block__head { margin-bottom: 0; }
.related__nav { display: flex; gap: 10px; }

.related-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5 * 16px) / 6);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* `overflow-x: auto` kabı DİKEYDE de kırpar (spec: bir eksen auto olunca
     diğeri visible kalamaz). Kart hover'da translateY(-3px) ile kalkınca üst
     kenarı bu kırpmaya giriyordu. İçeriden pay verilir, dışarıdan negatif
     margin ile geri alınır → görünen boşluk aynı kalır, kırpma biter. */
  padding-top: 8px;
  margin-top: -8px;
  padding-bottom: 8px;
}
.related-track::-webkit-scrollbar { display: none; }
.related-track > * { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   Ayrıntı sayfaları — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .sector-about .container { grid-template-columns: 1fr; gap: 40px; }
  .sector-about__media { height: 300px; }

  /* Tek sütuna düşünce görsel yapışkan kalmamalı ve viewport'un yarısını
     aşmamalı; altındaki metne yer kalsın. minmax(0,1fr) ŞART (düz 1fr =
     minmax(auto,1fr) → spec-strip/tablo min-content'i sütunu viewport dışına
     itip yatay kaydırma yaratıyordu; temel kuraldaki minmax(0,…) korunmalı). */
  .product-top { grid-template-columns: minmax(0, 1fr); }
  .product-media { position: static; }
  .product-gallery__stage { height: clamp(320px, 52vh, 460px); }
  .related-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}

@media (max-width: 991px) {
  .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec:nth-child(odd) { border-left: 0; }
  .related-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  .lightbox { padding: 20px; }
  .lightbox__close { top: 14px; right: 14px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

@media (max-width: 600px) {
  .product-gallery__stage { height: clamp(300px, 48vh, 380px); }
  .product-gallery__thumb { width: 68px; height: 68px; }
  .spec-strip { grid-template-columns: 1fr; }
  /* Tek kolonda ayraç üstte ve İLKİ hariç hepsinde: 2×2 için yazılan
     nth-child(n+3) burada 2. öğeyi ayraçsız bırakıyordu. */
  .spec { border-left: 0; }
  .spec:nth-child(n + 2) { border-top: 1px solid #dcdddf; }
  .product-actions { gap: 12px; }
  .product-actions .btn { width: 100%; }
  .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .usage-block .related__head { flex-direction: column; align-items: flex-start; }
  .related-track { grid-auto-columns: calc((100% - 16px) / 2); }
  .spec-table th, .spec-table td { padding: 6px; }
  .spec-table th { width: 55%; }
  .related__head { flex-direction: column; align-items: flex-start; }
}

/* Dar telefonlarda ürün kartı iki kolona sığmıyor: buton nowrap olduğu için
   kartın en küçük genişliği ~182px. 430px altında tek kolona düşürüyoruz. */
@media (max-width: 430px) {
  .product-grid { grid-template-columns: 1fr; }
  .related-track { grid-auto-columns: 82%; }
  .usage-grid { grid-template-columns: 1fr; }
}

/* ============================ Duyuru popup (<dialog>) ============================ */
.duyuru{max-width:480px;width:calc(100% - 2rem);border:none;border-radius:16px;padding:0;
  overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.3);background:var(--beyaz,#fff);color:var(--koyu-koyu,#11161b)}
.duyuru::backdrop{background:rgba(17,22,27,.6);backdrop-filter:blur(2px)}
.duyuru__kapat{position:absolute;top:10px;right:12px;z-index:2;width:34px;height:34px;border:none;
  border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.duyuru__kapat:hover{background:rgba(0,0,0,.6)}
.duyuru__resim{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}
.duyuru__govde{padding:1.75rem}
.duyuru__govde h2{margin:0 0 .6rem;font-size:1.4rem}
.duyuru__govde p{margin:0 0 1.2rem;color:var(--koyu-acik,#363b40);line-height:1.55}
.duyuru__govde .btn{width:100%;justify-content:center}
@media (max-width:480px){.duyuru__govde{padding:1.25rem}.duyuru__govde h2{font-size:1.2rem}}

/* Header arama ikonu */
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  color:inherit;border-radius:8px;transition:background .2s,color .2s}
.nav-search:hover{color:var(--yesil-orta,#00afaa);background:rgba(0,0,0,.05)}

/* ============================ ÜRETİM GALERİSİ (galeri.php) ============================ */
.gallery-page { padding: 58px 0 84px; }

/* Mozaik: 4 sütun, bazı hücreler geniş/uzun → premium asimetri (dense packing
   boşlukları doldurur). Hücre bir <button>; tıklayınca main.js lightbox açar. */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 216px;
  grid-auto-flow: dense;
  gap: 14px;
}
.gallery-mosaic__cell--wide { grid-column: span 2; }
.gallery-mosaic__cell--tall { grid-row: span 2; }

.gallery-mosaic__cell {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--cizgi, #e5e8ea);
  border-radius: var(--radius);
  background: var(--koyu-koyu);
  cursor: zoom-in;
  display: block;
}
.gallery-mosaic__cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.gallery-mosaic__cell:hover img,
.gallery-mosaic__cell:focus-visible img { transform: scale(1.07); }
.gallery-mosaic__cell:focus-visible { outline: 2px solid var(--yesil-orta); outline-offset: 2px; }

/* Alt degrade + başlık/açıklama — hover/odakta belirir. */
.gallery-mosaic__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 16px 15px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; color: #fff;
  background: linear-gradient(transparent, rgba(6,10,14,.82));
  transform: translateY(10px); opacity: 0;
  transition: transform .38s ease, opacity .38s ease;
  pointer-events: none;
}
.gallery-mosaic__cell:hover .gallery-mosaic__overlay,
.gallery-mosaic__cell:focus-visible .gallery-mosaic__overlay { transform: none; opacity: 1; }
.gallery-mosaic__overlay strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.gallery-mosaic__overlay em { font-size: 12.5px; font-style: normal; opacity: .82; }

/* Yakınlaştırma rozeti — sağ üst, hover/odakta belirir. */
.gallery-mosaic__zoom {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--koyu-koyu);
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  opacity: 0; transform: scale(.82);
  transition: opacity .3s ease, transform .3s ease;
}
.gallery-mosaic__cell:hover .gallery-mosaic__zoom,
.gallery-mosaic__cell:focus-visible .gallery-mosaic__zoom { opacity: 1; transform: none; }

@media (max-width: 991px) {
  .gallery-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 190px; }
}
@media (max-width: 700px) {
  .gallery-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  /* Dar ekranda asimetri karmaşayı artırır → uzun hücre normale döner, geniş 2 sütun kalır. */
  .gallery-mosaic__cell--tall { grid-row: span 1; }
  .gallery-mosaic__overlay { opacity: 1; transform: none; padding: 24px 12px 11px; }
}

/* Görseli henüz yüklenmemiş ürün kartı — kırık resim yerine kod rozeti */
.product-card__media .gorsel-yok {
  display: grid; place-items: center;
  width: 100%; min-height: 100px;
  font-size: 13px; letter-spacing: .04em;
  color: var(--koyu-text); background: var(--acik-zemin);
  border-radius: 8px;
}

/* Katalog tuşundaki dosya boyutu — ikincil bilgi, ana etiketi bastırmasın. */
.btn__boyut {
  font-size: .82em;
  opacity: .7;
  font-weight: 400;
  margin-left: 2px;
  white-space: nowrap;
}

/* ==========================================================================
   YAN RAY — katalog · fiyat listesi · WhatsApp (sabit, sağda ortalı)
   ========================================================================== */
/* Renk: --yesil-acik (#91fffc) marka vurgu rengi. Zemin koyu, yazı/ikon açık;
   hover'da ters çevrilir (dolu açık zemin + koyu yazı).

   DAVRANIŞ: dinlenirken YALNIZ İKON görünür ve üçü de aynı boyda kare durur —
   sayfayı kapatmasın. Üzerine gelince düğme SOLA doğru açılıp yazıyı gösterir;
   üçü de aynı genişliğe açılır ki ray hizalı kalsın. İkon `row-reverse` ile sağ
   kenara sabitlenmiştir: düğme büyürken ikon yerinde durur, yalnız yazı çıkar. */
.yan-ray {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 900;                 /* duyuru modalinin altında */
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
:root[dir="rtl"] .yan-ray { right: auto; left: 0; }

.yan-ray__dugme {
  display: flex;
  flex-direction: row-reverse;  /* ikon sağda sabit, yazı soluna açılır */
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 50px;                  /* üçü de eşit kare */
  height: 50px;
  padding: 0 15px 0 0;
  border: 1px solid var(--yesil-acik);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: rgb(17 22 27 / .92);
  color: var(--yesil-acik);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
  transition: width .28s cubic-bezier(.4, 0, .2, 1), background .18s ease, color .18s ease;
}
:root[dir="rtl"] .yan-ray__dugme {
  flex-direction: row;
  border-right: 1px solid var(--yesil-acik);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  padding: 0 0 0 15px;
}
.yan-ray__dugme svg { flex: none; }

.yan-ray__etiket {
  opacity: 0;
  margin-right: 11px;
  transition: opacity .18s ease .05s;
}
:root[dir="rtl"] .yan-ray__etiket { margin-right: 0; margin-left: 11px; }

/* Açılma YALNIZ gerçek imleçli aygıtlarda: dokunmatikte :hover "yapışıp"
   düğmeyi açık bırakıyor. Klavye odağında da açılır (erişilebilirlik). */
/* Açık genişlik SABİT DEĞİL: main.js en uzun etiketi ölçüp `--ray-acik-en`
   değişkenini yazar. Sabit piksel kırılgandı — "PRICE LIST" 96px iken
   "FİYAT LİSTESİ" 107px; yeni bir dil (Almanca/Rusça) daha uzun olabilir ve
   yazı kırpılırdı. Üçü de AYNI genişliğe açılır (ray hizalı kalsın diye
   ölçüm en uzun etikete göre yapılır). JS çalışmazsa 175px yedeği kullanılır. */
@media (hover: hover) {
  .yan-ray__dugme:hover { width: var(--ray-acik-en, 175px); }
  .yan-ray__dugme:hover .yan-ray__etiket { opacity: 1; }
}
.yan-ray__dugme:focus-visible {
  width: var(--ray-acik-en, 175px);
  outline: 2px solid var(--beyaz);
  outline-offset: 2px;
}
.yan-ray__dugme:focus-visible .yan-ray__etiket { opacity: 1; }

.yan-ray__dugme:hover,
.yan-ray__dugme:focus-visible {
  background: var(--yesil-acik);
  color: var(--koyu-koyu);
}

/* WhatsApp aynı rayda ama marka rengiyle ayrışsın: dolu yeşil. */
.yan-ray__dugme--whatsapp {
  background: var(--yesil-orta);
  border-color: var(--yesil-orta);
  color: var(--beyaz);
}
.yan-ray__dugme--whatsapp:hover,
.yan-ray__dugme--whatsapp:focus-visible {
  background: var(--yesil-acik);
  border-color: var(--yesil-acik);
  color: var(--koyu-koyu);
}

@media (max-width: 600px) {
  .yan-ray { gap: 6px; }
  .yan-ray__dugme { width: 44px; height: 44px; padding-right: 12px; }
  :root[dir="rtl"] .yan-ray__dugme { padding-right: 0; padding-left: 12px; }
}

/* Ray sola alınırsa (whatsapp_konum=sol) her şey aynalanır: kenarlık/köşe sağa,
   ikon SOL kenara sabitlenir ve yazı sağa doğru açılır. */
.yan-ray--sol { right: auto; left: 0; align-items: flex-start; }
.yan-ray--sol .yan-ray__dugme {
  flex-direction: row;
  border-right: 1px solid var(--yesil-acik);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  padding: 0 0 0 15px;
}
.yan-ray--sol .yan-ray__etiket { margin-right: 0; margin-left: 11px; }
.yan-ray--sol .yan-ray__dugme--whatsapp { border-right-color: var(--yesil-orta); }
@media (max-width: 600px) {
  .yan-ray--sol .yan-ray__dugme { padding: 0 0 0 12px; }
}

/* Belge menüsü — üst çubukta TEK, hafif öğe.
   Ana menüden bilinçli olarak daha küçük ve soluk: bir gezinme başlığı değil,
   yardımcı bir eylem. Katalog/fiyat listesine doğrudan erişim yan raydan
   sağlandığı için burada ağırlık taşımasına gerek yok. Soldaki ince çizgi
   ana menüden ayırır. */
.belge-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 0 0 21px;
  border: 0;
  background: none;
  color: rgb(255 255 255 / .62);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: color .18s ease;
}
.belge-baglanti::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 16px;
  margin-top: -8px;
  background: rgb(255 255 255 / .18);
}
:root[dir="rtl"] .belge-baglanti { padding: 0 21px 0 0; }
:root[dir="rtl"] .belge-baglanti::before { left: auto; right: 0; }
.belge-baglanti__ikon { flex: none; opacity: .85; }
.belge-baglanti:hover,
.belge-menu[data-acik] .belge-baglanti { color: var(--yesil-acik); }
.belge-baglanti:focus-visible { outline: 2px solid var(--yesil-acik); outline-offset: 3px; }

.belge-menu { position: relative; }
.belge-menu__tetik .chevron { width: 11px; height: 11px; opacity: .8; transition: transform .18s ease; }
.belge-menu__tetik[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.belge-menu__liste {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  min-width: 236px;
  padding: 8px;
  background: var(--koyu-koyu);
  border: 1px solid var(--koyu-acik);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .45);
  animation: mega-in .18s ease;
}
/* Tetik ile panel arası boşlukta imleç kaybolmasın (çapraz gidiş). */
.belge-menu__liste::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
:root[dir="rtl"] .belge-menu__liste { right: auto; left: 0; }

/* Grup başlığı: birden çok belge türü varsa hangisinin altında olduğunu söyler. */
.belge-menu__grup {
  padding: 8px 12px 4px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--koyu-text);
}
.belge-menu__grup + .belge-menu__grup,
.belge-menu__liste a + .belge-menu__grup {
  margin-top: 4px;
  border-top: 1px solid var(--koyu-acik);
  padding-top: 10px;
}

.belge-menu__liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--beyaz);
  text-decoration: none;
  font-size: 14px;
  transition: background .14s ease, color .14s ease;
}
.belge-menu__liste a:hover,
.belge-menu__liste a:focus-visible { background: var(--koyu-orta); color: var(--yesil-acik); }
.belge-menu__not { font-size: 12px; color: var(--koyu-text); white-space: nowrap; }
.belge-menu__liste a:hover .belge-menu__not { color: var(--beyaz); }

/* Kapak / arka kapak tek sayfa: yayının boş yarısı yüzünden kitap kenara
   kaymış görünüyordu. Kabı çeyrek yayın kadar kaydırıp sayfayı ortalar.
   (transform kullanılıyor; StPageFlip fare koordinatlarını
   getBoundingClientRect ile aldığı için sürükleme etkilenmez.) */
/* ÖZGÜLLÜK NOTU: page-flip.css style.css'ten SONRA yüklenir ve
   `.stf__parent { transform: translateZ(0) }` tek sınıflı kuralımızı eziyordu.
   Bu yüzden çift sınıf kullanılıyor; translateZ(0) da korunuyor (kütüphane onu
   GPU katmanı için koyuyor). */
.belge-kitap.belge-kitap--hazir { transition: transform .3s ease; }
.belge-kitap.belge-kitap--kapak { transform: translateX(-25%) translateZ(0); }
.belge-kitap.belge-kitap--arka  { transform: translateX(25%) translateZ(0); }
:root[dir="rtl"] .belge-kitap.belge-kitap--kapak { transform: translateX(25%) translateZ(0); }
:root[dir="rtl"] .belge-kitap.belge-kitap--arka  { transform: translateX(-25%) translateZ(0); }
/* Dar ekranda tek sayfa modu var, kaydırma anlamsız. */
@media (max-width: 820px) {
  .belge-kitap.belge-kitap--kapak,
  .belge-kitap.belge-kitap--arka { transform: translateZ(0); }
}

/* ==========================================================================
   AFİŞ ŞERİDİ — anasayfada yalnız görsel gösteren bölüm
   ========================================================================== */
/* Sayfayı boydan boya kaplamaz: `.container` içinde durur. Yükseklik
   karusellerle aynı hizada (~400px). Oran SABİT tutulur (görselden
   türetilmez) ki farklı ölçüdeki afişler şeridi zıplatmasın — düzen kayması
   olmaz (CLS = 0). Oranı bozan afiş kırpılır, panelde önerilen ölçü yazıyor. */
.afis-serit { padding: 24px 0; }
.afis-cerceve {
  position: relative;
  aspect-ratio: 18 / 5;          /* 1440 × 400 */
  max-height: 400px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--acik-zemin, #f4f6f7);
}
.afis-ray, .afis-slayt { position: absolute; inset: 0; }
.afis-slayt a { display: block; width: 100%; height: 100%; }
.afis-gorsel { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Oklar — galeri oklarıyla aynı dil, afişin üstünde hafif duruyor. */
.afis-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgb(17 22 27 / .55);
  color: var(--beyaz);
  cursor: pointer;
  transition: background .18s ease;
}
.afis-ok:hover { background: rgb(17 22 27 / .85); }
.afis-ok:focus-visible { outline: 2px solid var(--yesil-acik); outline-offset: 2px; }
.afis-ok--geri  { left: 14px; }
.afis-ok--ileri { right: 14px; }

.afis-noktalar {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.afis-nokta {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .5);
  cursor: pointer;
  transition: background .18s ease, width .18s ease;
}
.afis-nokta.aktif { background: var(--yesil-acik); width: 20px; border-radius: 4px; }

@media (max-width: 700px) {
  /* Dar ekranda 3,6:1 afiş şerit gibi incecik kalıyor; biraz yükselt. */
  .afis-cerceve { aspect-ratio: 2 / 1; }
  .afis-ok { width: 34px; height: 34px; }
}

/* ==========================================================================
   ANASAYFA LİSTE BÖLÜMLERİ (son haberler / son blog)
   ========================================================================== */
.ana-liste { padding: 56px 0; }
.ana-liste__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ana-liste__bas h2 { margin: 0; }