/* ============================================================
   MEBİS — Modern Landing Page Stylesheet
   Tüm metin ve görseller korunur; sadece görsel katman + animasyon.
   ============================================================ */

:root {
  --mebis-primary: #0d6efd;
  --mebis-primary-dark: #0a58ca;
  --mebis-accent: #198754;
  --mebis-teal: #0dcaf0;
  --mebis-ink: #1b2436;
  --mebis-muted: #5b6677;

  --grad-brand: linear-gradient(120deg, #0d6efd 0%, #3a8bff 45%, #0dcaf0 100%);
  --grad-brand-soft: linear-gradient(120deg, #2b7bff 0%, #19c2c9 100%);
  --grad-green: linear-gradient(135deg, #0f4c3a 0%, #1a7a5e 100%);

  --shadow-sm: 0 4px 16px rgba(16, 39, 73, .06);
  --shadow-md: 0 14px 38px rgba(16, 39, 73, .10);
  --shadow-lg: 0 28px 70px rgba(13, 110, 253, .18);

  --radius: 16px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { scroll-behavior: smooth; }

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-top: 72px;
  color: var(--mebis-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; }

/* Gradient text utility */
.gradient-text,
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   NAVBAR — glassmorphism + scroll state
   ============================================================ */
.navbar {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(16, 39, 73, .06);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding-top: .85rem;
  padding-bottom: .85rem;
}
.navbar.navbar-scrolled {
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 8px 30px rgba(16, 39, 73, .08);
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.navbar-brand {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.navbar-brand i { animation: floaty 4s ease-in-out infinite; }
.navbar .nav-link {
  font-weight: 600;
  color: var(--mebis-ink) !important;
  position: relative;
  margin: 0 .15rem;
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.navbar .nav-link:hover::after { transform: scaleX(1); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-weight: 600;
  border-radius: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.btn-lg { padding: .8rem 1.6rem; }
.btn-primary {
  background: var(--grad-brand);
  border: none;
  box-shadow: 0 10px 24px rgba(13, 110, 253, .28);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(13, 110, 253, .38);
  background: var(--grad-brand);
}
.btn-primary:hover::after { left: 130%; }
.btn-outline-primary {
  border: 2px solid rgba(13, 110, 253, .45);
  color: var(--mebis-primary);
}
.btn-outline-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13, 110, 253, .18); }
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-warning:hover { transform: translateY(-2px); }

/* ============================================================
   HERO — animated gradient + floating orbs
   ============================================================ */
.hero {
  position: relative;
  padding: 96px 0 80px;
  background: linear-gradient(135deg, #eef5ff 0%, #ffffff 55%, #eafbff 100%);
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  z-index: 0;
  animation: orbFloat 14s ease-in-out infinite;
}
.hero::before {
  width: 460px; height: 460px;
  top: -140px; right: -120px;
  background: radial-gradient(circle at 30% 30%, #8ec5ff, transparent 70%);
}
.hero::after {
  width: 420px; height: 420px;
  bottom: -160px; left: -120px;
  background: radial-gradient(circle at 30% 30%, #6ee7d2 0%, transparent 70%);
  animation-delay: -6s;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 {
  line-height: 1.12;
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}
.hero .lead { font-size: 1.12rem; color: var(--mebis-muted); }
.hero .badge {
  background: rgba(13, 110, 253, .1) !important;
  color: var(--mebis-primary) !important;
  font-weight: 700;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(13, 110, 253, .18);
  letter-spacing: .01em;
}

/* Hero mockup — floating map card */
.hero-mockup {
  position: relative;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  animation: floaty 6s ease-in-out infinite;
}
.hero-mockup::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .5;
  pointer-events: none;
}
#heroMap {
  height: 430px;
  width: 100%;
  border-radius: 14px;
  z-index: 1;
}
.hero-overlay-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: var(--grad-brand);
  color: #fff;
  padding: 11px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  z-index: 1000;
  box-shadow: 0 8px 20px rgba(13, 110, 253, .35);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-overlay-btn:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 14px 28px rgba(13, 110, 253, .45); }
.hero-overlay-btn i { margin-right: 6px; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  font-size: .92rem;
  background: #f8fbff !important;
}
.trust-bar p { letter-spacing: .18em; font-weight: 700; }
.trust-bar .col-auto {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--mebis-muted);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.trust-bar .col-auto:hover { transform: translateY(-3px); color: var(--mebis-primary); }
.trust-bar .col-auto i { transition: color .25s var(--ease); }
.trust-bar .col-auto:hover i { color: var(--mebis-primary) !important; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
section h2 {
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}
section { position: relative; }

/* ============================================================
   FEATURES
   ============================================================ */
.feature-card {
  background: #fff;
  padding: 32px 26px;
  border-radius: var(--radius);
  border: 1px solid rgba(16, 39, 73, .06);
  box-shadow: var(--shadow-sm);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: rgba(13, 110, 253, .2);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
  transition: transform .35s var(--ease);
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-4deg); }
.feature-card h5 { font-weight: 700; }
.feature-card .badge { border-radius: 999px; }

/* ============================================================
   iOS HIGHLIGHT SECTION — orbs + floating phone
   ============================================================ */
section[style*="0f4c3a"] {
  position: relative;
  overflow: hidden;
}
section[style*="0f4c3a"]::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  top: -180px; left: -120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(245, 215, 110, .25), transparent 70%);
  filter: blur(40px);
  animation: orbFloat 16s ease-in-out infinite;
}
section[style*="0f4c3a"] .position-relative > div { animation: floaty 5.5s ease-in-out infinite; }
section[style*="0f4c3a"] img { transition: transform .4s var(--ease); }
section[style*="0f4c3a"] .d-flex.align-items-start { transition: transform .25s var(--ease); }
section[style*="0f4c3a"] .d-flex.align-items-start:hover { transform: translateX(4px); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 18px;
  box-shadow: 0 12px 28px rgba(13, 110, 253, .3);
  transition: transform .3s var(--ease);
}
.text-center:hover > .step-num { transform: translateY(-5px) scale(1.05); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-card {
  background: #fff;
  border: 2px solid #eef1f6;
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  height: 100%;
  position: relative;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(13, 110, 253, .4);
  box-shadow: var(--shadow-md);
}
.pricing-card.featured {
  border-color: transparent;
  box-shadow: 0 24px 60px rgba(13, 110, 253, .18);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-brand) border-box;
  border: 2px solid transparent;
  transform: scale(1.03);
}
.pricing-card.featured:hover { transform: scale(1.03) translateY(-8px); }
.badge-featured {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-brand);
  color: white;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  box-shadow: 0 8px 18px rgba(13, 110, 253, .35);
  white-space: nowrap;
}
.pricing-card h5 { font-weight: 800; }
.price { margin: 16px 0 4px; }
.price .amount {
  font-size: 2.7rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.price .unit { color: #6c757d; margin-left: 4px; font-weight: 600; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  padding: 9px 0;
  border-bottom: 1px solid #f1f3f5;
  font-size: .95rem;
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list li i { margin-right: 8px; width: 16px; }

/* ============================================================
   EK GELİR (revenue) icons
   ============================================================ */
section.bg-light .display-4 { transition: transform .35s var(--ease); }
section.bg-light .text-center:hover > .display-4 { transform: translateY(-6px) scale(1.1); }

/* ============================================================
   DEMO CTA — animated gradient band
   ============================================================ */
section#demo.bg-primary {
  background: var(--grad-brand) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 9s ease infinite;
  position: relative;
  overflow: hidden;
}
section#demo h2 { font-weight: 800; }

/* ============================================================
   CONTACT FORM
   ============================================================ */
#contact .form-control {
  border-radius: 12px;
  border: 1.5px solid #e4e9f0;
  padding: .7rem .9rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#contact .form-control:focus {
  border-color: var(--mebis-primary);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, .12);
}
#contact .form-label { font-weight: 600; font-size: .92rem; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.bg-dark { background: #0c1320 !important; }
footer a { transition: color .2s var(--ease), padding-left .2s var(--ease); }
footer a:hover { color: #fff !important; padding-left: 3px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.08); }
  66% { transform: translate(-20px, 24px) scale(.95); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   SCROLL & MOTION PREFS
   ============================================================ */
html { scroll-behavior: smooth; }
section { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}