body { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(245,158,11,.3); color: #0f172a; }

.has-mobile-bar { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .has-mobile-bar { padding-bottom: 0; } }
.mobile-bar { padding-bottom: calc(.625rem + env(safe-area-inset-bottom)); transition: transform .3s ease; }
.mobile-cta { position: relative; display: flex; height: 3.5rem; align-items: center; gap: .625rem; overflow: hidden; border-radius: 1rem; padding: 0 .75rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s ease, filter .15s ease; }
.mobile-cta:active { transform: scale(.97); filter: brightness(.95); }
.mobile-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); animation: ctaShine 5s ease-in-out infinite; pointer-events: none; }
.mobile-cta + .mobile-cta::after { animation-delay: 2.5s; }
.mobile-cta-icon { display: grid; height: 2.25rem; width: 2.25rem; flex-shrink: 0; place-items: center; border-radius: .75rem; }
@media (max-width: 359px) {
  .mobile-cta { gap: .5rem; padding: 0 .5rem; }
  .mobile-cta-icon { height: 2rem; width: 2rem; border-radius: .625rem; }
}
@keyframes ctaShine { 0%, 70% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }

.phone-ring { animation: phoneRing 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes phoneRing { 0%, 76%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg); } 84% { transform: rotate(12deg); } 88% { transform: rotate(-10deg); } 92% { transform: rotate(6deg); } }

.fab-stack { transition: opacity .3s ease, transform .3s ease; }
.fab-stack.is-hidden { opacity: 0; transform: translateY(1rem); pointer-events: none; }
.fab { position: relative; display: flex; align-items: center; }
.fab-btn { position: relative; display: grid; height: 3.5rem; width: 3.5rem; place-items: center; border-radius: 9999px; transition: transform .2s ease; }
.fab:hover .fab-btn, .fab:focus-visible .fab-btn { transform: scale(1.07); }
.fab:focus-visible { outline: none; }
.fab:focus-visible .fab-btn { box-shadow: 0 0 0 4px rgba(245,158,11,.45); }
.fab-ping { position: absolute; inset: 0; border-radius: 9999px; opacity: .45; animation: fabPing 2.4s cubic-bezier(0,0,.2,1) infinite; }
@keyframes fabPing { 0% { transform: scale(1); opacity: .45; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.fab-card { position: absolute; left: calc(100% + .875rem); bottom: -.5rem; width: 17rem; padding: .875rem 1rem; border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 24px 48px -16px rgba(15,23,42,.35); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-.5rem); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.fab-card::before { content: ''; position: absolute; left: -7px; bottom: calc(2.25rem - 6px); width: 12px; height: 12px; background: #fff; border-left: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; transform: rotate(45deg); }
.fab-card::after { content: ''; position: absolute; right: 100%; top: 0; bottom: 0; width: 1rem; }
.fab:hover .fab-card, .fab:focus-visible .fab-card { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.hero-grid {
  background-image:
    linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 30% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 30%, transparent 75%);
}
.live-dot { position: relative; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: inherit; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-item.is-open { border-color: rgba(245,158,11,.5); box-shadow: 0 12px 32px -16px rgba(245,158,11,.35); }

#site-header { transition: transform .35s ease; }
#site-header .header-main { transition: box-shadow .3s ease, background-color .3s ease; }
#site-header.header-scrolled .header-main { box-shadow: 0 12px 32px -18px rgba(15,23,42,.45); background-color: rgba(255,255,255,.97); }
@media (min-width: 768px) { #site-header.header-scrolled { transform: translateY(-2.5rem); } }

.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: .875rem; right: .875rem; bottom: .3rem; height: 2px; border-radius: 2px; background: #f59e0b; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #0f172a; }

#mobile-menu { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
#mobile-menu.is-closed { opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; }
#menu-backdrop { transition: opacity .2s ease, visibility .2s; }
#menu-backdrop.is-closed { opacity: 0; visibility: hidden; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Axo Digital imzası */
.axo-link { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 9999px; font-size: .8125rem; color: #94a3b8; text-decoration: none; border: 1px solid rgba(148,163,184,.15); transition: color .3s, border-color .3s, background-color .3s; }
.axo-link:hover { color: #e2e8f0; border-color: rgba(245,158,11,.4); background-color: rgba(245,158,11,.06); }
.axo-dot { width: 6px; height: 6px; border-radius: 9999px; background: #f59e0b; animation: axoPulse 2s infinite; }
.axo-brand { display: inline-flex; font-weight: 800; letter-spacing: .02em; }
.axo-letter { display: inline-block; background: linear-gradient(90deg, #f59e0b, #e11d48, #8b5cf6, #f59e0b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: axoShift 4s linear infinite, axoWave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s), calc(var(--i) * .08s); }
.axo-space { display: inline-block; width: .3em; }
.axo-sparks { position: absolute; inset: 0; pointer-events: none; }
.axo-sparks i { position: absolute; width: 3px; height: 3px; border-radius: 9999px; background: #fbbf24; opacity: 0; }
.axo-sparks i:nth-child(1) { top: 15%; right: 12%; --dx: 10px; --dy: -12px; }
.axo-sparks i:nth-child(2) { bottom: 10%; right: 25%; --dx: 6px; --dy: 12px; animation-delay: .2s !important; }
.axo-sparks i:nth-child(3) { top: 30%; right: 2%; --dx: 14px; --dy: 2px; animation-delay: .4s !important; }
.axo-link:hover .axo-sparks i { animation: axoSpark .9s ease-out infinite; }
@keyframes axoShift { to { background-position: 300% 0; } }
@keyframes axoWave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2px); } }
@keyframes axoPulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.6); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
@keyframes axoSpark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}