/* ============================================================
   MEGA MENÜ MODÜLÜ CSS
   Bu dosya sadece yeni glow line’lı mega menü yapısını ve
   mobil menüyü kapsar. Eski klasik dropdown header (.menu .subMenu)
   stilleri BU DOSYADA YOKTUR.
   Yeni projelere entegrasyonda sadece bu dosyayı kopyalaman yeterli.
   ============================================================ */

/* Genel reset ve icon altyapısı (header modülü için yeterli düzeyde) */
.header *,
.header *::before,
.header *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
  outline: none;
}

header i.icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  font-style: normal;
  position: relative;
}

/* ------------------------------------------------------------
   HEADER GENEL YAPI (mega menü ile ilgili kısım)
------------------------------------------------------------ */

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99991;
  width: 100%;
  transition: all 0.3s;
  perspective: 1000px;
  padding: 30px 5% 30px 5%;
  background-color: transparent;
}

header .content {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  width: 100%;
  justify-content: space-between;
  max-width: none;
  margin: auto;
  align-items: center;
  z-index: 2;
}

header a.logo {
  display: block;
  background: url(../img/bk-header/yazicigrupblacklogo.png) no-repeat center;
  background-size: 100% auto;
  width: 222px;
  height: 56px;
}

header a.logo.opened {
  background: url(../img/bk-header/yazicigrupwhitelogo.svg) no-repeat center;
  z-index: 4;
  background-size: 100% auto;
}

header .left {
  display: flex;
  flex-wrap: wrap;
}

/* Menü aç/kapa (hamburger) butonu */
header a.menuLink {
  color: #4A4F55;
  display: block;
  width: 30px;
  height: 30px;
}

header a.menuLink span {
  display: block;
  width: 28px;
  height: 100%;
  position: relative;
  top: 15px;
}

header a.menuLink.opened span {
  top: 0px;
  z-index: 2;
}

header a.menuLink span i {
  position: absolute;
  transition: all 0.3s;
  width: 100%;
  height: 2px;
  left: 0;
  border-radius: 2px;
  background-color: #4A4F55;
}

header a.menuLink span i:nth-child(1) {
  width: 20px;
}
header a.menuLink span i:nth-child(2) {
  width: 35px;
  top: 8px;
}
header a.menuLink:hover span i:nth-child(1) {
  width: 18px;
}
header a.menuLink:hover span i:nth-child(2) {
  width: 28px;
}
header a.menuLink.opened span i {
  width: 15px !important;
  background-color: #ffffff !important;
}
header a.menuLink.opened span i:nth-child(1) {
  width: 40px !important;
  transform: rotate(-45deg);
  left: 0;
  top: 10px;
  background-color: #ffffff !important;
}
header a.menuLink.opened span i:nth-child(2) {
  width: 40px !important;
  transform: rotate(45deg);
  left: 0;
  top: 10px;
  background-color: #ffffff !important;
}

/* ------------------------------------------------------------
   MEGA MENÜ ANA YAPI
------------------------------------------------------------ */

header .menu {
  display: flex;
}

header .nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at top, #111827 0%, #020617 60%, #000 100%);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.35s ease, right 0.35s ease;
  overflow: hidden;
}

header .nav.opened {
  top: 0;
  right: 0;
  opacity: 1;
}

/* Video arka plan */
header .video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

header .video-background .mega-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: grayscale(0.1);
}

header .video-background .video-poster-menu {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

header .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 30%) 0%,
    rgb(0 0 0 / 30%) 200px,
    rgb(0 0 0 / 40%) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Mega menü açıkken body scroll'unu kilitle */
body.no-scroll {
  overflow: hidden;
}

/* Sol kolon: info + sosyal (masaüstü) */
header .nav .navInfo {
  position: relative;
  z-index: 2;
}

/* Sağ/orta kolon: ana menü */
header .nav .navLeft {
  position: relative;
  z-index: 2;
}

header .nav .navLeft .navInner {
  width: 100%;
}

header .nav .navLeft .navInner .leftInner > div:first-child {
  width: 100%;
}

header .nav .navLeft .navInner ul li {
  margin-bottom: 10px;
}

header .nav .navLeft .navInner ul li a {
  font-size: 30px;
  font-weight: 300;
  padding: 0 0 0 40px;
  color: #ffffff;
  display: block;
}

/* Ana menü / alt menü görünürlük durumları (masaüstü) */
@media (min-width: 1025px) {
  .mega-main-list {
    max-height: 600px;
    overflow: hidden;
    margin-bottom: 0;
  }

  .mega-submenu-list {
    display: none;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
  }

  .mega-submenu-list::-webkit-scrollbar {
    width: 6px;
  }

  .mega-submenu-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .mega-submenu-list::-webkit-scrollbar-thumb {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.6),
      rgba(216, 178, 85, 0.9)
    );
    border-radius: 999px;
  }

  .mega-submenu-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9),
      rgba(216, 178, 85, 1)
    );
  }

  .leftInner.submenu-open .mega-main-list {
    display: none;
  }

  .leftInner.submenu-open .mega-submenu-list {
    display: block;
  }
}

header .nav .navLeft .navInner ul li.inner .innerBaslik {
  position: relative;
}

header .nav .navLeft .navInner ul li.inner .innerUl {
  display: none;
  padding: 10px 0 0;
}

header .nav .navLeft .navInner ul li.inner .innerUl li {
  margin-bottom: 5px;
  padding-top: 5px;
}

header .nav .navLeft .navInner ul li.inner .innerUl li a {
  color: #ffffff;
  font-size: 19px;
  font-weight: 300;
  display: block;
  transition: all 0.3s;
}

header .nav .navLeft .navInner ul li.inner .innerUl li a:hover {
  font-weight: 500;
  padding-left: 55px;
}

/* Geri dön butonu */
.mega-back {
  display: none;
}

@media (min-width: 1025px) {
  .mega-back {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 3;
  }

  .mega-back-icon {
    line-height: 1;
  }

  .mega-back.visible {
    display: inline-flex;
  }
}

/* Glow line container */
header .nav .svg-container {
  position: relative;
  z-index: 1;
}

header .nav .svg-container #flexLineSVG {
  height: 100%;
  min-height: 100%;
}

@media (min-width: 1025px) {
  header .nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }

  header .nav .navInfo {
    order: 1;
    width: 30%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 90px;
  }

  header .nav .rightInner {
    order: 2;
    width: 27%;
    margin: 0;
    padding: 0 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
  }

  header .nav .svg-container {
    order: 3;
    left: 135px;
    transform: none;
    width: 300px;
    height: 100vh;
    min-height: 100vh;
    margin: 0 10px;
    align-self: stretch;
  }

  header .nav .navLeft {
    order: 4;
    width: 50%;
    padding-left: 10px;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Menü ul'si SVG'nin üstünde, tıklanabilir */
  header .nav .navLeft .navInner .leftInner > div:first-child ul {
    position: relative;
    z-index: 2;
  }
}

/* Hover yazı animasyonu için layout */
@media (min-width: 1024px) {
  header .leftInner .social-media-field {
    display: none;
  }

  header .menuItemAnimate {
    display: grid !important;
    height: 53px !important;
    grid-template-rows: 28px !important;
    align-items: center !important;
    line-height: 1.7 !important;
    overflow: hidden !important;
    padding: 1rem !important;
  }
}

/* SVG glow ve sosyal medya/dikey line mobil davranışı + accordion chevron + alt menü gizleme */
@media (max-width: 1024px) {
  .svg-container {
    display: none;
  }

  header .rightInner .social-media-field {
    display: none;
  }

  .menu-animate-item-active {
    display: none;
  }

  /* Masaüstü alt menü alanı mobilde gizli */
  .rightInner {
    display: none;
  }

  /* Mobil accordion: alt menü kapalıyken gizli */
  .innerUl {
    display: none;
    visibility: visible;
    position: static;
    opacity: 1;
    pointer-events: all;
  }

  /* Alt menü linkleri (Hakkımızda, Tarihçe …): soldan 10–15px boşluk */
  header .nav .navLeft .navInner ul li.inner .innerUl {
    padding-left: clamp(10px, 3vw, 15px);
    padding-right: 0;
    box-sizing: border-box;
  }

  /* Mobil: header dropdown ile aynı chevron ikonu (bk-chevron-down.svg) */
  header .nav .navLeft .navInner ul li.inner .innerBaslik:after {
    content: "";
    position: absolute;
    left: 0;
    top: 55%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background: url(../bk-icons/bk-chevron-down.svg) no-repeat center;
    background-size: contain;
    filter: invert(1);
    opacity: 0.9;
    transition: transform 0.3s ease;
  }

  /* Açık accordion: aynı ikon 180° döndürülmüş */
  header .nav .navLeft .navInner ul li.inner .innerBaslik.active:after {
    transform: translateY(-50%) rotate(180deg);
  }
}

/* Mobilde mega menü layout ayarları (sol blok scroll vb.) */
@media (min-width: 768px) and (max-width: 1024px) {
  header a.logo {
    width: 17% !important;
  }

  header .nav .navLeft .navInner ul li a {
    font-size: 34px !important;
  }

  header .nav .navLeft .navInner .leftInner {
    width: 100% !important;
    min-height: 800px !important;
    max-height: calc(100vh - 200px) !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 20px !important;
  }

  header .nav .navLeft .navInner .leftInner > div:first-child {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  header .nav .navLeft .navInner .leftInner .social-media-field {
    flex-shrink: 0 !important;
    margin-top: 30px !important;
    /* 100vw kullanma: scrollbar ile yatay taşma / sayfa scroll’u yapar */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box;
    padding-bottom: 20px !important;
  }

  header .nav .navLeft .navInner ul li.inner .innerUl li a {
    font-size: 22px !important;
  }
}

/* Mobil mega menü ve menuLink (≤850px) – menü boyutları ve pozisyonlar */
@media screen and (max-width: 850px) {
  /* Mega menüyü açan buton (hamburger) */
  header a.menuLink {
    margin-right: 15px;
    margin-left: 0;
    width: 30px;
    height: 30px;
  }

  header a.menuLink span {
    top: 19px;
  }

  header a.menuLink.opened span {
    top: 5px !important;
  }

  /* Sol blok: tam genişlik, üstten boşluk, scroll */
  header .nav .navLeft {
    width: 100%;
    padding-top: 92px;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
  }

  header .nav .navLeft .navInner .leftInner {
    width: 100%;
    padding-left: 32px;
    padding-bottom: 20px;
    min-height: 500px !important;
    max-height: calc(100vh - 400px) !important;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  header .nav .navLeft .navInner .leftInner > div:first-child {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    padding-right: 10px;
  }

  header .nav .navLeft .navInner .leftInner .social-media-field {
    flex-shrink: 0;
    margin-top: 30px;
    /* leftInner sol padding (32px) kadar genişlet + negatif margin: tam satırda ortala, yatay taşma yok */
    width: calc(100% + 32px);
    max-width: none;
    margin-left: -32px;
    margin-right: 0;
    display: flex !important;
    justify-content: center !important;
    padding-left: max(0px, env(safe-area-inset-left, 0));
    padding-right: max(0px, env(safe-area-inset-right, 0));
    box-sizing: border-box;
    padding-bottom: 20px;
  }

  header .nav .navLeft .navInner ul li {
    margin-bottom: 15px;
  }

  header .nav .navLeft .navInner ul li a {
    font-size: 20px;
  }

  /* Daha küçük ekranda chevron boyutu */
  header .nav .navLeft .navInner ul li.inner .innerBaslik:after {
    width: 13px;
    height: 13px;
  }

  header .nav .navLeft .navInner ul li.inner .innerUl li a {
    font-size: 15px;
  }

  /* Mobil/tablet mega menü içinde sosyal medya butonları küçük */
  header .nav .navLeft .navInner .leftInner .social-media-field .bk-header-social-link {
    width: 50px !important;
    height: 50px !important;
  }

  header .nav .navLeft .navInner .leftInner .social-media-field .bk-header-social-icon {
    font-size: 18px;
  }

  header .nav .navLeft .navInner .leftInner .social-media-field .bk-header-social-list {
    gap: 6px;
  }
}

/* Çok küçük ekranlarda hamburger X çizgileri */
@media screen and (max-width: 1024px) {
  header a.menuLink.opened span i:nth-child(1) {
    width: 29px !important;
  }

  header a.menuLink.opened span i:nth-child(2) {
    width: 29px !important;
  }
}

/* Mobil sosyal medya ve info alanı + buton boyutu küçültme */
@media screen and (max-width: 1024px) {
  header .nav .navLeft .navInner ul li.inner .innerUl li a {
    padding-left: 25px;
    font-size: 15px;
}

  header .nav .navLeft .navInner ul li a {
    padding: 0 0 0 20px;
  }
  header .leftInner .social-media-field {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    gap: 6px;
    align-items: center;
    justify-content: center !important;
    margin-top: 30px;
    padding-bottom: 20px;
    /* 100vw yok: yatay scroll’u önler; genişlik alt breakpoint’lerde (≤850px) daha spesifik kuralda */
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    z-index: 10;
  }

  header .leftInner .social-media-field .bk-header-social-link {
    opacity: 1 !important;
    visibility: visible !important;
    width: 50px !important;
    height: 50px !important;
  }

  header .leftInner .social-media-field .bk-header-social-icon {
    font-size: 18px;
  }

  header .social-media-field:not(.leftInner .social-media-field) {
    display: none !important;
  }

  .information-field {
    display: none;
  }
}

/* ============================================================
   1. navInfo ve social-media-field konumlandırma
   (header.css'ten birebir taşındı)
   ============================================================ */

/* navInfo: sol blok (desktop) */
@media (min-width: 1025px) {
  header .nav .navInfo {
    width: 30%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 90px;
    z-index: 3;
  }

  /* navInfo içindeki bilgi alanı sağa sabit */
  header .nav .navInfo .information-field {
    position: absolute;
    right: 0;
  }
}

/* Masaüstünde sosyal medya alanı alt kısımda */
header .social-media-field {
  position: absolute;
  bottom: 100px;
}

/* Başlangıçta ikonları JS ile animate edileceği için görünmez yap */
header .social-media-field a {
  opacity: 0;
}

/* ============================================================
   2. Sosyal ikon hover animasyonu (circle-chase)
   ============================================================ */

/* Hover’da daire efekti için container */
.fx-circle-chase-cursor {
  overflow: hidden;
  position: relative;
}

/* Metni/ikonu dairenin üstünde tutmak için */
.fx-text {
  position: relative;
  z-index: 2;
}

/* Daire katmanı (circle chase) */
.bk-header-circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: scale(0);
  border-radius: 9999px;
  background-color: var(--circle-bg-color, #ffffff);
  transition: none;
  z-index: 1;
  pointer-events: none;
}

/* Sosyal link hover’da daireyi büyüt */
.bk-header-social-link:hover .bk-header-circle {
  transform: scale(1.4);
}

/* Sosyal ikon liste ve linkler (pozisyon + hover renkleri) */
.bk-header-social-list {
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (min-width: 1280px) {
  .bk-header-social-list { gap: 12px; padding-left: 50px; }
}

@media (max-width: 480px) {
  .bk-header-social-list { gap: 8px; }
}

.bk-header-social-link {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
  overflow: hidden;
}

.bk-header-social-link:hover {
  border-color: #ffffff;
}

.bk-header-social-icon {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.35s ease;
}

.bk-header-social-link:hover .bk-header-social-icon {
  color: #0f172a; /* scorpion-950 muadili */
}

/* ============================================================
   3. İletişim (information-field) tipografisi
   ============================================================ */

.bk-header-contact-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.bk-header-contact-item {
  display: flex;
  align-items: center;
  gap: 25px;
  text-decoration: none;
}

.bk-header-contact-icon {
  font-size: 26px;
  height: 26px;
  color: rgba(156, 163, 175, 1);
  display: flex;
  transition: color 0.35s ease;
}

.bk-header-contact-text {
  font-size: 18px;
  color: rgba(156, 163, 175, 1);
  transition: color 0.35s ease;
}

.bk-header-contact-item:hover .bk-header-contact-icon {
  color: #f44700;
}

.bk-header-contact-item:hover .bk-header-contact-text {
  color: #ffffff;
}

/* ------------------------------------------------------------
   NAVINFO (sosyal + iletişim) gerekli stiller
   header.css'den taşındı (fullscreen mega menü için zorunlu)
------------------------------------------------------------ */

/* Header modülüne özel fontlar – sadece header içinde kullanılır */
@font-face {
  font-family: header-iconfont;
  font-style: normal;
  font-weight: 400;
  src: url(../../bk-header/bk-header/font/iconfont/iconfonts.eot);
  src: url(../../bk-header/bk-header/font/iconfont/iconfonts.eot#iefix) format("embedded-opentype"),
    url(../../bk-header/bk-header/font/iconfont/iconfonts.woff) format("woff"),
    url(../../bk-header/bk-header/font/iconfont/iconfonts.ttf) format("truetype"),
    url(../../bk-header/bk-header/font/iconfont/iconfonts.svg#iconfont) format("svg");
}

@font-face {
  font-family: header-icofont;
  font-style: normal;
  font-weight: 400;
  src:
    url(../../bk-header/bk-header/font/icofont.woff) format("woff");
}

header [class*="icon-"]:before,
header [class^="icon-"]:before {
  display: inline-block;
  font-family: header-iconfont;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header .icon-facebook:before { content: "\0051"; }
header .icon-instagram:before { content: "\0052"; }
header .icon-linkedin:before { content: "\0055"; }
header .icon-mail-2:before { content: "\0057"; }
header .icon-map:before { content: "\005a"; }
header .icon-phone:before { content: "\0064"; }

header .icofont-youtube-play:before {
  font-family: header-icofont !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\ecbb";
}

.fx-circle-chase-cursor {
  overflow: hidden;
  position: relative;
}

.fx-text {
  position: relative;
  z-index: 2;
}

/* Sosyal ikonlar listesi */
.bk-header-social-list {
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (min-width: 1280px) {
  .bk-header-social-list { gap: 12px; }
}

@media (max-width: 480px) {
  .bk-header-social-list { gap: 8px; }
}

/* Sosyal ikon linkleri */
.bk-header-social-link {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.bk-header-social-link:hover {
  border-color: #ffffff;
}

.bk-header-social-icon {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.35s ease;
}

/* İletişim listesi */
.bk-header-contact-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.bk-header-contact-item {
  display: flex;
  align-items: center;
  gap: 25px;
  text-decoration: none;
}

.bk-header-contact-icon {
  font-size: 26px;
  height: 26px;
  color: rgba(156, 163, 175, 1);
  display: flex;
  transition: color 0.35s ease;
}

.bk-header-contact-text {
  font-size: 18px;
  color: rgba(156, 163, 175, 1);
  transition: color 0.35s ease;
}

/* navInfo içindeki bilgi alanı konumu */
header .information-field {
  position: absolute;
  right: 0;
}