/* ==========================================================================
   ELN Atölye — Mega Menü v3 (kategori kökleri + kompakt görselli paneller)
   Yuva: parcacik/header_menu_serit.twig (yalnız masaüstü)

   Çekirdeğin menü HTML'i (header_items.php) AYNEN basılır; bu blok yalnız
   görünümü değiştirir. Her kök (menu_sablon 3) kendi alt kategorilerini
   görselli kartlarla açar. Paneller az kartlı (1-2) olduğu için tam genişlik
   şerit yerine kökün altına yaslanan, içeriğe göre genişleyen bir kart:
   solda kategori kutusu (ad, alt kategori sayısı, Tümünü Gör), sağda kartlar.
   Kategori kutusunu ve sütun sayısını betik kurar; betik çalışmazsa kartlar
   yine düzgün bir ızgarada açılır.

   Seçiciler html body ile başlar: çekirdek style.css + panelden üretilen
   site_style.css + gövdedeki satır içi stilleri yükleme sırasından bağımsız
   yener.
   ⚠ font-size / padding'de !important ŞART: çekirdeğin responsive.css'i
   1152-1360px arasında menüdeki HER span'e font-size:12px + padding:9px
   (ikisi de !important) basıyor — panel içindeki yazılar da buna dahil.
   ========================================================================== */

:root{
  --elna-mm-vurgu:#2165a7;
  --elna-mm-koyu:#1d5993;
  --elna-mm-acik:#eef4fa;
  --elna-mm-vurgu-cizgi:#b1c9e0;
  --elna-mm-metin:#111827;
  --elna-mm-soluk:#6b7280;
  --elna-mm-cizgi:#e5e9f0;
  --elna-mm-kutu:#f3f5f8;
  --elna-mm-font:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* 0) Yığın sırası: header ile yaklaşık 20 modül kabı aynı z-index 9'u
      kullanıyor; panel alttaki modüllerin altında kalmasın ve şablon
      perdesi (z-index 40) header'ı karartmasın. */
html body .header-main-div{z-index:50!important}

/* Çekirdeğin kendi perdesi (dropdown_overlay=1): şablon perdesiyle
   çiftlenmesin. jQuery show() satır içi display:block yazar; stil
   dosyasındaki !important onu da yener. */
html body .dropdown-overlay-show{display:none!important}

/* 1) Menü şeridi: beyaz zemin, mavi kenarlar yerine ince gri çizgi + hafif gölge */
html body .top-level-menu-main-div{
  background:#fff;
  border-top:0!important;
  border-bottom:1px solid var(--elna-mm-cizgi)!important;
  box-shadow:0 1px 2px rgba(17,24,39,.04),0 8px 18px -12px rgba(17,24,39,.16);
  font-family:var(--elna-mm-font);
}
html body .head-new-area-right a{white-space:nowrap}

/* 2) Kök bağlantılar: 14px/500 koyu metin; üzerindeyken/açıkken mavi yazı
      + 2px mavi alt çizgi. Düz kökler (şablon 1) de aynı stilde. */
html body .top-level-menu > li{background:transparent}
html body .top-level-menu > li.dropdown-sub-have{position:relative}
html body .top-level-menu > li > a{position:relative;display:block;text-decoration:none}
html body .top-level-menu > li > a > span{
  font-family:var(--elna-mm-font);
  font-size:14px!important;line-height:20px;padding:13px 15px!important;
  font-weight:500;letter-spacing:-.006em;white-space:nowrap;
  color:var(--elna-mm-metin);transition:color .15s ease;
}
/* Klavye odağı :focus-visible ile AYRI kuralda: fare tıklaması odağı kökte
   bırakırsa (:focus-within) vurgu takılı kalıyordu; :has desteklemeyen
   tarayıcıda yalnız bu kural düşer, :hover kuralı etkilenmez. */
html body .top-level-menu > li:hover > a > span{color:var(--elna-mm-vurgu)}
html body .top-level-menu > li:has(:focus-visible) > a > span{color:var(--elna-mm-vurgu)}
/* Alt maddesi olan kökte çekirdeğin bastığı küçük aşağı ok */
html body .top-level-menu > li > a > span i{
  display:inline-block;margin-left:4px;font-size:13px;line-height:1;vertical-align:-1px;
  color:#9ca3af;transition:transform .2s ease,color .15s ease;
}
html body .top-level-menu > li:hover > a > span i{transform:rotate(180deg);color:var(--elna-mm-vurgu)}
html body .top-level-menu > li:has(:focus-visible) > a > span i{transform:rotate(180deg);color:var(--elna-mm-vurgu)}
html body .top-level-menu > li > a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;
  border-radius:2px 2px 0 0;background:var(--elna-mm-vurgu);
  transform:scaleX(0);transition:transform .2s ease;
}
html body .top-level-menu > li:hover > a::after{transform:scaleX(1)}
html body .top-level-menu > li:has(:focus-visible) > a::after{transform:scaleX(1)}

/* 3) Panel (şablon 3): kökün altında, içeriğe göre genişleyen kart --------- */
html body .top-level-menu .sablon3-level-menu{
  --elna-mm-kart:4;
  --elna-mm-satir:1;
  --elna-mm-kart-en:176px;
  --elna-mm-bas-en:220px;
  top:100%;left:-6px;right:auto;
  width:max-content;max-width:calc(100vw - 32px);
  display:grid;
  grid-template-columns:var(--elna-mm-bas-en) repeat(var(--elna-mm-kart),var(--elna-mm-kart-en));
  grid-template-rows:repeat(var(--elna-mm-satir),auto);
  align-content:start;gap:12px;padding:14px;margin:0;
  background:#fff;border:1px solid var(--elna-mm-cizgi);
  border-radius:16px;
  box-shadow:0 26px 50px -20px rgba(17,24,39,.30),0 2px 8px rgba(17,24,39,.06);
  max-height:var(--elna-mm-yuk,max(300px,calc(100vh - 250px)));
  overflow-y:auto;scrollbar-width:thin;
  font-family:var(--elna-mm-font);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
/* Betik yoksa kategori kutusu yok: yalnız kartlar */
html body .top-level-menu .sablon3-level-menu:not(.elna-mm-hazir){
  grid-template-columns:repeat(var(--elna-mm-kart),var(--elna-mm-kart-en));
}

html body .top-level-menu > li:hover > .sablon3-level-menu{
  opacity:1;visibility:visible;transform:none;z-index:1000;
  transition:opacity .2s ease .06s,transform .2s ease .06s,visibility 0s linear .06s;
}
html body .top-level-menu > li:has(:focus-visible) > .sablon3-level-menu{
  opacity:1;visibility:visible;transform:none;z-index:1000;
  transition:opacity .2s ease .06s,transform .2s ease .06s,visibility 0s linear .06s;
}
/* Kökler arası geçiş ANINDA: eski panel beklemeden kapanır; betik menüde
   gezinildiğini işaretleyince yeni panel de gecikmesiz açılır. */
html body .top-level-menu:hover > li:not(:hover) > .sablon3-level-menu{transition:none}
html body .top-level-menu.elna-mm-gezinme > li:hover > .sablon3-level-menu{transition:none}

/* 4) Kategori kutusu (betik ekler) ----------------------------------------- */
html body .top-level-menu .sablon3-level-menu span{padding:0!important}
html body .top-level-menu .elna-mm-bas{
  grid-column:1;grid-row:1 / -1;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  box-sizing:border-box;min-height:100%;margin:0;padding:18px 18px 16px;list-style:none;
  border-radius:12px;
  background:linear-gradient(155deg,#f2f7fc 0%,#e4eef8 100%);
}
html body .top-level-menu .elna-mm-bas .elna-mm-sol{display:flex;flex-direction:column;gap:6px;min-width:0}
html body .top-level-menu .elna-mm-bas .elna-mm-ust{
  font-size:11px!important;line-height:1;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--elna-mm-vurgu);
}
html body .top-level-menu .elna-mm-bas .elna-mm-baslik{
  display:block;font-size:18px!important;line-height:1.25;font-weight:700;letter-spacing:-.015em;
  color:var(--elna-mm-metin);white-space:normal;overflow-wrap:anywhere;
}
html body .top-level-menu .elna-mm-bas .elna-mm-sayi{
  font-size:12.5px!important;line-height:1.3;font-weight:500;color:var(--elna-mm-soluk);
}
html body .top-level-menu .elna-mm-bas .elna-mm-tumu{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;
  border-radius:10px;background:var(--elna-mm-vurgu);text-decoration:none;
  box-shadow:0 8px 16px -10px rgba(33,101,167,.8);
  transition:background .15s ease,box-shadow .15s ease;
}
html body .top-level-menu .elna-mm-bas .elna-mm-tumu span{font-size:13px!important;line-height:1;font-weight:600;color:#fff}
html body .top-level-menu .elna-mm-bas .elna-mm-tumu .elna-mm-ok{transition:transform .2s ease}
html body .top-level-menu .elna-mm-bas .elna-mm-tumu:hover,
html body .top-level-menu .elna-mm-bas .elna-mm-tumu:focus-visible{
  background:var(--elna-mm-koyu);box-shadow:0 10px 20px -10px rgba(33,101,167,.9);
  text-decoration:none;outline:none;
}
html body .top-level-menu .elna-mm-bas .elna-mm-tumu:hover .elna-mm-ok{transform:translateX(3px)}

/* 5) Kartlar: büyük fotoğraf (kutuyu doldurur), altında ad ---------------- */
html body .top-level-menu .sablon3-kart{width:auto;min-width:0;list-style:none}
html body .top-level-menu .sablon3-kart > a{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;
  box-sizing:border-box;height:100%;padding:8px 8px 12px;
  background:#fff;border:1px solid var(--elna-mm-cizgi);border-radius:14px;box-shadow:none;
  text-decoration:none;
  transition:border-color .15s ease,box-shadow .2s ease,transform .2s ease;
}
html body .top-level-menu .sablon3-kart > a:hover,
html body .top-level-menu .sablon3-kart > a:focus-visible{
  border-color:var(--elna-mm-vurgu-cizgi);outline:none;transform:translateY(-2px);text-decoration:none;
  box-shadow:0 16px 30px -18px rgba(33,101,167,.55),0 2px 6px rgba(17,24,39,.05);
}
html body .top-level-menu .sablon3-kart-gorsel{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:132px;border-radius:10px;background:var(--elna-mm-kutu);overflow:hidden;
}
html body .top-level-menu .sablon3-kart-gorsel img{
  display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;transition:transform .35s ease;
}
html body .top-level-menu .sablon3-kart > a:hover .sablon3-kart-gorsel img{transform:scale(1.06)}
/* Görselsiz kart: çekirdek boş span basar. Açık mavi zeminde Line Awesome
   kutu ikonu (la-box, solid 900). */
html body .top-level-menu .sablon3-kart-gorsel:empty{background:var(--elna-mm-acik)}
html body .top-level-menu .sablon3-kart-gorsel:empty::before{
  content:"\f466";font-family:'Line Awesome Free';font-weight:900;font-style:normal;
  font-size:38px;line-height:1;color:var(--elna-mm-vurgu);opacity:.5;
  -webkit-font-smoothing:antialiased;transition:opacity .2s ease,transform .3s ease;
}
html body .top-level-menu .sablon3-kart > a:hover .sablon3-kart-gorsel:empty::before{opacity:.85;transform:scale(1.07)}
html body .top-level-menu .sablon3-level-menu .sablon3-kart-ad,
html body .top-level-menu > li:hover .sablon3-level-menu .sablon3-kart-ad{
  display:flex;align-items:flex-start;justify-content:space-between;gap:6px;
  width:100%;box-sizing:border-box;padding:0 4px!important;
  text-align:left;word-break:normal;overflow-wrap:anywhere;
  font-size:13.5px!important;line-height:1.35;font-weight:600;color:var(--elna-mm-metin);
  transition:color .15s ease;
}
/* Adın sağında küçük ok: üzerine gelince belirir */
html body .top-level-menu .sablon3-level-menu .sablon3-kart-ad::after{
  content:"\2192";flex:0 0 auto;font-weight:500;color:var(--elna-mm-vurgu);
  opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .2s ease;
}
html body .top-level-menu .sablon3-kart > a:hover .sablon3-kart-ad::after,
html body .top-level-menu .sablon3-kart > a:focus-visible .sablon3-kart-ad::after{opacity:1;transform:none}
html body .top-level-menu > li:hover .sablon3-level-menu .sablon3-kart > a:hover .sablon3-kart-ad,
html body .top-level-menu > li:focus-within .sablon3-level-menu .sablon3-kart > a:focus-visible .sablon3-kart-ad{
  color:var(--elna-mm-vurgu);
}

/* 6) Şablon 2 paneli (ileride kullanılırsa): kenar/gölge uyumu */
html body .top-level-menu > li > .sablon2-level-menu{
  border-radius:0 0 16px 16px;overflow:hidden;
  box-shadow:0 28px 56px -22px rgba(17,24,39,.28),0 2px 6px rgba(17,24,39,.05);
}

/* 7) Perde: alt maddeli bir kökün paneli açıkken sayfa hafifçe kararır.
      Header'ın yığın bağlamı (z-index 50) perdenin üstünde kalır. */
html body .elna-mm-perde{
  position:fixed;left:0;top:0;right:0;bottom:0;z-index:40;pointer-events:none;
  background:rgba(17,24,39,.20);opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility 0s linear .2s;
}
html body:has(.top-level-menu > li.dropdown-sub-have:hover) .elna-mm-perde{
  opacity:1;visibility:visible;
  transition:opacity .22s ease .06s,visibility 0s linear .06s;
}

/* 8) Dar masaüstü: 9 kök tek satıra sığsın ---------------------------------- */
@media (max-width:1360px){
  html body .top-level-menu > li > a > span{padding:13px 12px!important;font-size:13.5px!important}
  html body .top-level-menu > li > a::after{left:12px;right:12px}
  html body .top-level-menu .sablon3-level-menu{--elna-mm-kart-en:164px;--elna-mm-bas-en:204px}
  html body .top-level-menu .sablon3-kart-gorsel{height:120px}
}
@media (max-width:1200px){
  html body .top-level-menu > li > a > span{padding:13px 9px!important;font-size:13px!important}
  html body .top-level-menu > li > a::after{left:9px;right:9px}
  html body .top-level-menu > li > a > span i{margin-left:2px}
}
@media (prefers-reduced-motion:reduce){
  html body .top-level-menu .sablon3-level-menu,
  html body .top-level-menu .sablon3-kart > a,
  html body .top-level-menu .sablon3-kart-gorsel img,
  html body .top-level-menu .sablon3-kart-gorsel:empty::before,
  html body .elna-mm-perde{transition:none;transform:none}
}