/* ═══════════════════════════════════════════════════════
   MaYKBEY — Ultimate Animation CSS v2.0
═══════════════════════════════════════════════════════ */

/* ── Canvas katmanları ── */
#mb-particles {
  position: fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.65;
}
#mb-meteors {
  position: fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.7;
}

/* ── Mouse ışık izi ── */
#mb-light-trail {
  position: fixed; top:0; left:0;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(34,197,94,.07) 0%, rgba(59,130,246,.03) 40%, transparent 70%);
  pointer-events:none; z-index:0;
  transition: none; will-change: transform;
}

/* ── Tüm içerik canvas'ın üstünde ── */
nav {
  position: relative;
  z-index: 9998 !important;
}
section, footer, .admin-layout,
.auth-page, .prod-page, .desk-page,
.marquee-sec, .domain-sec, .stats-bar,
.hero, .cat-nav, .page-hero {
  position: relative; z-index: 1;
}

/* ── Dropdown her şeyin üstünde ── */
.has-dd .dd,
.mega-dd {
  z-index: 9999 !important;
  pointer-events: auto !important;
}
.has-dd .dd a,
.mega-dd a,
.mega-col a {
  pointer-events: auto !important;
  position: relative;
  z-index: 9999 !important;
}

/* ── Scroll progress bar ── */
#mb-scroll-progress {
  position: fixed; top:0; left:0; height:2px;
  background: linear-gradient(90deg, #22c55e, #4ade80, #22c55e);
  background-size: 200%;
  animation: progress-shimmer 2s linear infinite;
  z-index:9999; width:0%;
  box-shadow: 0 0 10px rgba(34,197,94,.7), 0 0 20px rgba(34,197,94,.3);
}
@keyframes progress-shimmer {
  0%   { background-position: 0%; }
  100% { background-position: 200%; }
}

/* ── Typing imleci ── */
.mb-cursor {
  display: inline-block;
  width: 3px; height: .85em;
  background: #22c55e;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 2px;
  animation: mb-cursor-blink 1s ease-in-out infinite;
}
@keyframes mb-cursor-blink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}

/* ── Sayfa geçiş overlay ── */
#mb-page-overlay {
  position: fixed; inset:0;
  background: linear-gradient(135deg, #07090a 0%, #0a0f0a 50%, #07090a 100%);
  z-index: 9996; /* ← navdan düşük */
  pointer-events: none; /* ← HİÇBİR ZAMAN tıklamayı engelleme */
  display: flex; align-items:center; justify-content:center;
}
#mb-page-overlay .mb-logo-anim {
  font-size:2rem; font-weight:900; color:#f0fdf4;
  animation: logo-pulse 1s ease-in-out infinite;
}
#mb-page-overlay .mb-logo-anim span { color:#22c55e; }
@keyframes logo-pulse {
  0%,100% { opacity:.4; transform:scale(.95); }
  50%      { opacity:1;  transform:scale(1); }
}

/* ── Scroll Reveal ── */
.mb-reveal, .mb-reveal-l, .mb-reveal-r,
.mb-reveal-up, .mb-reveal-scale {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .75s cubic-bezier(.22,1,.36,1),
              transform .75s cubic-bezier(.22,1,.36,1);
}
.mb-reveal      { transform: translateY(30px); }
.mb-reveal-l    { transform: translateX(-50px); }
.mb-reveal-r    { transform: translateX(50px); }
.mb-reveal-up   { transform: translateY(50px); }
.mb-reveal-scale{ transform: scale(.9); }
.mb-revealed    { opacity:1 !important; transform:none !important; }

/* ── Magnetik kart ── */
.mb-magnetic {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Kart hover mouse ışıması ── */
.p-card, .pkg-card, .w-card, .srv-card,
.rev-card, .blog-card, .prod-card {
  position: relative; overflow: hidden;
}
.p-card::before, .pkg-card::before, .w-card::before,
.srv-card::before, .rev-card::before, .prod-card::before {
  content: '';
  position: absolute; inset:0;
  background: radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(34,197,94,.09) 0%, transparent 55%
  );
  opacity: 0; transition: opacity .3s;
  pointer-events:none; border-radius: inherit; z-index:0;
}
.p-card:hover::before, .pkg-card:hover::before,
.w-card:hover::before, .srv-card:hover::before,
.rev-card:hover::before, .prod-card:hover::before {
  opacity: 1;
}

/* ── Shimmer sweep ── */
.shimmer-card { position:relative; overflow:hidden; }
.shimmer-card::after {
  content: '';
  position: absolute; top:0; left:0;
  width:55%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform: translateX(-120%) skewX(-12deg);
  animation: mb-shimmer 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes mb-shimmer {
  0%,60% { transform: translateX(-120%) skewX(-12deg); }
  100%    { transform: translateX(220%) skewX(-12deg); }
}

/* ── Neon border (öne çıkan kartlar) ── */
@keyframes mb-neon {
  0%,100% {
    border-color: rgba(34,197,94,.3);
    box-shadow: 0 0 8px rgba(34,197,94,.2), inset 0 0 15px rgba(34,197,94,.03);
  }
  50% {
    border-color: rgba(34,197,94,.7);
    box-shadow: 0 0 25px rgba(34,197,94,.45), 0 0 50px rgba(34,197,94,.15), inset 0 0 20px rgba(34,197,94,.07);
  }
}
.mb-neon { animation: mb-neon 2.5s ease-in-out infinite; }
.pkg-card.best, .pc.hot, .ssl-card.popular,
.order-box { animation: mb-neon 2.5s ease-in-out infinite; }

/* ── Floating ── */
@keyframes mb-float-anim {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.mb-float { will-change: transform; }

/* ── Glow pulse (chat butonu vb.) ── */
@keyframes mb-glow-pulse {
  0%,100% { box-shadow: 0 0 15px rgba(34,197,94,.3), 0 6px 24px rgba(34,197,94,.35); }
  50%      { box-shadow: 0 0 35px rgba(34,197,94,.6), 0 6px 40px rgba(34,197,94,.5); }
}
.mb-glow { animation: mb-glow-pulse 2.5s ease-in-out infinite; }

/* ── Gradient text ── */
.mb-gradient-text {
  background: linear-gradient(90deg, #22c55e, #4ade80, #86efac, #4ade80, #22c55e);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: mb-gradient-move 5s linear infinite;
}
@keyframes mb-gradient-move {
  0%   { background-position: 0%; }
  100% { background-position: 300%; }
}

/* ── Ripple ── */
@keyframes mb-ripple {
  from { transform:scale(0); opacity:1; }
  to   { transform:scale(1); opacity:0; }
}

/* ── Hero orb ── */
#mb-hero-orb {
  position: absolute; top:50%; left:50%;
  width:700px; height:700px; border-radius:50%;
  transform: translate(-50%,-60%);
  background: radial-gradient(ellipse,
    rgba(34,197,94,.12) 0%,
    rgba(34,197,94,.05) 35%,
    rgba(59,130,246,.04) 60%,
    transparent 75%
  );
  pointer-events:none;
  animation: orb-breathe 6s ease-in-out infinite;
  transition: transform .3s ease;
  z-index:0;
}
@keyframes orb-breathe {
  0%,100% { transform:translate(-50%,-60%) scale(1); opacity:.8; }
  50%      { transform:translate(-50%,-60%) scale(1.1); opacity:1; }
}

/* ── Dönen halkalar glow ── */
.r1::before, .r2::after, .r3::before, .r4::before {
  box-shadow: 0 0 15px currentColor, 0 0 30px currentColor;
}

/* ── Stat hücre hover ── */
.hs-cell, .sc {
  transition: background .22s, transform .22s, border-color .22s;
}
.hs-cell:hover { background:rgba(34,197,94,.06) !important; transform:translateY(-4px); }

/* ── Marquee hover dur ── */
.marquee-track { cursor:pointer; }
.marquee-track:hover { animation-play-state:paused; }

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Navbar transition ── */
nav { transition: transform .35s cubic-bezier(.22,1,.36,1), background .3s, box-shadow .3s !important; }

/* ── Footer animasyonu ── */
footer .f-col a {
  transition: color .18s, padding-left .22s;
}
footer .f-col a:hover { padding-left: 6px; }

/* ── Bildirim ── */
@keyframes mb-shake {
  0%,100% { transform:rotate(0); }
  20%      { transform:rotate(-15deg); }
  40%      { transform:rotate(15deg); }
  60%      { transform:rotate(-10deg); }
  80%      { transform:rotate(10deg); }
}
.notif-btn:hover { animation: mb-shake .5s ease; }

/* ── SSS açılma ── */
.faq-a {
  transition: max-height .38s cubic-bezier(.22,1,.36,1), padding .3s !important;
}

/* ── Input focus ── */
input:focus, select:focus, textarea:focus {
  animation: input-focus-glow .3s ease forwards;
}
@keyframes input-focus-glow {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
}

/* ── Logo hover ── */
.logo { transition: all .2s; }
.logo:hover { text-shadow: 0 0 20px rgba(34,197,94,.5); }
.logo:hover b { text-shadow: 0 0 30px rgba(34,197,94,.8); }

/* ── Genel hover yumuşatma ── */
a, button, .sb-a { transition: all .2s; }