/* ==========================================================================
   Mutlu.CMS · 3D Vitrin bloğu (mv3d)
   Taşınabilir ana sayfa bloğu: solda metin ve düğmeler, sağda imleçle eğilen
   3 katmanlı sahne (tarayıcı penceresi + telefon + bilgi kartları).
   - Tüm sınıflar "mv3d" önekli, site CSS'iyle çakışmaz.
   - Yazı tipi siteden gelir (font-family: inherit).
   - Vurgu rengi MudBlazor tema rengini kullanır, yoksa yedek renge düşer.
   - JS olmadan da hoş durur (sabit açılı sahne). JS imleç eğimini ekler.
   - prefers-reduced-motion açık kullanıcıda tüm hareket kapanır.
   ========================================================================== */

.mv3d {
  --mv3d-accent: var(--mud-palette-primary, #2f5fe0);
  --mv3d-ink: #101a33;
  --mv3d-muted: #56617c;
  --mv3d-surface: #ffffff;
  --mv3d-ground: #f3f5fa;
  --mv3d-line: #dfe4ef;
  --mv3d-ok: #17885a;
  --mv3d-warm: #f2b33d;
  --rx: 9deg;           /* sahnenin varsayılan eğimi (JS imleçle değiştirir) */
  --ry: -16deg;

  position: relative;
  overflow: hidden;
  font-family: inherit;
  color: var(--mv3d-ink);
  background:
    radial-gradient(60% 70% at 78% 40%, color-mix(in srgb, var(--mv3d-accent) 14%, transparent), transparent 70%),
    var(--mv3d-ground);
  padding-block: clamp(48px, 7vw, 96px);
}
.mv3d--koyu {
  --mv3d-ink: #eef2fb;
  --mv3d-muted: #a6b1cc;
  --mv3d-surface: #16213f;
  --mv3d-ground: #0c1328;
  --mv3d-line: #26324f;
}
.mv3d *, .mv3d *::before, .mv3d *::after { box-sizing: border-box; }

.mv3d__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* ---------- metin tarafı ---------- */
.mv3d__eyebrow {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mv3d-accent);
}
.mv3d__title {
  margin: 14px 0 0;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 800;
  text-wrap: balance;
  color: var(--mv3d-ink);
}
.mv3d__title mark {
  background: none;
  color: var(--mv3d-accent);
}
.mv3d__lead {
  margin: 18px 0 0;
  max-width: 48ch;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--mv3d-muted);
}
.mv3d__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mv3d__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 12px;
  font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.2;
  border: 2px solid var(--mv3d-accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mv3d__btn--ana { background: var(--mv3d-accent); color: #fff; box-shadow: 0 10px 24px -10px var(--mv3d-accent); }
.mv3d__btn--ikinci { background: transparent; color: var(--mv3d-accent); }
.mv3d__btn:hover { transform: translateY(-2px); }
.mv3d__btn:focus-visible { outline: 3px solid var(--mv3d-warm); outline-offset: 3px; }
.mv3d__proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--mv3d-muted); }
.mv3d__proof li::before { content: "✓"; color: var(--mv3d-ok); font-weight: 800; margin-right: 7px; }

/* ---------- 3D sahne ---------- */
.mv3d__stage {
  perspective: 1400px;
  perspective-origin: 50% 40%;
  min-width: 0;
}
.mv3d__float { animation: mv3d-float 7s ease-in-out infinite; }
.mv3d__scene {
  position: relative;
  aspect-ratio: 16 / 11;
  max-width: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
.mv3d.is-tracking .mv3d__scene { transition-duration: .12s; }
.mv3d__layer { position: absolute; transform: translateZ(var(--z, 0px)); }

/* tarayıcı penceresi (ana görsel) */
.mv3d__browser {
  inset: 4% 8% 10% 0;
  --z: 0px;
  border-radius: 14px;
  background: var(--mv3d-surface);
  border: 1px solid var(--mv3d-line);
  box-shadow: 0 40px 80px -30px rgba(16, 26, 51, .45), 0 2px 0 rgba(255,255,255,.4) inset;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.mv3d__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--mv3d-line); flex: none; }
.mv3d__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--mv3d-line); }
.mv3d__bar span {
  margin-left: 8px; flex: 1; min-width: 0;
  font-size: .7rem; color: var(--mv3d-muted);
  background: var(--mv3d-ground); border-radius: 6px; padding: 4px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv3d__shot { flex: 1; min-height: 0; background: linear-gradient(135deg, #e3e9f8, #cbd6f2); }
.mv3d__shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }

/* telefon */
.mv3d__phone {
  right: 0; bottom: 0; width: 26%; aspect-ratio: 9 / 19;
  --z: 90px;
  border-radius: 22px; padding: 7px;
  background: #0d1426;
  box-shadow: 0 30px 50px -20px rgba(16, 26, 51, .55);
}
.mv3d__phone-screen {
  width: 100%; height: 100%; border-radius: 16px; overflow: hidden;
  background: var(--mv3d-surface);
  display: flex; flex-direction: column; gap: 6%; padding: 14% 9% 9%;
}
.mv3d__phone-screen--img { padding: 0; }
.mv3d__phone-screen--img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mv3d__pl { height: 7%; border-radius: 4px; background: var(--mv3d-line); }
.mv3d__pl--t { width: 70%; height: 9%; background: var(--mv3d-ink); opacity: .85; }
.mv3d__pl--s { width: 90%; }
.mv3d__pl--k { width: 55%; height: 11%; border-radius: 6px; background: var(--mv3d-accent); }
.mv3d__pl--g { flex: 1; border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--mv3d-accent) 35%, #fff), color-mix(in srgb, var(--mv3d-accent) 12%, #fff)); }

/* bilgi kartları */
.mv3d__chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
  background: var(--mv3d-surface);
  border: 1px solid var(--mv3d-line);
  box-shadow: 0 18px 36px -16px rgba(16, 26, 51, .4);
  font-size: .82rem; line-height: 1.3; color: var(--mv3d-ink);
  max-width: 60%;
}
.mv3d__chip b { display: block; font-size: .92rem; }
.mv3d__chip small { color: var(--mv3d-muted); }
.mv3d__chip-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
.mv3d__chip--mesaj { left: -4%; top: 58%; --z: 150px; }
.mv3d__chip--mesaj .mv3d__chip-ico { background: color-mix(in srgb, var(--mv3d-accent) 15%, transparent); color: var(--mv3d-accent); }
.mv3d__chip--grafik { right: 14%; top: -2%; --z: 120px; flex-direction: column; align-items: flex-start; gap: 4px; }
.mv3d__chip--grafik svg { width: 140px; height: 38px; display: block; }
.mv3d__chip--grafik .mv3d__up { color: var(--mv3d-ok); font-weight: 700; margin-left: .35em; }

/* zemin gölgesi */
.mv3d__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -8%; height: 16%;
  background: radial-gradient(closest-side, rgba(16, 26, 51, .28), transparent);
  transform: translateZ(-60px) rotateX(90deg);
  filter: blur(6px);
}

@keyframes mv3d-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- mobil ---------- */
@media (max-width: 860px) {
  .mv3d { --rx: 6deg; --ry: -10deg; }
  .mv3d__inner { grid-template-columns: 1fr; }
  .mv3d__stage { order: 2; }
  .mv3d__chip { font-size: .74rem; padding: 8px 10px; }
  .mv3d__chip--grafik svg { width: 100px; height: 28px; }
  .mv3d__chip--mesaj { left: 2%; }
  .mv3d__chip { max-width: 70%; }
}

/* ---------- hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  .mv3d__float { animation: none; }
  .mv3d__scene { transition: none; }
  .mv3d__btn { transition: none; }
}

/* grafik kartındaki çizgi vurgu renginde */
.mv3d__chip--grafik svg { color: var(--mv3d-accent); }