.badge { @apply rounded-full border border-zinc-300/70 px-2 py-1 text-xs opacity-80 dark:border-white/20; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }
@keyframes pulse-slow { 0%, 100% { opacity: 1 } 50% { opacity: .85 } }
#typewriter::after{
  content:'|';
  margin-left:2px;
  animation: twblink .7s steps(1) infinite;
}
@keyframes twblink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
/* Mobil menü linkleri */
.mm-link{
  display:block; padding:12px 10px; border-radius:12px;
  font-size:15px;
  border:1px solid transparent;
}
.mm-link:hover{
  background:rgba(0,0,0,.04);
}
.dark .mm-link:hover{
  background:rgba(255,255,255,.06);
}

/* Açılış/kapanış anim yardımları */
#mobileMenu.is-open #mmBackdrop{ opacity:1; transition:opacity .2s ease; }
#mobileMenu.is-open #mmPanel{
  opacity:1; transform:translateY(0);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
#mobileMenu:not(.is-open) #mmBackdrop{ opacity:0; transition:opacity .2s ease; }
#mobileMenu:not(.is-open) #mmPanel{
  opacity:0; transform:translateY(-16px);
  transition: transform .2s ease, opacity .2s ease;
}

/* Menü açıkken scroll kilidi */
html.menu-lock, body.menu-lock { overflow: hidden; }
.navlink{ position:relative; font-size:13px; opacity:.85; }
.navlink:hover{ opacity:1; }
.navlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  transition: transform .25s ease;
  border-radius: 999px;
}
.navlink:hover::after{ transform: scaleX(1); }
#mmPanel {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(24,24,27,0.85); /* dark bg */
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 32px -6px rgba(0,0,0,0.4);
}
.dark #mmPanel {
  background: rgba(15,15,17,0.9);
}
.mm-link {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 15px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  transition: all .2s ease;
}
.mm-link:hover {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
}
/* Fullscreen mobile menu look */
.mm-link-full{
  display:block;
  padding:16px 22px;
  border-radius:18px;
  font-size:22px;
  line-height:1.1;
  color:white;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.15);
  width:min(90vw, 480px);
  text-align:center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mm-link-full:hover{
  transform: translateY(-2px);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.22);
}

/* Açılış/kapanış (panel + backdrop) */
#mobileMenu.is-open #mmBackdrop{
  opacity:1; transition:opacity .28s ease;
}
#mobileMenu.is-open #mmPanel{
  opacity:1; transform: translateY(0);
  transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease;
}
#mobileMenu:not(.is-open) #mmBackdrop{
  opacity:0; transition:opacity .18s ease;
}
#mobileMenu:not(.is-open) #mmPanel{
  opacity:0; transform: translateY(24px);
  transition: transform .2s ease, opacity .2s ease;
}

/* Stagger (öğeler sırasıyla gelsin) */
.mm-item{ opacity:0; transform: translateY(8px); }
#mobileMenu.is-open .mm-item{
  animation: mmStagger .45s ease forwards;
}
#mobileMenu.is-open .mm-item:nth-child(1){ animation-delay:.06s }
#mobileMenu.is-open .mm-item:nth-child(2){ animation-delay:.12s }
#mobileMenu.is-open .mm-item:nth-child(3){ animation-delay:.18s }
#mobileMenu.is-open .mm-item:nth-child(4){ animation-delay:.24s }
@keyframes mmStagger{
  to{ opacity:1; transform: translateY(0) }
}

/* Menü açıkken body scroll kilidi */
html.menu-lock, body.menu-lock { overflow: hidden; }
#mmBackdrop { z-index: 0; }
#mmPanel    { z-index: 10; }
#mmClose, .mm-topbar { z-index: 20; }
#menuToggle.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#menuToggle.hide {
  visibility: hidden;      /* görünmez yapar */
  pointer-events: none;    /* tıklanamaz */
}
#menuToggle.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
/* Typewriter'ın kendi üstünde gradient olsun (dış sarmaldan bağımsız) */
#typewriter{
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;           /* gradient için metin rengi şeffaf */
  display: inline;              /* desktop'ta aynı satır */
  white-space: nowrap;          /* desktop'ta kırılmasın */
}

/* Mobil: unvanı alt satıra indir, zıplama olmasın */
@media (max-width: 640px){
  /* h1 flex ise sarabilsin */
  h1{ flex-wrap: wrap; }

  /* typewriter kendi satırına geçsin ve normal kırılabilsin */
  #typewriter{
    display: block;           /* alt satır */
    margin-top: .25rem;
    white-space: normal;      /* kırılmaya izin ver */
    text-align: left;
  }
}

/* (isteğe bağlı) imleç */
#typewriter::after{
  content:'|';
  margin-left:2px;
  animation: twblink .7s steps(1) infinite;
}
@keyframes twblink{
  0%,49%{opacity:1} 50%,100%{opacity:0}
}


.animate-pulse-slow { animation: pulse-slow 2.4s ease-in-out infinite; }