/* ====================================================================
   nav-fx.css — UST MENU: 20 ANIMASYONLU SEKME TASARIMI (2026-10-13). assets/js/nav-lab.js <html data-nx="1..20">
   Hareket JS'te (WAAPI + yay fizigi); burada yalniz gorunum. Yalniz PC + tablet. Hover yok.
   ==================================================================== */
:root { --nl-mrgb:37,99,235; --nl-su:rgba(37,99,235,.15); --nl-pix:rgba(37,99,235,.12); --nl-pix-h:rgba(37,99,235,.42); }
html[data-tema="koyu"] { --nl-mrgb:76,141,246; --nl-su:rgba(76,141,246,.22); --nl-pix:rgba(76,141,246,.16); --nl-pix-h:rgba(96,165,250,.55); }

.nl-fx { position:absolute; inset:0; z-index:0; pointer-events:none; }
.nl-fx > * { position:absolute; pointer-events:none; }
@media (max-width:560px) { .nl-fx { display:none !important; } }
@media (min-width:561px) {
  html[data-nx] body.bas2 .nav-iz { opacity:0 !important; }
  html[data-nx] body.bas2 .menu nav { position:relative; overflow:visible; }
  html[data-nx] body.bas2 .menu nav > button { position:relative; z-index:1; transition:color .3s ease, opacity .3s ease; }
  html[data-nx] body.bas2 .menu nav > button span { display:inline-block; }
}

/* 1 · lastik cizgi / 12 · alt cizgi */
.nl-c1, .nl-c12 { left:0; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--mavi); }
.nl-c12 { height:2px; border-radius:0; }
/* 2 · yay cizgisi */
.nl-c2 { left:0; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--mavi); box-shadow:0 -2px 12px rgba(var(--nl-mrgb),.55); }
/* 3 · kuyruklu yildiz */
.nl-c3 { left:0; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--mavi); transform-origin:50% 50%; }
.nl-k3 { bottom:0; width:72px; height:3px; opacity:0; background:linear-gradient(90deg, transparent, rgba(var(--nl-mrgb),.25) 30%, var(--mavi)); }
.nl-k3::after { content:""; position:absolute; right:-3px; top:-2px; width:7px; height:7px; border-radius:1px; background:#fff;
  box-shadow:0 0 6px 2px rgba(var(--nl-mrgb),.9), 0 0 16px 4px rgba(var(--nl-mrgb),.5); }

/* 4 · sivi */
.nl-su { overflow:hidden; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(var(--nl-mrgb),.35); }
.nl-su-ic { position:absolute; left:0; right:0; top:7px; bottom:0; }
.nl-su-g { position:absolute; left:0; right:0; top:5px; bottom:0; background:var(--nl-su); }
.nl-dalga { position:absolute; left:0; top:0; width:200%; height:6px; fill:var(--nl-su); animation:nlDalga 2.6s linear infinite; }
.nl-dalga.d2 { top:-2px; opacity:.55; animation-duration:3.9s; animation-direction:reverse; }
@keyframes nlDalga { to { transform:translateX(-50%); } }

/* 5 · piksel */
.nl-px { border-radius:5px; background:var(--nl-pix); box-shadow:inset 0 0 0 1px rgba(var(--nl-mrgb),.3); transition:background .25s ease, box-shadow .25s ease; }
.nl-px.kur { background:transparent; box-shadow:none; }
.nl-px-g { position:absolute; inset:0; overflow:hidden; border-radius:5px; }
.nl-px-g i { position:absolute; width:5px; height:5px; border-radius:1px; background:var(--nl-pix-h); }

/* 6 · neon */
.nl-neon { overflow:visible; }
.nl-neon rect { vector-effect:non-scaling-stroke; }
.nl-neon .z { fill:rgba(var(--nl-mrgb),.08); stroke:none; }
.nl-neon .c { fill:none; stroke:var(--mavi); stroke-width:1.6; stroke-dasharray:1000; filter:drop-shadow(0 0 3px rgba(var(--nl-mrgb),.8)); }
.nl-neon .k { fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:70 930; animation:nlKos 2.6s linear infinite;
  filter:drop-shadow(0 0 4px rgba(var(--nl-mrgb),1)); }
html:not([data-tema="koyu"]) .nl-neon .k { stroke:#93C5FD; }
@keyframes nlKos { to { stroke-dashoffset:-1000; } }

/* 7 · 3D kapak */
.nl-flip { transform-origin:50% 0; border-radius:8px; background:var(--nl-kab); box-shadow:var(--nl-kab-g), inset 0 -2px 0 var(--mavi); backface-visibility:hidden; }

/* 8 · panjur */
.nl-pnj { overflow:hidden; border-radius:8px; }
.nl-pnj i { position:absolute; top:0; bottom:0; background-image:var(--nl-mavi-g); transform-origin:50% 0; }
.nl-pnj i:nth-child(even) { transform-origin:50% 100%; }
@media (min-width:561px) { html[data-nx="8"] body.bas2 .menu nav > button.acik { color:#fff !important; transition:color .25s ease .2s; } }

/* 9 · kose */
.nl-kose { left:0; top:0; width:12px; height:12px; border:0 solid var(--mavi); }
.nl-kose.tl { border-width:2px 0 0 2px; } .nl-kose.tr { border-width:2px 2px 0 0; } .nl-kose.bl { border-width:0 0 2px 2px; } .nl-kose.br { border-width:0 2px 2px 0; }
.nl-ton9 { border-radius:3px; background:rgba(var(--nl-mrgb),.09); }

/* 10 · hareket izi */
.nl-iz10 { border-radius:8px; background:rgba(var(--nl-mrgb),.12); box-shadow:inset 0 0 0 1.5px rgba(var(--nl-mrgb),.5); }
.nl-iz10.hayal { background:rgba(var(--nl-mrgb),.5); box-shadow:none; }

/* 11 · sahne isigi */
.nl-isik { left:0; top:0; height:100%; transform-origin:50% 0; animation:nlTitre 4.5s ease-in-out infinite;
  background:linear-gradient(to bottom, rgba(var(--nl-mrgb),.34), rgba(var(--nl-mrgb),.07) 80%, rgba(var(--nl-mrgb),.0));
  clip-path:polygon(36% 0, 64% 0, 100% 100%, 0 100%); }
.nl-isik i { position:absolute; bottom:4px; width:2px; height:2px; border-radius:0; background:var(--mavi); opacity:0; animation:nlToz linear infinite; }
html[data-tema="koyu"] .nl-isik i { background:#fff; }
.nl-isik b { position:absolute; left:12%; right:12%; bottom:0; height:2px; background:var(--mavi); box-shadow:0 0 12px 3px rgba(var(--nl-mrgb),.6); }
@keyframes nlToz { 0% { transform:translate(0,0); opacity:0; } 20% { opacity:.85; } 100% { transform:translate(6px,-52px); opacity:0; } }
@keyframes nlTitre { 0%, 100% { opacity:1; } 45% { opacity:.86; } 52% { opacity:.97; } }
@media (min-width:561px) { html[data-nx="11"] body.bas2 .menu nav > button.nl-parla { text-shadow:0 0 14px rgba(var(--nl-mrgb),.55); } }

/* 12 · yazi rulosu */
.nl-h12 { display:inline-block; overflow:hidden; height:1.3em; line-height:1.3em; vertical-align:bottom; font-style:normal; }
.nl-h12 b { display:block; font-weight:inherit; text-shadow:0 1.3em 0 var(--mavi); }

/* 13 · parcacik */
.nl-k13 { border-radius:8px; background:var(--nl-kab); box-shadow:var(--nl-kab-g), inset 0 0 0 1px rgba(var(--nl-mrgb),.35); }
.nl-par { border-radius:1px; z-index:2; }

/* 14 · kalem */
.nl-kalem { bottom:5px; height:12px; overflow:visible; }
.nl-kalem path { fill:none; stroke:var(--mavi); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:100; vector-effect:non-scaling-stroke; }

/* 15 · akan renk */
.nl-akis { overflow:hidden; border-radius:8px; transform-origin:50% 50%;
  background:linear-gradient(110deg,#1E40AF,#2563EB 25%,#60A5FA 50%,#2563EB 75%,#1E40AF); background-size:200% 100%; animation:nlAkis 4.5s linear infinite;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 8px 18px -10px rgba(37,99,235,.9); }
html[data-tema="koyu"] .nl-akis { background-image:linear-gradient(110deg,#1A3478,#1E4CC4 25%,#3B82F6 50%,#1E4CC4 75%,#1A3478); box-shadow:inset 0 -2px 0 rgba(0,0,0,.3); }
.nl-akis::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); animation:nlParilti 3.4s ease-in-out infinite; }
@keyframes nlAkis { to { background-position:200% 0; } }
@keyframes nlParilti { 0%, 55% { left:-60%; } 100% { left:130%; } }
@media (min-width:561px) { html[data-nx="15"] body.bas2 .menu nav > button.acik { color:#fff !important; } }

/* 16 · daktilo */
.nl-imlec { left:0; width:8px; height:17px; border-radius:1px; background:var(--mavi); animation:nlYanson 1.05s steps(1) infinite; box-shadow:0 0 10px rgba(var(--nl-mrgb),.5); }
.nl-imlec.yaz { animation:none; }
@keyframes nlYanson { 50% { opacity:0; } }
.nl-h16 { font-style:normal; } .nl-h16 b { font-weight:inherit; }
@media (min-width:561px) { html[data-nx="16"] body.bas2 .menu nav > button:not(.acik) { opacity:.6; } }

/* 17 · ezil-esne */
.nl-ez { border-radius:9px; transform-origin:50% 100%; background:var(--nl-kab); box-shadow:var(--nl-kab-g), inset 0 -2px 0 var(--mavi); }

/* 18 · surgulu kapi */
.nl-kapi i { position:absolute; top:0; bottom:0; width:50.5%; background:var(--nl-koyu); }
.nl-kapi .s { left:0; transform-origin:0 50%; border-radius:8px 0 0 8px; }
.nl-kapi .g { right:0; transform-origin:100% 50%; border-radius:0 8px 8px 0; }
.nl-kapi b { position:absolute; left:50%; top:3px; bottom:3px; width:2px; margin-left:-1px; opacity:0; background:var(--mavi); box-shadow:0 0 10px 3px rgba(var(--nl-mrgb),.7); }
@media (min-width:561px) { html[data-nx="18"] body.bas2 .menu nav > button.acik { color:var(--nl-koyu-y) !important; transition:color .2s ease .32s; --nl-oyuk:var(--nl-koyu); } }

/* 19 · kutup isigi */
.nl-aur { left:0; top:11px; height:38px; border-radius:14px; filter:blur(13px); opacity:.62;
  background:linear-gradient(90deg,#2563EB,#22D3EE,#A78BFA,#3B82F6,#2563EB); background-size:300% 100%; animation:nlAur 6s linear infinite; }
html[data-tema="koyu"] .nl-aur { opacity:.5; }
@keyframes nlAur { to { background-position:300% 0; } }

/* 20 · cizgi -> kutu */
.nl-morf { border-radius:8px; background:var(--mavi-sis); box-shadow:inset 0 0 0 1.5px var(--mavi-ln); }
@media (min-width:561px) { html[data-nx="20"] body.bas2 .menu nav > button.acik, html[data-nx="9"] body.bas2 .menu nav > button.acik { color:var(--mavi-koyu) !important; } }

@media (prefers-reduced-motion: reduce) { .nl-fx * { animation:none !important; } }

/* panel: oynat dugmesi */
.nl-oynat { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:0; border-radius:7px; background:var(--mavi); color:#fff; font:inherit; font-weight:700; cursor:pointer; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18); }
.nl-oynat svg { width:12px; height:12px; }
.nl-oynat:active { box-shadow:inset 0 2px 5px rgba(0,0,0,.3); }