/* ============================================================
   CellHub Motion CSS — 2026-05-24
   Motion One animasyonlarının CSS desteği.
   Mevcut landing.css'i değiştirmez, additive olarak yüklenir.
   ============================================================ */

/* ---- Scroll progress bar ---- */
.ch-scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:100;
  background:linear-gradient(90deg, var(--primary,#0066ff), var(--accent,#7c3aed), var(--accent2,#0ea5e9));
  transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
  will-change:transform;
}

/* ---- Gradient text shimmer (hero .grad için) ---- */
.ch-grad-shimmer{
  background:linear-gradient(90deg,
    var(--primary,#0066ff) 0%,
    var(--accent,#7c3aed) 35%,
    var(--accent2,#0ea5e9) 55%,
    var(--primary,#0066ff) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:chShimmer 3.6s ease-out 0.3s 1 forwards;
}
@keyframes chShimmer{
  0%   { background-position:100% 0; }
  100% { background-position:0% 0; }
}

/* ---- Hover spotlight (kartlar için) ---- */
.ch-spotlight{
  position:relative; isolation:isolate; overflow:hidden;
  --mx:50%; --my:50%; --spot-opacity:0;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ch-spotlight::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(420px circle at var(--mx) var(--my),
    rgba(0,102,255,.12), rgba(124,58,237,.06) 35%, transparent 60%);
  opacity:var(--spot-opacity);
  transition:opacity .25s ease;
  pointer-events:none;
}
.ch-spotlight:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg,0 14px 40px rgba(15,23,42,.10)); }

/* ---- Hero mockup tilt + float ---- */
.ch-tilt{
  transform-style:preserve-3d; perspective:1200px;
  transition:transform .2s ease;
  will-change:transform;
}
.ch-tilt > *{ transform:translateZ(0); }

/* ---- Magnetic button reset ---- */
[data-magnetic]{ will-change:transform; }

/* ---- Marquee (logo strip) ---- */
.ch-marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ch-marquee-track{
  display:flex; gap:64px; width:max-content;
  animation:chMarquee 38s linear infinite;
}
.ch-marquee:hover .ch-marquee-track{ animation-play-state:paused; }
@keyframes chMarquee{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ---- Staggered reveal: child slots (Motion JS bu class'ı set eder) ---- */
.ch-stagger > *{ opacity:0; transform:translateY(18px); }
.ch-stagger.ch-stagger-in > *{ opacity:1; transform:translateY(0); }

/* ---- Focus ring iyileştirme (a11y) ---- */
.ch-btn:focus-visible,
[data-magnetic]:focus-visible{
  outline:2px solid var(--primary,#0066ff);
  outline-offset:3px;
  border-radius:8px;
}

/* ============================================================
   MOBILE DRAWER OVERRIDE (legacy #chNavLinks)
   ch-motion.js bu DOM'u devraldığında full-screen overlay olur.
   ============================================================ */
@media (max-width: 899px){
  .ch-nav .ch-nav-links{
    display:none;
  }
  .ch-nav-links.open{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    list-style:none; padding:0; margin:0;
    position:fixed; inset:0; z-index:200;
    background:rgba(255,255,255,.98);
    -webkit-backdrop-filter:blur(20px);
            backdrop-filter:blur(20px);
    padding:max(72px, calc(env(safe-area-inset-top) + 72px)) 20px max(40px, env(safe-area-inset-bottom));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .ch-nav-links.open li{ list-style:none; width:100%; }
  .ch-nav-links.open a{
    display:flex; align-items:center;
    width:100%; padding:16px 20px; min-height:54px;
    font-size:17px; font-weight:600;
    background:rgba(0,0,0,.025);
    border:1px solid var(--border, #e2e8f0);
    border-radius:14px;
    color:var(--text, #0f172a) !important;
    -webkit-tap-highlight-color:rgba(0,102,255,.25);
    text-decoration:none;
  }
  .ch-nav-links.open a:hover,
  .ch-nav-links.open a:active,
  .ch-nav-links.open a.active{
    background:rgba(0,102,255,.10);
    border-color:rgba(0,102,255,.35);
    color:var(--text, #0f172a) !important;
  }
  .ch-nav-links.open a.active::after{ display:none; }
  /* Active link underline override (nav default'u kaldır) */
  body.menu-open-ch{
    position:fixed;
    top:var(--ch-scroll-y, 0);
    left:0; right:0;
    width:100%;
    overflow:hidden;
  }
  /* Close button (JS tarafından inject edilir) */
  .ch-drawer-close{
    position:fixed; top:14px; right:14px;
    width:46px; height:46px;
    display:none; align-items:center; justify-content:center;
    background:rgba(255,255,255,.95);
    border:1px solid var(--border, #e2e8f0);
    border-radius:11px;
    cursor:pointer; padding:0;
    color:var(--text, #0f172a);
    z-index:250;
    -webkit-tap-highlight-color:rgba(0,102,255,.25);
    box-shadow:0 4px 12px rgba(15,23,42,.08);
  }
  .ch-drawer-close.visible{ display:inline-flex; }
  .ch-drawer-close:active{ background:rgba(0,102,255,.10); border-color:rgba(0,102,255,.35); }
  /* Hamburger button ipucu — drawer açıkken görünmesin (X kullanıyoruz) */
  body.menu-open-ch .ch-hamburger{ display:none; }
}

/* ---- prefers-reduced-motion: tüm motion'ı kapat ---- */
@media (prefers-reduced-motion: reduce){
  .ch-scroll-progress,
  .ch-grad-shimmer{ animation:none !important; }
  .ch-grad-shimmer{
    -webkit-text-fill-color:initial; color:var(--primary,#0066ff);
    background:none;
  }
  .ch-marquee-track{ animation:none !important; }
  .ch-tilt{ transform:none !important; }
  .ch-stagger > *{ opacity:1 !important; transform:none !important; }
  .ch-spotlight:hover{ transform:none; }
  *{ scroll-behavior:auto !important; }
}