/**
 * ORTAK UST BAR — panel (/), Flowscope (/scope) ve landing (4321) icin TEK kaynak.
 *
 * NEDEN: ust serit uc yerde uc kez yazilmisti — panelin `index.html` <style>
 * blogunda, Flowscope'un `fw-header`inda ve site'in kendi navbar'inda. Bir
 * rengi ya da bir dugmeyi degistirmek uc dosyada uc duzeltme demekti; pratikte
 * uc yuz birbirinden ayrildi. Artik markup da bicim de burada.
 *
 * TOKEN KOPRUSU: bar bulundugu sayfanin paletini MIRAS ALIR, yoksa kendi
 * degerine duser. Panelde `--fg/--line/--acc` (theme.css uzerinden), landing'de
 * `--text/--border` tanimli; ikisi de yoksa asagidaki sabitler gecerli. Bu
 * sayede bar panelde bugunku gorunumunu aynen korur, landing'de de yabanci
 * durmaz — ve hicbir sayfa nav icin ayrica palet tanimlamak zorunda kalmaz.
 *
 * ⚠️ Secicilerin hepsi `.hq-nav` altinda. Panelin genel `button{...}` kurali
 * (0,0,1) bar icindeki `.hq-nav button` (0,1,1) tarafindan eziliyor — bar bu
 * yuzden panelin disinda da ayni gorunur. Buradan bir kurali cikarirsan
 * landing'de cikplak tarayici dugmesi kalir.
 */

/**
 * Barin YUKSEKLIGI sabit ve paylasilan bir token.
 *
 * NEDEN: yuzeyler arasi gecis ayni sekmede yapiliyor. Bar her sayfada ayni
 * dosyadan geldigi icin ayni GORUNUYOR, ama panelde komut kutusu var, landing'de
 * yok — dogal yukseklikleri 63px ile 70px arasinda oynuyordu ve gecerken altta
 * duran icerik birkac piksel ziplayarak "sayfa degisti" hissi veriyordu.
 * Sabit yukseklik, barin duruyor gibi gorunmesinin sarti.
 *
 * Panelin sticky yan paneli de bu token'a dayanir; degistirirsen ikisi birden
 * dogru kalir.
 */
:root { --hq-nav-h: 56px; }
/* Dar ekranda bar IKI satir (ust: urun + durum, alt: bolmeli gecis). Token da
   buna esit — panelin sticky ogeleri bara dayanir (2026-09-27). */
@media (max-width: 760px) { :root { --hq-nav-h: 98px; } }

/**
 * ⚠️ KENDI RESET'I. Bar host sayfanin global kurallarina GUVENEMEZ: panel ve
 * landing `*{box-sizing:border-box}` yaziyor, Flowscope ise yalnizca `.fw *`
 * icin — bar `.fw`nin disinda oldugu icin `content-box` kaliyordu ve
 * `min-height:70px` uzerine padding+kenarlik eklenip bar 99px'e cikiyordu
 * (olculdu). Ayni sekmede gecerken 29px'lik bir ziplama demekti.
 *
 * font-size da ayni sebeple ACIKCA yaziliyor: panelin body'si 14px, Flowscope'un
 * 16px; barin ic olculeri buna gore kayiyordu.
 */
.hq-nav, .hq-nav *, .hq-nav *::before, .hq-nav *::after { box-sizing: border-box; }

.hq-nav {
  min-height: var(--hq-nav-h);
  /* Host gövdesi dikey flex olabilir (panel): bar orada KÜÇÜLMESİN. Dar ekranda
     satırlar sarılınca yükseklik artmalı; küçülebilir öğe 70px'e sıkışıyor ve
     taşan düğmeler alttaki yan panelin üstüne biniyordu (ölçüldü 420px). */
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.55;
  /* --- palet koprusu: host token'i → nav token'i → sabit --- */
  --hqn-bg:       var(--bg, #08090f);
  --hqn-fg:       var(--fg, var(--text, #e9e9ed));
  --hqn-mut:      var(--mut, var(--text-muted, #8b8d9c));
  --hqn-line:     var(--line, var(--border, #20222f));
  --hqn-card:     var(--card, var(--surface, #0e1018));
  --hqn-card2:    var(--card2, var(--surface-raised, #1b1e2e));
  --hqn-acc:      var(--acc, var(--accent, #9184d9));
  --hqn-acc-dim:  var(--acc-dim, var(--accent-dim, rgba(145, 132, 217, .14)));
  --hqn-ok:       var(--ok, var(--good, #4ea87b));
  --hqn-ok-dim:   var(--ok-dim, var(--good-dim, rgba(78, 168, 123, .14)));
  --hqn-no:       var(--no, var(--fail, #d4574e));
  --hqn-no-dim:   var(--no-dim, var(--fail-dim, rgba(212, 87, 78, .14)));
  --hqn-sk:       var(--sk, var(--warn, #c8973f));
  --hqn-sk-dim:   var(--sk-dim, var(--warn-dim, rgba(200, 151, 63, .14)));
  --hqn-sans:     var(--sans, var(--font-sans, Inter, system-ui, sans-serif));
  --hqn-mono:     var(--mono, var(--font-mono, "Fira Code", ui-monospace, monospace));
  --hqn-t:        var(--t, var(--motion, .18s ease));
  --hqn-sh:       var(--sh, var(--shadow, 0 18px 40px rgba(0, 0, 0, .45)));

  position: sticky;
  top: 0;
  z-index: 40;
  /* UC KOLON: sol grup · serit · sag grup. `1fr auto 1fr` ortadakini
     yanlardaki icerikten BAGIMSIZ olarak barin merkezine koyar ve yan
     kolonlari ona yer acmaya zorlar. Onceki hal seriti `absolute; left:50%`
     ile ortaliyordu: merkez dogruydu ama panelde komut kutusuna 44px
     biniyordu (olculdu). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 0 16px;
  background: color-mix(in srgb, var(--hqn-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hqn-line);
  font-family: var(--hqn-sans);
  color: var(--hqn-fg);
}

/* Barin kendi dugme tabani. Panelin genel `button` kuralina GUVENMEZ:
   Flowscope ve landing'de o kural yok. */
.hq-nav button {
  font: 500 13px/1.35 var(--hqn-sans);
  cursor: pointer;
  border: 1px solid var(--hqn-line);
  background: var(--hqn-card2);
  color: var(--hqn-fg);
  padding: 8px 11px;
  border-radius: 8px;
  width: auto;
  margin: 0;
  text-align: left;
  transition: background var(--hqn-t), border-color var(--hqn-t), color var(--hqn-t);
}
.hq-nav button:hover:not(:disabled) {
  border-color: var(--hqn-acc);
  background: var(--hqn-acc-dim);
  color: var(--hqn-fg);
}
.hq-nav button:active:not(:disabled) { transform: translateY(1px); }
.hq-nav :focus-visible { outline: 2px solid var(--hqn-acc); outline-offset: 2px; border-radius: 5px; }

/* Kolon iclerinde yatay dizilim. `min-width:0` SART: onsuz uzun bir urun adi
   kolonu buyutup seriti merkezden kaydirir. */
.hq-nav .hqn-left,
.hq-nav .hqn-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hq-nav .hqn-right { justify-content: flex-end; gap: 8px; }
.hq-nav [hidden] { display: none !important; }

/* ---- yan panel daraltma dugmesi (yalniz panelde) ------------------------- */
.hq-nav #sbToggle {
  width: 32px; height: 32px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--hqn-line);
  background: var(--hqn-card); color: var(--hqn-mut);
}
.hq-nav #sbToggle svg { width: 15px; height: 15px; transition: transform var(--hqn-t); }
.hq-nav #sbToggle:hover { border-color: var(--hqn-acc); color: var(--hqn-acc); background: var(--hqn-acc-dim); }
body.sb-collapsed .hq-nav #sbToggle svg { transform: rotate(180deg); }

/* ---- marka + urun secici + sayfa adi ------------------------------------ */
.hq-nav .hq-badge {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px var(--hqn-mono); letter-spacing: .04em;
  background: var(--hqn-acc-dim); color: var(--hqn-acc);
  border: 1px solid color-mix(in srgb, var(--hqn-acc) 38%, transparent);
  text-decoration: none; flex: 0 0 auto;
}
.hq-nav a.hq-badge:hover { box-shadow: 0 0 14px var(--hqn-acc-dim); }
.hq-nav .crumb { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.hq-nav .crumb-root { color: var(--hqn-fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hq-nav .crumb-sep { color: var(--hqn-mut); opacity: .55; }
.hq-nav .crumb-leaf { color: var(--hqn-fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hq-nav .crumb-leaf:empty { display: none; }

.hq-nav .hqn-prod { position: relative; display: inline-flex; min-width: 0; }
.hq-nav .hqn-prod-btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 260px;
  padding: 4px 8px 4px 5px; border-radius: 9px; background: transparent;
  border: 1px solid var(--hqn-line); height: 32px;
}
.hq-nav .hqn-prod-btn .crumb-root { font-size: 13.5px; }
.hq-nav .hqn-prod-btn[aria-expanded="true"] { border-color: var(--hqn-acc); background: var(--hqn-acc-dim); }
.hq-nav .hqn-chev { display: inline-flex; color: var(--hqn-mut); flex: none; }
.hq-nav .hqn-chev svg { width: 14px; height: 14px; transition: transform var(--hqn-t); }
.hq-nav .hqn-prod-btn[aria-expanded="true"] .hqn-chev svg { transform: rotate(180deg); }
.hq-nav .hqn-fav { display: inline-flex; flex: none; }
.hq-nav .hqn-fav-in {
  width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center;
  font: 700 11px/1 var(--hqn-sans); color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 55% 58%), hsl(calc(var(--h) + 28) 50% 40%));
}

/* ---- açılır menüler (urun · durum) --------------------------------------- */
.hq-nav .hqn-pop {
  position: absolute; top: calc(100% + 8px); z-index: 62;
  width: 320px; max-width: calc(100vw - 24px); max-height: min(70vh, 480px); overflow: auto;
  background: var(--hqn-card); border: 1px solid var(--hqn-line); border-radius: 12px;
  box-shadow: var(--hqn-sh); padding: 6px; font-size: 13px; color: var(--hqn-fg);
}
.hq-nav .hqn-pop-l { left: 0; }
.hq-nav .hqn-pop-r { right: 0; width: 340px; }
.hq-nav .hqn-pop-h {
  font: 700 10.5px var(--hqn-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--hqn-mut); padding: 6px 8px 4px;
}
.hq-nav .hqn-pop-empty { padding: 8px; color: var(--hqn-mut); }
.hq-nav .hqn-pop-sep { border-top: 1px solid var(--hqn-line); margin: 4px 0; }
.hq-nav .hqn-pop-q {
  display: block; width: calc(100% - 8px); margin: 2px 4px 6px; padding: 7px 10px;
  border: 1px solid var(--hqn-line); border-radius: 8px; background: var(--hqn-card2);
  color: var(--hqn-fg); font: 13px var(--hqn-sans); outline: none;
}
.hq-nav .hqn-pop-q:focus { border-color: var(--hqn-acc); }
.hq-nav .hqn-pop button.hqn-pi,
.hq-nav .hqn-pop button.hqn-sr {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0;
  border-radius: 8px; background: transparent; color: var(--hqn-fg); text-align: left; font-weight: 400;
}
.hq-nav .hqn-pop button.hqn-pi:hover,
.hq-nav .hqn-pop button.hqn-sr:hover,
.hq-nav .hqn-pop button:focus-visible { background: var(--hqn-acc-dim); border-color: transparent; outline: none; }
.hq-nav .hqn-pi.on { background: var(--hqn-acc-dim); }
.hq-nav .hqn-pi-t, .hq-nav .hqn-sr-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hq-nav .hqn-pi-t b, .hq-nav .hqn-sr-t b { font-weight: 600; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-nav .hqn-pi-t small { font: 11.5px var(--hqn-mono); color: var(--hqn-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-nav .hqn-sr-t small { font-size: 12px; color: var(--hqn-mut); line-height: 1.4; }
.hq-nav .hqn-pi-ok { display: inline-flex; color: var(--hqn-acc); }
.hq-nav .hqn-pi-ok svg { width: 16px; height: 16px; }
.hq-nav .hqn-pi-add { color: var(--hqn-acc) !important; font-weight: 600 !important; }
.hq-nav .hqn-pi-plus { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--hqn-acc) 55%, transparent); }
.hq-nav .hqn-pi-plus svg { width: 13px; height: 13px; }
.hq-nav .hqn-pop div.hqn-sr { display: flex; align-items: center; gap: 10px; padding: 8px; }
.hq-nav .hqn-sr { align-items: flex-start !important; }
.hq-nav .hqn-sr .hqn-dot { margin-top: 5px; }
.hq-nav .hqn-sr-go { font-size: 12px; font-weight: 600; color: var(--hqn-acc); white-space: nowrap; }

/* ---- durum noktasi (ortak) ------------------------------------------------ */
.hq-nav .hqn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--hqn-mut); }
.hq-nav .hqn-dot[data-tone="ok"] { background: var(--hqn-ok); }
.hq-nav .hqn-dot[data-tone="sk"] { background: var(--hqn-sk); }
.hq-nav .hqn-dot[data-tone="no"] { background: var(--hqn-no); }
.hq-nav .hqn-dot[data-tone="live"] { background: var(--hqn-ok); box-shadow: 0 0 0 3px var(--hqn-ok-dim); animation: hqn-pulse 1.6s ease-in-out infinite; }
@keyframes hqn-pulse { 50% { box-shadow: 0 0 0 5px transparent; } }

/* ---- tek durum dugmesi ---------------------------------------------------- */
.hq-nav #cxWrap { position: relative; display: inline-flex; }
.hq-nav .hqn-stat {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px;
  border-radius: 9px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--hqn-card); color: var(--hqn-mut); border: 1px solid var(--hqn-line);
}
.hq-nav .hqn-stat .hqn-dot { background: var(--hqn-mut); }
.hq-nav .hqn-stat[data-tone="ok"] { font-weight: 500; }
.hq-nav .hqn-stat[data-tone="ok"] .hqn-dot { background: var(--hqn-ok); }
.hq-nav .hqn-stat[data-tone="sk"] { color: var(--hqn-sk); background: var(--hqn-sk-dim); border-color: color-mix(in srgb, var(--hqn-sk) 45%, var(--hqn-line)); }
.hq-nav .hqn-stat[data-tone="sk"] .hqn-dot { background: var(--hqn-sk); }
.hq-nav .hqn-stat[data-tone="no"] { color: var(--hqn-no); background: var(--hqn-no-dim); border-color: color-mix(in srgb, var(--hqn-no) 45%, var(--hqn-line)); }
.hq-nav .hqn-stat[data-tone="no"] .hqn-dot { background: var(--hqn-no); }
.hq-nav .hqn-stat-n { display: none; }
.hq-nav .hqn-src { display: none !important; }

/* ---- canli kosum rozeti --------------------------------------------------- */
.hq-nav .hqn-live {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; min-width: 0;
  border-radius: 9px; background: var(--hqn-ok-dim); color: var(--hqn-ok);
  border: 1px solid color-mix(in srgb, var(--hqn-ok) 30%, transparent); font-size: 13px;
}
.hq-nav .hqn-live:hover { background: color-mix(in srgb, var(--hqn-ok) 22%, transparent) !important; border-color: var(--hqn-ok) !important; color: var(--hqn-ok) !important; }
.hq-nav .hqn-live-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; font-weight: 500; }
.hq-nav .hqn-live-t b { font-weight: 600; }
.hq-nav .hqn-clock { font: 600 12.5px var(--hqn-mono); font-variant-numeric: tabular-nums; }

/* ---- tema + hesap (landing) ------------------------------------------------ */
.hq-nav .hqn-ib {
  width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; flex: none;
  border-radius: 8px; background: var(--hqn-card); color: var(--hqn-mut); text-align: center;
}
.hq-nav .hqn-ib svg { width: 16px; height: 16px; }
.hq-nav .hqn-acct { display: inline-flex; }
.hq-nav .hqn-acct:empty { display: none; }
.hq-nav .hqn-av {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--hqn-acc); color: #fff; font: 600 11px var(--hqn-sans); text-decoration: none;
}
.hq-nav .hqn-login {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--hqn-acc);
  background: var(--hqn-acc-dim); border: 1px solid color-mix(in srgb, var(--hqn-acc) 40%, transparent);
}
.hq-nav .hqn-login:hover { border-color: var(--hqn-acc); }

/* ---- komut kutusu (⌘K) -------------------------------------------------- */
/* 2026-09-27'den beri SAG grupta, sabit ~220px. Kosum surerken (.hqn-busy)
   ve dar ekranda simgeye kuculur; odaklaninca (label tiklamasi input'u
   odaklar) kutu disari dogru acilir. */
/* Yukseklik ACIK: kutu asagi indiginde (position:absolute) sarmalayici 0'a
   inip hayalet ve menu yanlis yere dusuyordu (olculdu). */
.hq-nav .cmdwrap { position: relative; display: flex; min-width: 0; flex: 0 1 220px; height: 32px; }
.hq-nav .cmdbox {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px;
  background: var(--hqn-card); border: 1px solid var(--hqn-line); border-radius: 9px;
  padding: 0 8px 0 10px; color: var(--hqn-mut); transition: border-color var(--hqn-t); cursor: text;
}
.hq-nav .cmdbox:focus-within { border-color: color-mix(in srgb, var(--hqn-acc) 55%, var(--hqn-line)); }
.hq-nav .cmdbox svg { width: 15px; height: 15px; flex-shrink: 0; }
.hq-nav .cmdbox input {
  flex: 1 1 0; min-width: 0; border: 0; background: none; outline: none; color: var(--hqn-fg);
  font: 400 13px var(--hqn-sans); padding: 0; margin: 0; width: auto;
}
.hq-nav .cmdbox input::placeholder { color: var(--hqn-mut); }
/* Panelin genel `input:focus` cercevesi kutunun icine sizmasin. */
.hq-nav .cmdbox input, .hq-nav .cmdbox input:focus { border: 0 !important; box-shadow: none !important; outline: none !important; background: none !important; height: auto; }
.hq-nav .cmdbox kbd {
  font: 500 10.5px var(--hqn-mono); color: var(--hqn-mut);
  border: 1px solid var(--hqn-line); border-radius: 4px; padding: 0 5px; background: var(--hqn-card2);
}
.hq-nav.hqn-busy .cmdwrap { flex: 0 0 32px; }
.hq-nav.hqn-busy .cmdbox { padding: 0; justify-content: center; }
.hq-nav.hqn-busy .cmdbox input { flex: 0 0 0; width: 0; opacity: 0; }
.hq-nav.hqn-busy .cmdbox kbd { display: none; }
/* Kucuk hâlde odaklaninca kutu barin ALTINA acilir: satirin icinde
   genislese gecis dugmelerinin ustune biniyordu (olculdu 1024 px). */
.hq-nav.hqn-busy .cmdwrap:focus-within .cmdbox {
  position: absolute; right: 0; top: calc(100% + 8px); width: 320px; height: 38px; z-index: 61;
  padding: 0 8px 0 10px; justify-content: flex-start;
  background: var(--hqn-card); box-shadow: var(--hqn-sh); border-color: var(--hqn-acc);
}
.hq-nav.hqn-busy .cmdwrap:focus-within .cmdbox input { flex: 1 1 0; width: auto; opacity: 1; }
.hq-nav.hqn-busy .cmdwrap:focus-within #cmdMenu { top: calc(100% + 52px); }
.hq-nav.hqn-busy .cmdwrap:focus-within::before { opacity: 1; }
/* Kutu asagi inince yerinde bos kalmasin: simgenin hayaleti. */
.hq-nav .cmdwrap::before {
  content: ""; position: absolute; inset: 0; border-radius: 9px; border: 1px solid var(--hqn-acc);
  background: var(--hqn-acc-dim); opacity: 0; pointer-events: none;
}
.hq-nav #cmdMenu {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto;
  width: min(480px, calc(100vw - 24px)); z-index: 63;
  background: var(--hqn-card); border: 1px solid var(--hqn-line); border-radius: 11px;
  box-shadow: var(--hqn-sh); padding: 6px; max-height: 340px; overflow: auto;
}
.hq-nav #cmdMenu[hidden] { display: none !important; }
.hq-nav #cmdMenu .cmd-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: pointer;
}
.hq-nav #cmdMenu .cmd-item:hover,
.hq-nav #cmdMenu .cmd-item.on { background: var(--hqn-acc-dim); }
.hq-nav #cmdMenu .cmd-k {
  font: 500 10px var(--hqn-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--hqn-acc); min-width: 34px;
}
.hq-nav #cmdMenu .cmd-s { color: var(--hqn-mut); font-size: 12px; margin-left: auto; }

/* ---- yuzey anahtari: bolmeli dugme ------------------------------------- */
/* Barin `1fr auto 1fr` izgarasinin ORTA kolonu — gercek merkez. */
.hq-nav .hqn-switch {
  display: flex; align-items: center; gap: 2px; white-space: nowrap;
  padding: 3px; border-radius: 10px; background: var(--hqn-card2); border: 1px solid var(--hqn-line);
}
.hq-nav .hqn-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px;
  border-radius: 7px; border: 0; color: var(--hqn-mut);
  font-size: 13px; font-weight: 500; line-height: 1.5; text-decoration: none;
  transition: background var(--hqn-t), color var(--hqn-t);
}
.hq-nav .hqn-go:hover { color: var(--hqn-fg); background: color-mix(in srgb, var(--hqn-card) 70%, transparent); }
/* Bulundugun yuzey: link degil, isaret (aria-current). */
.hq-nav .hqn-go.hqn-on {
  background: var(--hqn-card); color: var(--hqn-acc); font-weight: 600; cursor: default;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px color-mix(in srgb, var(--hqn-acc) 22%, transparent);
}
.hq-nav .sl-mark { display: inline-flex; flex-shrink: 0; }
.hq-nav .sl-mark svg { width: 15px; height: 15px; }

/* ---- dar ekran ---------------------------------------------------------- */
/* 1180 px alti: sayfa adi feda edilir (sol menu/sekme zaten soyluyor),
   arama simgeye kuculur. */
@media (max-width: 1180px) {
  .hq-nav .crumb-sep, .hq-nav .crumb-leaf { display: none; }
  .hq-nav .cmdwrap { flex: 0 0 32px; }
  .hq-nav .cmdbox { padding: 0; justify-content: center; }
  .hq-nav .cmdbox input { flex: 0 0 0; width: 0; opacity: 0; }
  .hq-nav .cmdbox kbd { display: none; }
  .hq-nav .cmdwrap:focus-within .cmdbox {
    position: absolute; right: 0; top: calc(100% + 8px); width: 320px; height: 38px; z-index: 61;
    padding: 0 8px 0 10px; justify-content: flex-start;
    background: var(--hqn-card); box-shadow: var(--hqn-sh); border-color: var(--hqn-acc);
  }
  .hq-nav .cmdwrap:focus-within .cmdbox input { flex: 1 1 0; width: auto; opacity: 1; }
  .hq-nav .cmdwrap:focus-within #cmdMenu { top: calc(100% + 52px); }
  .hq-nav .cmdwrap:focus-within::before { opacity: 1; }
  .hq-nav .hqn-live-t { max-width: 140px; }
}
@media (max-width: 960px) {
  .hq-nav .hqn-go .sl-mark { display: none; }
  .hq-nav .hqn-live-t { display: none; }
}
/* 760 px alti IKI SATIR: ust satirda urun + durum, altta tam genislik gecis. */
@media (max-width: 760px) {
  .hq-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 40px 40px;
    row-gap: 6px; column-gap: 8px; padding: 6px 12px; height: var(--hq-nav-h);
    align-content: center;
  }
  .hq-nav .hqn-left { grid-column: 1; grid-row: 1; gap: 8px; }
  .hq-nav .hqn-right { grid-column: 2; grid-row: 1; gap: 6px; }
  .hq-nav .hqn-switch { grid-column: 1 / -1; grid-row: 2; }
  .hq-nav .hqn-go { flex: 1; }
  .hq-nav .hqn-prod-btn { max-width: 180px; }
  .hq-nav .hqn-stat { padding: 0 10px; }
  .hq-nav .hqn-stat .hqn-stat-t { display: none; }
  .hq-nav .hqn-stat .hqn-stat-n { display: inline; }
  .hq-nav .hqn-stat[data-tone="ok"] .hqn-stat-n::after { content: "✓"; }
  .hq-nav .hqn-pop-r { position: fixed; top: calc(var(--hq-nav-h) + 4px); right: 12px; left: 12px; width: auto; }
  .hq-nav .hqn-pop-l { position: fixed; top: calc(var(--hq-nav-h) + 4px); left: 12px; right: 12px; width: auto; }
  .hq-nav .cmdwrap:focus-within .cmdbox { position: fixed; top: calc(var(--hq-nav-h) + 6px); left: 12px; right: 12px; width: auto; height: 40px; }
  .hq-nav #cmdMenu,
  .hq-nav .cmdwrap:focus-within #cmdMenu { position: fixed; top: calc(var(--hq-nav-h) + 52px); left: 12px; right: 12px; width: auto; }
}
@media (max-width: 420px) {
  .hq-nav .hq-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hq-nav *, .hq-nav *::before, .hq-nav *::after { transition: none !important; animation: none !important; }
}