/* ============================================================
 *  HOUSE OF RISE — ÜST MENÜ (TEK KAYNAK) · 2026-09-28
 *
 *  Sitenin HER halka açık sayfasındaki üst menü bu dosyadan stillenir:
 *  içerik sayfaları `ortak.css` → `@import` ile, ana sayfa (`index.html`) ve
 *  bot sayfası (`bot.html`) `<link rel="stylesheet" href="/hor-nav.css">` ile.
 *  Menüyü `ortak.js` → `navKur()` kurar (öğeler `NAV` dizisinde — TEK liste).
 *
 *  Neden ayrı dosya: kullanıcı kararı "üstteki panel hep aynı olmalı". Eskiden üç
 *  ayrı menü vardı (ana sayfa: Sunucu/Ses Kanalları/Kadro…, bot: Sistemler/Komutlar…,
 *  içerik: Topluluk/İçerik/Akış/Kılavuz) ve üç ayrı CSS'i. Stiller sayfa
 *  değişkenlerine (`--muted`, `--accent`…) DEĞİL kendi değişkenlerine bağlı —
 *  bot.html'in değişken adları farklı; ortak bir menü sayfaya göre renk değiştirmesin.
 *  ⚠️ Her seçici `nav.hn` altında: sayfaların kendi CSS'i menüye sızmasın.
 * ============================================================ */

nav.hn{
  --hn-h:66px;
  --hn-warm:#f0eeee;
  --hn-muted:rgba(240,238,238,.54);
  --hn-faint:rgba(240,238,238,.3);
  --hn-line:rgba(240,238,238,.1);
  --hn-line-h:rgba(240,238,238,.21);
  --hn-red:#ff0000;
  --hn-red2:#ff3b3b;
  --hn-black3:#0f0808;
  --hn-disp:'DM Serif Display',Georgia,serif;
  --hn-sans:'Inter',system-ui,-apple-system,sans-serif;
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hn-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 max(5vw,22px);background:rgba(0,0,0,.78);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--hn-line);
  font-family:var(--hn-sans);line-height:1.5;box-sizing:border-box;margin:0}
/* Mobil menü / açılır kutu AÇIKKEN bulanıklık kapalı: backdrop-filter'lı ata, taşan
   çocuklarının koyu zemininin ardındaki sayfayı sızdırıyordu (bkz. ortak.js navKur `durum`). */
nav.hn.acik{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.96)}
nav.hn *,nav.hn *::before,nav.hn *::after{box-sizing:border-box}
nav.hn ul{margin:0;padding:0}
nav.hn .logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;color:var(--hn-warm)}
nav.hn .logo-icon{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--hn-line-h);background:var(--hn-black3);box-shadow:0 0 18px rgba(255,0,0,.28);
  font-family:var(--hn-disp);font-size:15px;color:var(--hn-red2)}
nav.hn .logo-icon img{width:100%;height:100%;object-fit:cover;display:block}
nav.hn .logo-text{font-family:var(--hn-disp);font-size:21px;letter-spacing:-.01em;white-space:nowrap;color:var(--hn-warm)}
nav.hn .nav-links{display:flex;align-items:center;gap:2px;list-style:none}
nav.hn .nav-links>li{position:relative}
nav.hn .nav-top{position:relative;display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--hn-muted);
  font-family:var(--hn-sans);font-size:13px;font-weight:400;line-height:1.5;
  padding:8px 13px;border-radius:7px;transition:.16s;background:none;border:0;cursor:pointer;white-space:nowrap}
nav.hn .nav-top:hover{color:var(--hn-warm);background:rgba(240,238,238,.05)}
nav.hn .nav-top[aria-current="page"],nav.hn .nav-top.on{color:var(--hn-warm)}
nav.hn .nav-top[aria-current="page"]::after,nav.hn .nav-top.on::after{content:'';position:absolute;left:13px;right:13px;bottom:2px;
  height:1px;background:var(--hn-red)}
nav.hn .nav-top .car{width:8px;height:8px;flex:none;opacity:.55;transition:transform .18s}
nav.hn .nav-top[aria-expanded="true"] .car{transform:rotate(180deg)}
nav.hn .nav-links .join{color:#1a0000;background:var(--hn-red);font-weight:700;margin-left:8px}
nav.hn .nav-links .join:hover{background:var(--hn-red2);color:#1a0000}

nav.hn .drop{position:absolute;top:calc(100% + 8px);left:0;min-width:236px;list-style:none;padding:7px;
  background:rgba(6,4,4,.97);backdrop-filter:blur(18px);border:1px solid var(--hn-line-h);border-radius:3px;
  box-shadow:0 18px 56px rgba(0,0,0,.75);display:none;z-index:61}
nav.hn .drop.open{display:block}
nav.hn .drop a{display:block;text-decoration:none;padding:9px 12px;border-radius:2px;transition:.14s}
nav.hn .drop a:hover{background:rgba(255,0,0,.1)}
nav.hn .drop a[aria-current="page"]{background:rgba(255,0,0,.14)}
nav.hn .drop .dt{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--hn-warm)}
nav.hn .drop .dd{display:block;font-size:11.5px;color:var(--hn-faint);margin-top:2px;line-height:1.45}
/* Giriş/üyelik isteyen sayfa: ziyaretçi GÖRÜR (menü herkes için aynı), yanında kilit —
   tıklayınca sayfa "Discord ile giriş yap" der ve girişten sonra oraya döner.
   `girissiz` / `uyesiz` sınıflarını ortak.js → girisKur oturuma göre koyar:
   girişsiz → `data-uye` + `data-giris` öğeleri kilitli ("Discord ile giriş");
   girişli ama sunucuda değil → yalnız `data-uye` öğeleri ("sunucuya katılınca"). */
nav.hn .drop .kilit{display:none;width:11px;height:11px;flex:none;opacity:.6}
nav.hn.girissiz .drop a[data-uye] .kilit,nav.hn.girissiz .drop a[data-giris] .kilit,
nav.hn.uyesiz .drop a[data-uye] .kilit{display:inline-block}
nav.hn .drop .giris-not,nav.hn .drop .katil-not{display:none;color:var(--hn-red2);opacity:.8}
nav.hn.girissiz .drop a[data-uye] .giris-not,nav.hn.girissiz .drop a[data-giris] .giris-not,
nav.hn.uyesiz .drop a[data-uye] .katil-not{display:inline}

nav.hn .burger{display:none;background:none;border:0;color:var(--hn-warm);padding:7px;cursor:pointer;border-radius:7px}

/* YEDEK menü: ana sayfa ile bot sayfası ortak.js gelene kadar (ya da JS kapalıyken)
   yalnız logo + Keşif + Katıl gösterir. Hamburger JS ister → yedekte YOK; iki bağlantı
   dar ekranda da açık durur. `navKur()` bu menünün YERİNE ortak menüyü koyar. */
@media(max-width:1180px){
  nav.hn .nav-links.yedek{position:static;display:flex;flex-direction:row;align-items:center;gap:2px;
    max-height:none;overflow:visible;background:none;border:0;padding:0;backdrop-filter:none}
  nav.hn .nav-links.yedek .nav-top{width:auto;padding:8px 11px;font-size:13px}
  nav.hn .nav-links.yedek .join{margin:0 0 0 6px;padding:8px 13px}
}

/* oturum bloğu (`ortak.js` → `girisKur`) — menü içindeki yerleşimi */
nav.hn .oturum{display:flex;align-items:center;gap:9px}
nav.hn .oturum img{width:24px;height:24px;border-radius:50%;flex:none}
nav.hn .oturum .cik{font-size:10.5px;color:var(--hn-faint);text-decoration:none}
nav.hn .oturum .cik:hover{color:var(--hn-red2)}

@media(max-width:1180px){
  nav.hn .burger{display:flex}
  nav.hn .nav-links{position:fixed;top:var(--hn-h);left:0;right:0;max-height:calc(100vh - var(--hn-h));overflow-y:auto;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(0,0,0,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--hn-line);padding:8px 16px 20px}
  nav.hn .nav-links.open{display:flex}
  nav.hn .nav-top{width:100%;justify-content:space-between;padding:13px 4px;font-size:15px}
  nav.hn .nav-top[aria-current="page"]::after,nav.hn .nav-top.on::after{left:4px;right:auto;width:28px}
  nav.hn .drop{position:static;display:none;min-width:0;border:0;box-shadow:none;background:none;padding:0 0 8px 12px;
    border-left:1px solid var(--hn-line);margin-left:4px;backdrop-filter:none}
  nav.hn .drop.open{display:block}
  nav.hn .nav-links .join{margin:12px 0 0;text-align:center;padding:13px;justify-content:center}
  nav.hn .oturum{padding:6px 0}
  nav.hn .oturum a:not(.cik){flex:1}
  nav.hn .oturum .cik{padding:13px 4px}
}