/* ==========================================================================
   MAM Creatives — Hizmetler Mega Menu (database-driven)
   Masaustu: kategoriler yan yana sutun, her sutun kendi listesiyle.
   Mobil: .mam-mega__mob-cat accordion (js/main.js drawer'a klonluyor).
   ========================================================================== */

@media (min-width: 1200px) {

  /* --- Panel kabugu ------------------------------------------------------- */

  /* Uzun secici gerekli: css/header.css ".mam-hdr__nav .tp-submenu.px-megamenu-services"
     (padding) ve partial/style.php satir ici bloktaki ".px-header-menu .px-megamenu-services"
     (width: 900px) kurallari !important ile geliyor. */
  .mam-hdr__nav.px-header-menu .mam-mega-dropdown.px-megamenu-services,
  .mam-mega-dropdown.px-megamenu-services {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(92vw, 1240px) !important;
    max-width: 1240px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(10, 10, 10, 0.08) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 16px 48px rgba(10, 10, 10, 0.1) !important;
    transform: translateX(-50%) translateY(12px) !important;
    overflow: hidden;
  }

  .px-header-menu nav > ul > li:hover > .mam-mega-dropdown.px-megamenu-services,
  .px-header-menu nav ul li.has-dropdown:hover > .tp-submenu.mam-mega-dropdown {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mam-mega-dropdown::before {
    display: none !important;
  }

  /* Nav ile panel arasindaki bosluk hover'u koparmasin */
  .mam-mega-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }

  .mam-mega__root {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mam-mega__mob-cat {
    display: none !important;
  }

  .mam-mega {
    display: block;
    width: 100%;
  }

  /* --- Sutun grid --------------------------------------------------------- */

  .mam-mega__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    /* minmax(0, 1fr): satir kapsayicinin kisitlanmis yuksekligini alsin ki
       tasan sutun kendi listesinde kaysin, panelden tasmasin. */
    grid-auto-rows: minmax(0, 1fr);
    gap: 0 8px;
    padding: 20px 16px 10px;
    max-height: min(70vh, 620px);
    overflow: hidden;
  }

  .mam-mega__col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding: 0 6px;
  }

  .mam-mega__col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0 0 8px;
    padding: 0 8px 10px;
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    font-family: var(--tp-ff-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.5);
  }

  .mam-mega__col-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--tp-common-px-mamcreatives-orange, #ef7c01);
  }

  .mam-mega__col-icon svg {
    width: 16px;
    height: 16px;
  }

  .mam-mega__col-label {
    min-width: 0;
  }

  /* --- Sutun listesi ------------------------------------------------------ */

  .mam-mega__col-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 10, 10, 0.16) transparent;
  }

  .mam-mega__col-list::-webkit-scrollbar {
    width: 5px;
  }

  .mam-mega__col-list::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(10, 10, 10, 0.16);
  }

  /* Tema kalintisi: li::before gradient dolgusu ve alt bosluk */
  .mam-mega__col-list > li {
    margin: 0 0 2px !important;
    padding: 0 !important;
    border-radius: 10px;
    overflow: visible !important;
  }

  .mam-mega__col-list > li::before {
    display: none !important;
    content: none !important;
  }

  /* --- Hizmet ogesi ------------------------------------------------------- */

  .px-header-menu .mam-mega-dropdown .mam-mega__col-list > li > a.mam-mega__item,
  .mam-mega__item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35;
    color: var(--tp-common-px-black, #0a0a0a) !important;
    text-decoration: none !important;
    text-transform: none !important;
    transform: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }

  .px-header-menu .mam-mega-dropdown .mam-mega__col-list > li > a.mam-mega__item::after,
  .mam-mega__item::after {
    display: none !important;
    content: none !important;
  }

  .px-header-menu .mam-mega-dropdown .mam-mega__col-list > li > a.mam-mega__item:hover,
  .mam-mega__item:hover,
  .mam-mega__item:focus-visible {
    padding-left: 8px !important;
    transform: none !important;
    background: rgba(255, 140, 66, 0.08) !important;
    color: var(--tp-common-px-mamcreatives-orange, #ef7c01) !important;
    outline: none;
  }

  .mam-mega__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--tp-common-px-mamcreatives-orange, #ef7c01);
    background: rgba(239, 124, 1, 0.08);
    transition: background 0.2s ease;
  }

  .mam-mega__item-icon svg {
    width: 16px;
    height: 16px;
  }

  .mam-mega__item:hover .mam-mega__item-icon {
    background: rgba(239, 124, 1, 0.16);
  }

  .mam-mega__item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
  }

  /* --- Alt satir: Tum Hizmetler ------------------------------------------- */

  /* Uzun secici: tema'nin ".mam-hdr__nav .tp-submenu li a" !important
     kurallarini ozgullukte gecmek icin gerekli. */
  .px-header-menu .mam-mega-dropdown .mam-mega > a.mam-mega__all-link,
  .mam-mega__all-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 13px 22px !important;
    border-top: 1px solid rgba(10, 10, 10, 0.07);
    border-radius: 0 !important;
    background: rgba(246, 247, 249, 0.6) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tp-common-px-black, #0a0a0a) !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }

  .px-header-menu .mam-mega-dropdown .mam-mega > a.mam-mega__all-link::after,
  .mam-mega__all-link::after {
    display: none !important;
    content: none !important;
  }

  .mam-mega__all-text {
    flex: 0 0 auto;
  }

  .mam-mega__all-badge {
    flex: 0 0 auto;
    margin-right: auto;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tp-common-px-mamcreatives-orange, #ef7c01);
    background: rgba(239, 124, 1, 0.12);
  }

  .mam-mega__all-link svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: rgba(10, 10, 10, 0.4);
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .px-header-menu .mam-mega-dropdown .mam-mega > a.mam-mega__all-link:hover,
  .mam-mega__all-link:hover,
  .mam-mega__all-link:focus-visible {
    background: rgba(239, 124, 1, 0.07) !important;
    color: var(--tp-common-px-mamcreatives-orange, #ef7c01) !important;
    padding-left: 22px !important;
    transform: none !important;
  }

  .mam-mega__all-link:hover svg {
    color: var(--tp-common-px-mamcreatives-orange, #ef7c01);
    transform: translateX(3px);
  }

  /* --- Dar masaustu ------------------------------------------------------- */

  @media (max-width: 1399.98px) {
    .mam-mega-dropdown.px-megamenu-services {
      width: min(94vw, 1080px) !important;
    }

    .mam-mega__cols {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      padding: 18px 12px 8px;
    }

    .mam-mega__item-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
    }

    .mam-mega__item-icon svg {
      width: 15px;
      height: 15px;
    }
  }
}

/* ==========================================================================
   Mobil: masaustu panelini gizle, accordion goster
   ========================================================================== */

@media (max-width: 1199.98px) {
  .mam-mega__root {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .mam-mega-dropdown .mam-mega__mob-cat {
    display: none !important;
  }
}

/* Drawer icinde mobil kategori accordion */
.mam-drawer .mam-mega__mob-cat > a {
  font-weight: 600 !important;
  color: var(--tp-common-px-black) !important;
}

.mam-drawer .mam-mega__mob-cat .tp-submenu {
  padding-left: 12px !important;
}

/* ---------------------------------------------------------------------------
   Sol kenar tasmasi duzeltmesi
   ---------------------------------------------------------------------------
   partial/style.php'deki ".px-header-menu nav > ul > li { position: relative }"
   kurali ESKI dropdown'lar icin yazilmis ve mega menuyu tasiyan li'de de
   gecerli. Bu yuzden yukaridaki "left: 50% + translateX(-50%)" panelin
   1240px'lik genisligini MENU OGESINE gore ortaliyordu; "Hizmetlerimiz"
   menunun solunda kaldigi icin panel dar ekranlarda sol kenardan tasip
   kirpiliyordu (1440px'te -43px, 1280px'te -75px; 1920px'te sorun yok,
   bu yuzden gozden kacmis).

   Cozum: YALNIZCA mega menuyu barindiran li static'e cekiliyor - boylece
   left:50% en yakin konumlandirilmis ata olan .mam-hdr__shell'e
   (position: fixed, viewport genisliginde) gore hesaplanir ve panel
   ekrana ortalanir. Diger dropdown'lar (Kurumsal / Kariyer / Iletisim)
   position:relative kalmaya ve kendi ogelerine yapisik acilmaya devam eder.

   :has() bu projede zaten kullaniliyor (bkz. partial/style.php,
   "select.form-lg:has(option[value='']:checked)").
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .px-header-menu nav > ul > li:has(> .mam-mega-dropdown) {
    position: static;
  }
}

/* ---------------------------------------------------------------------------
   Hover koprusu (baslik -> panel gecisi)
   ---------------------------------------------------------------------------
   css/header.css'te kapali dropdown artik "pointer-events: none" - boylece
   menu, kapandiktan sonra basligin altindaki bos alanda kendiliginden geri
   acilmiyor. Ancak bu, basliktan panele INERKEN gecilen olu boslugu da
   gercek bir sorun haline getirdi: eskiden bu bosluk yalnizca panelin
   kapanma gecisi boyunca (~350ms) hala hover alabilmesi sayesinde
   "kazara" gecilebiliyordu.

   Bosluk sanildigindan buyuk: panel "top: calc(100% + 8px)" kullaniyor ve
   yukaridaki tasma duzeltmesi geregi menu ogesi (li) artik static oldugu
   icin bu "100%" li'ye degil, .mam-hdr__shell'e (69px) gore hesaplaniyor.
   Olculen deger: li alt kenari 52px, panel ust kenari 76px => 24px bosluk.

   Zaten var olan ::after koprusu iki sebeple ise yaramiyordu:
     1) yalnizca 10px yuksekligindeydi (24px bosluk icin yetersiz),
     2) panelde "overflow: hidden" oldugu icin disari tasan pseudo
        KIRPILIYORDU.
   Ikisi de asagida duzeltiliyor. Kopru panelin bir parcasi oldugundan
   pointer-events'i ondan devralir: panel kapaliyken kopru de olu, yani
   yeniden acilma hatasi geri gelmez.

   (Kopru linkin ::after'ina konulamaz - orasi dropdown ok isareti icin,
   ::before de aktif sayfa alt cizgisi icin kullaniliyor.) */
@media (min-width: 1200px) {
  .mam-hdr__nav.px-header-menu .mam-mega-dropdown.px-megamenu-services,
  .mam-mega-dropdown.px-megamenu-services {
    overflow: visible;
  }

  .mam-mega-dropdown::after {
    top: -26px;
    height: 26px;
  }
}