:root {
  --c-bg: #0a0e1a;
  --c-bg-2: #121a2e;
  --c-text: #f1f5fb;
  --c-muted: #8a93a8;
  --c-accent: #8b5cf6;
  --c-accent-hi: #a78bfa;
  --c-accent-2: #3b82f6;
  --grad: linear-gradient(135deg, #8b5cf6, #6366f1 45%, #3b82f6);
  --grad-text: linear-gradient(135deg, #a78bfa, #60a5fa);
  --c-success: #34d399;
  --c-border: rgba(255, 255, 255, 0.09);
  --max: 1180px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}
body.landing-body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(48vw 48vw at 12% 6%,  rgba(124, 92, 246, 0.16), transparent 60%),
    radial-gradient(42vw 42vw at 88% 0%,  rgba(59, 130, 246, 0.13), transparent 58%),
    radial-gradient(52vw 52vw at 80% 96%, rgba(8, 145, 178, 0.10),  transparent 60%),
    var(--c-bg);
  background-attachment: fixed;
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.landing-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 15, 28, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.landing-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-weight: 800; font-size: 20px; letter-spacing: -0.5px; color: var(--c-text); text-decoration: none; }
.brand span { color: var(--c-accent-hi); }
.main-nav { display: flex; gap: 28px; }
.main-nav a { color: var(--c-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 100ms; }
.main-nav a:hover { color: var(--c-text); }
.header-right { display: flex; gap: 10px; align-items: center; }

.lang-picker { position: relative; }
.lang-picker summary { list-style: none; cursor: pointer; padding: 6px 10px; color: var(--c-muted); font-size: 13px; background: var(--c-bg-2); border-radius: 6px; border: 1px solid var(--c-border); }
.lang-picker summary::-webkit-details-marker { display: none; }
.lang-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: 8px; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 140px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 50; }
.lang-menu a { padding: 6px 10px; color: var(--c-muted); text-decoration: none; font-size: 12px; border-radius: 4px; text-align: center; }
.lang-menu a:hover { background: var(--c-bg); color: var(--c-text); }
.lang-menu a.is-active { background: var(--c-accent); color: white; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 80ms, box-shadow 120ms, background 120ms;
}
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 8px 22px -8px rgba(139, 92, 246, 0.6); }
.btn.primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 30px -8px rgba(139, 92, 246, 0.6); }
.btn.ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
.btn.ghost:hover { background: var(--c-bg-2); }
.btn.big { padding: 14px 28px; font-size: 16px; }

.hero {
  padding: 44px 0 90px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(59, 130, 246, 0.15), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.15), transparent 60%);
}
.hero-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: 24px;
}
.hero h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 800; line-height: 1.1; margin: 0 0 20px; letter-spacing: -1.5px; }
.hero h1 .grad { background: linear-gradient(135deg, var(--c-accent-hi), #a78bfa, #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 18px; color: var(--c-muted); max-width: 680px; margin: 0 auto 36px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; }
.hero-stats { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid var(--c-border); margin-top: 20px; max-width: 700px; margin-left: auto; margin-right: auto; }
.hero-stats div { font-size: 14px; color: var(--c-muted); }
.hero-stats strong { display: block; font-size: 24px; color: var(--c-text); margin-bottom: 4px; }

section { padding: 80px 0; }
section h2 { font-size: 36px; font-weight: 700; text-align: center; letter-spacing: -0.5px; margin: 0 0 12px; }
.section-sub { font-size: 17px; color: var(--c-muted); text-align: center; max-width: 640px; margin: 0 auto 50px; }

.features { background: var(--c-bg-2); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.feature-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 14px; padding: 30px 26px; }
.feature-icon { font-size: 34px; margin-bottom: 14px; }
.feature-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.feature-card p { color: var(--c-muted); font-size: 14px; margin: 0; }

.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.how-step { text-align: center; padding: 24px; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--c-accent), #6366f1); color: white; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 18px; }
.how-step h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.how-step p { color: var(--c-muted); font-size: 14px; margin: 0; }

/* ===== Fiyat paketleri — Aurora / cam lüks ===== */
.pricing {
  background: var(--c-bg-2);
  position: relative;
  overflow: hidden;
}
.pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 20% 0%,  rgba(139, 92, 246, 0.14), transparent 60%),
    radial-gradient(40vw 40vw at 85% 100%, rgba(59, 130, 246, 0.12), transparent 60%);
}
.pricing > .container { position: relative; z-index: 1; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; padding-top: 16px; }
.pricing-card {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 34px 26px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1), border-color 260ms, box-shadow 260ms;
}
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(135deg, #8b5cf6, #6366f1, #3b82f6);
  opacity: 0;
  transition: opacity 260ms;
}
.pricing-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 24px 60px -12px rgba(124, 108, 240, 0.5);
}
.pricing-card:hover::before { opacity: 1; }

/* Popüler paket — öne çıkan, aurora çerçeve + glow */
.pricing-card.popular {
  border-color: transparent;
  background:
    linear-gradient(rgba(13, 17, 30, 0.85), rgba(13, 17, 30, 0.85)) padding-box,
    linear-gradient(135deg, #8b5cf6, #6366f1, #3b82f6) border-box;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3), 0 28px 70px -14px rgba(124, 108, 240, 0.55);
}
.pricing-card.popular::before { opacity: 1; }
.pricing-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #8b5cf6, #6366f1, #3b82f6);
  color: white;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: 0 6px 20px -4px rgba(124, 108, 240, 0.7);
  white-space: nowrap;
}
.pricing-name { font-size: 13px; color: var(--c-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; font-weight: 600; }
.pricing-price {
  font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1.5px;
  background: linear-gradient(135deg, #c4b5fd, #a5b4fc 55%, #93c5fd);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pricing-credits { font-size: 14px; color: var(--c-text); margin-top: 10px; font-weight: 600; }
.pricing-per { font-size: 12px; color: var(--c-muted); margin-bottom: 24px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; font-size: 13.5px; flex: 1; }
.pricing-features li {
  padding: 8px 0 8px 26px;
  color: #cbd5e1;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 50%;
}
.pricing-card .btn { width: 100%; justify-content: center; margin-top: auto; }
.pricing-foot { text-align: center; color: var(--c-muted); font-size: 13px; margin-top: 32px; }

.plugin-section { background: var(--c-bg); }
.plugin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 800px) { .plugin-grid { grid-template-columns: 1fr; gap: 30px; } }
.plugin-section h2 { text-align: left; }
.plugin-section .section-sub { text-align: left; margin-left: 0; }
.check-list { list-style: none; padding: 0; margin: 0 0 24px; }
.check-list li { padding: 7px 0; color: var(--c-text); font-size: 15px; }

.plugin-screen { background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.ps-titlebar { background: var(--c-bg); padding: 12px 16px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--c-border); }
.ps-row { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--c-border); font-size: 13px; }
.ps-row span { color: var(--c-muted); }
.ps-row strong { color: var(--c-text); }
.ps-action { background: linear-gradient(135deg, var(--c-accent), #6366f1); color: white; padding: 14px; text-align: center; font-weight: 600; font-size: 15px; }

.cta-final { text-align: center; background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1)); padding: 100px 0; }
.cta-final h2 { font-size: 42px; margin-bottom: 14px; }
.cta-final p { color: var(--c-muted); font-size: 17px; max-width: 540px; margin: 0 auto 32px; }

.landing-footer { background: var(--c-bg-2); padding: 60px 0 30px; border-top: 1px solid var(--c-border); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--c-text); margin: 0 0 12px; }
.footer-grid a { display: block; color: var(--c-muted); text-decoration: none; font-size: 14px; padding: 4px 0; }
.footer-grid a:hover { color: var(--c-text); }
.footer-grid p.muted { color: var(--c-muted); font-size: 13px; margin: 8px 0 0; max-width: 280px; }
.footer-bottom { border-top: 1px solid var(--c-border); padding-top: 20px; color: var(--c-muted); font-size: 13px; text-align: center; }

/* ============================================
   Responsive — tablet (max-width: 960px)
   ============================================ */
@media (max-width: 960px) {
  .container { padding: 0 20px; }
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 13px; }
  .hero { padding: 64px 0 80px; }
  section { padding: 64px 0; }
  .pricing-grid { gap: 16px; }
  .feature-grid { gap: 16px; }
}

/* ============================================
   Responsive — mobile (max-width: 760px)
   ============================================ */
@media (max-width: 760px) {
  .container { padding: 0 16px; }
  .landing-header .container { height: 56px; }

  /* Hero */
  .hero { padding: 48px 0 60px; }
  .hero-badge { font-size: 12px; padding: 5px 12px; margin-bottom: 18px; }
  .hero h1 { font-size: clamp(28px, 7vw, 64px); letter-spacing: -0.8px; margin-bottom: 16px; }
  .hero-sub { font-size: 15px; margin-bottom: 28px; padding: 0 4px; }
  .hero-cta { flex-direction: column; gap: 10px; margin-bottom: 44px; padding: 0 8px; }
  .hero-cta .btn { width: 100%; justify-content: center; min-height: 48px; }
  .btn.big { padding: 13px 22px; font-size: 15px; }
  .hero-stats { flex-direction: column; gap: 18px; padding-top: 24px; margin-top: 12px; }
  .hero-stats div { font-size: 13px; }
  .hero-stats strong { font-size: 22px; }

  /* Sections */
  section { padding: 50px 0; }
  section h2 { font-size: 28px; letter-spacing: -0.3px; }
  .section-sub { font-size: 15px; margin-bottom: 36px; padding: 0 4px; }

  /* Features */
  .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature-card { padding: 24px 20px; }
  .feature-icon { font-size: 30px; margin-bottom: 12px; }
  .feature-card h3 { font-size: 17px; }
  .feature-card p { font-size: 14px; }

  /* How */
  .how-steps { grid-template-columns: 1fr; gap: 14px; }
  .how-step { padding: 18px 16px; }
  .step-num { width: 40px; height: 40px; font-size: 16px; margin-bottom: 14px; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .pricing-card { padding: 28px 22px; }
  .pricing-price { font-size: 36px; }
  .pricing-card .btn { min-height: 46px; font-size: 14px; padding: 12px 16px; }
  .pricing-foot { font-size: 12px; margin-top: 24px; padding: 0 8px; }

  /* Plugin */
  .plugin-grid { grid-template-columns: 1fr; gap: 28px; }
  .plugin-section h2 { text-align: center; }
  .plugin-section .section-sub { text-align: center; margin-left: auto; margin-right: auto; }
  .plugin-screen { max-width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
  .ps-titlebar, .ps-row { padding: 11px 14px; font-size: 12px; }
  .ps-action { padding: 13px; font-size: 14px; }
  .check-list li { font-size: 14px; }

  /* CTA final */
  .cta-final { padding: 70px 0; }
  .cta-final h2 { font-size: 30px; margin-bottom: 12px; }
  .cta-final p { font-size: 15px; margin-bottom: 26px; padding: 0 8px; }
  .cta-final .btn { width: 100%; max-width: 320px; justify-content: center; min-height: 48px; }

  /* Footer */
  .landing-footer { padding: 44px 0 24px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; margin-bottom: 28px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-grid h4 { font-size: 12px; margin-bottom: 10px; }
  .footer-grid a { font-size: 13px; padding: 3px 0; }
  .footer-grid p.muted { font-size: 12px; }
  .footer-bottom { font-size: 12px; padding-top: 16px; }
}

/* ============================================
   Responsive — small phone (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  /* Hero */
  .hero { padding: 36px 0 48px; }
  .hero h1 { letter-spacing: -0.5px; }
  .hero-sub { font-size: 14px; }

  /* Footer: marka tam genişlik + 3 link grubu YAN YANA (alt alta değil) */
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-grid a { font-size: 12.5px; }
  .footer-grid h4 { font-size: 11.5px; }
}

/* ============================================
   RTL desteği (Arapça için)
   ============================================ */
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .main-nav { mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent); }
[dir="rtl"] .plugin-section h2,
[dir="rtl"] .plugin-section .section-sub { text-align: right; }

/* ============================================
   Brand icon (logo + Farm yazısı) — TEMİZ
   ============================================ */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap;
}
.brand .brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
}
.brand .brand-text {
  display: inline-block !important;
  line-height: 1;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.4px;
  color: var(--c-text);
  white-space: nowrap !important;
  word-break: keep-all;
}
.brand .brand-text span {
  color: var(--c-accent-hi);
  white-space: nowrap;
  display: inline;
}

.landing-header .container {
  position: relative;
}

/* ============================================
   Hamburger button (mobile only)
   ============================================ */
.lp-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.lp-menu-toggle:active { background: var(--c-bg-2); }
.lp-menu-toggle[aria-expanded="true"] { background: var(--c-bg-2); }

/* ============================================
   Mobile drawer (<=860px) — TÜMÜ DRAWER İÇİNDE
   ============================================ */
@media (max-width: 860px) {
  body.landing-body .landing-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    height: 56px !important;
    padding: 0 14px !important;
    position: relative;
  }

  body.landing-body .brand { gap: 8px !important; min-width: 0; flex: 0 1 auto; }
  body.landing-body .brand .brand-text { font-size: 16px; }
  body.landing-body .brand .brand-icon { width: 30px; height: 30px; }

  body.landing-body .lp-menu-toggle {
    display: inline-flex !important;
    order: 99;
    flex-shrink: 0;
  }

  /* Nav drawer — hamburger açılınca görünür, mobile'da default GİZLİ */
  body.landing-body .main-nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(10, 15, 28, 0.98) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-border);
    padding: 14px 18px 20px !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
    z-index: 99;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    margin: 0 !important;
    max-width: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    width: auto !important;
  }
  body.landing-body .main-nav.is-open { display: flex !important; }
  body.landing-body .main-nav a {
    padding: 14px 10px !important;
    border-bottom: 1px solid var(--c-border) !important;
    font-size: 15px !important;
    color: var(--c-text) !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  body.landing-body .main-nav a:last-child { border-bottom: none !important; }
  body.landing-body .main-nav a:hover { background: var(--c-bg-2); }

  /* Header-right: drawer içine taşı — sadece hamburger görünür mobile'da */
  body.landing-body .header-right {
    display: none !important;
  }
  body.landing-body .main-nav.is-open + .header-right,
  body.landing-body .header-right.is-open {
    display: flex !important;
    position: absolute !important;
    top: calc(100% + 1px);
    left: 0 !important;
    right: 0 !important;
    background: rgba(10, 15, 28, 0.98);
    padding: 14px 18px 18px;
    border-bottom: 1px solid var(--c-border);
    z-index: 98;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: center;
  }
  body.landing-body .main-nav.is-open ~ .header-right {
    display: flex !important;
    position: relative !important;
    margin-top: -1px;
  }
}

/* Çok dar ekran (<=420px) */
@media (max-width: 420px) {
  body.landing-body .brand .brand-text { font-size: 15px; }
  body.landing-body .brand .brand-icon { width: 28px; height: 28px; }
  body.landing-body .lp-menu-toggle { width: 38px !important; height: 38px !important; font-size: 19px !important; }
}

[dir="rtl"] .main-nav { left: 0; right: 0; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* ============================================
   Auth brand icon
   ============================================ */
.auth-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 24px;
}
.auth-brand .brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
}
.auth-brand .brand-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 20px;
  color: var(--c-text);
  line-height: 1;
}
.auth-brand .brand-text span { color: var(--c-accent-hi); }

@media (max-width: 480px) {
  .auth-brand .brand-icon { width: 32px; height: 32px; }
  .auth-brand .brand-text { font-size: 18px; }
}

/* Token display: koruma */

/* ===== Hero görseli (render farm panel showcase, locale'e göre TR/EN) ===== */
.hero-visual {
  position: relative;
  max-width: 1080px;
  margin: 52px auto 0;
  padding: 0 12px;
}
.hero-visual::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 6%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(139,92,246,0.30), rgba(59,130,246,0.16) 45%, transparent 72%);
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}
.hero-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,0.55));
}
@media (max-width: 720px) {
  .hero-visual { margin-top: 34px; padding: 0 4px; }
  .hero-visual img { border-radius: 10px; }
}

/* ===== Donanım bölümü (render farm hardware) ===== */
.hardware { position: relative; overflow: hidden; }
.hardware::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 80% 0%, rgba(139,92,246,0.13), transparent 60%),
    radial-gradient(38vw 38vw at 10% 100%, rgba(59,130,246,0.11), transparent 60%);
}
.hardware > .container { position: relative; z-index: 1; }
.hw-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto 44px;
}
.hw-stat { flex: 0 0 calc(20% - 12px); } /* 5 kutu yan yana */
.hw-stat {
  text-align: center;
  padding: 18px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(12px);
}
.hw-stat strong {
  display: block;
  font-size: 30px; font-weight: 800; letter-spacing: -1px;
  background: linear-gradient(135deg, #c4b5fd, #a5b4fc 55%, #93c5fd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hw-stat span { font-size: 12.5px; color: var(--c-muted); margin-top: 4px; display: block; }

.hw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
.hw-card {
  position: relative;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 26px 28px;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 240ms cubic-bezier(.2,.7,.3,1), border-color 240ms, box-shadow 240ms;
}
.hw-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 24px 60px -12px rgba(124,108,240,0.5); }
.hw-card.featured {
  border-color: transparent;
  background:
    linear-gradient(rgba(13,17,30,0.86), rgba(13,17,30,0.86)) padding-box,
    linear-gradient(135deg, #8b5cf6, #6366f1, #3b82f6) border-box;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.3), 0 24px 60px -14px rgba(124,108,240,0.5);
}
.hw-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hw-lot {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: #a78bfa; padding: 4px 12px;
  background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.3);
  border-radius: 999px;
}
.hw-count { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; color: var(--c-text); line-height: 1; }
.hw-count small { font-size: 20px; color: var(--c-muted); font-weight: 600; margin-left: 2px; }
.hw-specs { list-style: none; padding: 0; margin: 0; }
.hw-specs li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14.5px;
}
.hw-specs li:last-child { border-bottom: none; }
.hw-k {
  flex-shrink: 0; width: 42px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--c-muted);
}
.hw-v { color: var(--c-text); font-weight: 600; }
.hw-v em { display: block; color: var(--c-muted); font-weight: 500; font-style: normal; font-size: 13px; margin-top: 3px; }

@media (max-width: 720px) {
  .hw-summary { gap: 10px; }
  .hw-stat { flex: 0 0 calc(50% - 5px); } /* mobilde 2 yan yana */
  .hw-grid { grid-template-columns: 1fr; }
  .hw-stat strong { font-size: 26px; }
}

/* Fiyat modeli rozeti */
.price-model {
  display: inline-block;
  margin: -34px auto 40px;
  padding: 9px 20px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 999px;
  color: #c4b5fd;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.pricing { text-align: center; }
.pricing .pricing-grid { text-align: left; }

.pricing-bonus { color: #34d399; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   Aurora section polish (panel tasarım dili) — 2026-06-03
   Eski düz section'ları glassmorphism + aurora'ya çeker.
   Sadece görünüm; mobil layout media-query'lerine dokunmaz.
   ═══════════════════════════════════════════════════════════ */
.hero-badge{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.3);color:#c4b5fd;font-weight:600;backdrop-filter:blur(8px)}
.hero h1 .grad{background:linear-gradient(135deg,#a78bfa,#60a5fa 55%,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-stats strong{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* özellik kartları → cam + hover + gradient ikon çipi */
.features{background:rgba(255,255,255,.015)}
.feature-card{background:rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.09);box-shadow:0 14px 40px -16px rgba(0,0,0,.5);transition:transform .26s cubic-bezier(.2,.7,.3,1),border-color .26s,box-shadow .26s}
.feature-card:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.3);box-shadow:0 22px 54px -18px rgba(124,108,240,.45)}
.feature-icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:15px;font-size:27px;background:radial-gradient(circle at 30% 25%,rgba(139,92,246,.28),rgba(59,130,246,.1));border:1px solid rgba(139,92,246,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
/* adımlar → cam kart */
.how-step{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;backdrop-filter:blur(12px)}
.step-num{background:var(--grad)}
/* plugin + cta + footer → aurora görünür */
.plugin-section{background:transparent}
.plugin-screen{background:rgba(255,255,255,.035);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.1)}
.ps-action{background:var(--grad)}
.cta-final{background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(59,130,246,.1));border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.landing-footer{background:rgba(8,12,22,.5);backdrop-filter:blur(10px)}

/* ═══ Aurora header (.lh) — paylaşımlı (landing + about/contact/docs) ═══ */
.lh{position:sticky;top:0;z-index:200;background:rgba(8,12,22,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.09)}
.lh-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:20px}
.lh-brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:19px;color:#fff;letter-spacing:-.4px;flex:none}
.lh-brand img{border-radius:9px;box-shadow:0 6px 18px -6px rgba(139,92,246,.6)}
.lh-brand b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.lh-nav{display:flex;align-items:center;gap:26px;flex:1}
.lh-nav>a{color:var(--c-muted);text-decoration:none;font-size:14px;font-weight:600;transition:color .15s}
.lh-nav>a:hover{color:#fff}
.lh-nav-actions{display:none}
.lh-right{display:flex;align-items:center;gap:10px;flex:none}
.lh-lang,.lh-user{position:relative}
.lh-lang>summary,.lh-user>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.lh-lang>summary::-webkit-details-marker,.lh-user>summary::-webkit-details-marker{display:none}
.lh-lang>summary{padding:7px 11px;border:1px solid rgba(255,255,255,.14);border-radius:10px;font-size:13px;font-weight:600;color:#cdd5e6;background:rgba(255,255,255,.04)}
.lh-lang>summary:hover{background:rgba(255,255,255,.08)}
.lh-lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:#0e1422;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;min-width:180px;box-shadow:0 20px 60px -12px rgba(0,0,0,.75);z-index:300}
.lh-lang-menu a{padding:7px 8px;color:#cdd5e6;text-decoration:none;font-size:12px;border-radius:8px;text-align:center}
.lh-lang-menu a:hover{background:rgba(255,255,255,.08)}
.lh-lang-menu a.is-active{background:var(--grad);color:#fff;font-weight:700}
.lh-av{width:38px;height:38px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px}
.lh-user>summary{border-radius:11px}
.lh-user-menu{position:absolute;right:0;top:calc(100% + 8px);background:#0e1422;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:8px;min-width:240px;box-shadow:0 24px 64px -14px rgba(0,0,0,.8);z-index:300}
.lh-user-head{display:flex;align-items:center;gap:11px;padding:8px 10px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}
.lh-av.lg{width:42px;height:42px;border-radius:12px;font-size:17px;flex:none}
.lh-user-head .nm{font-weight:700;font-size:14px}.lh-user-head .em{font-size:12px;color:var(--c-muted)}
.lh-user-menu a{display:flex;align-items:center;gap:9px;padding:10px 11px;color:#dce3f0;text-decoration:none;font-size:13.5px;font-weight:600;border-radius:9px;transition:background .12s}
.lh-user-menu a:hover{background:rgba(255,255,255,.06)}
.lh-user-menu a.lh-logout{color:#f0786e;margin-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.lh-burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.lh-burger span{width:18px;height:2px;background:#dce3f0;border-radius:2px;transition:transform .25s,opacity .2s}
.lh.open .lh-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lh.open .lh-burger span:nth-child(2){opacity:0}
.lh.open .lh-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.lh-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);z-index:150;opacity:0;visibility:hidden;transition:opacity .25s}
.lh.open ~ .lh-scrim{opacity:1;visibility:visible}
@media(max-width:860px){
  .lh-in{padding:0 14px;gap:10px}
  .lh-nav{position:fixed;top:64px;left:0;right:0;background:rgba(10,14,26,.98);backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.1);flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 18px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .25s,opacity .25s;max-height:calc(100vh - 64px);overflow-y:auto;z-index:180}
  .lh.open .lh-nav{transform:none;opacity:1;visibility:visible}
  .lh-nav>a{padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:15.5px;min-height:48px;display:flex;align-items:center}
  .lh-nav-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .lh-nav-actions .btn{width:100%;justify-content:center;min-height:48px}
  .lh-nav-actions .lh-sc{display:flex;align-items:center;gap:9px;padding:13px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:11px;color:#dce3f0;text-decoration:none;font-weight:600;font-size:14.5px;min-height:48px}
  .lh-nav-actions .lh-sc:hover{background:rgba(255,255,255,.08)}
  .lh-burger{display:flex}
  .lh-right{margin-left:auto;gap:7px}
  /* mobilde giriş/kayıt GÖRÜNÜR + kompakt (eskiden gizliydi) */
  .lh-login{display:inline-flex!important;padding:7px 12px!important;font-size:12.5px!important}
  .lh-lang>summary{padding:7px 9px;font-size:12px}
  .lh-lang-menu{position:fixed;left:12px;right:12px;top:64px;grid-template-columns:repeat(4,1fr);z-index:400}
}
@media(max-width:400px){
  .lh-right{gap:5px}
  .lh-login{padding:6px 9px!important;font-size:11.5px!important}
  .lh-lang>summary{padding:6px 7px!important}
}
@media(max-width:380px){.lh-brand span{font-size:16px}}

/* ═══════════════════════════════════════════════════════════
   LANDING ANİMASYON KATMANI — 2026-06-10
   Scroll-reveal + sayaçlar + "Nasıl Çalışır" SVG sahnesi +
   farm dot grid + fiyat karşılaştırma + hero orbs + progress.
   JS: /assets/js/landing-anim.js (no-JS'de her şey görünür kalır).
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll-reveal (gizleme sınıfı JS yüklenince eklenir) ── */
.pre-reveal{opacity:0;transform:translateY(18px)}
.revealed{opacity:1;transform:none;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
[data-reveal-delay="1"].revealed{transition-delay:.08s}
[data-reveal-delay="2"].revealed{transition-delay:.16s}
[data-reveal-delay="3"].revealed{transition-delay:.24s}
[data-reveal-delay="4"].revealed{transition-delay:.32s}
[data-reveal-delay="5"].revealed{transition-delay:.4s}

/* ── Header scroll-progress çubuğu ── */
.lh-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;pointer-events:none}
[dir="rtl"] .lh-progress{transform-origin:right}

/* ── Hero arka plan orbs ── */
.hero{position:relative;overflow:hidden}
.hero>.container{position:relative;z-index:1}
.hero-orbs{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-orbs i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55}
.hero-orbs i:nth-child(1){width:440px;height:440px;left:-130px;top:-90px;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 70%);animation:haOrbA 16s ease-in-out infinite alternate}
.hero-orbs i:nth-child(2){width:400px;height:400px;right:-110px;top:28%;background:radial-gradient(circle,rgba(59,130,246,.45),transparent 70%);animation:haOrbB 20s ease-in-out infinite alternate}
@keyframes haOrbA{to{transform:translate(70px,50px)}}
@keyframes haOrbB{to{transform:translate(-60px,-40px)}}
/* hero görseline ince aurora kenar parlaması */
.hero-visual img{outline:1px solid rgba(139,92,246,.22);outline-offset:-1px}

/* ── Özellik kartı SVG ikonları ── */
.feature-icon svg{width:26px;height:26px;stroke:#c4b5fd;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ═══ "Nasıl Çalışır" sahnesi (.how-anim) ═══
   Varsayılan stil = FİNAL kare (no-JS / reduced-motion görünümü).
   .is-playing eklenince 8sn'lik koreografi döner. */
.how .section-sub{margin-bottom:34px}
.how-anim{max-width:1000px;margin:0 auto 42px;padding:0 4px}
.how-anim svg{width:100%;height:auto;display:block}
.ha-panel{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.14);stroke-width:1}
.ha-screen{fill:#0d1322;stroke:rgba(139,92,246,.4);stroke-width:1}
.ha-cloudfill{fill:rgba(139,92,246,.3)}
.ha-cloudarrow{opacity:.95}
.ha-path{fill:none;opacity:.8}
.ha-packet{opacity:0;transform:translate(168px,136px)}
.ha-gridbox{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.1);stroke-width:1}
.ha-node{fill:url(#haGrad);opacity:.92}
.ha-barbg{fill:rgba(255,255,255,.14)}
.ha-bar{fill:#34d399;transform:scaleX(1)}
.ha-frame{fill:rgba(139,92,246,.32);stroke:rgba(167,139,250,.7);stroke-width:1}
.ha-cloud,.ha-dl,.ha-check{transform-box:fill-box;transform-origin:center}

/* — koreografi (8sn master döngü) — */
.how-anim.is-playing .ha-wire{animation:haWire 8s ease-in-out infinite}
@keyframes haWire{0%{opacity:.35}8%,100%{opacity:1}}
.how-anim.is-playing .ha-chip{animation:haChip 8s ease infinite;transform-box:fill-box;transform-origin:center}
@keyframes haChip{0%{transform:scale(0);opacity:0}4%{transform:scale(0);opacity:0}8%{transform:scale(1.15);opacity:1}10%,100%{transform:scale(1);opacity:1}}
.how-anim.is-playing .ha-path{animation:haFlow 1.1s linear infinite}
@keyframes haFlow{to{stroke-dashoffset:-13}}
.how-anim.is-playing .ha-packet{animation:haPacket 8s cubic-bezier(.45,.05,.55,.95) infinite}
.how-anim.is-playing .ha-pk2{animation-delay:.4s}
.how-anim.is-playing .ha-pk3{animation-delay:.8s}
@keyframes haPacket{
  0%,9%{transform:translate(168px,136px);opacity:0}
  12%{opacity:1}
  19%{transform:translate(332px,88px)}
  25%{transform:translate(460px,152px);opacity:1}
  27%,100%{transform:translate(460px,152px);opacity:0}
}
.how-anim.is-playing .ha-cloud{animation:haCloud 8s ease-in-out infinite}
@keyframes haCloud{0%,13%{transform:scale(1)}18%{transform:scale(1.1)}23%,100%{transform:scale(1)}}
.how-anim.is-playing .ha-node{animation:haNode 8s ease infinite;animation-delay:calc(var(--i)*.09s)}
@keyframes haNode{0%,26%{opacity:.12}34%{opacity:1}88%{opacity:1}96%,100%{opacity:.12}}
.how-anim.is-playing .ha-bar{animation:haBar 8s linear infinite;animation-delay:calc(var(--i)*.09s)}
@keyframes haBar{0%,30%{transform:scaleX(0)}66%{transform:scaleX(1)}92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
.how-anim.is-playing .ha-frame{animation:haFrame 8s ease infinite}
.how-anim.is-playing .ha-fr2{animation-delay:.16s}
.how-anim.is-playing .ha-fr3{animation-delay:.32s}
@keyframes haFrame{0%,66%{transform:translate(-150px,12px) scale(.5);opacity:0}73%{opacity:1}78%,100%{transform:none;opacity:1}}
.how-anim.is-playing .ha-dl{animation:haPopDl 8s ease infinite}
@keyframes haPopDl{0%,78%{transform:scale(0);opacity:0}84%{transform:scale(1.12);opacity:1}87%,100%{transform:scale(1);opacity:1}}
.how-anim.is-playing .ha-check{animation:haPopCk 8s ease infinite}
@keyframes haPopCk{0%,84%{transform:scale(0);opacity:0}90%{transform:scale(1.18);opacity:1}93%,100%{transform:scale(1);opacity:1}}

/* adım kartı senkron vurgusu */
.how-step{transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s,box-shadow .3s}
.how-step.is-active{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.09);transform:translateY(-4px);box-shadow:0 16px 40px -16px rgba(124,108,240,.5)}
.how-step.is-active .step-num{box-shadow:0 0 0 5px rgba(139,92,246,.22)}
.step-num{transition:box-shadow .3s}

@media(max-width:420px){
  .ha-bar,.ha-barbg{display:none}
  .how-anim{margin-bottom:30px}
}

/* ═══ Farm dot grid (donanım bölümü) ═══ */
.farm-dots{display:flex;flex-direction:column;align-items:center;gap:12px;margin:36px auto 8px}
.fd-grid{display:grid;grid-template-columns:repeat(25,13px);gap:6px;justify-content:center}
.fd-grid i{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,#8b5cf6,#3b82f6);animation:fdPulse 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*.13s)}
@keyframes fdPulse{0%,100%{opacity:.32}50%{opacity:1}}
.fd-cap{font-size:12.5px;color:var(--c-muted)}
@media(max-width:720px){.fd-grid{grid-template-columns:repeat(10,13px)}}

/* ═══ Fiyat karşılaştırma barı (pricing) ═══ */
.price-compare{max-width:620px;margin:0 auto 46px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:22px 26px 18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:left}
.pc-title{font-size:14px;font-weight:700;margin-bottom:16px;text-align:center;color:#cdd5e6}
.pc-row{margin-bottom:14px}
.pc-lbl{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--c-muted);margin-bottom:5px}
.pc-lbl b{color:var(--c-text)}
.pc-row.us .pc-lbl b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pc-bar{height:13px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.pc-fill{height:100%;border-radius:99px;transition:width 1.1s cubic-bezier(.2,.7,.3,1) .25s}
.pc-row.us .pc-fill{width:25%;background:var(--grad);box-shadow:0 0 14px -2px rgba(139,92,246,.7)}
.pc-row.them .pc-fill{width:100%;background:rgba(138,147,168,.4)}
.price-compare.pre-reveal:not(.revealed) .pc-fill{width:0!important;transition:none}
.pc-note{font-size:11.5px;color:var(--c-muted);text-align:center;margin-top:2px}

/* ═══ Plugin mockup satır animasyonu ═══ */
.plugin-preview.pre-reveal .ps-row,.plugin-preview.pre-reveal .ps-action{opacity:0;transform:translateX(-10px)}
.plugin-preview.revealed .ps-row,.plugin-preview.revealed .ps-action{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.plugin-preview.revealed .ps-row:nth-of-type(2){transition-delay:.06s}
.plugin-preview.revealed .ps-row:nth-of-type(3){transition-delay:.12s}
.plugin-preview.revealed .ps-row:nth-of-type(4){transition-delay:.18s}
.plugin-preview.revealed .ps-row:nth-of-type(5){transition-delay:.24s}
.plugin-preview.revealed .ps-row:nth-of-type(6){transition-delay:.3s}
.plugin-preview.revealed .ps-row:nth-of-type(7){transition-delay:.36s}
.plugin-preview.revealed .ps-action{transition-delay:.46s;animation:psPulse 1s ease .95s 1}
@keyframes psPulse{0%,100%{filter:brightness(1)}45%{filter:brightness(1.25)}}

/* ═══ Hero animasyonlu ürün demosu (statik webp'nin yerine) ═══ */
.hero-demo{position:relative;max-width:880px;margin:52px auto 0;padding:0 12px}
.hero-demo::before{content:'';position:absolute;left:10%;right:10%;top:8%;height:68%;
  background:radial-gradient(ellipse at center,rgba(139,92,246,.3),rgba(59,130,246,.16) 45%,transparent 72%);
  filter:blur(70px);z-index:0;pointer-events:none}
.hd-win{position:relative;z-index:1;background:rgba(13,17,30,.92);border:1px solid rgba(139,92,246,.28);
  border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px)}
.hd-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.hd-dots{display:flex;gap:6px}
.hd-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.hd-dots i:first-child{background:rgba(240,118,110,.7)}
.hd-dots i:nth-child(2){background:rgba(251,191,36,.65)}
.hd-dots i:nth-child(3){background:rgba(52,211,153,.65)}
.hd-title{font:700 13px 'Inter',system-ui;color:#cdd5e6;flex:1;text-align:center}
.hd-live{display:inline-flex;align-items:center;gap:5px;font:600 11px 'Inter',system-ui;color:#34d399}
.hd-live i{width:7px;height:7px;border-radius:50%;background:#34d399;animation:hdBlink 1.8s ease-in-out infinite}
@keyframes hdBlink{0%,100%{opacity:1}50%{opacity:.3}}
.hd-stage{position:relative;min-height:368px}
.hd-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:26px;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.99);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.3,1),visibility .45s}
.hd-scene.hd-active{opacity:1;visibility:visible;transform:none}

/* — Sahne 1: plugin dialog — */
.hd-dialog{width:min(420px,100%);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden}
.hd-dlg-head{padding:11px 16px;font:700 13px 'Inter',system-ui;color:#c4b5fd;background:rgba(139,92,246,.12);border-bottom:1px solid rgba(139,92,246,.22)}
.hd-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}
.hd-row span{color:var(--c-muted);flex:none;width:88px}
.hd-row strong{color:var(--c-text);flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-row em{font-style:normal;color:#34d399;font-weight:800}
.hd-row.hd-est strong{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.hd-submit{margin:12px 14px 8px;border-radius:10px;background:var(--grad);color:#fff;text-align:center;padding:11px;font:700 13.5px 'Inter',system-ui;box-shadow:0 8px 22px -8px rgba(139,92,246,.7)}
.hd-upload{display:flex;flex-direction:column;gap:6px;padding:4px 14px 14px}
.hd-upload span{font-size:11px;color:var(--c-muted)}
.hd-upbar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.hd-upbar i{display:block;height:100%;border-radius:99px;background:var(--grad);transform-origin:left;transform:scaleX(1)}
[dir="rtl"] .hd-upbar i{transform-origin:right}
/* sahne aktifken koreografi (4.6sn döngüye sığar) */
.hd-s1.hd-active .hd-row{animation:hdRowIn .4s ease both;animation-delay:calc(var(--i)*.22s)}
@keyframes hdRowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
[dir="rtl"] .hd-s1.hd-active .hd-row{animation-name:hdRowInR}
@keyframes hdRowInR{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.hd-s1.hd-active .hd-row em{animation:hdPop .3s ease both;animation-delay:calc(var(--i)*.22s + .25s)}
@keyframes hdPop{from{opacity:0;transform:scale(0)}60%{transform:scale(1.3)}to{opacity:1;transform:scale(1)}}
.hd-s1.hd-active .hd-submit{animation:hdClick 4.6s ease both}
@keyframes hdClick{0%,28%{opacity:.45;transform:scale(.985)}36%{opacity:1;transform:scale(1)}44%{transform:scale(.96)}50%,100%{opacity:1;transform:scale(1)}}
.hd-s1.hd-active .hd-upbar i{animation:hdFill 2.2s cubic-bezier(.3,.6,.4,1) 2.3s both}
@keyframes hdFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hd-s1.hd-active .hd-upload span{animation:hdFade .3s ease 2.3s both}
@keyframes hdFade{from{opacity:0}to{opacity:1}}

/* — Sahne 2: farm render — gerçek görsel progresif netleşir (denoise) — */
.hd-rwrap{position:relative;width:min(560px,100%);border-radius:14px;overflow:hidden;border:1px solid rgba(139,92,246,.3);box-shadow:0 18px 50px -16px rgba(0,0,0,.6)}
.hd-rwrap img{width:100%;height:auto;display:block}
.hd-s2.hd-active .hd-rwrap img{animation:hdDenoise 4.4s cubic-bezier(.3,.5,.5,1) both}
@keyframes hdDenoise{from{filter:blur(16px) brightness(.5) saturate(.65);transform:scale(1.05)}to{filter:blur(0) brightness(1) saturate(1);transform:scale(1)}}
.hd-noise{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>")}
.hd-s2.hd-active .hd-noise{animation:hdNoiseFade 4.4s linear both}
@keyframes hdNoiseFade{from{opacity:.6}55%{opacity:.3}to{opacity:0}}
.hd-hud{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:9px;padding:30px 16px 14px;
  background:linear-gradient(transparent,rgba(7,10,18,.55) 35%,rgba(7,10,18,.9))}
.hd-rlabel{display:flex;align-items:center;gap:9px;font:600 13.5px 'Inter',system-ui;color:#eef2f9;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hd-spin{width:15px;height:15px;border:2.5px solid rgba(139,92,246,.3);border-top-color:#a78bfa;border-radius:50%;flex:none}
.hd-s2.hd-active .hd-spin{animation:hdSpin .85s linear infinite}
@keyframes hdSpin{to{transform:rotate(360deg)}}
.hd-rbar{height:9px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.hd-rbar i{display:block;height:100%;width:51%;border-radius:99px;background:var(--grad);transform-origin:left}
[dir="rtl"] .hd-rbar i{transform-origin:right}
.hd-s2.hd-active .hd-rbar i{animation:hdRFill 4.4s cubic-bezier(.3,.5,.5,1) both}
@keyframes hdRFill{from{transform:scaleX(.12)}to{transform:scaleX(1)}}
.hd-chips{display:flex;gap:8px;flex-wrap:wrap}
.hd-chips span{font:600 11.5px 'Inter',system-ui;color:#c4b5fd;padding:5px 11px;border-radius:99px;background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.3)}
.hd-s2.hd-active .hd-chips span{animation:hdFade .4s ease both}
.hd-s2.hd-active .hd-chips span:nth-child(2){animation-delay:.15s}
.hd-s2.hd-active .hd-chips span:nth-child(3){animation-delay:.3s}

/* — Sahne 3: sonuç — */
.hd-result{width:min(460px,100%);display:flex;flex-direction:column;gap:16px;align-items:center}
.hd-thumb{position:relative;width:100%;aspect-ratio:16/8.2;border-radius:14px;overflow:hidden;border:1px solid rgba(52,211,153,.4);
  background:#141a2c}
.hd-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hd-shine{position:absolute;top:0;bottom:0;width:90px;background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent)}
.hd-s3.hd-active .hd-shine{animation:hdShine 2.4s ease-in-out .4s infinite}
@keyframes hdShine{from{left:-110px}to{left:110%}}
.hd-badge{position:absolute;top:12px;left:12px;z-index:1;font:700 12px 'Inter',system-ui;color:#072;background:#34d399;padding:5px 12px;border-radius:99px;box-shadow:0 6px 18px -4px rgba(52,211,153,.7)}
[dir="rtl"] .hd-badge{left:auto;right:12px}
.hd-s3.hd-active .hd-badge{animation:hdPop .4s ease .25s both}
.hd-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hd-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:11px;font:700 13.5px 'Inter',system-ui;cursor:default}
.hd-btn.primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px -8px rgba(139,92,246,.7)}
.hd-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(139,92,246,.35);color:#c4b5fd}
.hd-s3.hd-active .hd-btn{animation:hdRowIn .4s ease both}
.hd-s3.hd-active .hd-btn.ghost{animation-delay:.15s}

/* — Adım pill'leri — */
.hd-steps{display:flex;gap:10px;justify-content:center;margin-top:18px;position:relative;z-index:1}
.hd-step{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;min-height:42px;border-radius:99px;cursor:pointer;
  font:600 13px 'Inter',system-ui;color:var(--c-muted);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:color .2s,border-color .2s,background .2s}
.hd-step b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);font-size:11px;color:#cdd5e6;transition:background .2s}
.hd-step.is-active{color:#fff;border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.13)}
.hd-step.is-active b{background:var(--grad);color:#fff}

@media(max-width:720px){
  .hero-demo{margin-top:34px;padding:0 4px}
  .hd-stage{min-height:330px}
  .hd-scene{padding:18px 14px}
  .hd-row span{width:74px}
  .hd-nodes{grid-template-columns:repeat(6,1fr)}
  .hd-steps{gap:7px}
  .hd-step{padding:8px 13px;font-size:12px}
}

/* ═══ Hero bonus rozeti (aktif kampanyada) ═══ */
.hero-bonus{display:inline-flex;align-items:center;gap:8px;margin:0 auto 26px;padding:9px 18px;border-radius:99px;
  background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.4);color:#6ee7b7;font:700 13.5px 'Inter',system-ui;
  animation:hdBonusPulse 2.6s ease-in-out infinite}
@keyframes hdBonusPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.35)}55%{box-shadow:0 0 0 9px rgba(52,211,153,0)}}

@media (prefers-reduced-motion: reduce){
  .hero-demo *{animation:none!important}
  .hd-scene{transition:none}
}

/* ═══ Flash duyuru çubuğu (FCA AI) ═══ */
.lh-flash{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 16px;text-decoration:none;
  background:linear-gradient(90deg,rgba(139,92,246,.2),rgba(99,102,241,.16) 50%,rgba(59,130,246,.2));
  border-bottom:1px solid rgba(139,92,246,.25);position:relative;overflow:hidden;transition:filter .15s}
.lh-flash:hover{filter:brightness(1.18)}
.lh-flash::after{content:'';position:absolute;top:0;bottom:0;width:120px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.10),transparent);
  animation:lfShimmer 3.4s linear infinite;pointer-events:none}
@keyframes lfShimmer{from{left:-140px}to{left:110%}}
.lf-badge{flex:none;font:800 10px 'Inter',system-ui;letter-spacing:1px;color:#fff;padding:3px 9px;border-radius:99px;
  background:linear-gradient(135deg,#8b5cf6,#3b82f6);animation:lfPulse 2.2s ease-in-out infinite}
@keyframes lfPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.55)}55%{box-shadow:0 0 0 7px rgba(139,92,246,0)}}
.lf-text{font-size:13.5px;font-weight:600;color:#e6eaf5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-arrow{flex:none;color:#a78bfa;font-weight:700}
@media(max-width:720px){.lh-flash{padding:8px 12px}.lf-text{font-size:12px;white-space:normal;line-height:1.35}}

/* ═══ FCA AI bölümü ═══ */
.ai-section{position:relative;overflow:hidden;background:rgba(255,255,255,.015)}
.ai-section::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40vw 40vw at 85% 10%,rgba(139,92,246,.14),transparent 60%),
             radial-gradient(36vw 36vw at 8% 90%,rgba(59,130,246,.12),transparent 60%)}
.ai-section>.container{position:relative;z-index:1}
.ai-spark{display:inline-block;animation:lfPulse 2.6s ease-in-out infinite;border-radius:50%}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
@media(max-width:860px){.ai-grid{grid-template-columns:1fr}}
.ai-card{background:rgba(255,255,255,.045);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:28px 26px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),border-color .26s,box-shadow .26s}
.ai-card:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.35);box-shadow:0 0 0 1px rgba(139,92,246,.25),0 24px 60px -12px rgba(124,108,240,.5)}
.ai-ic{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:15px;font-size:26px;margin-bottom:14px;
  background:radial-gradient(circle at 30% 25%,rgba(139,92,246,.28),rgba(59,130,246,.1));border:1px solid rgba(139,92,246,.28)}
.ai-card h3{font-size:18px;font-weight:700;margin:0 0 8px}
.ai-card p{color:var(--c-muted);font-size:14px;margin:0 0 16px;line-height:1.6}
.ai-chips{display:flex;flex-wrap:wrap;gap:7px}
.ai-chips span{font:600 11.5px 'Inter',system-ui;color:#c4b5fd;padding:5px 11px;border-radius:99px;
  background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.3)}

/* ── AI video vitrini: başlangıç + bitiş karesi → üretilen video ── */
.ai-vidshow{max-width:1080px;margin:42px auto 0;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:26px 26px 18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.avs-title{font:700 16px 'Inter',system-ui;text-align:center;margin-bottom:22px;color:#eef2f9}
.avs-flex{display:flex;align-items:center;gap:18px}
.avs-frames{display:flex;flex-direction:column;gap:12px;flex:0 0 27%}
.avs-frames figure,.avs-video{margin:0}
.avs-frames img{width:100%;height:auto;display:block;border-radius:11px;border:1px solid rgba(255,255,255,.12)}
.avs-frames figcaption,.avs-video figcaption{font:500 11.5px/1.45 'Inter',system-ui;color:var(--c-muted);margin-top:6px}
.avs-frames figcaption b,.avs-video figcaption b{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:10px;margin-right:5px;vertical-align:-3px}
[dir="rtl"] .avs-frames figcaption b,[dir="rtl"] .avs-video figcaption b{margin-right:0;margin-left:5px}
.avs-arrow{flex:none;font-size:26px;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[dir="rtl"] .avs-arrow{transform:scaleX(-1)}
.avs-video{flex:1;min-width:0}
.avs-video video{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(139,92,246,.35);
  box-shadow:0 18px 50px -16px rgba(0,0,0,.6)}
.avs-note{text-align:center;font-size:12px;color:var(--c-muted);margin:16px 0 0}
@media(max-width:760px){
  .avs-flex{flex-direction:column;gap:14px}
  .avs-frames{flex-direction:row;width:100%}
  .avs-frames figure{flex:1;min-width:0}
  .avs-arrow{transform:rotate(90deg)}
  [dir="rtl"] .avs-arrow{transform:rotate(90deg) scaleX(-1)}
  .avs-video{width:100%}
  .ai-vidshow{padding:18px 16px 14px}
}

/* ═══ Reduced motion: her şey statik final durumda ═══ */
@media (prefers-reduced-motion: reduce){
  .lh-flash::after,.lf-badge,.ai-spark{animation:none!important}
  .hero-orbs i,.fd-grid i{animation:none!important}
  .how-anim *,.how-anim.is-playing *{animation:none!important}
  .pre-reveal{opacity:1!important;transform:none!important}
  .pc-fill,.ps-row,.ps-action{transition:none!important}
  .price-compare.pre-reveal:not(.revealed) .pc-fill{width:auto}
  .lh-progress{display:none}
}