/* =========================================================
   Vita Medya — Anasayfa (koşullu) — design reskin
   ========================================================= */

/* ---------- Hero ---------- */
.vm-hero { padding: 92px 0 40px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; animation: vmFade .5s ease both; }
@media (max-width: 900px){ .vm-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; } }
.vm-hero__text { animation: vmUp .7s ease both; }
.vm-hero h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.03; font-weight: 500; margin: 28px 0 0; }
.vm-hero__lead { font-size: 18px; line-height: 1.7; color: var(--vm-muted); max-width: 540px; margin: 28px 0 0; }
.vm-hero__cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* Hero medya kartı (showreel video) */
.vm-hero__media { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); animation: vmUp .9s ease both; }
.vm-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vm-hero__media::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(27,160,207,0.06) 0 2px, transparent 2px 13px); pointer-events: none; opacity: .5; }
.vm-hero__tag { position: absolute; left: 22px; bottom: 22px; z-index: 2; font-family: var(--mono); font-size: 12px; color: #cfe0ea; letter-spacing: 1px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.vm-hero__play { position: absolute; top: 22px; right: 22px; z-index: 2; width: 56px; height: 56px; border-radius: 999px; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); background: rgba(8,14,20,0.5); animation: vmGlow 3s ease-in-out infinite; }

/* ---------- Marquee ---------- */
.vm-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; margin-top: 24px; padding: 20px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vm-marquee__track { display: flex; gap: 46px; width: max-content; animation: vmMarquee 26s linear infinite; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--vm-dim2); white-space: nowrap; }
.vm-marquee__track span.acc { color: var(--accent); }
@media (prefers-reduced-motion: reduce){ .vm-marquee__track { animation: none; } }

/* ---------- Değer önerileri (about'ta da kullanılır → main'e taşındı ama home fallback) ---------- */
.vm-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 820px){ .vm-values { grid-template-columns: 1fr; } }