/* bl-header.css — ortak header (vitrin + panel) */

/* scrollbar yerini her sayfada rezerve et — sayfa geçişinde header zıplamasını önler */
html { scrollbar-gutter: stable; }

:root {
  --blh-mor: #7c5cff;
  --blh-mor-deep: #5b3fd6;
  --blh-mor-ink: #6a40f5;          /* panel htab aktif metin */
  --blh-turkuaz: #0fb5a6;          /* panel sliding indicator gradient ucu */
  --blh-ink: #191427;
  --blh-ink-soft: #6b6580;
  --blh-line: #eae5f5;
  --blh-leylak: #efeaff;
  --blh-mint: #e3f5f1;
  --blh-pembe: #ffe9f1;
  --blh-sari: #fff4d6;
  --blh-bg-soft: #faf8ff;
  --blh-panel: rgba(255, 255, 255, 0.92);
  --blh-bar: rgba(255, 255, 255, 0.74);
}

[data-theme="dark"] {
  --blh-mor: #9d86ff;
  --blh-mor-deep: #8167ff;
  --blh-mor-ink: #a78bff;          /* dark panel htab aktif metin — dark leylak zemininde 5.16:1 AA (eski #9a7cff 4.44 AA-alti) */
  --blh-turkuaz: #0fb5a6;
  --blh-ink: #f1edff;
  --blh-ink-soft: #a9a2c4;
  --blh-line: rgba(157, 134, 255, 0.18);
  --blh-leylak: rgba(157, 134, 255, 0.14);
  --blh-mint: rgba(15, 181, 166, 0.16);
  --blh-pembe: rgba(217, 71, 107, 0.16);
  --blh-sari: rgba(184, 134, 11, 0.18);
  --blh-bg-soft: rgba(157, 134, 255, 0.08);
  --blh-panel: rgba(28, 24, 46, 0.94);
  --blh-bar: rgba(24, 20, 38, 0.72);
}

/* ===== TEK HEADER (.bl-header) — vitrin + panel ortak ===== */

/* position relative + sticky => absolute child (hamburger panel + avatar dropdown)
   header konteynerine gore yerlesir; z-index 45 stacking context (hero ustunde). */
.bl-header {
  position: relative;
  position: sticky; top: 0; z-index: 45;
  padding: .75rem 1rem 0;
}
/* Bar konteyneri: 80rem genislik + icerik konteyneriyle hizali yatay padding */
.bl-header-ic {
  display: flex; align-items: center; gap: 1rem;
  max-width: 80rem; margin: 0 auto;
  min-height: 56px; padding: .35rem 1.25rem;
  border-radius: 0 0 0 0;
  border-radius: 1rem;
  background: var(--blh-bar);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--blh-line);
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4), 0 12px 30px -24px rgba(20,16,38,.4);
}
[data-theme="dark"] .bl-header-ic {
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.04), 0 12px 30px -24px rgba(0,0,0,.6);
}
@media (min-width: 640px) {
  .bl-header { padding-left: 2rem; padding-right: 2rem; }
  .bl-header-ic { padding-left: 2rem; padding-right: 2rem; }
}

/* ===== PANEL HIZALAMA — bar logo/avatar panel icerik kenariyla ayni cizgide ===== */
.bl-header--panel { padding-left: 0; padding-right: 0; }
.bl-header--panel .bl-header-ic {
  max-width: 80rem;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) {
  .bl-header--panel { padding-left: 0; padding-right: 0; }
  .bl-header--panel .bl-header-ic { padding-left: 1rem; padding-right: 1rem; }
}

/* PANEL ICERIK GENISLIGI — header bar (.bl-header--panel .bl-header-ic) ile BIREBIR:
   80rem max-width + 1rem yatay padding. BUL panel app-bar cilasi (patron P5 22.06):
   icerik <main> + footer eskiden max-w-5xl (64rem) idi -> header'dan dar, kenarlar
   kaymisti. Ayni token (80rem/1rem) -> sol/sag kenarlar header ile hizali (Tailwind
   JIT tuzagindan kacinmak icin scoped CSS, ozel max-w-80rem class'i compile olmaz). */
.bl-panel-genislik {
  width: 100%;
  max-width: 80rem;
  padding-left: 1rem; padding-right: 1rem;
}

/* Sol: logo + marka */
.bl-marka-link {
  display: inline-flex; align-items: center; gap: .4rem;
  flex-shrink: 0; text-decoration: none;
}
.bl-marka-ikon { font-size: 23px; color: var(--blh-mor); }
.bl-marka {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.035em; font-size: 19px;
  color: var(--blh-ink);
}
.bl-marka-nokta { color: var(--blh-mor); }

/* Orta: esnek bosluk (vitrin — yatay nav hamburger'da) */
.bl-header-orta { flex: 1 1 auto; }

/* ===== VITRIN YATAY MEGA NAV =====
   Masaustu (>=1024px) gorunur, mobil gizli -> hamburger accordion devralir.
   Saf CSS :hover / :focus-within -> mega fade+slide; Esc/dis-tik kapanis bl-nav.js. */
.bl-mega-nav {
  display: none;
  align-items: center;
  gap: .15rem;
  margin-left: .5rem;
  font-size: 14px;
}
@media (min-width: 1024px) { .bl-mega-nav { display: flex; } }

.bl-nav-item { position: relative; }

/* Ana grup tetikleyici (buton = mega'li / a = duz link Fiyatlar) */
.bl-nav-trig {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .55rem .85rem; border-radius: 11px;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--blh-ink-soft); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: color .25s, background .25s;
}
.bl-nav-trig:hover,
.bl-nav-item:hover .bl-nav-trig,
.bl-nav-item:focus-within .bl-nav-trig { color: var(--blh-ink); background: var(--blh-leylak); }
.bl-nav-trig.on { color: var(--blh-mor); }
.bl-nav-trig-link:hover { background: var(--blh-leylak); color: var(--blh-ink); }
.bl-nav-caret-d { font-size: 13px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.bl-nav-item:hover .bl-nav-caret-d,
.bl-nav-item:focus-within .bl-nav-caret-d,
.bl-nav-trig[aria-expanded="true"] .bl-nav-caret-d { transform: rotate(180deg); }
.bl-nav-trig:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blh-bg-soft), 0 0 0 4px var(--blh-mor);
  border-radius: 11px;
}

/* Mega dropdown — eski ferah .mega davranisi (fade+slide, glassmorphism) */
.bl-mega {
  position: absolute;
  top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--blh-panel);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--blh-line);
  border-radius: 22px; padding: 14px;
  box-shadow: 0 32px 70px -28px rgba(124,92,255,.38), 0 4px 14px -6px rgba(20,16,38,.08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s cubic-bezier(.16,1,.3,1),
              transform .28s cubic-bezier(.16,1,.3,1),
              visibility .28s;
  z-index: 60;
  max-width: calc(100vw - 2rem);
}
[data-theme="dark"] .bl-mega {
  box-shadow: 0 32px 70px -28px rgba(0,0,0,.6), 0 4px 14px -6px rgba(0,0,0,.4);
}
/* hover kopru: tetik ile mega arasi bosluk hover'i kesmesin */
.bl-mega::before {
  content: ""; position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.bl-nav-item:hover .bl-mega,
.bl-nav-item:focus-within .bl-mega,
.bl-nav-trig[aria-expanded="true"] + .bl-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Esc ile kapatilan item'de odak tetik'te kalsa bile mega kapali kalir.
   JS .bl-esc-kapali ekler; bir sonraki mouseenter/click kilidi cozer. */
.bl-nav-item.bl-esc-kapali:focus-within .bl-mega {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}
.bl-nav-item.bl-esc-kapali:focus-within .bl-nav-caret-d { transform: none; }
.bl-mega-grid { display: grid; gap: 4px; }
.bl-mega-link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 13px; border-radius: 14px;
  text-decoration: none; transition: background .2s;
}
.bl-mega-link:hover { background: var(--blh-leylak); }
.bl-mega-ico {
  flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 11px; display: grid; place-items: center; font-size: 19px;
}
.bl-mega-tx { display: flex; flex-direction: column; min-width: 0; }
.bl-mega-t { font-weight: 700; font-size: 14px; color: var(--blh-ink); line-height: 1.2; }
.bl-mega-d { font-size: 12px; color: var(--blh-ink-soft); margin-top: 2px; line-height: 1.35; }
.bl-mega-foot {
  margin-top: 6px; padding: 13px; border-radius: 14px;
  background: var(--blh-bg-soft);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--blh-ink-soft);
}
.bl-mega-foot i { color: var(--blh-mor); font-size: 17px; }
.bl-mega-foot-link {
  margin-left: auto; font-weight: 700; color: var(--blh-mor); text-decoration: none;
}
.bl-mega-foot-link:hover { text-decoration: underline; }
.bl-mega-link:focus-visible,
.bl-mega-foot-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blh-bg-soft), 0 0 0 4px var(--blh-mor);
  border-radius: 14px;
}

/* ===== PANEL APP-BAR — YATAY SEKMELER (BUL panel app-bar, patron P5 22.06.2026) =====
   Mor dolu toolbar (BUL-258) SUPERSEDE -> 5 uygulama sekmesi header ORTA'sinda, CAM/NÖTR
   zemin uzerinde (Linear/Vercel tarzi). Marka moru SADECE aktif sekme indicator + vurgu;
   dolu mor serit YOK. SADECE MASAUSTU (>=1024px) gorunur; <1024px display:none -> birincil
   mobil nav alt tab-bar (blp-tabbar). id htab-nav/htab-ind + class htab/htab-rozet KORUNDU
   -> bl-panel.js sliding indicator + Kutu rozeti senkronu AYNI (ek JS yok). htab yatay
   padding 16px (8px 16px) -> JS indicator genislik hesabi (ab.width - 32) birebir uyumlu. */
.bl-app-nav {
  display: none; /* mobilde gizli (<1024px) */
}
@media (min-width: 1024px) {
  .bl-app-nav {
    position: relative;
    display: flex; align-items: center; gap: .15rem;
    margin-left: .75rem;
    flex-shrink: 0;
  }
}
.bl-app-nav .htab-ind {
  position: absolute; bottom: -6px; height: 2.5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--blh-mor), var(--blh-turkuaz, #0fb5a6));
  opacity: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              width .5s cubic-bezier(.16,1,.3,1), opacity .3s;
  box-shadow: 0 0 10px -3px var(--blh-mor);
  pointer-events: none;
}
.bl-app-nav .htab {
  /* padding yatay 16px (8px 16px) -> bl-panel.js indicator width hesabi (ab.width - 32)
     ile birebir; degistirirsen JS'teki -32 de guncellenmeli. */
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 11px;
  font-family: inherit; font-weight: 600; font-size: 14px;
  color: var(--blh-ink-soft); /* nötr cam zeminde AA */
  text-decoration: none; cursor: pointer;
  transition: color .25s, background .25s;
}
.bl-app-nav .htab i { font-size: 17px; }
.bl-app-nav .htab:hover { color: var(--blh-ink); background: var(--blh-leylak); }
/* AKTIF sekme metni: --blh-mor-ink (light #6a40f5 / dark #a78bff) -> leylak zeminde AA.
   BUL contrast cilasi (patron P5 22.06): eski --blh-mor (#7c5cff) leylak (#efeaff)
   uzerinde 3.7:1 = AA ALTI (14px/700 normal metin esigi 4.5). --blh-mor-ink tam bu
   amac icin tanimliydi (light 4.88:1, dark a78bff 5.16:1) ama .htab.on yanlislikla
   --blh-mor kullaniyordu -> dogru token'a baglandi. */
.bl-app-nav .htab.on { color: var(--blh-mor-ink); background: var(--blh-leylak); font-weight: 700; }
.bl-app-nav .htab-rozet {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #c8345a; color: #fff; /* beyaz metin 5.13:1 AA */
  font-size: 10.5px; font-weight: 800; line-height: 1; margin-left: 2px;
}
.bl-app-nav .htab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blh-bg-soft), 0 0 0 4px var(--blh-mor);
  border-radius: 11px;
}

/* ===== PANEL APP-BAR SAG AKSIYONLARI: [Profili Paylaş] + [🔔 Bildirim] ===== */
/* Profili Paylaş — bağlamsal birincil aksiyon. Marka moru ile vurgulu (cam app-bar'in
   tek mor dolu öğesi). bl-panel.js data-bl-paylas wire eder (clipboard / Web Share). */
.bl-appbar-paylas {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: .42rem .85rem;
  border-radius: 11px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  color: #fff; /* beyaz #fff / mor gradient 4.6:1+ AA (büyük metin/buton) */
  background: linear-gradient(135deg, #6a40f5, #7c3aed);
  box-shadow: 0 8px 18px -10px rgba(124,92,255,.6);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.bl-appbar-paylas:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(124,92,255,.7); }
.bl-appbar-paylas i { font-size: 16px; }
.bl-appbar-paylas:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--blh-bg-soft), 0 0 0 4px var(--blh-mor);
}
.bl-appbar-paylas .bl-appbar-paylas-ok { font-weight: 700; }
/* Kopyalandi geri-bildirimi gorununce metin yerini alir (basit toggle, bl-panel.js). */
.bl-appbar-paylas[data-kopyalandi] .bl-appbar-paylas-tx { display: none; }
/* Dar ekranda (panel app-nav gizli oldugu <1024px'te zaten Paylas da gizli) metni kis. */
@media (max-width: 1023px) { .bl-appbar-paylas { display: none; } }

/* Bildirim — Gelen Kutusu kisayolu + okunmamis rozet. Nötr icon-button. */
.bl-appbar-bildirim {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; /* WCAG 2.5.5 dokunma hedefi */
  border-radius: 12px;
  border: 1px solid var(--blh-line);
  background: var(--blh-bg-soft);
  color: var(--blh-ink); text-decoration: none;
  transition: border-color .25s, transform .25s cubic-bezier(.16,1,.3,1);
  flex-shrink: 0;
}
.bl-appbar-bildirim:hover { border-color: var(--blh-mor); transform: translateY(-1px); }
.bl-appbar-bildirim i { font-size: 19px; }
.bl-appbar-bildirim-rozet {
  position: absolute; top: 4px; right: 4px;
  display: inline-grid; place-items: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #c8345a; color: #fff; /* beyaz 5.13:1 AA */
  font-size: 9.5px; font-weight: 800; line-height: 1;
}
.bl-appbar-bildirim:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--blh-bg-soft), 0 0 0 4px var(--blh-mor);
  border-radius: 12px;
}
@media (max-width: 1023px) { .bl-appbar-bildirim { display: none; } }

/* ===== BUL-PANEL-TOOLBAR (Sunai 24.06): BUILDER ARAÇ ÇUBUĞU IŞINLAMA HEDEFİ =====
   Builder (_arac_cubugu.php Template A) Tema + Görünüm + Paylaş + Görüntüle aksiyonlarını
   buraya x-teleport ile ışınlar. SADECE builder sayfasında dolu olur; diğer panel
   sayfalarında BOŞ -> :empty{display:none} ile flex gap tetiklemez (görsel boşluk yok).
   bildirim/paylas siblingleri <1024px GİZLENİR; AMA builder araç çubuğu mobilde de erişilebilir
   kalmalı (mockup'ta yerini alacak ayrı toolbar yok) -> bu hedef her viewport'ta görünür,
   dar ekranda Tema/Görünüm etiketleri gizlenip ikon-only'ye düşer (aşağıdaki media query +
   bl-panel-mockup .bl-toolbar-etiket). Header taşmasını önler. */
.bl-header-aksiyon { display: flex; align-items: center; gap: .5rem; }
.bl-header-aksiyon:empty { display: none; }
/* İçindeki ışınlanan kapsayıcı (Template A .bl-header-arac) da dikey ortalansın. */
.bl-header-aksiyon .bl-header-arac { display: flex; align-items: center; gap: .5rem; }
/* Görüntüle ikon-only kare buton (etiketler kaldırıldı) -> bildirim ile aynı boyut dili. */
.bl-header-aksiyon .bl-arac-goruntule { width: 44px; padding: 0; }

/* SAYFA BASLIGI (ICERIK alani) — BUL panel app-bar patron P5 22.06.
   Mor toolbar KALDIRILDI -> sayfa basligi icerigin ustunde, sol-ust, TEK font sade
   (serif-it karma vurgu YOK, alt aciklama YOK). HER viewport (masaustu+mobil) gorunur ->
   sayfanin TEK h1'i. Yeni sinif (.bl-sayfa-baslik), eski .bl-panel-baslik .bl-panel-mockup
   scope'una baglıydi -> bu icerik-disi h1 icin bagimsiz sinif. */
.bl-sayfa-baslik {
  /* Header'dan nefes boslugu (patron P5 22.06: "header'a cok yakin") + daha KUCUK/rafine
     (clamp ust sinir 1.65->1.35rem, weight 800->700). Ust margin .15->1.5rem (header ile
     baslik arasi belirgin bosluk), alt 1.25->1.5rem (icerige dengeli nefes). */
  margin: 1.5rem 0 1.5rem;
  font-size: clamp(1.2rem, 1.8vw, 1.35rem); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.2;
  color: var(--blh-ink, #1f1147); /* ferah zeminde AA */
}

/* Sag: hamburger + avatar/giris.
   margin-left:auto => sag blok TUM gorunumlerde (mobil/tablet/desktop) header'in
   tam sagina yaslanir. Panel baglaminda mobilde (<1024px htab-nav gizli, orta blok
   yok) flex-spacer kalmadigindan blok ortalanabiliyordu; auto-margin kesin garanti.
   Vitrinde .bl-header-orta (flex:1) zaten itiyor -> auto-margin idempotent/zararsiz. */
.bl-header-sag {
  display: flex; align-items: center; gap: .6rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Hamburger butonu — HER ZAMAN gorunur (desktop + mobil) */
.bl-burger {
  display: grid; place-items: center;
  width: 44px; height: 44px; /* WCAG 2.5.5: min 44x44 dokunma hedefi */
  border-radius: 12px;
  border: 1px solid var(--blh-line);
  background: var(--blh-bg-soft);
  color: var(--blh-ink); cursor: pointer;
  transition: border-color .25s, transform .25s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.bl-burger:hover { border-color: var(--blh-mor); transform: translateY(-1px); }
.bl-burger i { font-size: 19px; }
.bl-burger .bl-burger-x { display: none; }
.bl-burger[aria-expanded="true"] .bl-burger-list { display: none; }
.bl-burger[aria-expanded="true"] .bl-burger-x { display: inline-flex; }

/* Avatar buton */
.bl-avatar-sar { position: relative; }
.bl-avatar-btn {
  display: inline-flex; align-items: center; padding: 5px; /* WCAG 2.5.5: 32px avatar + 5px*2 + 1px*2 = 44px efektif dokunma */
  border-radius: 999px;
  border: 1px solid var(--blh-line);
  background: var(--blh-bg-soft); cursor: pointer;
  transition: border-color .25s;
}
.bl-avatar-btn:hover { border-color: var(--blh-mor); }
.bl-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px;
  background: linear-gradient(135deg, #4b80e4, #7c3aed);
}
.bl-avatar-img {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* Girissiz: Giris + Basla */
.bl-header-link {
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--blh-ink-soft);
  padding: .45rem .7rem; border-radius: 10px;
  transition: background .2s, color .2s;
}
.bl-header-link:hover { background: var(--blh-leylak); color: var(--blh-ink); }
.bl-header-cta {
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: #fff; padding: .5rem .9rem; border-radius: 11px;
  background: linear-gradient(135deg, #4b80e4, #7c3aed);
  box-shadow: 0 8px 18px -10px rgba(124,92,255,.6);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  white-space: nowrap;
}
.bl-header-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(124,92,255,.7); }
@media (max-width: 480px) { .bl-header-link { display: none; } }

/* Avatar dropdown menu.
   right:0 => avatar (sag-yasli) altinda saga hizali; menu sola dogru acilir.
   TASMA FIX (patron 22.06): dar mobilde min-width:230px + .ferah/wrapper
   overflow-x:hidden -> menu sol kenardan tasip KIRPILIYORDU. max-width viewport
   clamp + mobilde min-width gevsetilir -> daima viewport ICINDE (sol/sag tasma yok).
   right:0'i sag header padding'iyle hizali tutmak icin clamp yeterli (avatar zaten
   header-ic padding'inin icinde -> menu sag kenari header kenarini gecmez). */
.bl-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 230px;
  max-width: calc(100vw - 1.5rem);
  background: var(--blh-panel);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--blh-line);
  border-radius: 18px; padding: 7px;
  box-shadow: 0 32px 70px -28px rgba(124,92,255,.4);
  z-index: 60; transform-origin: top right;
  animation: bl-menu-gir .2s cubic-bezier(.16,1,.3,1);
}
/* Cok dar ekran (<=360px): BUL-257 (Sunai 22.06) — avatar EN SAGDA + hamburger onun da
   saginda oldugundan, absolute right:0 + 335px genislik menuyu SOL kenardan TASIRIYORDU
   (Fedai olcum: left=-61, "Panelim" -> "anelim" kirpik). FIX: dar ekranda menuyu
   viewport'a SABITLE (position:fixed) + her iki kenardan esit bosluk (left/right:.75rem)
   -> genislik otomatik viewport-ici, sol/sag tasma matematiksel olarak imkansiz.
   top: header alti (~64px); impersonate bar (sadece admin) varsa CSS var ile asagi kayar. */
@media (max-width: 360px) {
  .bl-menu {
    position: fixed;
    top: var(--bl-menu-top, 64px);
    left: .75rem; right: .75rem;
    min-width: 0; width: auto; max-width: none;
    transform-origin: top right;
  }
}
@keyframes bl-menu-gir { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.bl-menu[hidden] { display: none; }
.bl-menu-bas { padding: 9px 13px 6px; }
/* SAAT-BAZLI SELAMLAMA (BUL patron P5 22.06) — bl-nav.js doldurur. Sik: mor aksan,
   kucuk-buyukharf izi, ad'in ustunde. :empty (JS yuklenmedi/yok) -> hic yer kaplamaz. */
.bl-menu-selam {
  display: block; margin-bottom: 1px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  /* AA TUZAGI: kucuk metin (11.5px) -> 4.5 esik. --blh-mor light=#7c5cff beyaz panelde
     4.35 GECMEZ; deep ton #5b3fd6 = 6.72 AA gecer. Dark'ta TERS: deep #8167ff = 4.36 GECMEZ,
     --blh-mor #9d86ff = 5.98 gecer. Bu yuzden tema-aware iki kural (var degil sabit HEX). */
  color: #5b3fd6; /* light beyaz panelde 6.72:1 AA */
}
[data-theme="dark"] .bl-menu-selam { color: #9d86ff; } /* dark panelde 5.98:1 AA */
.bl-menu-selam:empty { display: none; }
.bl-menu-ad { display: block; font-weight: 700; font-size: 14px; color: var(--blh-ink); }
.bl-menu-user { display: block; font-size: 12.5px; color: var(--blh-ink-soft); }
.bl-menu-sep { height: 1px; margin: 5px 7px; background: var(--blh-line); }
.bl-menu-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--blh-ink);
  text-decoration: none; transition: background .2s;
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.bl-menu-link:hover { background: var(--blh-leylak); }
.bl-menu-link i { font-size: 18px; color: var(--blh-ink-soft); }
.bl-menu-disok { font-size: 13px; color: var(--blh-mor); margin-left: auto; }
/* BUL-260 (Sunai 22.06): "Çıkış" linki kontrast AA kapanisi. ESKI #d9476b on #fff = 4.14:1
   (AA <4.5 FAIL, eski borc). YENI #be123c -> menu zemini (rgba(255,255,255,.92)) uzerinde
   ~5.97:1, hover leylak (#efeaff) uzerinde 5.35:1 -> ikisi de AA gecer. "Tehlike" kirmizisi
   hissi korunur (okunur koyu kirmizi). DARK modda menu zemini koyu (#1c182e) -> koyu kirmizi
   2.74:1'e duser; bu yuzden [data-theme=dark] override ile acik kirmizi (#ff8fa8, 7.99:1 AA). */
.bl-menu-cikis, .bl-menu-cikis i { color: #be123c; }
[data-theme="dark"] .bl-menu-cikis,
[data-theme="dark"] .bl-menu-cikis i { color: #ff8fa8; }
.bl-menu-cikis-form { margin: 0; }
.bl-menu-tema {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: 8px 13px;
}
.bl-menu-tema-et { font-size: 13px; font-weight: 600; color: var(--blh-ink-soft); }

/* ============ HAMBURGER ACILIR PANEL (slide-in sagdan) ============ */
.bl-nav-panel {
  position: absolute; top: calc(100% + .25rem); right: 1rem;
  width: min(320px, calc(100vw - 2rem));
  max-height: calc(100vh - 90px); overflow-y: auto;
  background: var(--blh-panel);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--blh-line);
  border-radius: 18px; padding: 10px;
  box-shadow: 0 32px 80px -30px rgba(124,92,255,.45);
  z-index: 55;
  animation: bl-nav-gir .22s cubic-bezier(.16,1,.3,1);
}
@media (min-width: 640px) { .bl-nav-panel { right: 2rem; } }
@keyframes bl-nav-gir { from { opacity: 0; transform: translateX(12px) scale(.98); } to { opacity: 1; transform: none; } }
.bl-nav-panel[hidden] { display: none; }
.bl-nav-grup { display: flex; flex-direction: column; gap: 2px; }
.bl-nav-sep { height: 1px; margin: 8px 6px; background: var(--blh-line); }
.bl-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; color: var(--blh-ink);
  text-decoration: none; transition: background .2s; cursor: pointer;
  background: none; border: 0; width: 100%; text-align: left;
  font-family: inherit;
}
.bl-nav-link:hover { background: var(--blh-leylak); }
.bl-nav-link.on { background: var(--blh-leylak); color: var(--blh-mor); }
.bl-nav-ikon { font-size: 19px; color: var(--blh-mor); flex-shrink: 0; }
.bl-nav-rozet {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #d9476b; color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.bl-nav-caret { margin-left: auto; font-size: 14px; color: var(--blh-ink-soft); transition: transform .25s; }

/* Accordion (vitrin mega -> hamburger) */
.bl-nav-acc summary { list-style: none; }
.bl-nav-acc summary::-webkit-details-marker { display: none; }
.bl-nav-acc[open] > summary .bl-nav-caret { transform: rotate(180deg); }
.bl-nav-alt-grup { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 14px; }
.bl-nav-alt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--blh-ink-soft);
  text-decoration: none; transition: background .2s, color .2s;
}
.bl-nav-alt:hover { background: var(--blh-leylak); color: var(--blh-ink); }
.bl-nav-alt i { font-size: 16px; color: var(--blh-mor); flex-shrink: 0; }
.bl-nav-alt-tum { font-weight: 700; color: var(--blh-mor); }

/* Hamburger CTA (girissiz Basla) */
.bl-nav-cta {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #4b80e4, #7c3aed);
  box-shadow: 0 10px 22px -12px rgba(124,92,255,.6);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.bl-nav-cta:hover { transform: translateY(-1px); }
.bl-nav-cta i { font-size: 19px; }
.bl-nav-grup-cta { gap: 6px; }

/* focus-visible halka — tum etkilesimliler */
.bl-marka-link:focus-visible,
.bl-burger:focus-visible,
.bl-avatar-btn:focus-visible,
.bl-menu-link:focus-visible,
.bl-nav-link:focus-visible,
.bl-nav-alt:focus-visible,
.bl-nav-cta:focus-visible,
.bl-header-link:focus-visible,
.bl-header-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blh-bg-soft), 0 0 0 4px var(--blh-mor);
  border-radius: 12px;
}

/* reduced-motion fallback (ZORUNLU) */
@media (prefers-reduced-motion: reduce) {
  .bl-burger, .bl-avatar-btn, .bl-header-cta, .bl-nav-cta, .bl-nav-caret,
  .bl-nav-trig, .bl-nav-caret-d, .bl-mega, .bl-mega-link,
  .bl-app-nav .htab, .bl-app-nav .htab-ind,
  .bl-appbar-paylas, .bl-appbar-bildirim { transition: none; }
  .bl-burger:hover, .bl-header-cta:hover, .bl-nav-cta:hover,
  .bl-appbar-paylas:hover, .bl-appbar-bildirim:hover { transform: none; }
  .bl-mega { transform: translateX(-50%); }
  .bl-nav-item:hover .bl-mega,
  .bl-nav-item:focus-within .bl-mega,
  .bl-nav-trig[aria-expanded="true"] + .bl-mega { transform: translateX(-50%); }
  .bl-nav-item.bl-esc-kapali:focus-within .bl-mega {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .bl-menu, .bl-nav-panel { animation: none; }
}