/* ====================================================================
   nav-lab.css v2 — UST MENU SEKMELERI: 50 tasarim + ikon setleri + demo paneli (2026-10-13). assets/js/nav-lab.js
   Yalniz PC + tablet (>=561px); telefon menusu degismez. Hover yok, yuvarlak hap yok. Uretici: gen.py
   ==================================================================== */
:root { --nl-kab:#EEF3FB; --nl-kab-g:inset 0 -2px 0 rgba(15,42,86,.08); --nl-bas:#E9EEF6; --nl-bas-g:inset 0 2px 5px rgba(15,42,86,.16);
  --nl-ray:#EEF3FB; --nl-ray-g:inset 0 1px 2px rgba(15,42,86,.08); --nl-ray-on:#fff; --nl-ray-on-g:0 1px 2px rgba(15,42,86,.12), 0 2px 8px -2px rgba(15,42,86,.12);
  --nl-koyu:#0F2A56; --nl-koyu-y:#fff; --nl-mavi-g:linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6); --nl-cizgi:rgba(15,42,86,.12); --nl-oyuk:#fff; }
html[data-tema="koyu"] { --nl-kab:var(--k-kabarik,#181818); --nl-kab-g:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -2px 0 rgba(0,0,0,.5);
  --nl-bas:var(--kd-basik,#0B0B0B); --nl-bas-g:inset 0 2px 7px rgba(0,0,0,.75), inset 0 0 0 1px var(--kd-kenar,#181818);
  --nl-ray:var(--k-girdi,#0F0F0F); --nl-ray-g:inset 0 0 0 1px var(--kd-kenar,#181818); --nl-ray-on:var(--k-kabarik,#181818); --nl-ray-on-g:inset 0 -2px 0 rgba(0,0,0,.5);
  --nl-koyu:#EDEDED; --nl-koyu-y:#0F0F0F; --nl-mavi-g:linear-gradient(150deg,#1A3478,#1E4CC4 60%,#2B63DD); --nl-cizgi:var(--kd-kenar,#181818); --nl-oyuk:var(--k-yuzey,#111); }
@media (min-width:561px) {
  html[data-nd] body.bas2 .menu nav { position:relative; }
  html[data-nd] body.bas2 .menu nav button svg { width:17px; height:17px; flex:0 0 auto; }
  html[data-nd] body.bas2 .nav-iz { left:0 !important; transition:transform .32s cubic-bezier(.3,.8,.3,1), width .32s cubic-bezier(.3,.8,.3,1), opacity .2s ease; }
  /* ikon rengi */
  html[data-nr="tek"] body.bas2 .menu nav button svg { color:currentColor !important; opacity:1 !important; }
  html[data-nr="hep"] body.bas2 .menu nav button svg { color:var(--mavi) !important; opacity:.75; }
  html[data-nr="hep"] body.bas2 .menu nav button.acik svg { opacity:1; }
  html[data-ni="yok"] body.bas2 .menu nav button svg { display:none !important; }
  html[data-ni="yok"] body.bas2 .menu nav button { gap:0; }

  /* 1 · Underline */
  /* 2 · Thin line */
html[data-nd="2"] body.bas2 .nav-iz { height:2px !important; clip-path:none !important; border-radius:0 !important; }
  /* 3 · Thick line */
html[data-nd="3"] body.bas2 .nav-iz { height:4px !important; border-radius:0 !important; clip-path:inset(0 12px) !important; }
  /* 4 · Short bar */
html[data-nd="4"] body.bas2 .nav-iz { clip-path:inset(0 calc(50% - 11px)) !important; }
  /* 5 · Medium bar */
html[data-nd="5"] body.bas2 .nav-iz { clip-path:inset(0 calc(50% - 20px)) !important; }
  /* 6 · Glow line */
html[data-nd="6"] body.bas2 .nav-iz { box-shadow:0 -3px 14px var(--mavi-ln) !important; }
  /* 7 · Fade line */
html[data-nd="7"] body.bas2 .nav-iz { clip-path:none !important; border-radius:0 !important; background:linear-gradient(90deg,transparent,var(--mavi) 30%,var(--mavi) 70%,transparent) !important; }
  /* 8 · Double line */
html[data-nd="8"] body.bas2 .nav-iz { height:2px !important; border-radius:0 !important; box-shadow:0 -5px 0 var(--mavi-sis) !important; }
  /* 9 · Floating line */
html[data-nd="9"] body.bas2 .nav-iz { bottom:9px !important; height:3px !important; border-radius:2px !important; clip-path:inset(0 18px) !important; }
html[data-nd="9"] body.bas2 .menu nav button { padding-bottom:8px; }
  /* 10 · Spotlight */
html[data-nd="10"] body.bas2 .nav-iz { height:100% !important; top:0 !important; clip-path:none !important; border-radius:0 !important; background:linear-gradient(to top,var(--mavi-sis),transparent 75%) !important; box-shadow:inset 0 -3px 0 var(--mavi) !important; }
  /* 11 · Top bar */
html[data-nd="11"] body.bas2 .nav-iz { top:0 !important; bottom:auto !important; border-radius:0 0 3px 3px !important; }
  /* 12 · Top short */
html[data-nd="12"] body.bas2 .nav-iz { top:0 !important; bottom:auto !important; border-radius:0 0 3px 3px !important; clip-path:inset(0 calc(50% - 12px)) !important; }
  /* 13 · Top spotlight */
html[data-nd="13"] body.bas2 .nav-iz { height:100% !important; top:0 !important; clip-path:none !important; border-radius:0 !important; background:linear-gradient(to bottom,var(--mavi-sis),transparent 75%) !important; box-shadow:inset 0 3px 0 var(--mavi) !important; }
  /* 14 · Top + bottom */
html[data-nd="14"] body.bas2 .nav-iz { height:100% !important; top:0 !important; clip-path:inset(0 10px) !important; border-radius:0 !important; background:none !important; box-shadow:inset 0 2px 0 var(--mavi), inset 0 -2px 0 var(--mavi) !important; }
  /* 15 · Raised box */
html[data-nd="15"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="15"] body.bas2 .menu nav { gap:4px; }
html[data-nd="15"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="15"] body.bas2 .nav-iz { background:var(--nl-kab) !important; box-shadow:var(--nl-kab-g) !important; }
html[data-nd="15"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-kab); }
  /* 16 · Pressed box */
html[data-nd="16"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="16"] body.bas2 .menu nav { gap:4px; }
html[data-nd="16"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="16"] body.bas2 .nav-iz { background:var(--nl-bas) !important; box-shadow:var(--nl-bas-g) !important; }
html[data-nd="16"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-bas); }
  /* 17 · Outline box */
html[data-nd="17"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="17"] body.bas2 .menu nav { gap:4px; }
html[data-nd="17"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="17"] body.bas2 .nav-iz { background:none !important; box-shadow:inset 0 0 0 1.5px var(--mavi-ln) !important; }
  /* 18 · Blue fill */
html[data-nd="18"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="18"] body.bas2 .menu nav { gap:4px; }
html[data-nd="18"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="18"] body.bas2 .nav-iz { background:var(--nl-mavi-g) !important; box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 6px 14px -8px rgba(37,99,235,.7) !important; }
html[data-nd="18"] body.bas2 .menu nav button.acik { color:#fff !important; }
html[data-nd="18"] body.bas2 .menu nav button.acik { --nl-oyuk:#2563EB; }
  /* 19 · Tint box */
html[data-nd="19"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="19"] body.bas2 .menu nav { gap:4px; }
html[data-nd="19"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="19"] body.bas2 .nav-iz { background:var(--mavi-sis) !important; }
html[data-nd="19"] body.bas2 .menu nav button.acik { color:var(--mavi-koyu) !important; }
  /* 20 · Tint + side bar */
html[data-nd="20"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="20"] body.bas2 .menu nav { gap:4px; }
html[data-nd="20"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="20"] body.bas2 .nav-iz { background:var(--mavi-sis) !important; box-shadow:inset 3px 0 0 var(--mavi) !important; border-radius:2px 8px 8px 2px !important; }
html[data-nd="20"] body.bas2 .menu nav button.acik { color:var(--mavi-koyu) !important; }
  /* 21 · Tint + base line */
html[data-nd="21"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="21"] body.bas2 .menu nav { gap:4px; }
html[data-nd="21"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="21"] body.bas2 .nav-iz { background:var(--mavi-sis) !important; box-shadow:inset 0 -2px 0 var(--mavi) !important; border-radius:8px 8px 2px 2px !important; }
html[data-nd="21"] body.bas2 .menu nav button.acik { color:var(--mavi-koyu) !important; }
  /* 22 · Raised + blue edge */
html[data-nd="22"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="22"] body.bas2 .menu nav { gap:4px; }
html[data-nd="22"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="22"] body.bas2 .nav-iz { background:var(--nl-kab) !important; box-shadow:inset 0 -2px 0 var(--mavi) !important; }
html[data-nd="22"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-kab); }
  /* 23 · Ink fill */
html[data-nd="23"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="23"] body.bas2 .menu nav { gap:4px; }
html[data-nd="23"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="23"] body.bas2 .nav-iz { background:var(--nl-koyu) !important; box-shadow:inset 0 -2px 0 rgba(0,0,0,.25) !important; }
html[data-nd="23"] body.bas2 .menu nav button.acik { color:var(--nl-koyu-y) !important; }
html[data-nd="23"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-koyu); }
  /* 24 · Sharp box */
html[data-nd="24"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="24"] body.bas2 .menu nav { gap:4px; }
html[data-nd="24"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="24"] body.bas2 .nav-iz { background:var(--nl-kab) !important; box-shadow:var(--nl-kab-g) !important; border-radius:2px !important; }
html[data-nd="24"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-kab); }
  /* 25 · Dashed box */
html[data-nd="25"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="25"] body.bas2 .menu nav { gap:4px; }
html[data-nd="25"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="25"] body.bas2 .nav-iz { background:none !important; border:1.5px dashed var(--mavi-ln) !important; box-sizing:border-box !important; }
  /* 26 · Corner marks */
html[data-nd="26"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="26"] body.bas2 .menu nav { gap:4px; }
html[data-nd="26"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="26"] body.bas2 .nav-iz { border-radius:0 !important; background:linear-gradient(var(--mavi),var(--mavi)) 0 0/9px 2px, linear-gradient(var(--mavi),var(--mavi)) 0 0/2px 9px, linear-gradient(var(--mavi),var(--mavi)) 100% 0/9px 2px, linear-gradient(var(--mavi),var(--mavi)) 100% 0/2px 9px, linear-gradient(var(--mavi),var(--mavi)) 0 100%/9px 2px, linear-gradient(var(--mavi),var(--mavi)) 0 100%/2px 9px, linear-gradient(var(--mavi),var(--mavi)) 100% 100%/9px 2px, linear-gradient(var(--mavi),var(--mavi)) 100% 100%/2px 9px !important; background-repeat:no-repeat !important; }
  /* 27 · Blue ring glow */
html[data-nd="27"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="27"] body.bas2 .menu nav { gap:4px; }
html[data-nd="27"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="27"] body.bas2 .nav-iz { background:var(--mavi-sis) !important; box-shadow:inset 0 0 0 1.5px var(--mavi), 0 0 16px -2px var(--mavi-ln) !important; }
html[data-nd="27"] body.bas2 .menu nav button.acik { color:var(--mavi-koyu) !important; }
  /* 28 · Tall box */
html[data-nd="28"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="28"] body.bas2 .menu nav { gap:4px; }
html[data-nd="28"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="28"] body.bas2 .nav-iz { top:8px !important; height:44px !important; background:var(--nl-kab) !important; box-shadow:var(--nl-kab-g) !important; }
html[data-nd="28"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-kab); }
  /* 29 · Compact box */
html[data-nd="29"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="29"] body.bas2 .menu nav { gap:4px; }
html[data-nd="29"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="29"] body.bas2 .nav-iz { top:16px !important; height:28px !important; border-radius:6px !important; background:var(--nl-kab) !important; box-shadow:var(--nl-kab-g) !important; }
html[data-nd="29"] body.bas2 .menu nav button { padding:0 13px !important; font-size:13.5px; }
html[data-nd="29"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-kab); }
  /* 30 · Box + top accent */
html[data-nd="30"] body.bas2 .nav-iz { top:12px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:8px !important; }
html[data-nd="30"] body.bas2 .menu nav { gap:4px; }
html[data-nd="30"] body.bas2 .menu nav button { position:relative; z-index:1; padding:0 16px; }
html[data-nd="30"] body.bas2 .nav-iz { background:var(--nl-kab) !important; box-shadow:inset 0 2px 0 var(--mavi) !important; border-radius:2px 2px 8px 8px !important; }
html[data-nd="30"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-kab); }
  /* 31 · Track raised */
html[data-nd="31"] body.bas2 .menu nav { align-self:center; height:44px; padding:4px; gap:0; border-radius:10px; background:var(--nl-ray) !important; box-shadow:var(--nl-ray-g) !important; }
html[data-nd="31"] body.bas2 .menu nav button { position:relative; z-index:1; height:36px; padding:0 15px; }
html[data-nd="31"] body.bas2 .nav-iz { top:4px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:7px !important; }
html[data-nd="31"] body.bas2 .nav-iz { background:var(--nl-ray-on) !important; box-shadow:var(--nl-ray-on-g) !important; }
html[data-nd="31"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-ray-on); }
  /* 32 · Track blue */
html[data-nd="32"] body.bas2 .menu nav { align-self:center; height:44px; padding:4px; gap:0; border-radius:10px; background:var(--nl-ray) !important; box-shadow:var(--nl-ray-g) !important; }
html[data-nd="32"] body.bas2 .menu nav button { position:relative; z-index:1; height:36px; padding:0 15px; }
html[data-nd="32"] body.bas2 .nav-iz { top:4px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:7px !important; }
html[data-nd="32"] body.bas2 .nav-iz { background:var(--nl-mavi-g) !important; box-shadow:inset 0 -2px 0 rgba(0,0,0,.2) !important; }
html[data-nd="32"] body.bas2 .menu nav button.acik { color:#fff !important; }
html[data-nd="32"] body.bas2 .menu nav button.acik { --nl-oyuk:#2563EB; }
  /* 33 · Track pressed */
html[data-nd="33"] body.bas2 .menu nav { align-self:center; height:44px; padding:4px; gap:0; border-radius:10px; background:var(--nl-ray) !important; box-shadow:var(--nl-ray-g) !important; }
html[data-nd="33"] body.bas2 .menu nav button { position:relative; z-index:1; height:36px; padding:0 15px; }
html[data-nd="33"] body.bas2 .nav-iz { top:4px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:7px !important; }
html[data-nd="33"] body.bas2 .nav-iz { background:var(--nl-bas) !important; box-shadow:var(--nl-bas-g) !important; }
html[data-nd="33"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-bas); }
  /* 34 · Track outline */
html[data-nd="34"] body.bas2 .menu nav { align-self:center; height:44px; padding:4px; gap:0; border-radius:10px; background:var(--nl-ray) !important; box-shadow:var(--nl-ray-g) !important; }
html[data-nd="34"] body.bas2 .menu nav button { position:relative; z-index:1; height:36px; padding:0 15px; }
html[data-nd="34"] body.bas2 .nav-iz { top:4px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:7px !important; }
html[data-nd="34"] body.bas2 .menu nav { background:none !important; box-shadow:inset 0 0 0 1px var(--nl-cizgi) !important; }
html[data-nd="34"] body.bas2 .nav-iz { background:var(--mavi-sis) !important; box-shadow:none !important; }
html[data-nd="34"] body.bas2 .menu nav button.acik { color:var(--mavi-koyu) !important; }
  /* 35 · Track ink */
html[data-nd="35"] body.bas2 .menu nav { align-self:center; height:44px; padding:4px; gap:0; border-radius:10px; background:var(--nl-ray) !important; box-shadow:var(--nl-ray-g) !important; }
html[data-nd="35"] body.bas2 .menu nav button { position:relative; z-index:1; height:36px; padding:0 15px; }
html[data-nd="35"] body.bas2 .nav-iz { top:4px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:7px !important; }
html[data-nd="35"] body.bas2 .menu nav { background:var(--nl-koyu) !important; box-shadow:none !important; }
html[data-nd="35"] body.bas2 .nav-iz { background:var(--nl-mavi-g) !important; box-shadow:none !important; }
html[data-nd="35"] body.bas2 .menu nav button { color:var(--nl-koyu-y) !important; opacity:.6; --nl-oyuk:var(--nl-koyu); }
html[data-nd="35"] body.bas2 .menu nav button.acik { opacity:1; color:#fff !important; }
html[data-nd="35"] body.bas2 .menu nav button.acik { --nl-oyuk:#2563EB; }
  /* 36 · Track square */
html[data-nd="36"] body.bas2 .menu nav { align-self:center; height:44px; padding:4px; gap:0; border-radius:10px; background:var(--nl-ray) !important; box-shadow:var(--nl-ray-g) !important; }
html[data-nd="36"] body.bas2 .menu nav button { position:relative; z-index:1; height:36px; padding:0 15px; }
html[data-nd="36"] body.bas2 .nav-iz { top:4px !important; bottom:auto !important; height:36px !important; clip-path:none !important; border-radius:7px !important; }
html[data-nd="36"] body.bas2 .menu nav { border-radius:3px !important; }
html[data-nd="36"] body.bas2 .nav-iz { border-radius:2px !important; background:var(--nl-ray-on) !important; box-shadow:var(--nl-ray-on-g) !important; }
html[data-nd="36"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-ray-on); }
  /* 37 · Column tint */
html[data-nd="37"] body.bas2 .nav-iz { top:0 !important; height:100% !important; clip-path:none !important; border-radius:0 !important; background:var(--mavi-sis) !important; }
html[data-nd="37"] body.bas2 .menu nav button.acik { color:var(--mavi-koyu) !important; }
  /* 38 · Column + bar */
html[data-nd="38"] body.bas2 .nav-iz { top:0 !important; height:100% !important; clip-path:none !important; border-radius:0 !important; background:var(--mavi-sis) !important; box-shadow:inset 0 -3px 0 var(--mavi) !important; }
html[data-nd="38"] body.bas2 .menu nav button.acik { color:var(--mavi-koyu) !important; }
  /* 39 · Column raised */
html[data-nd="39"] body.bas2 .nav-iz { top:0 !important; height:100% !important; clip-path:none !important; border-radius:0 !important; background:var(--nl-kab) !important; box-shadow:inset 1px 0 0 var(--nl-cizgi), inset -1px 0 0 var(--nl-cizgi) !important; }
html[data-nd="39"] body.bas2 .menu nav button.acik { --nl-oyuk:var(--nl-kab); }
  /* 40 · Column glow */
html[data-nd="40"] body.bas2 .nav-iz { top:0 !important; height:100% !important; clip-path:none !important; border-radius:0 !important; background:linear-gradient(to top,var(--mavi-sis),transparent) !important; box-shadow:inset 0 3px 0 var(--mavi) !important; }
  /* 41 · Square dot */
html[data-nd="41"] body.bas2 .nav-iz { bottom:9px !important; height:5px !important; border-radius:1px !important; clip-path:inset(0 calc(50% - 2.5px)) !important; }
html[data-nd="41"] body.bas2 .menu nav button { padding-bottom:8px; }
  /* 42 · Side dot */
html[data-nd="42"] body.bas2 .nav-iz { top:27px !important; bottom:auto !important; height:6px !important; border-radius:1px !important; clip-path:inset(0 calc(100% - 6px) 0 0) !important; }
html[data-nd="42"] body.bas2 .menu nav button { padding-left:24px !important; }
  /* 43 · Notch */
html[data-nd="43"] body.bas2 .nav-iz { height:7px !important; border-radius:0 !important; clip-path:polygon(calc(50% - 7px) 100%,50% 0,calc(50% + 7px) 100%) !important; }
  /* 44 · Side bar */
html[data-nd="44"] body.bas2 .nav-iz { top:18px !important; bottom:auto !important; height:24px !important; border-radius:0 2px 2px 0 !important; clip-path:inset(0 calc(100% - 3px) 0 0) !important; }
html[data-nd="44"] body.bas2 .menu nav button { padding-left:22px !important; }
  /* 45 · Diamond */
html[data-nd="45"] body.bas2 .nav-iz { bottom:7px !important; height:7px !important; border-radius:0 !important; clip-path:polygon(50% 0,calc(50% + 3.5px) 50%,50% 100%,calc(50% - 3.5px) 50%) !important; }
html[data-nd="45"] body.bas2 .menu nav button { padding-bottom:8px; }
  /* 46 · Text blue */
html[data-nd="46"] body.bas2 .nav-iz { opacity:0 !important; }
html[data-nd="46"] body.bas2 .menu nav button.acik { color:var(--mavi) !important; }
  /* 47 · Text bold */
html[data-nd="47"] body.bas2 .nav-iz { opacity:0 !important; }
html[data-nd="47"] body.bas2 .menu nav button { opacity:.55; }
html[data-nd="47"] body.bas2 .menu nav button.acik { opacity:1; font-weight:800 !important; }
  /* 48 · Caps line */
html[data-nd="48"] body.bas2 .nav-iz { height:2px !important; clip-path:none !important; border-radius:0 !important; }
html[data-nd="48"] body.bas2 .menu nav button { font-size:12px !important; letter-spacing:.09em; text-transform:uppercase; font-weight:800 !important; }
  /* 49 · Caps blue */
html[data-nd="49"] body.bas2 .nav-iz { opacity:0 !important; }
html[data-nd="49"] body.bas2 .menu nav button { font-size:12px !important; letter-spacing:.09em; text-transform:uppercase; font-weight:800 !important; }
html[data-nd="49"] body.bas2 .menu nav button.acik { color:var(--mavi) !important; }
  /* 50 · Big active */
html[data-nd="50"] body.bas2 .nav-iz { clip-path:inset(0 calc(50% - 12px)) !important; }
html[data-nd="50"] body.bas2 .menu nav button { font-size:13.5px !important; opacity:.7; }
html[data-nd="50"] body.bas2 .menu nav button.acik { font-size:15.5px !important; opacity:1; }
}

/* ====================================================================
   DEMO PANELI (sol alt) — kose yuvarlakligi kucuk, hover yok
   ==================================================================== */
.nl-pan { position:fixed; left:16px; bottom:16px; z-index:9000; width:330px; padding:12px; border-radius:12px;
  background:var(--kd-yuzey,#fff); color:var(--ink,#0F2A56); font-size:13px;
  box-shadow:inset 0 0 0 1px var(--kd-kenar,rgba(15,42,86,.10)), 0 18px 44px -14px rgba(15,42,86,.35), 0 3px 10px rgba(15,42,86,.08);
  animation:nlGel .32s cubic-bezier(.2,.8,.2,1) both; }
html[data-tema="koyu"] .nl-pan { box-shadow:inset 0 0 0 1px var(--kd-kenar,#181818), 0 18px 44px -14px rgba(0,0,0,.8); }
@keyframes nlGel { from { opacity:0; transform:translateY(10px); } }
.nl-bas { display:grid; grid-template-columns:1fr auto; align-items:center; margin:0 0 10px; }
.nl-bas b { font-size:14px; font-weight:800; }
.nl-bas small { grid-column:1; color:var(--ink-3,#7A8BA8); font-size:11.5px; }
.nl-x { grid-row:1 / span 2; grid-column:2; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:7px; background:var(--buz,#EEF3FB); color:var(--ink-2,#4A5D7E); cursor:pointer; }
.nl-x svg { width:15px; height:15px; }
.nl-satir { display:grid; grid-template-columns:74px minmax(0,1fr); align-items:center; gap:8px; margin-top:7px; }
.nl-satir > span { color:var(--ink-2,#4A5D7E); font-weight:650; font-size:12px; }
.nl-sec { position:relative; display:flex; gap:4px; min-width:0; }
.nl-ac, .nl-ok { height:34px; border:0; border-radius:7px; background:var(--buz,#EEF3FB); color:var(--ink,#0F2A56); font:inherit; cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(15,42,86,.07); }
html[data-tema="koyu"] .nl-ac, html[data-tema="koyu"] .nl-ok, html[data-tema="koyu"] .nl-x { background:var(--k-kabarik,#181818); box-shadow:inset 0 -2px 0 rgba(0,0,0,.5); }
.nl-ac { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 8px 0 10px; font-weight:700; }
.nl-ac em { font-style:normal; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.nl-ac svg, .nl-ok svg { width:15px; height:15px; flex:0 0 auto; }
.nl-ac svg { transition:transform .2s ease; }
.nl-sec.acik .nl-ac { box-shadow:inset 0 2px 5px rgba(15,42,86,.16); }
html[data-tema="koyu"] .nl-sec.acik .nl-ac { box-shadow:inset 0 2px 6px rgba(0,0,0,.65); background:var(--kd-basik,#0B0B0B); }
.nl-sec.acik .nl-ac svg { transform:rotate(180deg); }
.nl-ok { flex:0 0 34px; display:grid; place-items:center; padding:0; }
.nl-ok:active, .nl-x:active { box-shadow:inset 0 2px 5px rgba(15,42,86,.2); }
.nl-liste { position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:2; max-height:320px; overflow:auto; padding:4px; border-radius:9px;
  background:var(--kd-yuzey,#fff); box-shadow:inset 0 0 0 1px var(--kd-kenar,rgba(15,42,86,.10)), 0 14px 34px -10px rgba(15,42,86,.35);
  animation:nlListe .2s cubic-bezier(.2,.8,.2,1) both; transform-origin:50% 100%; }
html[data-tema="koyu"] .nl-liste { background:var(--k-pencere,#111); box-shadow:inset 0 0 0 1px var(--kd-kenar,#181818), 0 8px 24px rgba(0,0,0,.6); }
@keyframes nlListe { from { opacity:0; transform:translateY(6px) scale(.98); } }
.nl-liste button { display:flex; align-items:center; gap:8px; width:100%; height:32px; padding:0 8px; border:0; border-radius:6px; background:none; color:var(--ink,#0F2A56); font:inherit; font-weight:600; text-align:left; cursor:pointer; }
.nl-liste button i { flex:0 0 22px; height:20px; display:grid; place-items:center; border-radius:4px; font-style:normal; font-size:11px; font-weight:800; background:var(--buz,#EEF3FB); color:var(--ink-2,#4A5D7E); }
html[data-tema="koyu"] .nl-liste button i { background:var(--k-kabarik,#181818); }
.nl-liste button.on { background:var(--mavi-sis,rgba(37,99,235,.1)); color:var(--mavi-koyu,#1D4ED8); box-shadow:inset 0 1px 3px rgba(15,42,86,.12); }
.nl-liste button.on i { background:var(--mavi); color:#fff; }
.nl-alt { display:flex; align-items:center; justify-content:space-between; margin-top:11px; padding-top:10px; border-top:1px solid var(--cizgi,rgba(15,42,86,.08)); }
.nl-sifir { height:30px; padding:0 12px; border:0; border-radius:7px; background:var(--buz,#EEF3FB); color:var(--ink-2,#4A5D7E); font:inherit; font-weight:700; cursor:pointer; }
html[data-tema="koyu"] .nl-sifir { background:var(--k-kabarik,#181818); }
.nl-alt small { color:var(--ink-3,#7A8BA8); font-size:11px; }
@media (max-width:560px) { .nl-pan { left:8px; right:8px; bottom:8px; width:auto; } }