/* ==========================================================================
   OMAKS — düzeltme katmanı (override).

   Webflow export CSS'ine DOKUNULMAZ; bu dosya en son yüklenir ve gerektiği
   yerde onu ezer. İki iş yapar:
     1. İletişim formuna eklenen yeni öğelerin stilleri (kaynakta yoktu).
     2. Müşteri düzeltme PDF'indeki responsive/layout notları.

   Webflow breakpoint'leri: 991px (tablet), 767px, 479px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. İletişim formu — yeni öğeler
   -------------------------------------------------------------------------- */

/* .text-field tek satır input için tasarlandı (border-radius:100px, height:38px).
   Textarea'ya uygulanınca dev bir kapsül olur; makul kutuya çekilir. */
textarea.text-field,
.omaks-textarea {
  height: auto;
  min-height: 9rem;
  padding: .9rem 1.2rem;
  border-radius: 1.25rem;
  line-height: 1.55;
  resize: vertical;
}

/* Dosya seçici: gerçek input gizlenir, mevcut .button-b etiketi tetikler
   (kaynaktaki sahte "Upload File" submit butonunun yerini alır). */
.omaks-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

label.button-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 0;
}

.omaks-file-name {
  margin-top: .5rem;
  font-size: .8rem;
  opacity: .7;
  word-break: break-all;
}

/* KVKK onay kutusu — kaynakta checkbox stili hiç yoktu. */
.omaks-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1.1rem 0 .25rem;
}

.omaks-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .15rem;
  accent-color: #00c8b3;
  cursor: pointer;
}

.omaks-consent label {
  margin-bottom: 0;
  font-size: .85rem;
  line-height: 1.45;
  cursor: pointer;
}

.omaks-consent a {
  color: inherit;
  text-decoration: underline;
}

/* reCAPTCHA künyesi (rozet gizli olduğunda Google'ın şartı). */
.grecaptcha-badge {
  visibility: hidden;
}

.omaks-recaptcha-note {
  margin-top: 1rem;
  font-size: .72rem;
  line-height: 1.5;
  opacity: .6;
}

.omaks-recaptcha-note a {
  color: inherit;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   2. Menü buton durumları  (PDF: Normal gri · Hover mint · Pressed lacivert)
   -------------------------------------------------------------------------- */

/* Menü durumları artık Webflow export'unun kendi CSS'inden geliyor ve canlı
   site onunla birebir ölçüldü: normal rgba(66,66,66,.62) · hover #00c8b3 ·
   focus #0050bd · aktif sayfa #182857. Bu yüzden burada hover/current'ı
   tekrar tanımlamıyoruz (gereksiz) ve :active'i hiç ezmiyoruz — export'ta
   :active kuralı yok, basılıyken hover rengi görünür.

   NOT: Müşterinin ilk düzeltme PDF'indeki "Pressed lacivert" isteği bu yüzden
   kaldırıldı; geri istenirse tek kural yeter:
     .nav-link:active { color: var(--_brand-colors---primary-darker); }

   Tek ek: WordPress menüsü w--current sınıfını üretmezse aktif sayfa yine
   doğru renkte kalsın diye aria-current yedeği (export ile aynı rengi verir). */
.nav-link[aria-current="page"] {
  color: var(--_brand-colors---primary); /* #182857 */
}

/* Logo artık ana sayfaya link. Sadece görsel sarmalandı (dil değiştirici gerçek
   link içerdiği için tüm .navbar-brand sarmalanamaz — iç içe <a> geçersizdir).
   flex: satır-içi anchor'ın img'e ekleyeceği baseline boşluğunu önler. */
.logo-img-wrap > .omaks-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Hero-2 genel küçültme  (PDF #8, #9)
   quality referans; tüm ikincil hero'lar (about/quality/contact/blog +
   industries sekme hero'su) 40rem'den daha kompakt bir yüksekliğe iner.
   -------------------------------------------------------------------------- */

.secondary-hero-img {
  height: 28rem;
}

@media screen and (max-width: 991px) {
  .secondary-hero-img {
    height: 22rem;
  }
}

@media screen and (max-width: 767px) {
  .secondary-hero-img {
    height: 17rem;
  }
}

/* --------------------------------------------------------------------------
   4. Ödül kartları  (PDF #4) — küçült + tablet taşması
   -------------------------------------------------------------------------- */

.awards-product-img {
  max-height: 22rem;
  object-fit: contain;
}

@media screen and (max-width: 991px) {
  /* ECMA logosu + yıl etiketini kart içinde tut (overflow taşması). */
  .awards-wrapper {
    flex-wrap: wrap;
    max-width: 100%;
    overflow: hidden;
  }
  .award-year-tag {
    flex-shrink: 0;
  }
  .card-std {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   5. Ana sayfa haber kartları  (PDF #2)
   Önceki "dikey ortalama" için eklenen `.slider-wrapper { align-items:center }`
   görseli germek yerine küçültüp dikeyde ortalıyordu (kart destesinde görsel
   kartı doldurmuyordu). Export'ta base kural `.slider-wrapper { align-items:
   stretch; height:100% }` ile görsel kartı boydan boya dolduruyor. Export ile
   birebir olması için override KALDIRILDI — burada ek kural gerekmiyor.
   (Tablet'te export zaten `.container-page--card { display:block }` yapıyor,
   dolayısıyla eski tablet `align-items` kuralı da etkisizdi.)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5b. Mobil kart destesi (stacking) — üstte sıkıca kapansın
   Base sticky konumları masaüstü içindir: .stacking-cards top:460px,
   .is1 300px, .is2 380px. ~844px'lik telefon ekranında bu değerler çok büyük;
   deste ekranın altında, tepede kocaman boşlukla oluşup "tam kapanmıyordu".
   Telefonda sticky navbar'ın (~10vh) hemen altından başlatıp küçük basamaklarla
   üst üste sıkıca kapatıyoruz. Yalnızca ≤767px (mobil); tablet export gibi kalır.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .stacking-cards.is1 {
    top: 90px;
  }
  .stacking-cards.is2 {
    top: 140px;
  }
  .stacking-cards {
    top: 190px;
  }
}

.stacking-cards.is3 {
  top: 460px;
}

.stacking-cards {
  transition: filter 0.35s ease;
}

.stacking-cards.is-grayscale {
  filter: grayscale(1) blur(2px);
}

/* --------------------------------------------------------------------------
   5c. Haber kartları sticky track — section-news yükseklik tutarlılığı
   Webflow export, .section-news için breakpoint'e göre 180vh / 90vh / 170vh /
   auto arasında gidip geliyor. Sticky kartların top değerleriyle birleşince
   orta ekranlarda kartlar çok erken bırakılıyor. Scroll alanını sabit bir alt
   sınırla koruyup çok küçük ekranda doğal akışı geri bırakıyoruz.
   -------------------------------------------------------------------------- */

.section-news {
  height: auto;
  min-height: 260vh;
}

@media screen and (max-width: 767px) {
  .section-news {
    min-height: 220vh;
  }
}

@media screen and (max-width: 479px) {
  .section-news {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   6. About sütun hizası  (PDF #3) — hücreleri üstten hizala
   -------------------------------------------------------------------------- */

.section-body-3column .specss-cell {
  align-items: start;
}

.section-body-3column .specss-cell > .w-layout-cell {
  align-self: start;
}

/* --------------------------------------------------------------------------
   8. Quality kanıt kartları — masaüstünde eşit yükseklik
   Export'ta .proof-footer-wrap align-items:flex-start olduğu için kartlar
   içerik kadar uzuyor ve yükseklikler farklı kalıyor.
   -------------------------------------------------------------------------- */

.proof-footer-wrap {
  align-items: stretch;
}

.proof-footer-wrap .proof-cnt {
  flex: 1 1 0;
  height: auto;
  justify-content: flex-start;
}

.proof-footer-wrap .proof-cnt .grid-logo-container {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   7. Industries: son özellik bloğu ↔ CTA banner arası  (PDF #6) — 3rem desktop
   CTA, .industry-tab-container'ın hemen ardından gelen (sınıfsız) <section>.
   Boşluğu section'ın kendisine veriyoruz (cta-wrap margin'i collapse edebilir).
   -------------------------------------------------------------------------- */

.industry-tab-container + section {
  margin-top: 3rem;
}

@media screen and (max-width: 767px) {
  .industry-tab-container + section {
    margin-top: 2rem;
  }
}

/* --------------------------------------------------------------------------
   8. Products: sekme menüsü ↔ header arası  (PDF #7) — boşluğu azalt
   Ölçüm: header→içerik 72px (her sayfada) + .tabs-menu padding-top 36px.
   Products çıplak sekmelerle başladığı için bu boşluk belirgin. Yalnızca
   ürün sayfasını hedefle (.is-inv gövde sınıfı).
   -------------------------------------------------------------------------- */

.is-inv .section-submenu {
  margin-top: -2rem;
}

.is-inv .tabs-menu {
  padding-top: 2.5rem;
}

@media screen and (max-width: 991px) {
  .is-inv .section-submenu {
    margin-top: -2.5rem;
  }
}

/* --------------------------------------------------------------------------
   9. Footer tablet düzeni  (PDF #5)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .footer-wrap {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   10. Yatay kaydırma (horizontal scroll) — ölçülen 3 kaynak

   Ölçüm (headless, scrollWidth vs clientWidth):
     · TÜM sayfalar / masaüstü : 15px   → .navbar-logo-left-container.shadow-three
     · Ana sayfa               : 610px  → .bcklighti (.bg-wrap içinde)
     · Ürünler / mobil         : 20px   → .tabs-menu (sabit 50rem) + .tabs-2 (70vw)
   -------------------------------------------------------------------------- */

/* 10a. 100vw dikey kaydırma çubuğunu da sayar; içerik alanı ~15px daha dardır.
   Bu yüzden navbar her sayfada 15px taşıyordu. %100 = doğru referans. */
.navbar-logo-left-container.shadow-three {
  width: 100%;
  max-width: 100%;
}

/* 10b. Dekoratif ışık huzmeleri (radial-gradient) kapsayıcıdan taşıyor:
   .bcklighti left:67.2rem + width:60rem = 2035px. Kaynakta .bg-wrap
   overflow:visible; dekoratif oldukları için kapsayıcıda kırpıyoruz.

   SADECE yatayda kırpıyoruz: .bg-wrap height:100vw olduğundan 'overflow:hidden'
   ışığı dikeyde de (y≈1440) sert bir çizgiyle kesiyordu. 'clip' ayrıca
   'hidden'ın aksine kaydırma bağlamı yaratmaz, sticky navbar etkilenmez. */
.bg-wrap {
  overflow-x: clip;
}

/* 10c. Ürün sekme menüsü mobilde sabit genişlikten taşıyor. */
@media screen and (max-width: 991px) {
  .tabs-2 {
    max-width: 100%;
  }
  .tabs-menu {
    width: 100%;
    max-width: 100%;
  }
}

/* 10d. Hero slider'a transform:scale(1.3) uygulanmış (600px → 780px görsel).
   Bu taşma .hero-wrap'ten kasıtlı (tasarım), ama ~1280px'te viewport'u da
   6px aşıyor. Section'da yatay kırpma: bleed korunur, sayfa kaymaz.
   overflow-x:clip kullanıyoruz — 'hidden' aksine kaydırma bağlamı yaratmaz,
   böylece sticky navbar çalışmaya devam eder. */
.section-hero {
  overflow-x: clip;
}

/* 10e. Blog hero grid'i telefonda: kaynakta kolon '.25fr'. 1'den küçük fr'ın
   otomatik minimumu min-content olduğu için kolon, hücrenin 48px'lik iç
   boşluklarıyla 397px'e şişip 246px'lik konteynerden taşıyor. Telefonda
   tek akışkan kolon doğru düzen. */
@media screen and (max-width: 479px) {
  /* .quick-stack-5 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .quick-stack-5 > .w-layout-cell {
    min-width: 0;
  } */

  /* Kaynakta .paragraph telefonda 'width:20ch' — 1.4rem fontta ~335px eder ve
     kapsayıcıdan taşar. Niyeti koruyup tavan koyuyoruz: sığdığında 20ch,
     sığmadığında kapsayıcı kadar. */
  .paragraph {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   11. Hero: tablet/dar-masaüstü (992–1439px) — slider görseli yazıya biniyordu
   Ana sayfa hero'sunda slider `transform: scale(1.3)` uygulanmış; scale layout
   genişliğini değiştirmediği için görsel merkezinden ~90px sola taşıp başlığın
   üstüne biniyor (iPad portre 1024 ve yatay 1366 tam bu aralıkta). Ölçüldü:
   1180px'de 176px, 1366px'de 111px binme.
   Tasarımın ≤991'de zaten kullandığı DİKEY düzeni bu aralığa taşıyoruz: başlık
   üstte, slider altta (scale .9) — binme biter, mevcut tasarım diliyle tutarlı.
   Yalnızca ana sayfa hero'su (.hero-wrap/.slider-2); iç sayfa hero-2 etkilenmez.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 992px) and (max-width: 1439px) {
  /* Başlık ile header (navbar) arasındaki büyük boşluğu kıs. */
  .section-hero {
    padding-top: 0;
  }
  .navbar-logo-left-container.shadow-three {
    margin-bottom: 0.5rem;
  }
  .hero-wrap {
    flex-flow: column;
    max-width: 1320px;
    grid-row-gap: 1.25rem;
    row-gap: 1.25rem;
    margin-top: 0;
  }
  .hero-text-wrapper {
    align-items: center;
    width: 100%;
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  /* Başlık, alt başlık ve paragrafın hepsi ortalı olsun (tutarlılık). */
  .hero-text-wrapper .heading,
  .hero-text-wrapper .h2-heading-2,
  .hero-text-wrapper .paragraph-2 {
    width: 100%;
    text-align: center;
  }
  .heading {
    font-size: 3.5rem;
  }
  /* Slider'ı görsele yakın makul bir kareye indir (65% dev kareydi, içinde
     ~148px boşluk vardı) ve scale margin'ini kaldır — dikey boşluk azalır. */
  .slider-2 {
    width: 100%;
    max-width: 33rem;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
    transform: none;
  }
  /* Hero görselleri kaynakta `object-fit: cover` → kutuya sığmayınca KIRPIYOR
     (hero02 640×591 kare kutuda kesiliyordu, alttaki gölge dahil). `contain`
     ile görsel tam görünür, gölgesiyle birlikte, asla kırpılmaz. */
  .slider-2 .hero-img,
  .slider-2 .image-19,
  .slider-2 .hero-slider-img-wrap img {
    object-fit: contain;
  }
}

/* ===== CTA arkaplan düzeltmesi (izole, sayfa-özel) =====
   .cta-typo-wrap webflow.css'te kadın görselini (Article-01-Hero.avif) gömülü
   taşıyor: Industries'de panelden eklenen cta_image'i örtüyor; Home'da beyaz
   CTA yazısını açık zemin üstünde okunmaz kılıyor. */
/* Industries: kadını kaldır → arkadaki cta_image (cta-bg-2) görünsün. */
body.page-template-page-industries .cta-typo-wrap {
  background-image: none !important;
  background-color: transparent !important;
}

/* 1. Make the container fill its area and clip overflowing image edges */
.hero-2-bg {
    width: 100%;
    height: 100%;       /* or set a fixed height, e.g., 450px */
    overflow: hidden;   /* Ensures rounded corners clip the image properly */
    padding: 0 !important; /* Removes any padding keeping the image from the edges */
}

/* 2. Force the image to cover the full container area without distorting */
.secondary-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops edges slightly to fill 100% of the box */
    display: block !important;    /* Removes standard inline bottom gap */
}

/* Footer ofis basliklari (adres ustu mavi etiket) */
.footer-office-label{color:#00c8b3;text-transform:uppercase;font-weight:700;letter-spacing:.04em;font-size:.72em;line-height:1.35;margin:0 0 6px}
.footer-office-label--nl{margin-top:16px}

.footer-address-stack{display:block;width:100%}

/* FSC yatay logosu: sertifika numarasi okunabilsin diye seritte digerlerinden
   genis. min() ile kucuk ekranlarda ekranin 46%sini gecmez. 2026-09-29 */
.sp-logo-wrapper.is-fsc-wide{width:min(13rem,46vw)}

/* Sektörler bölümü giriş paragrafı: ortalı yazıda her satır farklı yerden
   başlıyor ve dağınık duruyor (müşteri geri bildirimi, 2026-10-02). Blok
   ortalı kalır, metin sola hizalanır — satır başları aynı hizaya gelir.
   Üstteki başlık ortalı bırakıldı. Yalnızca bu bölüm; aynı sınıf metrikler
   bölümünde de kullanılıyor, oraya dokunulmuyor. */
#Section-Industries .p2-centerded-2 {
  text-align: left;
  text-wrap: pretty;
}