:root{
    --mega-header-offset: 90px;   /* header yüksekliği + boşluk */
    --mega-col-min: 200px;        /* her sütunun minimum genişliği */
    --mega-header-height: 90px;   /* header gerçek yüksekliğine göre ayarla */
}

.mega-menu {
    visibility: visible;
}

/* Ana konteyner */
.mega-menu-container{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 100%;
    max-width: none;
    padding: 18px 15px;
    background: #1b1f23;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    max-height: calc(100vh - var(--mega-header-offset));
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

/* Grid row (bootstrap col'ları override için) */
.mega-menu-container .row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mega-col-min), 1fr));
    gap: 26px 15px;
    align-items: start;
    margin: 0;
}

/* Bootstrap sütun sabitlerini serbest bırak */
.mega-menu-container .col-xl-1,
.mega-menu-container .col-lg-2,
.mega-menu-container .col-md-3,
.mega-menu-container .col-sm-4,
.mega-menu-container .col-6{
    width: auto !important;
    flex: none !important;
}

/* Sütun ve başlık */
.mega-menu-column{ min-width: 190px; padding: 0 8px; box-sizing: border-box; }

.mega-menu-title{
    font-family: var(--font-saira);
    font-weight: 600;
    font-size: 11px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--theme-color);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: block;
    width: 100%;
}

/* Liste ve linkler */
.mega-menu-list{ list-style: none; margin: 0; padding: 0; }
.mega-menu-list li{ margin-bottom: 6px; }

.mega-menu-link{
    display: block;
    font-family: var(--font-saira);
    font-size: clamp(10px, 1.0vw, 12px);
    line-height: 1.28;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 3px 0 !important;
    color: #bfc3c5;
    transition: color .15s, padding .15s;
}
.mega-menu-link:hover{ color: var(--theme-color); padding-left: 8px; }

/* İnce scrollbar (görsel) */
.mega-menu-container::-webkit-scrollbar{ width: 10px; height: 10px; }
.mega-menu-container::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.06); border-radius: 8px; }

/* Hover ile açmayı devre dışı bırak (tek kural) */
.menu-item-has-children.mega-menu:hover .mega-menu-container{
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(6px) !important;
    pointer-events: none !important;
}

/* .open sınıfı ile menüyü göster (hem genel hem #services-menu için) */
#services-menu.open .mega-menu-container,
.menu-item-has-children.mega-menu.open .mega-menu-container{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

/* Açıkken ana link alt çizgi gösterimi (isteğe bağlı) */
#services-menu.open > a.drop-down::after,
.menu-item-has-children.mega-menu.open > a.drop-down::after{
    width: 100% !important;
}

/* Açıkken erişilebilirlik focus yönetimi */
.menu-item-has-children.mega-menu.open .mega-menu-container a:focus{
    outline: 2px solid rgba(255,255,255,0.06);
    outline-offset: 2px;
}

/* Drop-down pointer - estetik */
.menu-item-has-children.mega-menu > a.drop-down{ cursor: pointer; }

/* Açıldığında panel overlay / geniş görünüm (tek kural) */
.menu-item-has-children.mega-menu.open .mega-menu-container,
#services-menu.open .mega-menu-container{
  position: fixed !important;
  top: var(--mega-header-height) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  right: auto !important;
  width: min(1600px, 96vw) !important;
  max-width: 1700px !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 22px 70px rgba(2,6,23,0.65) !important;
  z-index: 3000 !important;
  overflow-y: auto !important;
  max-height: calc(100vh - var(--mega-header-height) - 24px) !important;
  background: #0f1314 !important;
  padding: 20px !important;
}

/* Büyük ekranlarda ekstra geniş versiyon */
@media (min-width: 1700px){
  .menu-item-has-children.mega-menu.open .mega-menu-container,
  #services-menu.open .mega-menu-container{
    width: min(1800px, 96vw) !important;
    max-width: 1800px !important;
  }
}

/* Masaüstü ekstra stil (sadece >=992px) */
@media (min-width: 992px){
    .mega-menu-container .row{ border-top: none; padding-top: 10px; }
}

/* Mobil: tek kolon, normal akış; değişken de güncellenir */
@media (max-width: 767px){
    :root{ --mega-header-offset: 0px; }
    .mega-menu-container{
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
        padding: 10px 8px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    .mega-menu-container .row{ display: block; grid-template-columns: none; gap: 0; }
    .mega-menu-column{ margin-bottom: 12px; }
    .mega-menu-link{ font-size: 13px; }
    /* Açıkken mobile override: normal akışa dönsün */
    .menu-item-has-children.mega-menu.open .mega-menu-container,
    #services-menu.open .mega-menu-container{
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 10px 8px !important;
    }
    .mega-menu {
        visibility: hidden;
        display: none !important;
    }
}

/* Body için opsiyonel: JS ile body.mega-open eklenince body scroll'u kapat */
body.mega-open{ overflow: hidden; touch-action: none; }