/* ==========================================================================
   ECS ELEKTRİK — Kurumsal Marka Katmanı (Brand Override Layer)
   Resmî logo kimliği: turkuaz → lacivert degrade ("ECS POWER & SIGNALIZATION")
   Bu dosya tema style.css'inden SONRA yüklenir; sadece üst alanı (topbar,
   navbar, logo, menü, CTA) ve marka renklerini premium standarda taşır.
   ========================================================================== */

:root{
  --ecs-navy:#16307A;      /* logodaki S harfi / yazı — derin lacivert */
  --ecs-blue:#1C66B0;      /* orta mavi geçiş */
  --ecs-teal:#15A9C4;      /* E harfi — turkuaz aksan */
  --ecs-cyan:#10B9CC;      /* en açık turkuaz */
  --ecs-ink:#0E1B2B;       /* metin / koyu zemin */
  --ecs-slate:#5A6B7D;     /* ikincil metin */
  --ecs-line:#E7EBF1;      /* ince ayraç */
  --ecs-grad:linear-gradient(120deg,#15A9C4 0%,#1C66B0 52%,#16307A 100%);
  --ecs-grad-rev:linear-gradient(120deg,#16307A 0%,#1C66B0 48%,#15A9C4 100%);
  --ecs-shadow-nav:0 14px 38px -22px rgba(14,27,43,.55);
}

/* ----------------------------------------------------------------------- */
/* TOPBAR — temiz, beyaz, premium iletişim/utility şeridi                  */
/* ----------------------------------------------------------------------- */
.headerWhite #topbar{
  background:#ffffff;
  color:var(--ecs-navy);
  border-bottom:1px solid var(--ecs-line);
  box-shadow:inset 0 -1px 0 rgba(22,48,122,.03);
}
#topbar .innerContainer ul.menu{padding:11px 0;}
.headerWhite #topbar a{
  color:var(--ecs-slate);
  font-weight:500;
  font-size:13.5px;
  letter-spacing:.005em;
  transition:color .18s ease;
}
.headerWhite #topbar a:hover{color:var(--ecs-teal);}
#topbar a svg{width:18px;height:18px;}
/* iletişim ikonlarına turkuaz aksan */
#topbar .telefon a svg,#topbar .at a svg{color:var(--ecs-teal);}

/* Müşteri Girişi → marka degrade pill (utility CTA) */
#menu-ust-menu-2 .login a{
  background:var(--ecs-grad);
  color:#fff;
  padding:8px 16px;
  border-radius:8px;
  font-weight:600;
  box-shadow:0 8px 18px -9px rgba(22,48,122,.6);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
#menu-ust-menu-2 .login a:hover{
  color:#fff;
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 12px 22px -10px rgba(22,48,122,.65);
}
#menu-ust-menu-2 .login a svg{color:#fff;}

/* Destek Talebi → nötr ama belirgin */
#menu-ust-menu-2 .yardim a{color:var(--ecs-navy);font-weight:600;}
#menu-ust-menu-2 .yardim a:hover{color:var(--ecs-teal);}

/* Dil bayrakları — sol ayraç ile gruplanır */
#menu-ust-menu-2 .flag_tr{padding-left:6px;border-left:1px solid var(--ecs-line);margin-left:6px!important;}
.headerWhite #topbar .metinsiz a{color:var(--ecs-navy);font-weight:600;font-size:12.5px;}

/* ----------------------------------------------------------------------- */
/* NAVBAR (innerheader) — beyaz, cam efektli, premium gölge                */
/* ----------------------------------------------------------------------- */
.headerWhite #innerheader{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  box-shadow:0 1px 0 rgba(22,48,122,.06);
}
/* eski soluk alt çizgiyi marka degrade ile değiştir */
#innerheader:before{
  height:2px!important;
  background:var(--ecs-grad)!important;
  opacity:.85;
}
.headerWhite .is-sticky #innerheader,
.noRevSlider.home.headerWhite #innerheader{
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  backdrop-filter:saturate(150%) blur(12px);
  box-shadow:var(--ecs-shadow-nav);
}

/* Logo — dengeli ölçek, net duruş */
#logo{padding:16px 0;}
#logo img{height:46px;}

/* ----------------------------------------------------------------------- */
/* ANA MENÜ — kurumsal, dengeli, marka degrade altı çizgi                  */
/* ----------------------------------------------------------------------- */
#menu>ul{gap:34px;align-items:center;}
.headerWhite #menu a{
  color:var(--ecs-navy);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.005em;
}
.headerWhite #menu>ul>li:hover>a{color:var(--ecs-teal);}

/* animasyonlu degrade altı çizgi (mevcut active:after kuralının yerine) */
#menu>ul>li>a:after{
  content:""!important;
  display:block!important;
  position:absolute;
  left:0;right:0;bottom:30px;
  height:2.5px;
  width:auto!important;
  border-radius:3px;
  background:var(--ecs-grad)!important;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .26s cubic-bezier(.4,.14,.2,1);
}
#menu>ul>li:hover>a:after,
#menu>ul>li.active>a:after{transform:scaleX(1);}

/* Son menü öğesi (Bize Ulaşın) → marka degrade CTA pill */
#menu-ana-menu>li:last-child>a{
  background:var(--ecs-grad);
  color:#fff!important;
  line-height:1;
  padding:13px 24px;
  margin:28px 0;
  border-radius:11px;
  font-weight:700;
  box-shadow:0 12px 26px -12px rgba(22,48,122,.6);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
#menu-ana-menu>li:last-child>a:after{display:none!important;}
#menu-ana-menu>li:last-child>a:hover{
  color:#fff!important;
  filter:brightness(1.07);
  transform:translateY(-2px);
  box-shadow:0 18px 32px -14px rgba(22,48,122,.7);
}

/* E-Katalog tetikleyicisini de ince vurgu ile ayır */
#menu-ana-menu .ecs-ekatalog-trigger:hover{color:var(--ecs-teal);}

/* ----------------------------------------------------------------------- */
/* MOBİL BAŞLIK — marka aksanlı butonlar                                   */
/* ----------------------------------------------------------------------- */
#mobileButtons .mobileButton{color:var(--ecs-navy);}
#mobileButtons .mobileButton svg{color:var(--ecs-navy);}
#mobileButtons .toggleMenu{
  background:var(--ecs-grad);
  color:#fff;
  border-radius:9px;
}
#mobileButtons .toggleMenu svg{color:#fff;}

/* Hamburger menü vurguları */
#hamburgermenu .menu .text:hover{color:var(--ecs-teal);}

/* ----------------------------------------------------------------------- */
/* Genel marka uyumu — başlık degrade aksan, link tonları                  */
/* ----------------------------------------------------------------------- */
.widgetHeading .titleGroup .line{background:var(--ecs-grad)!important;opacity:.9;}

@media (max-width:820px){
  #logo img{height:38px;}
  #menu-ana-menu>li:last-child>a{margin:0;}
}

/* ===== NettoPro global font ===== */
@font-face{font-family:'NettoPro';src:url('fonts/NettoPro-Thin.otf') format('opentype');font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:'NettoPro';src:url('fonts/NettoPro-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'NettoPro';src:url('fonts/NettoPro.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'NettoPro';src:url('fonts/NettoPro-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'NettoPro';src:url('fonts/NettoPro-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'NettoPro';src:url('fonts/NettoPro-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:'NettoPro';src:url('fonts/NettoPro-Black.otf') format('opentype');font-weight:800 900;font-style:normal;font-display:swap;}

:root{--ecs-font:'NettoPro','Red Hat Display',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}
body,
h1,h2,h3,h4,h5,h6,p,a,span,div,ul,ol,li,dl,dt,dd,td,th,
label,button,input,select,textarea,figcaption,blockquote,strong,em,small,address{
  font-family:var(--ecs-font) !important;
}

/* ===== Banner: tam görsel + içerik bindirmesini kaldır ===== */
.picHeader{
  padding:0 !important;
  position:relative;
  width:100%;
  aspect-ratio:1875 / 480;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  background-image:url('images/picheader.jpg?v=9') !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#0d3b54 !important;
}
/* Banner mavisini sertifikalarımız tonuna (#0d3b54) çeken marka katmanı */
.picHeader::after{content:"";position:absolute;inset:0;z-index:1;background:#0d3b54;opacity:.12;mix-blend-mode:multiply;pointer-events:none;}
.picHeader .innerContainer{position:relative;z-index:2;}
/* Başlığı en sol ÜST köşeye hizala (içerik paneliyle aynı sol kenar) */
.picHeader .innerContainer{
  max-width:none;
  width:100%;
  margin:0;
  padding:36px 24px 0 48px !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
}
.picHeader .title{text-align:left !important;}
#main{margin-top:0 !important;}
@media (max-width:900px){
  .picHeader{height:auto;aspect-ratio:1875/480;}
  .picHeader .title{font-size:30px !important;}
}