/*
 * İçerik Stüdyosu — pazarlama sitesi (interaktif & sürükleyici sürüm)
 * ------------------------------------------------------------------
 * Bağımsız statik sayfa; panelin oturum/API altyapısını paylaşmaz.
 * İmza öğeleri: fareyle etkileşen parçacık takımyıldızı (canvas), kendi
 * kendine oynayan ürün demosu, scroll ile açılan bölümler, karta göre
 * hareket eden ışık (spotlight), mıknatıslı butonlar, scroll ilerleme
 * çubuğu. Tüm hareketler prefers-reduced-motion ile kapanır.
 */
:root {
  --mk-bg: #090b11;
  --mk-bg-2: #0d1017;
  --mk-surface: #12151d;
  --mk-surface-2: #171b25;
  --mk-input: #1a1e29;
  --mk-border: rgba(148, 163, 199, 0.14);
  --mk-border-strong: rgba(148, 163, 199, 0.26);
  --mk-text: #eef1f6;
  --mk-text-dim: #aeb6c4;
  --mk-text-faint: #7a8496;
  --mk-accent: #2dd4bf;
  --mk-accent-2: #22d3ee;
  --mk-accent-3: #34d399;
  --mk-accent-soft: rgba(45, 212, 191, 0.16);
  --mk-accent-gradient: linear-gradient(115deg, var(--mk-accent-2) 0%, var(--mk-accent) 45%, var(--mk-accent-3) 100%);
  --mk-success: #4ade80;
  --mk-danger: #f2696c;
  --mk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --mk-mono: "SF Mono", "Roboto Mono", Consolas, monospace;
  --mk-radius: 14px;
  --mk-radius-lg: 22px;
  --mk-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  --mk-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --mk-t: 0.28s ease;
  --mk-maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.mk-root {
  margin: 0;
  background: var(--mk-bg);
  color: var(--mk-text);
  font-family: var(--mk-font);
  font-size: 16px;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--mk-accent-soft); color: #fff; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--mk-bg); }
::-webkit-scrollbar-thumb { background: var(--mk-border-strong); border-radius: 999px; border: 3px solid var(--mk-bg); }

/* ---------- Arka plan katmanları ---------- */
.mk-constellation {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.mk-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px circle at var(--mx, 20%) var(--my, 0%), rgba(45, 212, 191, 0.18), transparent 60%),
    radial-gradient(680px circle at 100% 12%, rgba(34, 211, 238, 0.14), transparent 58%),
    radial-gradient(720px circle at 8% 92%, rgba(52, 211, 153, 0.12), transparent 58%);
  filter: blur(30px);
  transition: background 0.4s ease;
  animation: mk-aurora-breathe 12s ease-in-out infinite;
}
@keyframes mk-aurora-breathe {
  0%, 100% { opacity: 0.72; filter: blur(30px); }
  50% { opacity: 1; filter: blur(38px); }
}

.mk-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(148, 163, 199, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 199, 0.05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, black 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, black 35%, transparent 100%);
}

.mk-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

/* ---------- Scroll ilerleme çubuğu ---------- */
.mk-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--mk-accent-gradient);
  z-index: 60;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.6);
}

/* ---------- Nav ---------- */
.mk-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px 0;
  transition: padding var(--mk-t), background var(--mk-t), border-color var(--mk-t);
  border-bottom: 1px solid transparent;
}
.mk-nav.is-scrolled {
  padding: 11px 0;
  background: rgba(9, 11, 17, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--mk-border);
}
.mk-nav__inner {
  max-width: var(--mk-maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mk-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  will-change: transform;
}
.mk-nav__logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--mk-accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px -4px rgba(45, 212, 191, 0.6);
}
.mk-nav__logo-glyph {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  border-right-color: transparent;
  animation: mk-spin 3.6s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }
.mk-nav__links {
  display: flex;
  gap: 30px;
  font-size: 14px;
  color: var(--mk-text-dim);
}
.mk-nav__links a { position: relative; transition: color var(--mk-t); }
.mk-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: var(--mk-accent-gradient);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--mk-t) var(--mk-spring);
}
.mk-nav__links a:hover { color: var(--mk-text); }
.mk-nav__links a:hover::after { transform: scaleX(1); }

.mk-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-nav__login {
  font-family: inherit;
  font-size: 13px;
  color: var(--mk-text-dim);
  padding: 9px 16px;
  border-radius: var(--mk-radius);
  border: 1px solid var(--mk-border-strong);
  background: transparent;
  cursor: pointer;
  transition: color var(--mk-t), border-color var(--mk-t), background var(--mk-t);
  white-space: nowrap;
}
.mk-nav__login:hover {
  color: var(--mk-text);
  border-color: var(--mk-accent);
  background: var(--mk-surface);
}

/* ---- Giriş seçim penceresi (tek "Giriş" butonundan açılır) ---- */
.mk-login-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.mk-login-modal.is-open { opacity: 1; visibility: visible; }
.mk-login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 9, 0.72);
  backdrop-filter: blur(6px);
}
.mk-login-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border-strong);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow);
  padding: 40px 36px 36px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.34s var(--mk-spring);
}
.mk-login-modal.is-open .mk-login-modal__panel { transform: translateY(0) scale(1); }
.mk-login-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--mk-border);
  background: var(--mk-bg-2);
  color: var(--mk-text-dim);
  font-size: 15px;
  cursor: pointer;
  transition: color var(--mk-t), border-color var(--mk-t);
}
.mk-login-modal__close:hover { color: var(--mk-text); border-color: var(--mk-border-strong); }
.mk-login-modal__head { text-align: center; margin-bottom: 26px; }
.mk-login-modal__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent);
  margin-bottom: 8px;
}
.mk-login-modal__title { font-size: 26px; font-weight: 700; color: var(--mk-text); margin: 0 0 6px; }
.mk-login-modal__sub { font-size: 14px; color: var(--mk-text-dim); margin: 0; }
.mk-login-modal__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mk-login-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 22px;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius);
  background: var(--mk-bg-2);
  transition: border-color var(--mk-t), transform var(--mk-t), background var(--mk-t);
}
.mk-login-card:hover {
  border-color: var(--mk-accent);
  background: var(--mk-surface-2);
  transform: translateY(-3px);
}
.mk-login-card__icon { font-size: 30px; line-height: 1; }
.mk-login-card__title { font-size: 18px; font-weight: 700; color: var(--mk-text); }
.mk-login-card__desc { font-size: 13.5px; color: var(--mk-text-dim); line-height: 1.5; }
.mk-login-card__arrow {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-accent);
}
@media (max-width: 560px) {
  .mk-login-modal__options { grid-template-columns: 1fr; }
  .mk-login-modal__panel { padding: 36px 22px 26px; }
  .mk-login-modal__title { font-size: 22px; }
}

/* ---------- Buttons ---------- */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
  transition: transform var(--mk-t) var(--mk-spring), box-shadow var(--mk-t), background var(--mk-t), border-color var(--mk-t), color var(--mk-t);
}
.mk-btn__arrow { transition: transform var(--mk-t) var(--mk-spring); }
.mk-btn:hover .mk-btn__arrow { transform: translateX(4px); }

.mk-btn--primary {
  position: relative;
  background: var(--mk-accent-gradient);
  background-size: 160% 160%;
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(45, 212, 191, 0.6);
  animation: mk-btn-sheen 5s ease infinite;
}
@keyframes mk-btn-sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.mk-btn--primary:hover { box-shadow: 0 16px 40px -8px rgba(45, 212, 191, 0.7); }

.mk-btn--ghost { background: rgba(255,255,255,0.02); color: var(--mk-text); border-color: var(--mk-border-strong); }
.mk-btn--ghost:hover { border-color: var(--mk-accent); background: var(--mk-accent-soft); }

.mk-btn--outline { background: transparent; color: var(--mk-text); border-color: var(--mk-border-strong); width: 100%; }
.mk-btn--outline:hover { border-color: var(--mk-accent); background: var(--mk-accent-soft); }

.mk-btn--nav { padding: 9px 18px; font-size: 13px; }

/* ---------- Hero ---------- */
.mk-hero {
  max-width: var(--mk-maxw);
  margin: 0 auto;
  padding: 90px 24px 40px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 52px;
  align-items: center;
}

.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mk-accent-2);
  background: var(--mk-accent-soft);
  border: 1px solid rgba(45, 212, 191, 0.28);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.mk-eyebrow__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mk-accent-2);
  box-shadow: 0 0 0 0 rgba(34,211,238,0.5);
  animation: mk-ping 1.8s ease-in-out infinite;
}
@keyframes mk-ping {
  0% { box-shadow: 0 0 0 0 rgba(34,211,238,0.5); }
  70%,100% { box-shadow: 0 0 0 7px rgba(34,211,238,0); }
}

.mk-hero__title {
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}
.mk-hero__title .mk-line { display: block; }

.mk-gradient-text {
  position: relative;
  background: var(--mk-accent-gradient);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mk-grad 7s ease infinite;
}
@keyframes mk-grad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.mk-hero__subtitle {
  font-size: 16.5px;
  color: var(--mk-text-dim);
  max-width: 500px;
  margin: 0 0 30px;
}
.mk-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Hero: canlı ürün demosu ---------- */
.mk-hero__stage { position: relative; }

/* Demo panelinin arkasında yavaş dönen konik "AI enerji halkası" — ürünün
   çevresinde canlı bir yapay zekâ auras hissi. */
.mk-demo__aura {
  position: absolute;
  inset: -16% -12%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(34, 211, 238, 0) 0%,
    rgba(34, 211, 238, 0.22) 18%,
    rgba(45, 212, 191, 0.28) 34%,
    rgba(52, 211, 153, 0.12) 52%,
    rgba(45, 212, 191, 0.24) 70%,
    rgba(34, 211, 238, 0) 100%
  );
  filter: blur(48px);
  opacity: 0.75;
  animation: mk-aura-spin 16s linear infinite;
}
@keyframes mk-aura-spin { to { transform: rotate(360deg); } }

.mk-demo {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface));
  border: 1px solid var(--mk-border-strong);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow);
  overflow: hidden;
  transform: perspective(1200px) rotateY(var(--ry, -7deg)) rotateX(var(--rx, 4deg));
  transition: transform 0.35s var(--mk-spring);
  will-change: transform;
}
.mk-demo__glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg, transparent 30%, rgba(45,212,191,0.5), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
  animation: mk-border-run 6s linear infinite;
}
@keyframes mk-border-run { to { background-position: 300% 0; } }

.mk-demo__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--mk-border);
  background: rgba(0,0,0,0.2);
}
.mk-demo__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-border-strong); }
.mk-demo__dot:nth-child(1) { background: #ff5f57; }
.mk-demo__dot:nth-child(2) { background: #febc2e; }
.mk-demo__dot:nth-child(3) { background: #28c840; }
.mk-demo__url {
  margin-left: 8px;
  font-size: 11px;
  font-family: var(--mk-mono);
  color: var(--mk-text-faint);
}

.mk-demo__body { position: relative; height: 268px; padding: 20px; }

.mk-demo__scene {
  position: absolute;
  inset: 20px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s var(--mk-spring);
}
.mk-demo.is-brief      [data-scene="brief"],
.mk-demo.is-generating [data-scene="generating"],
.mk-demo.is-result     [data-scene="result"] {
  opacity: 1;
  transform: none;
}

.mk-demo__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mk-text-dim);
  margin-bottom: 12px;
}
.mk-demo__input {
  background: var(--mk-input);
  border: 1px solid var(--mk-border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 74px;
  font-size: 13.5px;
  color: var(--mk-text);
}
.mk-demo__caret {
  display: inline-block;
  width: 2px;
  height: 15px;
  background: var(--mk-accent);
  vertical-align: -2px;
  animation: mk-blink 1s steps(1) infinite;
}
@keyframes mk-blink { 50% { opacity: 0; } }
.mk-demo__btn {
  margin-top: 14px;
  display: inline-block;
  background: var(--mk-accent-gradient);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
}

.mk-demo__spark {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--mk-accent-2), var(--mk-accent), var(--mk-accent-3), var(--mk-accent-2));
  animation: mk-spin 1s linear infinite;
}
.mk-demo__skeleton { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mk-demo__skeleton span {
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--mk-surface-2) 25%, rgba(45,212,191,0.14) 37%, var(--mk-surface-2) 63%);
  background-size: 300% 100%;
  animation: mk-shimmer 1.4s ease infinite;
}
.mk-demo__skeleton span:nth-child(2) { width: 82%; animation-delay: 0.15s; }
.mk-demo__skeleton span:nth-child(3) { width: 64%; animation-delay: 0.3s; }
@keyframes mk-shimmer { to { background-position: -300% 0; } }

.mk-demo__idea, .mk-demo__task {
  background: var(--mk-surface-2);
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 11px;
  opacity: 0;
  transform: translateX(16px);
}
.mk-demo.is-result .mk-demo__idea,
.mk-demo.is-result .mk-demo__task {
  animation: mk-fly-in 0.5s var(--mk-spring) forwards;
  animation-delay: calc(var(--i) * 0.13s);
}
@keyframes mk-fly-in { to { opacity: 1; transform: none; } }
.mk-demo__idea-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.mk-demo__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-demo__chips span {
  font-size: 10.5px;
  color: var(--mk-text-dim);
  border: 1px solid var(--mk-border-strong);
  border-radius: 999px;
  padding: 2px 9px;
}
.mk-demo__task { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mk-text-dim); }
.mk-demo__task b { color: var(--mk-text); }
.mk-demo__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mk-success);
  color: #06210f;
  font-weight: 800;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.mk-demo__tabs {
  display: flex;
  gap: 6px;
  padding: 0 20px 18px;
}
.mk-demo__tab {
  height: 3px;
  flex: 1;
  border-radius: 999px;
  background: var(--mk-border-strong);
  transition: background 0.3s ease;
}
.mk-demo__tab.is-active { background: var(--mk-accent); }

/* Yüzen bilgi rozetleri */
.mk-demo__float {
  position: absolute;
  z-index: 2; /* aura(0) < demo(1) < rozet(2) — demo z-index'i sonrası şart */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(18, 21, 29, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--mk-border-strong);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--mk-shadow);
  animation: mk-float 5.5s ease-in-out infinite;
}
.mk-demo__float-ic { font-size: 15px; }
.mk-demo__float--a { top: 8%; right: -6%; color: var(--mk-success); }
.mk-demo__float--b { bottom: 12%; left: -8%; color: var(--mk-accent-2); animation-delay: -2.5s; }
@keyframes mk-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* ---------- Marquee (sonsuz akış) ---------- */
.mk-marquee {
  border-top: 1px solid var(--mk-border);
  border-bottom: 1px solid var(--mk-border);
  padding: 16px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.mk-marquee__track { display: flex; width: max-content; animation: mk-scroll 26s linear infinite; }
.mk-marquee:hover .mk-marquee__track { animation-play-state: paused; }
.mk-marquee__group {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-size: 13.5px;
  color: var(--mk-text-dim);
  font-family: var(--mk-mono);
  white-space: nowrap;
}
.mk-marquee__group i { color: var(--mk-accent); font-style: normal; font-size: 9px; }
@keyframes mk-scroll { to { transform: translateX(-50%); } }

/* ---------- İstatistik bandı ---------- */
.mk-stats {
  max-width: var(--mk-maxw);
  margin: 64px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.mk-stat {
  text-align: center;
  padding: 26px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius);
}
.mk-stat__num {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--mk-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.mk-stat__label { font-size: 12.5px; color: var(--mk-text-dim); margin-top: 8px; }

/* ---------- Sections ---------- */
.mk-section {
  max-width: var(--mk-maxw);
  margin: 0 auto;
  padding: 92px 24px;
}
.mk-section__head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.mk-section__head h2 {
  font-size: clamp(27px, 3.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.mk-section__head p { color: var(--mk-text-dim); font-size: 15px; margin: 0; }

/* ---------- Bento özellik ızgarası ---------- */
.mk-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.mk-feature {
  position: relative;
  grid-column: span 2;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  padding: 26px;
  overflow: hidden;
  transition: transform var(--mk-t) var(--mk-spring), border-color var(--mk-t);
}
.mk-feature--wide { grid-column: span 3; }
.mk-feature:hover { transform: translateY(-5px); border-color: var(--mk-border-strong); }

/* Bayrak taşıyan AI kartı — sürekli akan "AI işleniyor" gradient kenarlığı
   (demo panelindeki mk-demo__glow ile aynı teknik). */
.mk-feature--ai::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 28%, rgba(45, 212, 191, 0.6), rgba(34, 211, 238, 0.5), transparent 72%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mk-border-run 5.5s linear infinite;
  pointer-events: none;
  opacity: 0.9;
}

/* Spotlight: fare pozisyonuna göre yumuşak ışık (main.js --mx/--my set eder) */
.mk-feature::before,
.mk-price::before,
.mk-step::before,
.mk-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mk-t);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--mk-accent-soft), transparent 60%);
}
.mk-feature:hover::before,
.mk-price:hover::before,
.mk-step:hover::before,
.mk-form:hover::before { opacity: 1; }

.mk-feature__ic {
  font-size: 24px;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: var(--mk-accent-soft);
  border: 1px solid rgba(45,212,191,0.25);
  margin-bottom: 16px;
}
.mk-feature h3 { font-size: 17px; margin: 0 0 9px; font-weight: 700; position: relative; }
.mk-feature p { font-size: 13.5px; color: var(--mk-text-dim); margin: 0; position: relative; }

.mk-feature__demo { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; position: relative; }
.mk-feature__pill {
  font-size: 11.5px;
  color: var(--mk-text-dim);
  background: var(--mk-surface-2);
  border: 1px solid var(--mk-border-strong);
  border-radius: 999px;
  padding: 4px 11px;
}
.mk-feature__pill--accent { color: var(--mk-accent-2); border-color: rgba(45,212,191,0.4); background: var(--mk-accent-soft); }

.mk-feature__spark {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 46px;
  margin-top: 18px;
  position: relative;
}
.mk-feature__spark span {
  flex: 1;
  height: var(--h);
  background: var(--mk-accent-gradient);
  border-radius: 3px 3px 0 0;
  opacity: 0.55;
  transform-origin: bottom;
  animation: mk-spark 2.4s ease-in-out infinite;
}
.mk-feature__spark span:nth-child(2){animation-delay:.2s} .mk-feature__spark span:nth-child(3){animation-delay:.4s}
.mk-feature__spark span:nth-child(4){animation-delay:.6s} .mk-feature__spark span:nth-child(5){animation-delay:.8s}
.mk-feature__spark span:nth-child(6){animation-delay:1s}
@keyframes mk-spark { 0%,100% { transform: scaleY(0.7); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 0.85; } }

/* ---------- Adımlar ---------- */
.mk-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mk-steps__rail {
  position: absolute;
  top: 30px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: var(--mk-border);
  border-radius: 999px;
  overflow: hidden;
}
.mk-steps__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mk-accent-gradient);
  box-shadow: 0 0 12px rgba(45,212,191,0.6);
  transition: width 0.1s linear;
}
.mk-step {
  position: relative;
  text-align: center;
  padding: 26px 20px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
}
.mk-step__num {
  position: relative;
  font-family: var(--mk-mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  width: 42px; height: 42px;
  line-height: 42px;
  background: var(--mk-accent-gradient);
  border-radius: 50%;
  margin: 0 auto 16px;
  box-shadow: 0 8px 22px -6px rgba(45,212,191,0.6);
}
.mk-step h3 { font-size: 16px; margin: 0 0 8px; position: relative; }
.mk-step p { font-size: 13.5px; color: var(--mk-text-dim); margin: 0; position: relative; }

/* ---------- Fiyatlandırma ---------- */
/* Aylık / Yıllık geçiş anahtarı */
.mk-billing { display: flex; justify-content: center; margin-bottom: 40px; }
.mk-billing__toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border-strong);
  border-radius: 999px;
  padding: 5px;
}
.mk-billing__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--mk-text-dim);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--mk-t), background var(--mk-t);
}
.mk-billing__opt.is-active {
  background: var(--mk-bg-2);
  color: var(--mk-text);
  box-shadow: inset 0 0 0 1px var(--mk-border-strong), 0 6px 18px -8px rgba(45,212,191,0.5);
}
.mk-billing__save {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mk-accent);
  background: var(--mk-accent-soft);
  padding: 2px 9px;
  border-radius: 999px;
}
.mk-billing__note { text-align: center; color: var(--mk-text-faint); font-size: 13px; margin: 28px 0 0; }

.mk-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.mk-price {
  position: relative;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--mk-t) var(--mk-spring), border-color var(--mk-t);
}
.mk-price:hover { transform: translateY(-6px); border-color: var(--mk-border-strong); }
.mk-price--featured {
  border-color: rgba(45,212,191,0.55);
  background: linear-gradient(180deg, rgba(45,212,191,0.08), var(--mk-surface) 34%);
  box-shadow: 0 26px 60px -22px rgba(45,212,191,0.45);
  padding-top: 44px;
}
/* "EN POPÜLER" üst şeridi (screenshot'taki gradient başlık) */
.mk-price__ribbon {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-accent-gradient);
  color: #04211c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
/* Kurumsal — premium görünüm (altın vurgu, Ajans'ın teal'inden ayrışır) */
.mk-price--premium {
  position: relative;
  padding-top: 44px;
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.07), var(--mk-surface) 34%);
  box-shadow: 0 26px 60px -22px rgba(251, 191, 36, 0.32);
}
.mk-price--premium::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 30%, rgba(251, 191, 36, 0.65), rgba(245, 158, 11, 0.5), transparent 70%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mk-border-run 6s linear infinite;
  pointer-events: none;
}
.mk-price__ribbon--premium {
  background: linear-gradient(115deg, #fcd34d, #fbbf24, #f59e0b);
  color: #3a2606;
}
.mk-price--premium .mk-price__feat--star b { color: #fbbf24; }

.mk-price__top { position: relative; }
.mk-price h3 { font-size: 19px; margin: 0 0 8px; position: relative; }
.mk-price__desc { font-size: 13px; color: var(--mk-text-dim); margin: 0 0 18px; min-height: 40px; }
.mk-price__amount {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.mk-price__amount--custom { font-size: 26px; }
.mk-price__cur { font-size: 21px; font-weight: 700; color: var(--mk-text-dim); }
.mk-price__val { transition: opacity 0.2s ease; }
.mk-price__per { font-size: 14px; font-weight: 500; color: var(--mk-text-dim); margin-left: 4px; }

/* Yönetilen hesap sayısı kutusu (screenshot'taki bordered stat) */
.mk-price__accounts {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--mk-border-strong);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--mk-text-dim);
  margin-bottom: 22px;
}
.mk-price__accounts b { color: var(--mk-text); font-weight: 700; }
.mk-price__accounts-ic { color: var(--mk-accent); font-size: 12px; }

.mk-price__sep { height: 1px; background: var(--mk-border); margin: 0 0 20px; }
.mk-price__flabel {
  font-size: 13px;
  font-weight: 700;
  color: var(--mk-text);
  margin-bottom: 16px;
}
.mk-price__features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 24px;
}
.mk-price__features li {
  font-size: 13.5px;
  color: var(--mk-text-dim);
  padding-left: 26px;
  position: relative;
}
.mk-price__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mk-accent-soft);
  border: 1px solid rgba(45,212,191,0.45);
}
.mk-price__features li::after {
  content: "✓";
  position: absolute;
  left: 3.5px; top: 0.5px;
  font-size: 10px;
  color: var(--mk-accent-2);
  font-weight: 800;
}
.mk-hero__trial { margin-top: 16px; font-size: 13px; color: var(--mk-accent); font-weight: 600; }

.mk-price__hint { color: var(--mk-text-faint); font-size: 12px; }
.mk-price__feat--star { color: var(--mk-text); }
.mk-price__feat--star b { color: var(--mk-accent); }

.mk-price .mk-btn { position: relative; }

/* ---- "Neden?" — Eskiden → Şimdi dönüşümü ---- */
.mk-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
}
.mk-versus__col {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  background: var(--mk-surface);
  padding: 26px 28px;
}
.mk-versus__col--old { opacity: 0.9; }
.mk-versus__col--new {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.06), var(--mk-surface));
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: 0 24px 60px rgba(45, 212, 191, 0.08);
}
.mk-versus__col--new::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 30%, rgba(45, 212, 191, 0.6), rgba(34, 211, 238, 0.5), transparent 70%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mk-border-run 5s linear infinite;
  pointer-events: none;
}
.mk-versus__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--mk-text-faint);
  background: rgba(148, 163, 199, 0.1);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.mk-versus__tag--new { color: var(--mk-accent); background: var(--mk-accent-soft); }
.mk-versus__list { display: flex; flex-direction: column; gap: 13px; }
.mk-versus__list li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mk-text-dim);
}
.mk-versus__list li::before {
  content: "✕";
  position: absolute;
  left: 0; top: 0;
  color: var(--mk-danger);
  font-weight: 800;
}
.mk-versus__list--new li { color: var(--mk-text); }
.mk-versus__list--new li::before { content: "✓"; color: var(--mk-accent-2); }
.mk-versus__list--new li b { color: var(--mk-accent); }
.mk-versus__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--mk-accent);
  animation: mk-arrow-nudge 1.8s ease-in-out infinite;
}
@keyframes mk-arrow-nudge {
  0%, 100% { transform: translateX(-5px); opacity: 0.55; }
  50% { transform: translateX(5px); opacity: 1; }
}
@media (max-width: 860px) {
  .mk-versus { grid-template-columns: 1fr; }
  .mk-versus__arrow { transform: rotate(90deg); height: 34px; }
}

/* ---- 7 gün ücretsiz deneme banner'ı ---- */
.mk-trial-cta {
  position: relative;
  width: min(var(--mk-maxw), calc(100% - 48px));
  margin: 40px auto;
  padding: 34px 40px;
  overflow: hidden;
  border-radius: var(--mk-radius-lg);
  border: 1px solid rgba(45, 212, 191, 0.3);
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.1), rgba(45, 212, 191, 0.1), rgba(52, 211, 153, 0.08));
}
.mk-trial-cta__glow {
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 40%, rgba(45, 212, 191, 0.22), transparent 70%),
    radial-gradient(40% 50% at 80% 60%, rgba(34, 211, 238, 0.18), transparent 70%);
  filter: blur(40px);
  animation: mk-aurora-breathe 10s ease-in-out infinite;
}
.mk-trial-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.mk-trial-cta__badge {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(9, 11, 17, 0.55);
  animation: mk-trial-pulse 2.4s ease-in-out infinite;
}
.mk-trial-cta__ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--mk-accent-2), var(--mk-accent), var(--mk-accent-3), var(--mk-accent-2));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: mk-aura-spin 4s linear infinite;
}
.mk-trial-cta__num { font-size: 40px; font-weight: 900; color: #fff; line-height: 1; }
.mk-trial-cta__day { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--mk-accent); margin-top: 2px; }
.mk-trial-cta__text { flex: 1; min-width: 260px; }
.mk-trial-cta__text h2 { font-size: 26px; margin-bottom: 8px; }
.mk-trial-cta__text p { color: var(--mk-text-dim); font-size: 14.5px; max-width: 560px; }
.mk-trial-cta__points {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-accent);
}
.mk-trial-cta__btn { flex-shrink: 0; }
@keyframes mk-trial-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.35); }
  50% { box-shadow: 0 0 0 14px rgba(45, 212, 191, 0); }
}
@media (max-width: 720px) {
  .mk-trial-cta__inner { flex-direction: column; text-align: center; }
  .mk-trial-cta__points { justify-content: center; }
}

/* ---------- İletişim ---------- */
.mk-contact {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 52px;
  align-items: start;
}
.mk-contact__intro h2 { font-size: clamp(25px, 3vw, 34px); margin: 0 0 14px; font-weight: 800; letter-spacing: -0.02em; }
.mk-contact__intro p { color: var(--mk-text-dim); font-size: 15px; margin: 0 0 22px; }
.mk-contact__list { display: flex; flex-direction: column; gap: 11px; }
.mk-contact__list li {
  font-size: 14px;
  color: var(--mk-text-dim);
  padding-left: 26px;
  position: relative;
}
.mk-contact__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mk-success);
  font-weight: 800;
}

.mk-form {
  position: relative;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-lg);
  padding: 30px;
  box-shadow: var(--mk-shadow);
}
.mk-form > * { position: relative; }
.mk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-field { margin-bottom: 17px; }
.mk-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mk-text-dim);
  margin-bottom: 7px;
}
.mk-field input,
.mk-field select,
.mk-field textarea {
  width: 100%;
  background: var(--mk-input);
  border: 1px solid var(--mk-border-strong);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--mk-text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color var(--mk-t), box-shadow var(--mk-t);
}
.mk-field input:focus,
.mk-field select:focus,
.mk-field textarea:focus {
  outline: none;
  border-color: var(--mk-accent);
  box-shadow: 0 0 0 3px var(--mk-accent-soft);
}
.mk-field textarea { resize: vertical; min-height: 92px; }

/* ---------- Formdaki paket seçici (aylık / yıllık kartlar) ---------- */
.mk-pkgpicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.mk-pkgpicker__head label { margin: 0; }
.mk-pkgpicker__opt { color: var(--mk-text-faint); font-weight: 500; }

.mk-pkgpicker__cycle {
  display: inline-flex;
  gap: 3px;
  background: var(--mk-input);
  border: 1px solid var(--mk-border-strong);
  border-radius: 999px;
  padding: 3px;
}
.mk-pkgpicker__cycle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--mk-text-dim);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: color var(--mk-t), background var(--mk-t);
}
.mk-pkgpicker__cycle button.is-active {
  background: var(--mk-bg-2);
  color: var(--mk-text);
  box-shadow: inset 0 0 0 1px var(--mk-border-strong);
}
.mk-pkgpicker__save {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--mk-accent);
  background: var(--mk-accent-soft);
  border-radius: 999px;
  padding: 1px 7px;
}

.mk-pkgpicker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mk-pkgpicker .mk-pkgcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--mk-input);
  border: 1px solid var(--mk-border-strong);
  border-radius: 14px;
  padding: 14px 13px 13px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--mk-t), background var(--mk-t), transform var(--mk-t) var(--mk-spring);
}
.mk-pkgpicker .mk-pkgcard:hover { border-color: var(--mk-accent); transform: translateY(-2px); }
/* Radio görünmez ama klavye erişimi için DOM'da kalır. */
.mk-pkgcard input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mk-pkgcard input:focus-visible ~ .mk-pkgcard__name { text-decoration: underline; }

.mk-pkgpicker .mk-pkgcard--featured { border-color: rgba(45,212,191,0.45); padding-top: 26px; }
.mk-pkgcard__badge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-accent-gradient);
  color: #04211c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.mk-pkgcard__tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--mk-border-strong);
  color: transparent;
  font-size: 11px;
  font-weight: 800;
  transition: background var(--mk-t), color var(--mk-t), border-color var(--mk-t);
}
.mk-pkgcard--featured .mk-pkgcard__tick { top: 24px; }

.mk-pkgcard__name { font-size: 14.5px; font-weight: 700; color: var(--mk-text); }
.mk-pkgcard__meta { font-size: 11.5px; color: var(--mk-text-faint); margin-bottom: 6px; }

.mk-pkgcard__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.mk-pkgcard__price b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--mk-text); }
.mk-pkgcard__price i { font-style: normal; font-size: 12px; color: var(--mk-text-dim); }
.mk-pkgcard__price s { font-size: 12px; color: var(--mk-text-faint); }
.mk-pkgcard__price em {
  flex-basis: 100%;
  font-style: normal;
  font-size: 11px;
  color: var(--mk-accent);
  font-weight: 600;
}
.mk-pkgcard__price--custom b { font-size: 15px; }
.mk-pkgcard__price--custom em { color: var(--mk-text-faint); font-weight: 500; }

/* Aylık / yıllık görünüm anahtarı — fiyatlar HTML'de hazır, sadece gizlenir. */
.mk-pkgpicker__grid[data-cycle="monthly"] .mk-pkgcard__price[data-view="yearly"],
.mk-pkgpicker__grid[data-cycle="yearly"] .mk-pkgcard__price[data-view="monthly"] { display: none; }

/* Seçili kart */
.mk-pkgpicker .mk-pkgcard.is-selected {
  border-color: var(--mk-accent);
  background: linear-gradient(180deg, rgba(45,212,191,0.10), var(--mk-input) 60%);
  box-shadow: 0 0 0 1px var(--mk-accent), 0 16px 32px -22px rgba(45,212,191,0.9);
}
.mk-pkgcard.is-selected .mk-pkgcard__tick {
  background: var(--mk-accent);
  border-color: var(--mk-accent);
  color: #04211c;
}

.mk-pkgpicker__clear {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  color: var(--mk-text-faint);
  font-family: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.mk-pkgpicker__clear:hover { color: var(--mk-text-dim); }
.mk-field--honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.mk-form__submit { width: 100%; margin-top: 4px; }
.mk-form__status { margin-top: 14px; font-size: 13.5px; text-align: center; min-height: 18px; }
.mk-form__status.is-success { color: var(--mk-success); font-weight: 600; }
.mk-form__status.is-error { color: var(--mk-danger); font-weight: 600; }
.mk-form__status.is-loading { color: var(--mk-text-dim); }

/* ---------- Footer ---------- */
.mk-footer { border-top: 1px solid var(--mk-border); padding: 30px 24px; margin-top: 40px; }
.mk-footer__inner {
  max-width: var(--mk-maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--mk-text-faint);
}
.mk-footer .mk-nav__logo { width: 22px; height: 22px; }
.mk-footer .mk-nav__logo-glyph { width: 8px; height: 8px; }
.mk-footer__sep { color: var(--mk-border-strong); }

/* ---------- Scroll reveal ---------- */
.mk-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.8s var(--mk-spring);
}
.mk-reveal.is-visible { opacity: 1; transform: none; }

.mk-bento .mk-feature:nth-child(2){transition-delay:.06s} .mk-bento .mk-feature:nth-child(3){transition-delay:.12s}
.mk-bento .mk-feature:nth-child(4){transition-delay:.18s} .mk-bento .mk-feature:nth-child(5){transition-delay:.24s}
.mk-steps .mk-step:nth-child(3){transition-delay:.1s} .mk-steps .mk-step:nth-child(4){transition-delay:.2s}
.mk-pricing .mk-price:nth-child(2){transition-delay:.1s} .mk-pricing .mk-price:nth-child(3){transition-delay:.2s}
.mk-stats .mk-stat:nth-child(2){transition-delay:.08s} .mk-stats .mk-stat:nth-child(3){transition-delay:.16s} .mk-stats .mk-stat:nth-child(4){transition-delay:.24s}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .mk-hero { grid-template-columns: 1fr; padding-top: 110px; gap: 44px; }
  .mk-hero__stage { max-width: 440px; }
  .mk-nav__links { display: none; }
  .mk-bento { grid-template-columns: repeat(2, 1fr); }
  .mk-feature, .mk-feature--wide { grid-column: span 1; }
  .mk-stats { grid-template-columns: repeat(2, 1fr); }
  .mk-steps { grid-template-columns: 1fr; }
  .mk-steps__rail { display: none; }
  .mk-pricing { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .mk-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mk-bento { grid-template-columns: 1fr; }
  .mk-hero__actions { flex-direction: column; align-items: stretch; }
  .mk-form__row { grid-template-columns: 1fr; }
  .mk-pkgpicker__grid { grid-template-columns: 1fr; }
  .mk-pkgcard--featured { padding-top: 26px; }
  .mk-demo__float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .mk-reveal { opacity: 1; transform: none; }
  .mk-demo { transform: none; }
}