.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1330px;}.e-con{--container-max-width:1330px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   ÇAYYOLU SERVİS · GLOBAL CSS · v1.3 (8 Ekim 2026)
   Yer: Elementor → Site Ayarları → Özel CSS (tamamını yapıştır)
   Kaynak: renk-ve-tipografi-kararlari.md + tasarim-dili-koyu-bolum.md
   "ÖNERİ" yazan satırlar henüz karar değil; onaylanınca karar belgelerine eklenir.
   ========================================================================== */


/* 1) TOKENLAR ============================================================== */
:root{
  /* Açık zemin */
  --cys-page:#FAFBFF;
  --cys-card:#FFFFFF;
  --cys-heading:#101018;
  --cys-text:#42474F;
  --cys-text-2:#686E78;
  --cys-border:#E4E7F0;
  --cys-link:#3529BF;
  --cys-link-hover:#4737FF;                      /* ÖNERİ */

  /* Aksiyon */
  --cys-action:#E85101;
  --cys-action-grad:linear-gradient(135deg,#E85101,#FF7A2E);
  --cys-action-label:#101018;
  --cys-action-shadow:0 8px 18px -8px rgba(232,81,1,.75);
  --cys-alt-grad:linear-gradient(135deg,#3529BF,#4737FF,#6859FF);
  --cys-alt-label:#FFFFFF;
  --cys-alt-shadow:0 8px 18px -8px rgba(71,55,255,.7);   /* ÖNERİ */

  /* Yüzey gradyanları */
  --cys-surface-indigo:linear-gradient(135deg,#101018,#3529BF,#4737FF,#8377FF);
  --cys-surface-orange:linear-gradient(135deg,#101018,#A83800,#E85101,#FF8F4D);

  /* Koyu bölüm */
  --cys-dark:#262B2F;
  --cys-dark-tree:#1B1F22;
  --cys-dark-panel:#1F2327;
  --cys-dark-text:#F3F5F9;
  --cys-dark-text-soft:#E6E9F0;
  --cys-dark-text-2:#A7ADB8;
  --cys-dark-meta:#8A919E;
  --cys-dark-link:#ACA5FF;
  --cys-dark-link-hover:#CFCBFF;
  --cys-dark-line:rgba(243,245,249,.1);
  --cys-hero:#050404;                            /* ÖNERİ: hero zemini (Figma karesinden) */

  /* Durum */
  --cys-focus:#4737FF;
  --cys-error:#C8281E;
  --cys-success:#1B7F4B;
  --cys-whatsapp:#25D366;

  /* Font */
  --cys-font-head:"articulat-cf","acumin-pro",sans-serif;
  --cys-font-body:"acumin-pro",sans-serif;

  /* Ölçek: H2, H3, açıklama, gövde ve etiket hizmet detay bölümünden; hero ve H1 ÖNERİ */
  --cys-fs-hero:clamp(36px,22px + 3.6vw,80px);   /* ÖNERİ: 390'da 36, 1600'de 80 */
  --cys-fs-h1:clamp(34px,24px + 2.6vw,64px);     /* ÖNERİ: iç sayfa H1 */
  --cys-fs-h2:clamp(32px,22.6px + 2.4vw,58px);
  --cys-fs-h3:clamp(20px,18.5px + .4vw,24px);
  --cys-fs-h4:20px;                              /* ÖNERİ */
  --cys-fs-lead:clamp(16px,15.3px + .2vw,18px);
  --cys-fs-body:16px;
  --cys-fs-label:12px;

  /* Köşe: 6 ve 14 hizmet detay bölümünden, 22 hero yorum kartlarından */
  --cys-r-tag:6px;
  --cys-r-card:14px;
  --cys-r-glass:22px;
  --cys-r-pill:999px;

  /* Boşluk ve hareket (hizmet detay bölümünden) */
  --cys-pad:clamp(20px,3.4vw,48px);
  --cys-section-y:clamp(56px,38px + 4.6vw,104px);
  --cys-ease:cubic-bezier(.22,.8,.2,1);
}


/* 2) TEMA DEĞİŞKENLERİ → PALET ============================================
   Saliver renklerini :root üzerinde basıyor; html:root onu ezer.
   Temada kullanım: dark 321, primary 285, fourth 86, gradient-from/to 67/54, secondary 54. */
html:root{
  --primary-color:#E85101;        --primary-color-rgb:232,81,1;
  --dark-color:#101018;           --dark-color-rgb:16,16,24;
  --gradient-first-color:#FAFBFF; --gradient-first-color-rgb:250,251,255;   /* body zemini */
  --fourth-color:#E4E7F0;         --fourth-color-rgb:228,231,240;           /* temada kenarlık grisi */
  --link-color:#3529BF;
  --link-color-hover:#4737FF;
  --link-color-active:#4737FF;

  /* ÖNERİ: temanın nane tonlarının karşılığı. Bölümler kuruldukça gözle bakılacak. */
  --secondary-color:#CFCBFF;      --secondary-color-rgb:207,203,255;
  --third-color:#EEF0F7;          --third-color-rgb:238,240,247;
  --gradient-color-from:#EEF0F7;
  --gradient-color-to:#FAFBFF;
  --gradient-color-from2:#4737FF;
  --gradient-color-to2:#FF7A2E;
}

/* Elementor'un kendi widget'ları (Başlık, Metin, Buton) bu değişkenlerden okur */
body[class*="elementor-kit-"]{
  --e-global-color-primary:#101018;
  --e-global-color-secondary:#3529BF;
  --e-global-color-text:#42474F;
  --e-global-color-accent:#E85101;
  --e-global-typography-primary-font-family:"articulat-cf";
  --e-global-typography-primary-font-weight:700;
  --e-global-typography-secondary-font-family:"articulat-cf";
  --e-global-typography-secondary-font-weight:600;
  --e-global-typography-text-font-family:"acumin-pro";
  --e-global-typography-text-font-weight:400;
  --e-global-typography-accent-font-family:"acumin-pro";
  --e-global-typography-accent-font-weight:600;
}


/* 3) TEMEL TİPOGRAFİ =======================================================
   Tema fontu üç kuralda yazıyor: body + #pxl-wapper, h1–h6, bir de !important'lı form listesi.
   "html body": Elementor Site Ayarları'na yapıştırılınca CSS tema dosyasından önce basılıyor;
   düz "body" temayla eşit kalıp sırayı kaybediyordu. */
html body,
body #pxl-wapper{
  font-family:var(--cys-font-body);
  font-size:var(--cys-fs-body);
  line-height:1.55;
  color:var(--cys-text);
  background-color:var(--cys-page);
}

body h1,body h2,body h3,body h4,body h5,body h6{
  font-family:var(--cys-font-head);
  color:var(--cys-heading);
}
body h1{font-size:var(--cys-fs-h1);font-weight:700;line-height:1.05;letter-spacing:-.03em}
body h2{font-size:var(--cys-fs-h2);font-weight:700;line-height:1.04;letter-spacing:-.03em}
body h3{font-size:var(--cys-fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.015em}
body h4{font-size:var(--cys-fs-h4);font-weight:600;line-height:1.25;letter-spacing:-.01em}
body h5{font-size:18px;font-weight:600;line-height:1.3}
body h6{font-size:16px;font-weight:600;line-height:1.35}

/* Temanın !important'lı font listesi (form alanları ve birkaç widget) */
#pxl-wapper input,
#pxl-wapper textarea,
#pxl-wapper select,
#pxl-wapper .nice-select,
#pxl-wapper .pxl-select-higthlight{font-family:var(--cys-font-body) !important}
#pxl-wapper .ft-heading{font-family:var(--cys-font-head) !important}

::selection{background:#4737FF;color:#FFFFFF}


/* 4) BUTON ================================================================
   #pxl-wapper ile yazıldı: widget panelinden verilen renk bu kuralı ezemez.
   Buton rengi panelden değil sınıftan gelir (widget → Gelişmiş → CSS Sınıfları):
     sınıf yok        turuncu gradyan, birincil aksiyon
     cys-btn-alt      indigo gradyan (koyu #262B2F zeminde kullanılmaz)
     cys-btn-ghost    koyu zeminde ikincil buton
     cys-btn-outline  açık zeminde ikincil buton
   Hover: diğer vurgu rengi butonun içine bir noktadan yayılır (ikonlu butonda ikon
   dairesinden, ikonsuzda alt ortadan). Turuncu → indigo + beyaz etiket; indigo → turuncu + koyu etiket.
   Etiket boşta #101018: turuncu gradyanda 5,1–7,3; beyaz 3,7–2,6'da kalıyor. */
#pxl-wapper .btn{
  --cys-btn-ox:50%;                              /* yayılmanın çıkış noktası */
  --cys-btn-oy:100%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-color:var(--cys-action);
  background-image:var(--cys-action-grad);
  color:var(--cys-action-label);
  border:0;
  font-family:var(--cys-font-head);              /* ÖNERİ: etiket Articulat DemiBold */
  font-size:16px;
  font-weight:600;
  letter-spacing:-.005em;
  text-transform:none;                           /* tema "capitalize" yapıyor; etiket yazıldığı gibi çıkar */
  box-shadow:var(--cys-action-shadow);
  filter:none;
  transition:color .35s var(--cys-ease),background-color .35s var(--cys-ease),transform .35s var(--cys-ease),box-shadow .35s var(--cys-ease);
}
#pxl-wapper .btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--cys-alt-grad);
  clip-path:circle(0% at var(--cys-btn-ox) var(--cys-btn-oy));
  transition:clip-path .6s var(--cys-ease);
}
#pxl-wapper .btn.btn-icon-box2.pxl-icon--right{--cys-btn-ox:calc(100% - 32px);--cys-btn-oy:50%}
#pxl-wapper .btn.btn-icon-box2.pxl-icon--left{--cys-btn-ox:32px;--cys-btn-oy:50%}

#pxl-wapper .btn .pxl--btn-text{color:inherit}
#pxl-wapper .btn .pxl--btn-icon{color:inherit;transition:background-color .35s var(--cys-ease),color .35s var(--cys-ease)}
#pxl-wapper .btn .pxl--btn-icon i,
#pxl-wapper .btn .pxl--btn-icon svg{transition:transform .35s var(--cys-ease)}
#pxl-wapper .btn.btn-icon-box2 .pxl--btn-icon{background-color:#101018;background-image:none;color:#FFFFFF}

/* Hover ve klavye odağı (dokunmatik ekranda hover yapışmasın diye ayrı) */
@media (hover:hover){
  #pxl-wapper .btn:hover{color:#FFFFFF;transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(71,55,255,.85)}
  #pxl-wapper .btn:hover::before{clip-path:circle(150% at var(--cys-btn-ox) var(--cys-btn-oy))}
  #pxl-wapper .btn.btn-icon-box2:hover .pxl--btn-icon{background-color:#FFFFFF;color:#101018}
  #pxl-wapper .btn:hover .pxl--btn-icon i,
  #pxl-wapper .btn:hover .pxl--btn-icon svg{transform:translateX(2px)}
}
#pxl-wapper .btn:focus-visible{color:#FFFFFF;box-shadow:0 12px 24px -10px rgba(71,55,255,.85)}
#pxl-wapper .btn:focus-visible::before{clip-path:circle(150% at var(--cys-btn-ox) var(--cys-btn-oy))}
#pxl-wapper .btn.btn-icon-box2:focus-visible .pxl--btn-icon{background-color:#FFFFFF;color:#101018}
#pxl-wapper .btn:active{transform:none;filter:brightness(.96)}

/* İndigo: hover'da turuncuya döner */
#pxl-wapper .cys-btn-alt .btn{
  background-color:#4737FF;
  background-image:var(--cys-alt-grad);
  color:var(--cys-alt-label);
  box-shadow:var(--cys-alt-shadow);
}
#pxl-wapper .cys-btn-alt .btn::before{background:var(--cys-action-grad)}
#pxl-wapper .cys-btn-alt .btn.btn-icon-box2 .pxl--btn-icon{background-color:rgba(255,255,255,.18);color:#FFFFFF}
@media (hover:hover){
  #pxl-wapper .cys-btn-alt .btn:hover{color:#101018;box-shadow:0 12px 24px -10px rgba(232,81,1,.85)}
  #pxl-wapper .cys-btn-alt .btn.btn-icon-box2:hover .pxl--btn-icon{background-color:#101018;color:#FFFFFF}
}
#pxl-wapper .cys-btn-alt .btn:focus-visible{color:#101018;box-shadow:0 12px 24px -10px rgba(232,81,1,.85)}
#pxl-wapper .cys-btn-alt .btn.btn-icon-box2:focus-visible .pxl--btn-icon{background-color:#101018;color:#FFFFFF}

/* Koyu zeminde ikincil: yayılma yok, yüzey aydınlanır */
#pxl-wapper .cys-btn-ghost .btn{
  background-color:rgba(243,245,249,.07);
  background-image:none;
  color:#F3F5F9;
  box-shadow:none;
}
#pxl-wapper .cys-btn-ghost .btn::before{content:none}
#pxl-wapper .cys-btn-ghost .btn:hover,
#pxl-wapper .cys-btn-ghost .btn:focus-visible{background-color:rgba(243,245,249,.13);color:#FFFFFF;box-shadow:none}
#pxl-wapper .cys-btn-ghost .btn.btn-icon-box2 .pxl--btn-icon,
#pxl-wapper .cys-btn-ghost .btn.btn-icon-box2:hover .pxl--btn-icon,
#pxl-wapper .cys-btn-ghost .btn.btn-icon-box2:focus-visible .pxl--btn-icon{background-color:rgba(243,245,249,.12);color:#F3F5F9}

/* Açık zeminde ikincil: yayılma yok, çerçeve koyulaşır */
#pxl-wapper .cys-btn-outline .btn{
  background-color:transparent;
  background-image:none;
  color:#101018;
  box-shadow:inset 0 0 0 1.5px rgba(16,16,24,.2);
}
#pxl-wapper .cys-btn-outline .btn::before{content:none}
#pxl-wapper .cys-btn-outline .btn:hover,
#pxl-wapper .cys-btn-outline .btn:focus-visible{background-color:rgba(16,16,24,.05);color:#101018;box-shadow:inset 0 0 0 1.5px rgba(16,16,24,.45)}
#pxl-wapper .cys-btn-outline .btn.btn-icon-box2 .pxl--btn-icon,
#pxl-wapper .cys-btn-outline .btn.btn-icon-box2:hover .pxl--btn-icon,
#pxl-wapper .cys-btn-outline .btn.btn-icon-box2:focus-visible .pxl--btn-icon{background-color:#101018;color:#FFFFFF}

@media (prefers-reduced-motion:reduce){
  #pxl-wapper .btn,
  #pxl-wapper .btn::before,
  #pxl-wapper .btn .pxl--btn-icon,
  #pxl-wapper .btn .pxl--btn-icon i{transition-duration:.01s}
}


/* 5) ODAK ================================================================= */
#pxl-wapper a:focus-visible,
#pxl-wapper button:focus-visible,
#pxl-wapper input:focus-visible,
#pxl-wapper select:focus-visible,
#pxl-wapper textarea:focus-visible,
#pxl-wapper [tabindex]:focus-visible{
  outline:2px solid var(--cys-focus);
  outline-offset:3px;
}


/* 6) KOYU KAPSAM ==========================================================
   Koyu zeminli section'a "cys-dark" sınıfı ver: tokenlar koyu karşılıklarına döner,
   tokenla yazılmış her şey (başlık, metin, link, vurgu, odak) kendiliğinden uyar.
   Zemin rengini bu sınıf vermez; section'ın kendi ayarından gelir. */
.cys-dark{
  --cys-page:#262B2F;
  --cys-card:#1F2327;
  --cys-heading:#F3F5F9;
  --cys-text:#E6E9F0;
  --cys-text-2:#A7ADB8;
  --cys-border:rgba(243,245,249,.1);
  --cys-link:#ACA5FF;
  --cys-link-hover:#CFCBFF;
  --cys-focus:#ACA5FF;                           /* #4737FF koyu zeminde 2,2'de kalıyor */
  color:var(--cys-text);
}
.cys-dark a:not(.btn){color:var(--cys-link)}
.cys-dark a:not(.btn):hover{color:var(--cys-link-hover)}


/* 7) YARDIMCI SINIFLAR ==================================================== */
/* Etiket: metni büyük harfle YAZ; text-transform yok (html'de lang="tr" olmadığı için i → I olur) */
.cys-label{
  font-family:var(--cys-font-body);
  font-size:var(--cys-fs-label);
  font-weight:600;
  line-height:1;
  letter-spacing:.1em;
  color:var(--cys-text-2);
}
/* Bölüm açıklaması */
.cys-lead,
.cys-lead p{
  font-size:var(--cys-fs-lead);
  line-height:1.55;
}
/* Başlıkta tek ifadelik vurgu: <span class="cys-accent">…</span> */
.cys-accent{color:var(--cys-link)}
/* Fiyat: ₺ Articulat'ta yok, Acumin'den gelsin */
.cys-price{font-family:var(--cys-font-body);font-weight:600;font-variant-numeric:tabular-nums}
/* Butonun yanındaki metin linki ("Yol tarifi al", "Bizi arayın") */
.cys-cta-link a{
  font-family:var(--cys-font-head);
  font-weight:600;
  color:var(--cys-link);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
  text-decoration-color:currentColor;
}
.cys-cta-link a:hover{color:var(--cys-link-hover)}


/* 8) LOGO ŞERİDİ: KESİNTİSİZ DOĞRUSAL AKIŞ ================================
   Kullanım: logo carousel widget'ı → Gelişmiş → CSS Sınıfları → cys-marquee
   Nasıl çalışır: Swiper'ın adım adım kaydırması yerine sarmalayıcıya sabit hızlı bir
   CSS animasyonu biner. Swiper döngü için logoların kopyasını zaten bastığından
   şerit tam bir tur (logo sayısı × logo genişliği) kayıp başa döner; ek yeri görünmez.
   Ayarlar:
     --cys-logo-n    widget'taki GERÇEK logo sayısı (kopyalar hariç). Logo ekleyip çıkarınca güncelle.
     --cys-logo-spv  aynı anda görünen logo sayısı (aşağıdaki kırılımlarla değişir)
     --cys-logo-dur  bir turun süresi; büyüdükçe yavaşlar
   Widget'ta: Loop açık kalsın, Autoplay kapalı olsun (arka planda boşuna çalışmasın). */
.cys-marquee{
  --cys-logo-n:10;
  --cys-logo-spv:5;
  --cys-logo-dur:68s;
  --cys-logo-w:140px;                            /* logonun ekrandaki kutusu; dosya bunun 2 katı: 280 × 80 px */
  --cys-logo-h:40px;
}
@media (max-width:1399px){.cys-marquee{--cys-logo-spv:4}}
@media (max-width:1024px){.cys-marquee{--cys-logo-spv:3}}
/* Telefon: 2 logo yan yana, kutu biraz küçük. (3'e çıkarma: widget telefonda tek kopya bastığı için tur dönüşünde boşluk açılır.) */
@media (max-width:575px){.cys-marquee{--cys-logo-spv:2;--cys-logo-w:120px;--cys-logo-h:34px}}

.cys-marquee .pxl-swiper-container{
  overflow:hidden;
  pointer-events:none;                           /* sürükleme ve "#" linkleri kapalı; logolara link verirsen bu satırı sil */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.cys-marquee .pxl-swiper-wrapper{
  animation:cys-marquee var(--cys-logo-dur) linear infinite;
  transition:none !important;                    /* Swiper'ın geçişi animasyonun önüne geçmesin */
  will-change:transform;
}
.cys-marquee .pxl-swiper-slide{
  width:calc(100% / var(--cys-logo-spv)) !important;
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Tema ".pxl-client-carousel1.default .pxl-swiper-slide" ile 70 px yan boşluk veriyor; dört sınıfla ezilir */
.cys-marquee .pxl-client-carousel .pxl-swiper-wrapper .pxl-swiper-slide{
  padding:0 clamp(14px,2.2vw,40px);
}
/* Her logo aynı kutuya oturur; dosyanın piksel ölçüsü ekrandaki boyutu belirlemez */
.cys-marquee .pxl-swiper-slide .pxl-item--image{
  display:flex;
  align-items:center;
  justify-content:center;
}
.cys-marquee .pxl-swiper-slide .pxl-item--image img{
  display:block;
  width:var(--cys-logo-w);
  height:var(--cys-logo-h);
  max-width:100%;
  object-fit:contain;
  opacity:.85;
}
@keyframes cys-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-100% * var(--cys-logo-n) / var(--cys-logo-spv)),0,0)}
}
@media (prefers-reduced-motion:reduce){
  .cys-marquee .pxl-swiper-wrapper{animation:none}
}

/* ==========================================================================
   ÇAYYOLU SERVİS · MOBİL HEADER · v1 (8 Ekim 2026)
   Yer: Elementor → Site Ayarları → Özel CSS; global CSS'in sonuna ekle.
   Kapsam: 1200 px ve altı. Bu genişlikte Elementor header'ı gizli, temanın kendi
   bloğu (#pxl-header-mobile) çalışıyor. HTML'e dokunmaz; tema JS'inin verdiği
   sınıfları kullanır:
     #pxl-nav-mobile.active                         menü açık
     .pxl-header-menu.active                        panel açık
     .pxl-menu-toggle.active                        alt menü açık
     #pxl-header-mobile.pxl-header-mobile-fixed     sayfa 100 px'ten fazla kaydırıldı
   Logo: Tema Ayarları'ndaki mobil logo alanına KOYU ZEMİN versiyonu yüklenir.
   ========================================================================== */

@media (max-width:1200px){

  /* 9.1 AYARLAR + AKIŞTA AYRILAN YER --------------------------------------
     Çubuk sabit (fixed) durur; bu kutu sayfada onun yerini tutar.
     10 + 64 + 6 = 80 px: temanın eski header yüksekliği, hero yerinden oynamaz. */
  #pxl-header-elementor #pxl-header-mobile{
    --cys-mh-top:10px;                 /* kapsülün üst boşluğu */
    --cys-mh-x:12px;                   /* kapsülün yan boşluğu */
    --cys-mh-h:64px;                   /* kapsül yüksekliği */
    --cys-mh-logo:46px;                /* logo yüksekliği */
    --cys-mh-off:0px;                  /* WP yönetici çubuğu payı (yalnızca giriş yapmış kullanıcıda) */
    height:calc(var(--cys-mh-top) + var(--cys-mh-h) + 6px);
    background:transparent;
  }
  /* Ana sayfada ayrılan yer hero zeminiyle aynı renk: hero yukarı doğru uzamış görünür */
  .home #pxl-header-elementor #pxl-header-mobile{background:var(--cys-hero,#050404)}

  #pxl-header-elementor #pxl-header-mobile .pxl-header-main,
  #pxl-header-elementor #pxl-header-mobile .pxl-header-main > .container,
  #pxl-header-elementor #pxl-header-mobile .pxl-header-main > .container > .row{
    position:static;
    display:block;
    max-width:none;
    margin:0;
    padding:0;
  }


  /* 9.2 ÇUBUK: KOYU GLASS KAPSÜL ------------------------------------------
     Masaüstü kapsülün karşılığı: ince çerçeve, yuvarlak köşe. Koyu hero'da neredeyse
     saydam okunur, açık bölümlerde koyu cam olarak kalır; logo değiştirmek gerekmez.
     Blur bu kutuda, panelin atası olan kutularda değil: blur verilen kutu içindeki
     fixed öğeleri kendine hapseder, panel tam ekran açılamazdı. */
  #pxl-header-elementor #pxl-header-mobile .pxl-header-mobile-default{
    position:fixed;
    top:calc(var(--cys-mh-off) + var(--cys-mh-top));
    left:var(--cys-mh-x);
    right:var(--cys-mh-x);
    z-index:1001;
    height:var(--cys-mh-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 9px 0 12px;
    border:1px solid rgba(243,245,249,.34);
    border-radius:12px;
    background-color:rgba(16,16,24,.76);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    backdrop-filter:blur(18px) saturate(180%);
    transition:top .3s var(--cys-ease),background-color .3s var(--cys-ease),border-color .3s var(--cys-ease),box-shadow .3s var(--cys-ease);
  }
  /* Kaydırılınca: cam koyulaşır, çerçeve geri çekilir, altına gölge gelir */
  #pxl-header-elementor #pxl-header-mobile.pxl-header-mobile-fixed .pxl-header-mobile-default{
    background-color:rgba(16,16,24,.82);
    border-color:rgba(243,245,249,.16);
    box-shadow:0 18px 40px -18px rgba(16,16,24,.6);
  }
  /* Panel açıkken kapsül panelin üstünde çerçeve olarak kalır */
  #pxl-header-elementor #pxl-header-mobile:has(#pxl-nav-mobile.active) .pxl-header-mobile-default{
    background-color:transparent;
    border-color:rgba(243,245,249,.2);
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    #pxl-header-elementor #pxl-header-mobile .pxl-header-mobile-default{background-color:rgba(16,16,24,.94)}
  }

  /* Logo */
  #pxl-header-elementor #pxl-header-mobile .pxl-header-branding{
    display:flex;
    align-items:center;
    min-height:0;
    margin:0;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-header-branding a{display:block;line-height:0}
  #pxl-header-elementor #pxl-header-mobile .pxl-header-branding img{
    display:block;
    width:auto;
    max-width:none;
    height:var(--cys-mh-logo);
  }

  /* Hamburger: 44 px dokunma alanı, iki çizgi; açılınca çarpıya döner */
  #pxl-header-elementor #pxl-header-mobile #pxl-nav-mobile{
    position:static;
    display:block;
    transform:none;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-nav-mobile-button{
    position:relative;
    overflow:visible;
    width:44px;
    height:44px;
    border-radius:9px;
    background-color:rgba(243,245,249,.09);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .3s var(--cys-ease);
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line{
    position:absolute;
    top:50%;
    right:auto;
    bottom:auto;
    left:50%;
    width:20px;
    height:2px;
    margin:-1px 0 0 -10px;
    border-radius:2px;
    background-color:#F3F5F9;
    transform:translateY(-4px);
    transition:transform .45s var(--cys-ease),width .3s var(--cys-ease),margin .3s var(--cys-ease);
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line::before,
  #pxl-header-elementor #pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line::after{content:none}
  #pxl-header-elementor #pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line2{display:none}
  #pxl-header-elementor #pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line3{
    width:13px;
    margin-left:-3px;                  /* kısa çizgi sağa hizalı */
    transform:translateY(4px);
  }
  #pxl-header-elementor #pxl-header-mobile #pxl-nav-mobile.active .pxl-nav-mobile-button{background-color:rgba(243,245,249,.14)}
  #pxl-header-elementor #pxl-header-mobile #pxl-nav-mobile.active .pxl-icon-line1{transform:rotate(45deg)}
  #pxl-header-elementor #pxl-header-mobile #pxl-nav-mobile.active .pxl-icon-line3{
    width:20px;
    margin-left:-10px;
    transform:rotate(-45deg);
  }


  /* 9.3 PANEL: TAM EKRAN KOYU KATMAN --------------------------------------
     Soldan kayan beyaz çekmece yerine yerinde beliren koyu katman. Çubuk üstte kalır;
     panelin kendi kapat butonu, logosu ve arama kutusu gizlenir (kapatma hamburgerde). */
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1000;
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:
      radial-gradient(120% 55% at 100% 100%,rgba(71,55,255,.38),rgba(71,55,255,0) 62%),
      radial-gradient(90% 45% at 0% 108%,rgba(232,81,1,.16),rgba(232,81,1,0) 60%),
      #101018;
    box-shadow:none;
    transform:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .32s var(--cys-ease),visibility 0s linear .32s;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu.active{
    opacity:1;
    visibility:visible;
    transition:opacity .32s var(--cys-ease),visibility 0s linear 0s;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu-scroll{
    box-sizing:border-box;
    min-height:100%;
    padding:calc(var(--cys-mh-off) + var(--cys-mh-top) + var(--cys-mh-h) + 22px) calc(var(--cys-mh-x) + 12px) 56px;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-close,
  #pxl-header-elementor #pxl-header-mobile .pxl-logo-mobile,
  #pxl-header-elementor #pxl-header-mobile .pxl-header-mobile-search{display:none}

  /* Panel açıkken arkadaki sayfa kaymaz */
  html:has(#pxl-header-mobile #pxl-nav-mobile.active){overflow:hidden}


  /* 9.4 MENÜ ---------------------------------------------------------------
     Üst düzey: Articulat DemiBold, büyük. Alt menü: Acumin, soluk, solda lavanta çizgi. */
  #pxl-header-elementor #pxl-header-mobile .pxl-header-nav{margin:0;padding:0}
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary{
    margin:0;
    padding:0;
    list-style:none;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary li{
    position:relative;
    float:none;
    display:block;
    margin:0;
    padding:0;
    border:0;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary > li{
    border-bottom:1px solid rgba(243,245,249,.1);
    opacity:0;
    transform:translateY(14px);
    transition:opacity .2s linear,transform .2s linear;
  }
  /* Açılışta satırlar sırayla belirir */
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu.active .pxl-menu-primary > li{
    opacity:1;
    transform:none;
    transition:opacity .5s var(--cys-ease) .08s,transform .5s var(--cys-ease) .08s;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu.active .pxl-menu-primary > li:nth-child(2){transition-delay:.13s}
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu.active .pxl-menu-primary > li:nth-child(3){transition-delay:.18s}
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu.active .pxl-menu-primary > li:nth-child(4){transition-delay:.23s}
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu.active .pxl-menu-primary > li:nth-child(5){transition-delay:.28s}
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu.active .pxl-menu-primary > li:nth-child(n+6){transition-delay:.33s}

  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary > li > a{
    display:block;
    padding:19px 60px 19px 0;
    font-family:var(--cys-font-head);
    font-size:clamp(26px,7.4vw,34px);
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.022em;
    text-transform:none;
    color:#F3F5F9;
    background:none;
    -webkit-tap-highlight-color:transparent;
    transition:color .25s var(--cys-ease);
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary > li > a:active{color:#FFFFFF}
  /* Bulunulan sayfa */
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary > li.current-menu-item > a,
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary > li.current-menu-parent > a,
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary > li.current-menu-ancestor > a{color:#ACA5FF}

  /* Alt menü düğmesi: 44 px daire, artı → eksi */
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .pxl-menu-toggle{
    position:absolute;
    top:clamp(12px,3.4vw - 1px,16px);  /* satırın ortası; font boyutuyla birlikte kayar */
    right:0;
    width:44px;
    height:44px;
    border-radius:50%;
    background-color:rgba(243,245,249,.07);
    font-size:0;
    line-height:0;
    cursor:pointer;
    transform:none;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .3s var(--cys-ease);
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .pxl-menu-toggle::before,
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .pxl-menu-toggle::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:14px;
    height:2px;
    margin:-1px 0 0 -7px;
    border-radius:2px;
    background-color:#ACA5FF;
    transform:none;
    transition:transform .4s var(--cys-ease);
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .pxl-menu-toggle::after{transform:rotate(90deg)}
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .pxl-menu-toggle.active{background-color:rgba(172,165,255,.18)}
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .pxl-menu-toggle.active::before{transform:rotate(180deg)}
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .pxl-menu-toggle.active::after{transform:rotate(180deg)}

  /* Alt menü (aç/kapa hareketini tema JS'i yapıyor; display'e dokunma) */
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .sub-menu{
    position:static;
    width:auto;
    min-width:0;
    margin:0 0 20px 2px;
    padding:0 0 0 18px;
    list-style:none;
    border:0;
    border-left:1px solid rgba(172,165,255,.4);
    border-radius:0;
    background:none;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .sub-menu li{border:0}
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .sub-menu a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:6px 0;
    font-family:var(--cys-font-body);
    font-size:17px;
    font-weight:400;
    line-height:1.3;
    letter-spacing:0;
    text-transform:none;
    color:#A7ADB8;
    background:none;
    transition:color .25s var(--cys-ease);
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .sub-menu a:active,
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .sub-menu .current-menu-item > a{color:#F3F5F9}
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary .sub-menu .pxl-menu-toggle{top:0}


  /* 9.5 WP YÖNETİCİ ÇUBUĞU (yalnızca giriş yapmış kullanıcı) ----------------
     Ziyaretçiyi etkilemez; çubuk yönetici çubuğunun altında kalsın diye. */
  .admin-bar #pxl-header-elementor #pxl-header-mobile{--cys-mh-off:46px}
}

/* Tablet: daha geniş boşluk, daha büyük logo */
@media (min-width:768px) and (max-width:1200px){
  #pxl-header-elementor #pxl-header-mobile{
    --cys-mh-top:14px;
    --cys-mh-x:24px;
    --cys-mh-h:72px;
    --cys-mh-logo:52px;
    height:calc(var(--cys-mh-top) + var(--cys-mh-h) + 10px);
  }
  #pxl-header-elementor #pxl-header-mobile .pxl-header-mobile-default{padding:0 13px 0 16px}
  #pxl-header-elementor #pxl-header-mobile .pxl-header-nav{max-width:620px}
}
@media (min-width:783px) and (max-width:1200px){
  .admin-bar #pxl-header-elementor #pxl-header-mobile{--cys-mh-off:32px}
}
/* 600 px altında yönetici çubuğu sayfayla birlikte kayıp gider */
@media (max-width:600px){
  .admin-bar #pxl-header-elementor #pxl-header-mobile.pxl-header-mobile-fixed{--cys-mh-off:0px}
}

@media (max-width:1200px) and (prefers-reduced-motion:reduce){
  #pxl-header-elementor #pxl-header-mobile .pxl-header-mobile-default,
  #pxl-header-elementor #pxl-header-mobile .pxl-header-menu,
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary > li,
  #pxl-header-elementor #pxl-header-mobile .pxl-icon-line,
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-toggle::before,
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-toggle::after{transition-duration:.01s !important;transition-delay:0s !important}
  #pxl-header-elementor #pxl-header-mobile .pxl-menu-primary > li{transform:none}
}

/* 9.6 iOS 26 SAFARI DURUM ÇUBUĞU -------------------------------------------
   Safari 26 theme-color'ı okumuyor; üst şeridin rengini html/body zemininden alıyor.
   Sayfanın görünen zemini #pxl-wapper'da kaldığı için sayfa rengi değişmez. */
@media (max-width:1200px){
  html:has(body.home),
  html body.home{background-color:var(--cys-hero,#050404)}
}


/* ==========================================================================
   ÇAYYOLU SERVİS · MOBİL DÜZELTMELER · v1.1 (17 Ekim 2026)
   Yer: Elementor → Site Ayarları → Özel CSS; global CSS'in EN SONUNA ekle.
   v1'i yapıştırdıysan onu bütünüyle bununla değiştir.
   Dört parça:
     1. Mobil yan boşluk: telefonda (767 px ve altı) ana sayfadaki bütün bölümler aynı yan boşlukta, 16 px.
     2. Karekod banner: telefonda köşe yuvarlaması yok, kenardan kenara bant.
     3. SSS sekmeleri: daralma hatası (her ekranda) + telefonda yana kaydırmalı şerit.
     4. HTML widget yüksekliği: hizmet detayın altındaki boşluk (container query tuzağı).
   ========================================================================== */


/* 1. MOBİL YAN BOŞLUK ------------------------------------------------------
   Ölçülen (17 Ekim, 390 px): hero ve hizmetler 15, neden biz, yorumlar ve aşamalar 10
   (Elementor kapsayıcısının varsayılanı), karekod, SSS ve form 0 px'ti.
   Kural tek değişkenden okur: --cys-gx. Elementor'da bölümlere ayrıca yan boşluk vermeye gerek yok.
   İstisna: hizmet detay + kayan yazı kapsayıcısı. Siyah ray ve kayan yazı ekran kenarına kadar
   gitmeli; bu yüzden 0'da kalır (kartın 32 px'i karuselin kendi düzeni).
   Koyu bantlar (aşamalar, form) yan boşluktan bağımsız ekran kenarına uzanır.
   SSS sekmeleri ve karekod bandı da bu 16 px'e göre ayarlı. */
@media (max-width:767px){
  :root{--cys-gx:16px}

  /* Kapsayıcılar (Container) */
  .elementor[data-elementor-type="wp-page"] > .elementor-element.e-con.e-parent:not(:has(.cys-sd,.cys-mq)){
    --padding-left:var(--cys-gx);
    --padding-right:var(--cys-gx);
  }
  /* Bölümler (Section): boşluk sütunun iç kutusunda */
  .elementor[data-elementor-type="wp-page"] > .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap{
    padding-left:var(--cys-gx);
    padding-right:var(--cys-gx);
  }
}


/* 2. KAREKOD BANNER (telefon) ---------------------------------------------
   Kart yan boşluğun dışına taşıp ekranın iki kenarına uzanır, köşeler düz.
   İçerik yine 16 px'te: üstteki ve alttaki bölümlerle aynı hizada. */
@media (max-width:719px){
  .elementor-widget-html .cys-qr .cys-qr__card{
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:30px var(--cys-gx,16px) 24px;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .elementor-widget-html .cys-qr .cys-qr__card::before{left:0;right:0;border-radius:0}
}


/* 3. SSS SEKMELERİ ---------------------------------------------------------
   Hata: tema butonlara overflow:hidden veriyor; esnek kutuda bu, butonun yazısından daha dar
   küçülmesine izin veriyor ve sekmeler sıkışıyordu. flex:none bunu her genişlikte kapatır.
   Telefonda yana kaydırmalı şerit (v1'deki iki satır bırakıldı): sekmeler yazıları kadar geniş,
   iç boşlukları eşit. Şerit soldan 16 px hizasında başlar, sağda ekran kenarına kadar uzanır;
   sağ kenardaki solma ve yarım kalan sekme kaydırılabildiğini gösterir.
   Neden iki satır değil: satıra kaç sekme sığacağı telefonun yazı boyutu ayarına bağlı.
   Yazı büyütülmüş telefonda 2 + 1 + 2 diziliyor ve genişlikler dengesiz kalıyordu. */
.elementor-widget-html .cys-sss button.cys-sss__tab{flex:none}

@media (max-width:719px){
  .elementor-widget-html .cys-sss.is-js .cys-sss__tabs{
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:8px;
    margin:0 calc(-1 * var(--cys-gx,16px)) 18px;
    padding:2px var(--cys-gx,16px);              /* 2 px: odak çerçevesi kesilmesin */
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-padding:0 var(--cys-gx,16px);
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  }
  .elementor-widget-html .cys-sss.is-js .cys-sss__tabs::-webkit-scrollbar{display:none}
  /* Son sekmeden sonra da 16 px pay (kaydırılan kutuda sağ iç boşluk her tarayıcıda sayılmıyor) */
  .elementor-widget-html .cys-sss.is-js .cys-sss__tabs::after{content:"";flex:0 0 calc(var(--cys-gx,16px) - 8px);height:1px}
  .elementor-widget-html .cys-sss button.cys-sss__tab{
    flex:none;
    height:40px;
    margin:0;
    padding:0 18px;
    justify-content:center;
  }
}


/* 4. HTML WIDGET YÜKSEKLİĞİ (telefon) --------------------------------------
   Hizmet detayın altındaki boşluk: widget 1.481 px yer kaplıyor, içerik 804 px.
   Nedeni plan belgesinin 6. bölümündeki tuzak: Elementor telefonda kapsayıcıyı "sütun + wrap"
   yapıyor; içinde container-type taşıyan bir öğe varsa tarayıcı widget'ın yüksekliğini sıfır
   genişlikte ölçüyor. Widget'a tam genişlik tabanı vermek ölçümü düzeltiyor.
   Kural bütün cys- widget'larına uygulanır; 411 px'te hepsinin yüksekliği içerikleriyle eşitlendi. */
@media (max-width:767px){
  .elementor-widget-html:has([class^="cys-"]){min-width:100%}
}

:where([class*="cys-"]) b, :where([class*="cys-"]) strong{font-weight:600}/* End custom CSS */