/* ==========================================================================
   Navbar Platner — idêntica à da index (platnersystem.com).
   Usada em /blog/ e em cada post. Não editar por página: mexa aqui.
   ========================================================================== */
:root{
  --orange:#F97316; --orange-light:#FF9064; --highlight:#F97316;
  --dark:#080808; --text:#F0F0F0; --muted:#ADAAAA; --border:rgba(255,255,255,0.07);
}

nav{
  position:fixed; top:0; left:0; right:0; margin:0 auto; max-width:100%;
  z-index:100; height:68px; display:flex; align-items:center; justify-content:space-between;
  padding:0 56px; background:rgba(8,8,8,0.6);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); border-radius:0;
  transition:top .5s cubic-bezier(0.22,1,0.36,1), width .5s cubic-bezier(0.22,1,0.36,1),
    max-width .5s cubic-bezier(0.22,1,0.36,1), height .5s cubic-bezier(0.22,1,0.36,1),
    border-radius .5s cubic-bezier(0.22,1,0.36,1), background .5s cubic-bezier(0.22,1,0.36,1),
    padding .5s cubic-bezier(0.22,1,0.36,1), box-shadow .5s cubic-bezier(0.22,1,0.36,1);
}
nav.scrolled{
  top:24px; width:max-content; max-width:90%; height:56px; border-radius:100px;
  border:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(12,12,12,0.85); padding:0 16px 0 24px; gap:32px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
nav.scrolled .logo-text{display:none;}
nav.scrolled .nav-links{background:transparent; border:none; padding:0;}
nav.scrolled .nav-cta{padding:8px 16px; font-size:13px;}

.nav-logo{display:flex; align-items:center; gap:12px; text-decoration:none;}
.nav-logo img{height:42px; display:block; filter:invert(1);}
.logo-text{display:flex; flex-direction:column; line-height:1; width:140px;}
.logo-text .hacker-text:nth-child(1){
  font-family:'Space Grotesk',sans-serif; font-weight:900; font-size:24px;
  color:var(--text); letter-spacing:0.2em; white-space:nowrap;
}
.logo-text .hacker-text:nth-child(2){
  font-family:'Inter',sans-serif; font-weight:800; font-size:11px;
  color:var(--orange); letter-spacing:0.05em; white-space:nowrap; margin-top:2px;
}

.nav-links{
  display:flex; gap:4px; list-style:none; background:rgba(255,255,255,0.03);
  padding:6px; border-radius:100px; border:1px solid rgba(255,255,255,0.05);
}
.nav-links li{position:relative;}
.nav-links a{
  display:block; padding:8px 20px; color:var(--muted); text-decoration:none;
  font-size:14px; font-weight:500; border-radius:100px; transition:all .3s ease;
  position:relative; z-index:1;
}
.nav-links a.active, .nav-links a:hover{
  color:var(--text); background:rgba(255,255,255,0.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 0 10px rgba(255,255,255,0.02);
}
.nav-links a.active::before, .nav-links a:hover::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:40%; height:2px; background:#fff; border-radius:2px;
  box-shadow:0 0 10px #fff, 0 0 20px #fff;
}

@property --gradient-angle{syntax:"<angle>"; initial-value:0deg; inherits:false;}
@property --gradient-angle-offset{syntax:"<angle>"; initial-value:0deg; inherits:false;}
@property --gradient-percent{syntax:"<percentage>"; initial-value:5%; inherits:false;}
@property --gradient-shine{syntax:"<color>"; initial-value:white; inherits:false;}

.nav-cta{
  --shiny-cta-bg:#0d0600; --shiny-cta-bg-subtle:#1a0c00; --shiny-cta-fg:#ffffff;
  --shiny-cta-highlight:#ff7a00; --shiny-cta-highlight-subtle:#ffb17a;
  --animation:gradient-angle linear infinite; --duration:3s; --shadow-size:2px;
  --transition:800ms cubic-bezier(0.25,1,0.5,1);
  isolation:isolate; position:relative; overflow:hidden; cursor:pointer; outline-offset:4px;
  padding:10px 24px; font-size:14px; font-weight:600; border:1px solid transparent;
  border-radius:360px; color:var(--shiny-cta-fg);
  background:linear-gradient(var(--shiny-cta-bg),var(--shiny-cta-bg)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent, var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent)*2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent)*3),
      transparent calc(var(--gradient-percent)*4)) border-box;
  box-shadow:inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transition:var(--transition);
  transition-property:--gradient-angle-offset,--gradient-percent,--gradient-shine;
  text-decoration:none; display:inline-flex; align-items:center;
}
.nav-cta::before, .nav-cta::after, .nav-cta span::before{
  content:""; pointer-events:none; position:absolute;
  inset-inline-start:50%; inset-block-start:50%; translate:-50% -50%; z-index:-1;
}
.nav-cta:active{translate:0 1px;}
.nav-cta::before{
  --size:calc(100% - var(--shadow-size)*3); --position:2px; --space:calc(var(--position)*2);
  width:var(--size); height:var(--size);
  background:radial-gradient(circle at var(--position) var(--position), white calc(var(--position)/4), transparent 0) padding-box;
  background-size:var(--space) var(--space); background-repeat:space;
  mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius:inherit; opacity:0.4; z-index:-1;
}
.nav-cta::after{
  --animation:shimmer linear infinite; width:100%; aspect-ratio:1;
  background:linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
  mask-image:radial-gradient(circle at bottom, transparent 40%, black); opacity:0.6;
}
.nav-cta span{z-index:1; position:relative;}
.nav-cta span::before{
  --size:calc(100% + 1rem); width:var(--size); height:var(--size);
  box-shadow:inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
  opacity:0; transition:opacity var(--transition);
  animation:calc(var(--duration)*1.5) breathe linear infinite;
}
.nav-cta, .nav-cta::before, .nav-cta::after{
  animation:var(--animation) var(--duration), var(--animation) calc(var(--duration)/0.4) reverse paused;
  animation-composition:add;
}
.nav-cta:is(:hover,:focus-visible){
  --gradient-percent:20%; --gradient-angle-offset:95deg; --gradient-shine:var(--shiny-cta-highlight-subtle);
}
.nav-cta:is(:hover,:focus-visible), .nav-cta:is(:hover,:focus-visible)::before, .nav-cta:is(:hover,:focus-visible)::after{
  animation-play-state:running;
}
.nav-cta:is(:hover,:focus-visible) span::before{opacity:1;}

@keyframes gradient-angle{to{--gradient-angle:360deg;}}
@keyframes shimmer{to{rotate:360deg;}}
@keyframes breathe{from,to{scale:1;} 50%{scale:1.2;}}

@media (max-width:768px){
  nav{padding:0 16px; height:60px;}
  nav.scrolled{max-width:95%; padding:0 12px 0 16px; height:48px;}
  .nav-links{display:none;}
  .nav-logo img{height:30px;}
  .logo-text .hacker-text:nth-child(1){font-size:16px;}
  .logo-text .hacker-text:nth-child(2){font-size:8px;}
  .nav-cta{padding:7px 14px; font-size:11px; white-space:nowrap;}
}