/* /tema/assets/css/header.css (FULL - FINAL) */

:root{
  /* ✅ Dinamik ana renkler (90_view.php içinde basılıyor: --renk1/2/3) */
  --ra-primary: var(--renk1);
  --ra-primary-2: var(--renk2);
  --ra-bg: var(--renk3);

  /* ✅ Tamamen marka renklerinden border/gölge */
  --ra-border: color-mix(in srgb, var(--renk1) 28%, var(--renk2));
  --ra-border-2: color-mix(in srgb, var(--renk1) 14%, var(--renk2));
  --ra-shadow: color-mix(in srgb, var(--renk1) 22%, transparent);
  --ra-shadow-2: color-mix(in srgb, var(--renk2) 18%, transparent);

  /* ✅ Metin tonları */
  --ra-text: #111827;
  --ra-dark: #0f172a;
}

/* ✅ container garanti */
.site-header .container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
  box-sizing:border-box;
}

/* GENEL */
.site-header{ position:relative; z-index:9999; background:#fff; }
.site-header a{ text-decoration:none; }
.site-header i{ line-height:1; }

/* ---------------------------------------
   ✅ Zarif geçişli çizgi sistemi (global)
---------------------------------------- */
.site-header .ra-line-h{
  height:1px; width:100%;
  background:linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--renk1) 55%, transparent),
    color-mix(in srgb, var(--renk2) 45%, transparent),
    transparent
  );
  opacity:.55;
}
.site-header .ra-line-v{
  width:1px;
  background:linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--renk1) 45%, transparent),
    color-mix(in srgb, var(--renk2) 35%, transparent),
    transparent
  );
  opacity:.65;
}

/* TOPBAR */
.site-header .ra-topbar{
  background:#fff;
  font-size:14px;
  position:relative;
}

/* ✅ Topbar altına referans gibi geçişli çizgi */
.site-header .ra-topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--renk1) 60%, transparent),
    color-mix(in srgb, var(--renk2) 50%, transparent),
    transparent
  );
  opacity:.55;
}

.site-header .ra-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}

.site-header .ra-topbar-left{
  display:flex; align-items:center; gap:10px;
  min-width:240px;
  position:relative;
  padding:0 55px;
}

/* ✅ Sol blok iki yanına zarif dikey çizgi */
.site-header .ra-topbar-left::before,
.site-header .ra-topbar-left::after{
  content:"";
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:1px; height:34px;
  background:linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--renk1) 55%, transparent),
    color-mix(in srgb, var(--renk2) 45%, transparent),
    transparent
  );
  opacity:.70;
}
.site-header .ra-topbar-left::before{ left:0; }
.site-header .ra-topbar-left::after{ right:0; }

.site-header .ra-topbar-mid{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 auto;
}

.site-header .ra-topbar-right{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px;
  min-width:240px;
  position:relative;
  padding-left:16px;
}

/* ✅ Sağ blok başına dikey çizgi (mid ile ayrım) */
.site-header .ra-topbar-right::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:34px;
  background:linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--renk1) 55%, transparent),
    color-mix(in srgb, var(--renk2) 45%, transparent),
    transparent
  );
  opacity:.70;
}

.site-header .ra-toplink{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ra-text); font-weight:900;
}
.site-header .ra-toplink i{ color:var(--renk1); }

/* ✅ Slogan */
.site-header .ra-slogan{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  border-radius:999px;
  background: color-mix(in srgb, var(--renk3) 82%, #dadada);
  color:var(--ra-text);
  font-weight:600;
  font-size:13px;
}

/* Sosyal (desktop topbar) */
.site-header .ra-social{ display:inline-flex; align-items:center; gap:10px; }
.site-header .ra-social a{
  width:38px; height:38px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ra-text); background:#fff;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position:relative;
}

/* ✅ ikonlar arasına ince dikey çizgi */
.site-header .ra-social a + a::before{
  content:"";
  position:absolute;
  left:-10px; top:50%;
  transform:translateY(-50%);
  width:1px; height:26px;
  background:linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--renk1) 55%, transparent),
    color-mix(in srgb, var(--renk2) 45%, transparent),
    transparent
  );
  opacity:.75;
  border-radius:2px;
}

.site-header .ra-social a:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px var(--ra-shadow);
  border-color: var(--ra-border);
}

/* CTA */
.site-header .ra-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 18px; border-radius:12px;
  background:var(--renk1);
  color:#fff; font-weight:900;
  border:0;
  box-shadow:0 12px 22px color-mix(in srgb, var(--renk1) 28%, transparent);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  position:relative;
  margin-left:12px;
}
.site-header .ra-cta:hover{
  background:var(--renk2);
  transform:translateY(-1px);
}

/* ✅ sosyal ile CTA arasına çizgi */
.site-header .ra-cta::before{
  content:"";
  position:absolute;
  left:-12px; top:50%;
  transform:translateY(-50%);
  width:1px; height:34px;
  background:linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--renk1) 55%, transparent),
    color-mix(in srgb, var(--renk2) 45%, transparent),
    transparent
  );
  opacity:.85;
}

/* MAIN NAV */
.site-header .header-main{
  background:var(--renk3);
  position:relative;
}

/* ✅ Menü üstüne çizgi */
.site-header .header-main::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--renk1) 60%, transparent),
    color-mix(in srgb, var(--renk2) 50%, transparent),
    transparent
  );
  opacity:.55;
}

.site-header .header-flex{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  min-height:74px;
}

/* logo */
.site-header .brand{ display:inline-flex; align-items:center; }
.site-header .brand img{ height:70px; width:auto; display:block; }

/* DESKTOP split */
@media (min-width: 992px){
  .site-header .ra-nav-center-wrap{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    gap:18px;
  }
  .site-header .ra-nav-center-wrap .brand{
    position:absolute; left:45%; transform:translateX(-50%);
    z-index:5;
  }
  .site-header .ra-nav-center-wrap .brand img{
    width:220px;
    height:auto;
  }
  .site-header .ra-nav-center-wrap .ra-desk-left,
  .site-header .ra-nav-center-wrap .ra-desk-right{ flex:1 1 0; display:flex; }
  .site-header .ra-nav-center-wrap .ra-desk-left .ra-nav{ margin-left:auto; }
  .site-header .ra-nav-center-wrap .ra-desk-right .ra-nav{ margin-right:auto; }

  .site-header .ra-nav-center-wrap .ra-desk-left{ padding-right:160px; }
  .site-header .ra-nav-center-wrap .ra-desk-right{ padding-left:130px; }
}

/* MENU */
.site-header .ra-nav, .site-header .ra-drop{ list-style:none; margin:0; padding:0; }
.site-header .ra-nav{
  display:flex; align-items:center;
  gap:14px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.site-header .ra-nav-item{ position:relative; }

.site-header .ra-nav-link{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 10px;
  border-radius:14px;
  color:var(--ra-text);
  font-weight:600;
  letter-spacing:.2px;
  transition:background .15s ease, transform .15s ease, color .15s ease;
}

/* ✅ Hover alt çizgi */
.site-header .ra-nav-link::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:6px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--renk1), var(--renk2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
  opacity:.90;
}

.site-header .ra-nav-link:hover{
  background:color-mix(in srgb, var(--renk1) 10%, #ffffff);
  transform:translateY(-1px);
  color:var(--renk1);
}
.site-header .ra-nav-link:hover::after{ transform:scaleX(1); }

.site-header .ra-nav-link.is-active{
  color:var(--renk1);
  background:color-mix(in srgb, var(--renk1) 12%, #ffffff);
}
.site-header .ra-nav-link.is-active::after{ transform:scaleX(1); }

/* ✅ Menü itemleri arasına zarif dikey çizgi */
@media (min-width: 992px){
  .site-header .ra-nav-item + .ra-nav-item{ margin-left:2px; }
  .site-header .ra-nav-item + .ra-nav-item::before{
    content:"";
    position:absolute;
    left:-8px; top:50%;
    transform:translateY(-50%);
    width:1px; height:26px;
    background:linear-gradient(to bottom,
      transparent,
      color-mix(in srgb, var(--renk1) 45%, transparent),
      color-mix(in srgb, var(--renk2) 35%, transparent),
      transparent
    );
    opacity:.65;
  }
}

/* DROPDOWN */
.site-header .ra-nav-item.has-drop::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:18px;
}
.site-header .ra-nav-item.has-drop > .ra-drop{
  position:absolute;
  left:0; top:100%;
  margin-top:10px;
  min-width:320px;
  padding:14px;
  background:#fff;
  border:1px solid var(--ra-border-2);
  border-radius:18px;
  box-shadow:0 18px 45px var(--ra-shadow);
  display:none;
  z-index:10000;
}
.site-header .ra-nav-item.has-drop:hover > .ra-drop,
.site-header .ra-nav-item.has-drop:focus-within > .ra-drop{ display:block; }

.site-header .ra-drop li{ position:relative; }
.site-header .ra-drop li + li{ margin-top:10px; }
.site-header .ra-drop-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px;
  border-radius:14px;
  color:var(--ra-text);
  font-weight:600;
  border:1px solid var(--ra-border-2);
  background:#fff;
}
.site-header .ra-drop-link:hover{
  background:color-mix(in srgb, var(--renk1) 8%, #ffffff);
  border-color: var(--ra-border);
  transform:translateY(-1px);
}

/* MOBILE hamburger */
.site-header .mobile-toggle{
  display:none;
  width:54px; height:54px;
  border:0; background:transparent; padding:0;
  flex-direction:column; align-items:center; justify-content:center;
  gap:8px;

  position:relative;
  z-index:100600;
  pointer-events:auto;
  cursor:pointer;
}
.site-header .mobile-toggle span{
  display:block; width:30px; height:3px;
  background:var(--ra-dark);
  border-radius:3px;
}

/* ✅ MOBILE DRAWER + BACKDROP (body.ra-mopen) */
#mobileMenu{
  position:fixed; top:0; right:0;
  height:100vh; width:min(86vw, 360px);
  background:#fff;
  z-index:100500;
  box-shadow:-12px 0 40px var(--ra-shadow);
  transform:translateX(100%);
  transition:transform .25s ease;
  display:block;
  pointer-events:auto;
}
body.ra-mopen #mobileMenu{ transform:translateX(0); }

#mobileBackdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:100400;

  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
body.ra-mopen #mobileBackdrop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#mobileMenu .mobile-inner{ height:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding:16px; }
#mobileMenu .mobile-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--ra-border-2); margin-bottom:12px;
}
#mobileMenu .mobile-close{
  width:40px; height:40px;
  border:1px solid var(--ra-border-2);
  background:color-mix(in srgb, var(--renk3) 88%, #f4f4f4);
  border-radius:12px;
  font-size:22px;
}

.site-header .ra-m-search{ margin:12px 0 10px; position:relative; }
.site-header .ra-m-search input{
  width:100%; height:44px; border-radius:12px; border:1px solid var(--ra-border-2);
  padding:0 44px 0 14px; font-size:13px; outline:none;
}
.site-header .ra-m-search button{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:10px; border:0;
  background:var(--renk1); color:#fff;
}
.site-header .ra-m-link,
.site-header .ra-m-parent{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px; border-radius:14px; border:1px solid var(--ra-border-2);
  background:#fff; color:var(--ra-text); font-weight:900; margin-bottom:8px;
}
.site-header .ra-m-sub{ padding-left:10px; display:flex; flex-direction:column; }
.site-header .ra-m-sub[hidden]{ display:none !important; }

body.ra-lock{ overflow:hidden; height:100%; touch-action:none; }

/* bootstrap helper */
.d-none{display:none!important}
.d-flex{display:flex!important}
.d-lg-none{display:block!important}
.d-lg-flex{display:none!important}
.d-lg-block{display:none!important}
@media (min-width: 992px){
  .d-lg-none{display:none!important}
  .d-lg-flex{display:flex!important}
  .d-lg-block{display:block!important}

  #mobileMenu, #mobileBackdrop{ display:none !important; }
}

/* MOBILE */
@media (max-width: 991px){
  .site-header .ra-topbar{ display:none !important; }

  .site-header .header-flex{
    min-height:88px;
    gap:10px;
    position:relative;
    z-index:100100;
  }

  /* ✅ MOBİL LOGO DAHA BÜYÜK */
  .site-header .brand.d-lg-none{ flex:1 1 auto; min-width:0; max-width: calc(100% - 74px); }
  .site-header .brand.d-lg-none img{
    height:90px;
    max-height:90px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
  }

  .site-header .mobile-toggle{ display:inline-flex !important; }
}

/* ✅ çok küçük ekranlar */
@media (max-width: 375px){
  .site-header .brand.d-lg-none{ max-width: calc(100% - 74px); }
  .site-header .brand.d-lg-none img{ height:72px; max-height:72px; }
}

/* =========================================
   ✅ TEK RENK ÇİZGİ SİSTEMİ (renk1)
========================================= */
:root{
  --ra-border: color-mix(in srgb, var(--renk1) 35%, transparent);
  --ra-border-2: color-mix(in srgb, var(--renk1) 20%, transparent);
  --ra-shadow: color-mix(in srgb, var(--renk1) 18%, transparent);
}
.site-header .ra-line-h,
.site-header .ra-line-v{ background:color-mix(in srgb, var(--renk1) 30%, transparent) !important; }
.site-header .ra-topbar::after{ background:color-mix(in srgb, var(--renk1) 30%, transparent) !important; }
.site-header .ra-topbar-left::before,
.site-header .ra-topbar-left::after,
.site-header .ra-topbar-right::before{
  background:color-mix(in srgb, var(--renk1) 30%, transparent) !important;
}
.site-header .ra-social a{
  background:#fff;
  color:var(--ra-text);
  box-shadow:none;
  border:1px solid var(--ra-border-2);
}
.site-header .ra-social a + a::before{
  background:color-mix(in srgb, var(--renk1) 30%, transparent) !important;
}
.site-header .ra-social a:hover{
  border-color:color-mix(in srgb, var(--renk1) 55%, transparent);
  box-shadow:0 10px 18px var(--ra-shadow);
}
.site-header .ra-cta::before{ background:color-mix(in srgb, var(--renk1) 30%, transparent) !important; }
.site-header .header-main::before{ background:color-mix(in srgb, var(--renk1) 30%, transparent) !important; }
@media (min-width: 992px){
  .site-header .ra-nav-item + .ra-nav-item::before{
    background:color-mix(in srgb, var(--renk1) 30%, transparent) !important;
  }
}
.site-header .ra-nav-link::after{ background:var(--renk1) !important; }

/* =========================================================
   ✅ MOBILE TOP MENU (Hemen Ara + Sosyal + Arama)
========================================================= */
.ra-mtopbar{
  background:#fff;
  border-bottom:1px solid var(--ra-border-2);
}
.ra-mtopbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
}
.ra-mcall{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--ra-border-2);
  background:#fff;
  color:var(--ra-text);
  font-weight:900;
  white-space:nowrap;
}
.ra-mcall i{ color:var(--renk1); }

.ra-msocial{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.ra-msocial a{
  width:34px; height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ra-border-2);
  background:#fff;
  color:var(--ra-text);
}
.ra-msearch{
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid var(--ra-border-2);
  background:#fff;
  color:var(--ra-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ra-msearch-row{ padding:0 0 10px; }
.ra-msearch-form{
  display:flex;
  gap:10px;
  align-items:center;
}
.ra-msearch-form input{
  flex:1 1 auto;
  height:44px;
  border-radius:14px;
  border:1px solid var(--ra-border-2);
  padding:0 14px;
  outline:none;
}
.ra-msearch-form button{
  width:48px; height:44px;
  border-radius:14px;
  border:0;
  background:var(--renk1);
  color:#fff;
}

/* desktop'ta mobile topbar gizli */
@media (min-width: 992px){
  .ra-mtopbar{ display:none !important; }
}
/* =========================================
   ✅ DESKTOP DİL BUTONLARI (Topbar + Menü)
========================================= */
.site-header .ra-lang{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-right:10px;
  padding-right:10px;
  position:relative;
}
.site-header .ra-lang::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:34px;
  background:color-mix(in srgb, var(--renk1) 30%, transparent);
  opacity:.85;
}

.site-header .ra-lang-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--ra-border-2);
  background:#fff;
  color:var(--ra-text);
  font-weight:900;
  line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.site-header .ra-lang-btn .flag-icon{ border-radius:3px; }
.site-header .ra-lang-btn:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--renk1) 55%, transparent);
  box-shadow:0 10px 18px var(--ra-shadow);
}
.site-header .ra-lang-btn.is-active{
  background:color-mix(in srgb, var(--renk1) 10%, #ffffff);
  border-color:color-mix(in srgb, var(--renk1) 55%, transparent);
  color:var(--renk1);
}

/* Menü içindeki mini dil */
.site-header .ra-lang--mini{
  margin-right:0;
  padding-right:0;
}
.site-header .ra-lang--mini::after{ display:none; }
.site-header .ra-lang--mini .ra-lang-btn{
  height:40px;
  padding:0 10px;
  border-radius:14px;
}

/* =========================================
   ✅ DESKTOP MENÜ İÇİ ARAMA
========================================= */
@media (min-width: 992px){
  .site-header .ra-desk-tools{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    gap:10px;
    z-index:20;
  }

  .site-header .ra-desk-search-btn{
    width:44px; height:44px;
    border-radius:14px;
    border:1px solid var(--ra-border-2);
    background:#fff;
    color:var(--ra-text);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .site-header .ra-desk-search-btn:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--renk1) 55%, transparent);
    box-shadow:0 10px 18px var(--ra-shadow);
  }

  .site-header .ra-desk-search-pop{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:360px;
    max-width:42vw;
    background:#fff;
    border:1px solid var(--ra-border-2);
    border-radius:16px;
    box-shadow:0 18px 45px var(--ra-shadow);
    padding:12px;
  }
  .site-header .ra-desk-search-form{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .site-header .ra-desk-search-form input{
    flex:1 1 auto;
    height:44px;
    border-radius:14px;
    border:1px solid var(--ra-border-2);
    padding:0 14px;
    outline:none;
  }
  .site-header .ra-desk-search-form button{
    width:48px; height:44px;
    border-radius:14px;
    border:0;
    background:var(--renk1);
    color:#fff;
  }
}

/* ✅ ufak yardımcı */
.mr-1{ margin-right:.25rem; }
/* ✅ TOPBAR Dil butonu (referans gibi: kutu içinde bayrak + Dil) */
.site-header .ra-topbar-right .ra-top-lang{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--ra-border-2);
  background:#fff;
  color:var(--ra-text);
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

.site-header .ra-topbar-right .ra-top-lang:hover{
  border-color: var(--ra-border);
  box-shadow:0 10px 18px var(--ra-shadow);
  transform:translateY(-1px);
}

.site-header .ra-topbar-right .ra-top-lang-flag{
  width:34px;
  height:24px;
  border-radius:12px;
  border:1px solid var(--ra-border-2);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.site-header .ra-topbar-right .ra-top-lang-flag .flag-icon{
  font-size:16px;
  line-height:1;
}

.site-header .ra-topbar-right .ra-top-lang-text{
  font-size:13px;
}

.site-header .header-main .ra-lang,
.site-header .ra-desk-tools .ra-lang{ display:none !important; }
/* ✅ DESKTOP: arama butonu menüye binmesin */
@media (min-width: 992px){
  /* arama butonu + boşluk kadar sağdan alan aç */
  .site-header .ra-nav-center-wrap .ra-desk-right{
    padding-right: 70px; /* gerekirse 80px yap */
  }
}
/* ✅ Header (menü) ile sayfa/slider arasına zarif çizgi */
.site-header .header-main{
  position: relative;
}

.site-header .header-main::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;            /* dışarı taşsın, daha net dursun */
  height:1px;
  background:linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--renk1) 55%, transparent),
    color-mix(in srgb, var(--renk2) 45%, transparent),
    transparent
  );
  opacity:.70;
  pointer-events:none;
  z-index:50;
}