/* =================================================================
   STINGA SITE-WIDE FIX v1.0
   Tüm sayfalarda geçerli düzeltmeler:
   - Transparan/düşük kontrastlı yazıları okunaklı yap
   - Mobil overflow / kesik yazı önleme
   - Long word break (uzun başlıkların ekranı bozmasını engelle)
   - Tablolar/kod/pre için yatay scroll
   - Touch target minimum
   ================================================================= */

/* ====== 1. KONTRAST İYİLEŞTİRMELERİ ====== */
/* Düşük opaklıklı beyaz yazıları okunaklı yap (footer, dark sections) */
[style*="rgba(255,255,255,.4)"],
[style*="rgba(255, 255, 255, .4)"],
[style*="rgba(255,255,255,0.4)"],
[style*="rgba(255,255,255,.5)"],
[style*="rgba(255, 255, 255, .5)"],
[style*="rgba(255,255,255,0.5)"],
[style*="rgba(255,255,255,.6)"],
[style*="rgba(255, 255, 255, .6)"],
[style*="rgba(255,255,255,0.6)"] {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Düşük opaklıklı koyu yazılar (light bg) */
[style*="rgba(0,0,0,.4)"],
[style*="rgba(0, 0, 0, .4)"],
[style*="rgba(0,0,0,0.4)"],
[style*="rgba(0,0,0,.5)"],
[style*="rgba(0, 0, 0, .5)"] {
  color: rgba(0, 0, 0, 0.78) !important;
}

/* Genel "muted" / "soft" sınıfları okunaklı yap */
.text-muted, .txt-muted, .muted-text,
.text-soft, .txt-soft, .soft-text,
.text-secondary, small.muted {
  color: #4a5568 !important;
}

body.dark-page .text-muted,
body.dark-page .txt-muted,
body.dark-page .muted-text,
body.dark-page .text-soft,
body.dark-page small.muted,
.dark-page .text-secondary {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Placeholder kontrastı */
::placeholder { color: #6b7280 !important; opacity: 1 !important; }

/* Form label/help text */
.form-text, .help-text, .form-help {
  color: #4a5568 !important;
}

/* ====== 2. MOBİL OVERFLOW KORUMASI ====== */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Yatay scroll yaratan büyük elementleri sınırla */
img, video, iframe, table, pre, code, blockquote,
.container, .container-fluid, .row,
section, article, header, footer, main, aside {
  max-width: 100%;
}

/* ====== 3. UZUN KELİME / KESİK YAZI ÖNLEME ====== */
h1, h2, h3, h4, h5, h6,
p, span, a, li, dt, dd, td, th, label, button,
.title, .baslik, .heading, .nav-link, .btn, .card-title {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* white-space:nowrap kullanan elementleri mobilde wrap'le */
@media (max-width: 768px) {
  /* Inline style ile nowrap zorlanmış elementleri mobilde wrap'a izin ver */
  [style*="white-space:nowrap"]:not(.keep-nowrap):not(.badge):not(.btn),
  [style*="white-space: nowrap"]:not(.keep-nowrap):not(.badge):not(.btn) {
    white-space: normal !important;
  }

  /* Mobilde küçük font'ları okunaklı yap */
  body { font-size: 15px; }
  p, li, td, th, label, .text { font-size: 15px; line-height: 1.6; }
  small, .small, .text-small { font-size: 12px !important; }
}

/* ====== 4. TABLO MOBİL ====== */
table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
  table { font-size: 13px; }
}

/* Pre / code blokları */
pre, code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  max-width: 100%;
}

/* ====== 5. RESİM RESPONSIVE ====== */
img {
  max-width: 100%;
  height: auto;
}

/* ====== 6. MOBİL HEADER / NAV TIKLAMA HEDEFİ ====== */
@media (max-width: 1099px) {
  nav a, .nav-link, .menu-link,
  .footer a, footer a,
  .breadcrumb a {
    min-height: 32px;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
  }
}

/* ====== 7. KART İÇİ İÇERİK TAŞMA ====== */
.card, .haber-card, .proje-card, .hizmet-card, article {
  overflow: hidden;
}
.card-title, .haber-card-title, .proje-card-title, .hizmet-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-text, .haber-card-text, .proje-card-text, .hizmet-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====== 8. KOYU ZEMİNDE LİNK OKUNAKLI ====== */
body.dark-page a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.menu-link) {
  color: #5dde9c;
}
body.dark-page a:not(.btn):not([class*="btn-"]):not(.nav-link):hover {
  color: #8effb7;
}

/* ====== 9. TRANSPARAN BUTONLAR / OVERLAY YAZILARI ====== */
/* Hero overlay yazılarına text-shadow ekle (transparan zeminlerde okunaklı) */
.slide-baslik, .slide-altyazi, .slide-etiket,
.hero-title, .hero-subtitle, .hero-text,
.banner-title, .banner-subtitle,
[class*="hero-"][class*="title"],
[class*="banner-"][class*="title"] {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.65);
}

/* ====== 10. INPUT KONTRAST ====== */
input, textarea, select {
  color: #0f1a2e;
  background-color: #fff;
}
body.dark-page input,
body.dark-page textarea,
body.dark-page select {
  color: #e8f4fd;
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ====== 11. SMOOTH SCROLL ====== */
html { scroll-behavior: smooth; }

/* ====== 12. MİNİMUM TIKLAMA ALANI (a11y kapsamı) ====== */
a, button, input[type="checkbox"], input[type="radio"],
input[type="button"], input[type="submit"] {
  min-height: 24px;
  min-width: 24px;
}

/* ====== 13. MOBİL: ADMIN İÇERİĞİNDEKİ AŞIRI KÜÇÜK FONT/OPAKLIK ====== */
/* DB'den gelen sayfa içeriklerinde inline style'la küçük yazı/transparan
   yazılar var. Mobilde bunları okunaklı boyuta yükselt.                  */
@media (max-width: 768px) {

  /* font-size 8-10 px → 12 px */
  [style*="font-size:8px"],   [style*="font-size: 8px"],
  [style*="font-size:9px"],   [style*="font-size: 9px"],
  [style*="font-size:10px"],  [style*="font-size: 10px"] {
    font-size: 12px !important;
  }
  /* font-size 11-13 px → 13-14 px */
  [style*="font-size:11px"],  [style*="font-size: 11px"],
  [style*="font-size:12px"],  [style*="font-size: 12px"] {
    font-size: 13px !important;
  }
  [style*="font-size:13px"],  [style*="font-size: 13px"] {
    font-size: 14px !important;
  }

  /* Düşük opaklık inline → minimum 0.7 (okunaklı) */
  [style*="opacity:.2"],  [style*="opacity: .2"],
  [style*="opacity:.25"], [style*="opacity: .25"],
  [style*="opacity:.3"],  [style*="opacity: .3"],
  [style*="opacity:.35"], [style*="opacity: .35"],
  [style*="opacity:.4"],  [style*="opacity: .4"],
  [style*="opacity:.45"], [style*="opacity: .45"],
  [style*="opacity:.5"],  [style*="opacity: .5"],
  [style*="opacity:.55"], [style*="opacity: .55"],
  [style*="opacity:0.2"], [style*="opacity:0.25"],
  [style*="opacity:0.3"], [style*="opacity:0.35"],
  [style*="opacity:0.4"], [style*="opacity:0.45"],
  [style*="opacity:0.5"], [style*="opacity:0.55"] {
    opacity: 0.78 !important;
  }

  /* Rotate edilmiş yazılar mobilde düz duruşa */
  [style*="rotate(90deg)"],
  [style*="rotate(-90deg)"],
  [style*="rotate(180deg)"],
  [style*="rotate(45deg)"],
  [style*="rotate(-45deg)"] {
    transform: none !important;
    writing-mode: horizontal-tb !important;
    display: block !important;
  }

  /* Inline max-width: NNNpx olan kapsayıcıları %100 yap */
  [style*="max-width:280px"],  [style*="max-width: 280px"],
  [style*="max-width:300px"],  [style*="max-width: 300px"],
  [style*="max-width:320px"],  [style*="max-width: 320px"],
  [style*="max-width:360px"],  [style*="max-width: 360px"],
  [style*="max-width:400px"],  [style*="max-width: 400px"],
  [style*="max-width:440px"],  [style*="max-width: 440px"],
  [style*="max-width:480px"],  [style*="max-width: 480px"],
  [style*="max-width:540px"],  [style*="max-width: 540px"],
  [style*="max-width:600px"],  [style*="max-width: 600px"],
  [style*="max-width:620px"],  [style*="max-width: 620px"],
  [style*="max-width:700px"],  [style*="max-width: 700px"],
  [style*="max-width:720px"],  [style*="max-width: 720px"] {
    max-width: 100% !important;
  }

  /* Inline width:NNNpx olan büyük genişlikleri %100 yap (mobilde taşma) */
  [style*="width:300px"],  [style*="width: 300px"],
  [style*="width:320px"],  [style*="width: 320px"],
  [style*="width:360px"],  [style*="width: 360px"],
  [style*="width:400px"],  [style*="width: 400px"],
  [style*="width:480px"],  [style*="width: 480px"],
  [style*="width:540px"],  [style*="width: 540px"],
  [style*="width:600px"],  [style*="width: 600px"],
  [style*="width:700px"],  [style*="width: 700px"],
  [style*="width:800px"],  [style*="width: 800px"],
  [style*="width:900px"],  [style*="width: 900px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* DB içeriğindeki <table> ve grid yapıları için yatay scroll güvencesi */
  .stinga-page, .machine-tabs-wrap, .ag, .hk, .kz, .sp,
  .content-box, .content-wrap, .page-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* h1/h2/h3 mobilde rahat kırılma */
  h1 { font-size: clamp(22px, 5.5vw, 32px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(20px, 5vw, 28px) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(17px, 4.4vw, 22px) !important; line-height: 1.3 !important; }
}

/* ====== 14. DESKTOP: KÜÇÜK FONT KURTARMA (12px altı oku) ====== */
@media (min-width: 769px) {
  /* Masaüstünde de 8-10px font'ları min 11px'e zorla */
  [style*="font-size:8px"],  [style*="font-size: 8px"],
  [style*="font-size:9px"],  [style*="font-size: 9px"] {
    font-size: 11px !important;
  }
  /* Çok düşük opacity'leri yumuşat */
  [style*="opacity:.2"], [style*="opacity: .2"],
  [style*="opacity:.25"], [style*="opacity: .25"],
  [style*="opacity:.3"], [style*="opacity: .3"],
  [style*="opacity:.35"], [style*="opacity: .35"] {
    opacity: 0.6 !important;
  }
}

/* ====== 15. EM-* SAYFA İÇERİĞİ (Endüstriyel Makine, Aktif Karbon, vs) ====== */
/* DB'den gelen "em-" prefix'li bölümler — büyük başlıkların kırpılma sorunu */
.em-section-title,
.em-section-label,
.em-eyebrow,
.em-hero-title,
.em-hero-subtitle,
.em-products .em-section-title,
.em-gallery .em-section-title,
.em-gallery h1, .em-gallery h2, .em-gallery h3,
.em-products h1, .em-products h2, .em-products h3,
.em-why h1, .em-why h2, .em-why h3,
.em-cta h1, .em-cta h2, .em-cta h3 {
  letter-spacing: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 2px;
  padding-right: 2px;
}

.em-products, .em-products-inner,
.em-gallery,  .em-gallery-inner,
.em-why,      .em-why-inner,
.em-cert,     .em-cert-inner,
.em-cta,      .em-cta-inner,
.em-hero,     .em-hero-inner,
.em-stats,    .em-stats-inner {
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* full-bleed bölümleri viewport overflow korumalı */
.em-products, .em-why, .em-gallery, .em-cert, .em-cta {
  overflow-x: hidden;
}

/* TABLET ve mobil */
@media (max-width: 991px) {
  .em-section-title {
    font-size: clamp(24px, 5.5vw, 42px) !important;
    line-height: 1.15 !important;
    margin-bottom: 36px !important;
  }
  .em-section-label, .em-eyebrow {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }
}

@media (max-width: 768px) {
  .em-section-title {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.18 !important;
    margin-bottom: 24px !important;
  }
  .em-products, .em-gallery, .em-why, .em-cert, .em-cta, .em-hero, .em-stats {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .em-prod-grid, .em-gallery-grid, .em-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .em-prod-num {
    font-size: 60px !important;
  }
  .em-gallery-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ====== 16. SAYFA İÇERIĞINDEKI BÜYÜK BAŞLIKLAR (genel) ====== */
/* DB sayfa içeriklerinde negatif letter-spacing veya çok büyük font'la
   sol kenardan kırpılan başlıkları korumak için */
.content-box h1, .content-box h2, .content-box h3,
.content-wrap h1, .content-wrap h2, .content-wrap h3,
.stinga-page h1, .stinga-page h2, .stinga-page h3,
.machine-tabs-wrap h1, .machine-tabs-wrap h2, .machine-tabs-wrap h3,
[class*="-section-title"],
[class*="-hero-title"] {
  letter-spacing: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  padding-left: 2px;
  box-sizing: border-box;
}

/* ====== MOBİL ALT NAV: PC'DE GİZLE ====== */
/* mobile-pro.css media="(max-width:1099px)" ile yüklenince,
   mob-bnav PC'de görünmemeli. Yine de güvence olarak burada da gizle. */
@media (min-width: 1100px) {
  .mob-bnav,
  #mob-bnav,
  .mob-bnav-wrap,
  .mob-bnav-item,
  .mob-hizmet-sheet,
  .mob-hizmet-overlay,
  #mob-hizmet-sheet,
  #mob-hizmet-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ====== 17. EM-REVEAL ANİMASYON BYPASS ====== */
/* JS gecikmesi veya hata durumunda em-reveal elementleri görünmez/kayık
   kalmasın — anında görünür hale getir.                                   */
.em-reveal,
.em-reveal.em-d1,
.em-reveal.em-d2,
.em-reveal.em-d3,
[class*="em-reveal"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}

/* ====== 18. EM-SECTION-TITLE: KESİN ÇÖZÜM ====== */
/* Büyük başlık serif font'larında left side bearing taşmasını engellemek için
   padding-left'i agresif artır + transform/translate inline'larını sıfırla */
.em-section-title,
.em-products .em-section-title,
.em-gallery .em-section-title,
.em-why .em-section-title,
.em-cert .em-section-title,
.em-cta .em-section-title {
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  margin-left: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  transform: none !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* em-products-inner / em-gallery-inner içeriden ek emniyet padding */
.em-products-inner,
.em-gallery-inner,
.em-why-inner,
.em-cert-inner,
.em-cta-inner,
.em-hero-inner,
.em-stats-inner {
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* em-products / em-gallery üst kapsayıcılarda overflow-x güvenliği */
.em-products,
.em-gallery,
.em-why,
.em-cert,
.em-cta,
.em-hero,
.em-stats {
  overflow-x: clip !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* Mobil + tablet: başlık taşma daha sıkı */
@media (max-width: 991px) {
  .em-section-title {
    font-size: clamp(20px, 5.5vw, 38px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 768px) {
  .em-section-title {
    font-size: clamp(20px, 6.5vw, 30px) !important;
    line-height: 1.2 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}