/* ==========================================================================
   DukaWell — arayüz düzeltmeleri
   1) Header   2) Hero slider   3) Footer   4) Genel
   Seçiciler #pxl-header-elementor / #pxl-footer-elementor üzerinden
   özgülük kazanır; Elementor'un .elementor-14 kurallarını !important
   olmadan geçer.
   ========================================================================== */

/* ==========================================================================
   1) HEADER
   ========================================================================== */

/* 1.1 — Masaüstü başlık satırı ikinci satıra kırılmasın.
   Tema 1920px için kurgulanmış; menüye sabit %57.9 genişlik verilmiş.
   Bunu esnek bir düzene çeviriyoruz. (1200px altı zaten mobil header) */
@media (min-width: 1201px) {
  #pxl-header-elementor .elementor-element-06804e7 > .elementor-widget-wrap {
    flex-wrap: nowrap;
    align-items: center;
  }
  #pxl-header-elementor .elementor-element-585508a {          /* logo */
    flex: 0 0 auto;
  }
  #pxl-header-elementor .elementor-element-570c732 {          /* menü */
    width: auto;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    --container-widget-width: auto;
    --container-widget-flex-grow: 1;
    --flex-grow: 1;
    --flex-shrink: 1;
  }
  #pxl-header-elementor .elementor-element-570c732 .pxl-nav-menu .pxl-menu-primary {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(16px, 2.05vw, 58px);
    text-align: left;
  }
  #pxl-header-elementor .elementor-element-570c732 .pxl-nav-menu .pxl-menu-primary > li {
    margin: 0;
    float: none;
  }
  #pxl-header-elementor .elementor-element-570c732 .pxl-nav-menu .pxl-menu-primary > li > a {
    white-space: nowrap;
  }
  /* menü ile arama/telefon arasında nefes payı */
  #pxl-header-elementor .elementor-element-570c732 > .elementor-widget-container { margin-right: 0; }
  #pxl-header-elementor .elementor-element-566a281 { margin-left: 26px; flex: 0 0 auto; }
  #pxl-header-elementor .elementor-element-e5ab1a4 { flex: 0 0 auto; }
  /* açılır menüler esnek düzende de doğru hizalansın */
  #pxl-header-elementor .elementor-element-570c732 .pxl-menu-primary > li { position: relative; }
}

/* 1.2 — 1600px altında menü tipografisini ölçekle */
@media (min-width: 1201px) and (max-width: 1600px) {
  #pxl-header-elementor .elementor-element-570c732 .pxl-nav-menu .pxl-menu-primary > li > a {
    font-size: clamp(12.5px, 1.02vw, 16px);
    letter-spacing: clamp(0.4px, 0.12vw, 2px);
  }
}

/* 1.3 — Dar dizüstünde logo ve telefon bloğunu ölçekle */
@media (min-width: 1201px) and (max-width: 1366px) {
  #pxl-header-elementor .elementor-element-e5ab1a4 .pxl-icon-box .pxl-item--description {
    font-size: 18px;
    letter-spacing: -0.6px;
    word-spacing: 2px;
  }
  #pxl-header-elementor .elementor-element-e5ab1a4 .pxl-icon-box .pxl-item--icon { margin-right: 8px; }
}

/* 1.4 — Üst şerit dar ekranda ikinci satıra kırılmasın; ölçeklensin */
@media (min-width: 1201px) and (max-width: 1500px) {
  #pxl-header-elementor .elementor-element-10517dc > .elementor-widget-wrap { flex-wrap: nowrap; }
  #pxl-header-elementor .elementor-element-27df861,
  #pxl-header-elementor .elementor-element-1e82663 { margin-right: clamp(14px, 1.6vw, 38px); }
  #pxl-header-elementor .elementor-element-10517dc .pxl-icon-box .pxl-item--description {
    font-size: clamp(12px, 1.02vw, 15px);
    white-space: nowrap;
  }
}

/* 1.5 — Sosyal ikonlar ve arama için dokunma hedefi + odak halkası */
#pxl-header-elementor .pxl-icon-list a,
#pxl-footer-elementor .pxl-icon-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
}
#pxl-header-elementor a:focus-visible,
#pxl-footer-elementor a:focus-visible,
#pxl-header-elementor button:focus-visible {
  outline: 2px solid #4F7661;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   2) HERO SLIDER
   ========================================================================== */

/* 2.1 — Okunabilirlik perdesi.
   Slayt görselleri açık tonlu; başlık ve paragraf siyah. Arka plan bir
   <canvas> üzerine çiziliyor ve sr7-mask (z-index 0) içinde duruyor; metin
   grubu z-index 7. Perdeyi maskeye koyunca görselin üstünde, metnin
   altında kalıyor. */
#pxl-main sr7-module sr7-slide > sr7-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0.94) 0%,
    rgba(255,255,255,0.90) 26%,
    rgba(255,255,255,0.62) 44%,
    rgba(255,255,255,0.16) 62%,
    rgba(255,255,255,0) 76%
  );
}
@media (max-width: 1024px) {
  #pxl-main sr7-module sr7-slide > sr7-mask::after {
    background: linear-gradient(
      168deg,
      rgba(255,255,255,0.93) 0%,
      rgba(255,255,255,0.90) 52%,
      rgba(255,255,255,0.76) 78%,
      rgba(255,255,255,0.64) 100%
    );
  }
}

/* 2.2 — Slayt geçiş noktaları modülün içinde kalsın (konum verisi
   slider ayarlarında düzeltildi; burada yalnızca güvenlik payı) */
#pxl-main sr7-module sr7-bullets { max-width: 100%; }
#pxl-main sr7-module sr7-bullet { cursor: pointer; }

/* 2.3 — Hero butonları */
#pxl-main .pxl-btn-slide-style1 {
  border-radius: 999px;
  padding: 0 26px;
  width: auto;
  min-width: 100%;
  justify-content: center;
}
/* birincil butonun hover'ı: fotoğraf üstünde görünmez olmasın */
#pxl-main .pxl-btn-slide-style1:hover,
#pxl-main .pxl-btn-slide-style1:focus-visible {
  background-color: #4F7661;
  border-color: #4F7661;
  color: #fff;
}
#pxl-main .pxl-btn-slide-style1:hover svg,
#pxl-main .pxl-btn-slide-style1:focus-visible svg { fill: #fff; }

/* ikincil buton: çerçeveli, beyaz butonla aynı yükseklikte */
#pxl-main .dw-btn-2 {
  background: transparent;
  border: 1px solid #4F7661;
  color: #4F7661;
}
#pxl-main .dw-btn-2 svg { fill: #4F7661; }
#pxl-main .dw-btn-2:hover,
#pxl-main .dw-btn-2:focus-visible {
  background: #4F7661;
  border-color: #4F7661;
  color: #fff;
}
#pxl-main .dw-btn-2:hover svg,
#pxl-main .dw-btn-2:focus-visible svg { fill: #fff; }

/* ==========================================================================
   3) FOOTER
   ========================================================================== */

/* 3.1 — Bülten formu (Contact Form 7) */
#pxl-footer-elementor .dw-bulten p { margin: 0; }
#pxl-footer-elementor .dw-bulten .dw-bulten-fields { position: relative; }
#pxl-footer-elementor .dw-bulten .wpcf7-form-control-wrap { display: block; }
#pxl-footer-elementor .dw-bulten [type="email"] { width: 100%; }
#pxl-footer-elementor .dw-bulten [type="email"]::placeholder { color: rgba(255,255,255,0.62); }
#pxl-footer-elementor .dw-bulten [type="submit"] {
  font-size: 11px;              /* tema 8px veriyordu — okunmuyordu */
  letter-spacing: 1.2px;
  cursor: pointer;
}
#pxl-footer-elementor .dw-bulten .wpcf7-spinner { position: absolute; right: 146px; top: 50%; transform: translateY(-50%); margin: 0; }
#pxl-footer-elementor .dw-bulten-kvkk {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
}
#pxl-footer-elementor .dw-bulten-kvkk .wpcf7-list-item { margin: 0; }
#pxl-footer-elementor .dw-bulten-kvkk input[type="checkbox"] { margin-right: 7px; accent-color: #C2DCD0; }
#pxl-footer-elementor .dw-bulten .wpcf7-not-valid-tip { color: #FFC9B8; font-size: 12.5px; margin-top: 6px; }
#pxl-footer-elementor .dw-bulten .wpcf7-response-output {
  margin: 12px 0 0;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 13.5px;
  color: #fff;
}
.dw-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 3.2 — Bağlantı sütunları: başlık ile liste arası ritim */
#pxl-footer-elementor .pxl-link-wrap .pxl-link { margin: 0; padding: 0; list-style: none; }
#pxl-footer-elementor .pxl-link-wrap .pxl-item--link a { display: inline-block; }
#pxl-footer-elementor .pxl-link-wrap .pxl-item--link a:hover,
#pxl-footer-elementor .pxl-link-wrap .pxl-item--link.active a { color: #C2DCD0; }

/* 3.3 — İletişim satırlarındaki ikonlar metinle aynı hizada başlasın */
#pxl-footer-elementor .pxl-icon-box .pxl-item--icon { flex: 0 0 auto; margin-top: 3px; }

/* 3.4 — Telif satırı mobilde ortalansın */
@media (max-width: 767px) {
  #pxl-footer-elementor .pxl-text-editor { text-align: center; }
  #pxl-footer-elementor .pxl-icon-list { justify-content: center; display: flex; }
}

/* ==========================================================================
   4) GENEL
   ========================================================================== */
/* Yukarı çık düğmesi ekran okuyucuya anlamlı gelsin */
.pxl-scroll-top::after { content: ""; }

/* ==========================================================================
   5) İNCE AYARLAR (görsel doğrulama sonrası)
   ========================================================================== */

/* 5.1 — Menü logoya yapışmasın.
   1440px'de satır tam dolu olduğu için menü öğeleri kutusundan taşıp
   logonun üstüne biniyordu. Logoyu dizüstü boyutlarında ölçekleyip
   menüye sabit bir sol marj vererek gerçek boşluk açıyoruz. */
@media (min-width: 1201px) {
  #pxl-header-elementor .elementor-element-570c732 { margin-left: 24px; }
  #pxl-header-elementor .elementor-element-570c732 .pxl-nav-menu .pxl-menu-primary { padding-left: 0; }
}
@media (min-width: 1201px) and (max-width: 1560px) {
  #pxl-header-elementor .pxl-logo img { max-height: 62px; }
}
@media (min-width: 1201px) and (max-width: 1366px) {
  #pxl-header-elementor .pxl-logo img { max-height: 54px; }
  #pxl-header-elementor .elementor-element-570c732 .pxl-nav-menu .pxl-menu-primary {
    gap: clamp(14px, 1.85vw, 40px);
  }
}
@media (min-width: 1201px) and (max-width: 1320px) {
  #pxl-header-elementor .pxl-logo img { max-height: 46px; }
  #pxl-header-elementor .elementor-element-e5ab1a4 .pxl-icon-box .pxl-item--description { font-size: 16px; }
  #pxl-header-elementor .elementor-element-e5ab1a4 .pxl-icon-box .pxl-item--title { font-size: 10px; letter-spacing: 1.4px; }
  #pxl-header-elementor .elementor-element-570c732 .pxl-nav-menu .pxl-menu-primary { gap: clamp(12px, 1.6vw, 30px); }
  #pxl-header-elementor .elementor-element-566a281 { margin-left: 18px; }
}

/* 5.2 — Hero birincil butonu.
   Perde eklendikten sonra zemin beyaza yakın; beyaz buton kayboluyordu.
   Birincil eylem marka yeşiliyle dolduruldu, ikincil çerçeveli kaldı. */
#pxl-main sr7-module .pxl-btn-slide-style1:not(.dw-btn-2) {
  background: #4F7661;
  color: #fff;
  border-color: #4F7661;
}
#pxl-main sr7-module .pxl-btn-slide-style1:not(.dw-btn-2) svg { fill: #fff; }
#pxl-main sr7-module .pxl-btn-slide-style1:not(.dw-btn-2):hover,
#pxl-main sr7-module .pxl-btn-slide-style1:not(.dw-btn-2):focus-visible {
  background: #3C5A4A;
  border-color: #3C5A4A;
  color: #fff;
}
#pxl-main sr7-module .pxl-btn-slide-style1:not(.dw-btn-2):hover svg { fill: #fff; }

/* 5.3 — Bülten düğmesi okunabilirliği (11px metin için kontrast şart) */
#pxl-footer-elementor .dw-bulten [type="submit"] {
  color: #22382C;              /* #C2DCD0 üstünde ~9:1 */
  background: #C2DCD0;
}
#pxl-footer-elementor .dw-bulten [type="submit"]:hover,
#pxl-footer-elementor .dw-bulten [type="submit"]:focus-visible {
  background: #fff;
  color: #22382C;
  border-color: #fff;
}

/* 5.4 — Dar ekranda düğme alanın üstüne binmesin, alta insin */
@media (max-width: 767px) {
  #pxl-footer-elementor .dw-bulten [type="submit"] {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    line-height: 46px;
  }
  #pxl-footer-elementor .dw-bulten .wpcf7-spinner { right: 14px; top: 24px; }
}

/* 5.5 — Mobilde slayt noktaları metnin üstünde durmasın; alta alınır */
@media (max-width: 767px) {
  #pxl-main sr7-module sr7-bullets {
    inset: auto 0 16px auto !important;
    transform: translate(-18px, 0) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    width: auto !important;
    height: auto !important;
  }
  #pxl-main sr7-module sr7-bullets sr7-bullet { position: relative !important; inset: auto !important; transform: none !important; }
}

/* 5.6 — Üst şerit sosyal ikonları dar ekranda ikinci satıra kırılmasın
   (dokunma hedefi için verdiğimiz 34px'lik alan 1366px'de sütuna sığmıyordu) */
@media (min-width: 1201px) {
  #pxl-header-elementor .elementor-element-eea3458 .pxl-icon-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  #pxl-header-elementor .elementor-element-eea3458 .pxl-icon-list a { margin-right: 0; }
}
@media (min-width: 1201px) and (max-width: 1450px) {
  #pxl-header-elementor .elementor-element-eea3458 .pxl-icon-list { gap: 2px; }
  #pxl-header-elementor .elementor-element-eea3458 .pxl-icon-list a { min-width: 28px; }
}

/* 5.7 — Slayt geçiş noktaları modülün sağ kenarına sabitlenir.
   SR7 bu öğeyi modüle değil tam genişlikteki sr7-content kutusuna göre
   konumluyor; bu yüzden 1832px'lik içerik genişliğinin dışına taşıyordu.
   Kenar boşluğunu içerik genişliğinden hesaplıyoruz. */
@media (min-width: 768px) {
  #pxl-main sr7-module sr7-bullets {
    top: 50% !important;
    right: calc(max((100vw - 1832px) / 2, 15px) + 26px) !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }
}
/* seçili nokta net görünsün */
#pxl-main sr7-module sr7-bullet { box-shadow: 0 0 0 3px rgba(255,255,255,0.55); }