/* ═══════════════════════════════════════════════════════════════════
   ÜST ŞERİT — LEAGUE OF GRAPHS TARZI MENÜ + PORO LOGO
   ------------------------------------------------------------------
   KULLANICI İSTEĞİ:
     · Ana Sayfa / Hesaplar / Şampiyonlar / Rekorlar / Canlı /
       Yorumlar / Arşiv Defteri KALDIRILDI
     · Yerine leagueofgraphs'teki seçenekler: Home, Champions,
       Rankings, Stats, Arena, Live, Search
     · "şuanlık tıklamak aktif olmasada koy" → bağlantılar
       TIKLANAMAZ (aria-disabled), sadece görsel. Alt seçenekler
       (All champions, Tier List vb.) açılır listede görünür.
     · Sitenin logosu PORO.

   ALT MENÜ DAVRANIŞI:
     · Masaüstü: hover VEYA odak ile açılır (CSS :hover/:focus-within)
       + klavye için aria-expanded butonu
     · Mobil: dokununca açılır (JS ile .acik sınıfı)

   Dosya ust-yeni.css'ten SONRA yüklenir.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════ SCUTTLE LOGO ═══════════════════════════════════
   Sınıf adı `.logo__poro` olarak KALDI (6 sayfada markup buna
   bağlı; yeniden adlandırmak gereksiz risk olurdu) ama GÖRSEL artık
   yengeç: assets/ui/logo/scuttle-128.png — kırmızı arka planı
   temizlenmiş, dairesel maskeli. */
.logo__poro{
  position:relative;
  display:block;
  width:52px;height:52px;flex:none;
  border-radius:50%;
  /* KIRMIZI ARKA PLAN TEMİZLENDİ (sharp ile alfa maskesi):
     arka plan şeffaf olduğu için koyu zeminde temiz duruyor. */
  background-image:url('/assets/ui/logo/scuttle-128.png');
  background-size:cover;background-position:center;
  background-color:color-mix(in srgb,var(--void-2) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--void) 55%,transparent),
    0 10px 30px -14px color-mix(in srgb,var(--gold) 80%,transparent);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
/* dış halka: marka altın çizgisi + turkuaz iç ışık */
.logo__poro::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);
  pointer-events:none;
}
.logo--bag:hover .logo__poro{
  transform:translateY(-1px) scale(1.04);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--void) 45%,transparent),
    0 14px 38px -12px color-mix(in srgb,var(--gold) 95%,transparent);
}
/* eski harf kutusunu gizle (HTML'de kalırsa diye) */
.logo__harf{display:none}

/* ══════════════ MENÜ: LEAGUE OF GRAPHS TARZI ════════════════════
   Üst seviye: ikon + etiket + (varsa) ok. Alt liste: hover/odak ile
   açılan koyu panel; satırların solunda ince çizgi (L o G düzeni). */
.lg-menu{
  display:flex;align-items:center;justify-content:center;
  gap:2px;flex-wrap:wrap;
  padding:8px 0 7px;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 12%,transparent);
}

/* ── ÜST SEVİYE ÖĞE ─────────────────────────────────────────────── */
.lg-menu__o{
  position:relative;
}
.lg-menu__b{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:2px;
  background:none;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;
  cursor:default;                /* tıklanamaz — "şuanlık aktif olmasın" */
  transition:color .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease);
}
.lg-menu__b svg{
  width:14px;height:14px;flex:none;opacity:.72;
  transition:opacity .3s var(--ease);
}
/* ok işareti (alt menüsü olanlarda) */
.lg-menu__ok{
  width:9px;height:9px;flex:none;opacity:.55;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.lg-menu__o:hover .lg-menu__b,
.lg-menu__o:focus-within .lg-menu__b{
  color:var(--gold-hi);
  background:color-mix(in srgb,var(--gold) 6%,transparent);
  border-color:color-mix(in srgb,var(--gold) 18%,transparent);
}
.lg-menu__o:hover .lg-menu__b svg,
.lg-menu__o:focus-within .lg-menu__b svg{opacity:1}
.lg-menu__o:hover .lg-menu__ok,
.lg-menu__o:focus-within .lg-menu__ok{transform:rotate(180deg);opacity:1}

/* aktif sayfa (Home) — sol altın şerit */
.lg-menu__o--aktif .lg-menu__b{
  color:var(--gold);
  background:color-mix(in srgb,var(--gold) 9%,transparent);
  border-color:color-mix(in srgb,var(--gold) 26%,transparent);
}
.lg-menu__o--aktif .lg-menu__b::before{
  content:'';position:absolute;left:-1px;top:16%;bottom:16%;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
}
.lg-menu__o--aktif .lg-menu__b svg{opacity:1}

/* ── ALT LİSTE (açılır panel) ───────────────────────────────────
   L o G düzeni: koyu panel, soldan ince çizgi, satırlar arası
   hafif ayraç, alt satırlar içe girintili (">" oku ile). */
.lg-menu__alt{
  position:absolute;left:0;top:100%;
  min-width:215px;
  margin-top:2px;
  padding:7px 0;
  background:color-mix(in srgb,var(--void) 96%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid color-mix(in srgb,var(--gold) 16%,transparent);
  border-left:2px solid color-mix(in srgb,var(--gold) 42%,transparent);
  box-shadow:0 22px 54px -22px rgba(0,0,0,.95);
  z-index:80;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),
             visibility .24s;
}
.lg-menu__o:hover .lg-menu__alt,
.lg-menu__o:focus-within .lg-menu__alt,
.lg-menu__o.acik .lg-menu__alt{
  opacity:1;visibility:visible;transform:translateY(0);
}
.lg-menu__alt a{
  display:flex;align-items:center;gap:8px;
  padding:8px 15px;
  color:var(--muted);
  font-size:11px;letter-spacing:.09em;
  text-transform:none;            /* alt satırlar normal yazı (L o G) */
  border-left:1px solid transparent;
  transition:color .25s var(--ease),background .25s var(--ease),
             border-color .25s var(--ease),padding-left .25s var(--ease);
}
.lg-menu__alt a::before{
  content:'›';color:color-mix(in srgb,var(--gold) 55%,transparent);
  font-size:13px;line-height:1;flex:none;
}
.lg-menu__alt a:hover,
.lg-menu__alt a:focus-visible{
  color:var(--gold-hi);
  background:color-mix(in srgb,var(--gold) 7%,transparent);
  border-left-color:var(--gold);
  padding-left:19px;
  outline:none;
}

/* ══════════════ ARAMA ════════════════════════════════════════════ */
.lg-ara{
  border-color:color-mix(in srgb,var(--gold) 16%,transparent);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--gold) 3%,transparent),transparent),
    var(--field);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.lg-ara:focus-within{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent),
             0 0 26px -12px color-mix(in srgb,var(--gold) 55%,transparent);
}
/* sunucu rozeti: L o G'deki "EUW" hapı gibi */
.lg-ara__sunucu{
  display:inline-flex;align-items:center;gap:5px;
  padding:0 11px;height:100%;
  border-right:1px solid var(--line);
  color:var(--gold);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
}

/* ══════════════ MOBİL ════════════════════════════════════════════
   Alt menüler satır içinde açılır (soldan çizgi), tam genişlik. */
@media (max-width:980px){
  .lg-menu{
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 0 8px;
  }
  .lg-menu__b{
    width:100%;justify-content:flex-start;
    padding:13px 14px;
    font-size:11px;letter-spacing:.1em;
    border-radius:0;
    border-width:0 0 1px 0;
    border-color:color-mix(in srgb,var(--line) 70%,transparent);
  }
  .lg-menu__b svg{width:15px;height:15px}
  .lg-menu__ok{margin-left:auto}
  .lg-menu__o--aktif .lg-menu__b{
    background:color-mix(in srgb,var(--gold) 8%,transparent);
  }
  .lg-menu__o--aktif .lg-menu__b::before{
    top:0;bottom:0;left:0;width:3px;border-radius:0;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--gold) 30%,transparent),var(--gold),
      color-mix(in srgb,var(--gold) 30%,transparent));
  }
  /* alt liste: konumlanmış panel DEĞİL, akan satırlar */
  .lg-menu__alt{
    position:static;min-width:0;
    margin:0;padding:0;
    border:0;border-left:2px solid color-mix(in srgb,var(--gold) 32%,transparent);
    background:color-mix(in srgb,var(--void-2) 60%,transparent);
    box-shadow:none;backdrop-filter:none;
    opacity:1;visibility:visible;transform:none;
    display:none;
  }
  .lg-menu__o.acik .lg-menu__alt{display:block}
  .lg-menu__alt a{padding:11px 14px 11px 22px;font-size:11.5px}
  .lg-menu__alt a:hover{padding-left:26px}
}
@media (prefers-reduced-motion:reduce){
  .lg-menu__b,.lg-menu__alt,.lg-menu__alt a,.lg-menu__ok,.logo__poro{transition:none}
}