/* ============================================================
   VG — 3B vitrin kartları (anasayfa gömülü sürüm)
   Prototipten alınan stiller, .vg-m3d altına SCOPE'lu → başka
   sayfalara/sınıflara sızmaz, Bootstrap ile çakışmaz.
   Fontlar site ile aynı (Playfair Display). Renkler açık tanımlı.
   ============================================================ */
.vg-m3d{ --accent:#1E8FE6; --ink:#06182c; --font-accent:'Playfair Display',Georgia,serif; }
.vg-m3d .m3d{ background:#06182c; color:#fff; padding:clamp(58px,9vh,116px) 0; overflow:hidden; position:relative; isolation:isolate; }
.vg-m3d .m3d + .m3d{ padding-top:clamp(20px,3vh,44px); }
.vg-m3d .m3d-bg{ position:absolute; inset:-10%; z-index:0; background-size:cover; background-position:center; opacity:.26; pointer-events:none; }
.vg-m3d .m3d::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,#06182c 0%, rgba(6,24,44,.12) 24%, rgba(6,24,44,.12) 76%, #06182c 100%),
             linear-gradient(90deg, rgba(6,24,44,.55) 0%, rgba(6,24,44,0) 46%); }
.vg-m3d .m3d.flip::before{ background:linear-gradient(180deg,#06182c 0%, rgba(6,24,44,.12) 24%, rgba(6,24,44,.12) 76%, #06182c 100%),
             linear-gradient(270deg, rgba(6,24,44,.55) 0%, rgba(6,24,44,0) 46%); }
.vg-m3d .m3d-inner{ position:relative; z-index:1; width:min(1240px,92vw); margin-inline:auto; display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,4vw,72px); align-items:center; }
.vg-m3d .m3d.flip .m3d-stage{ order:2; }
.vg-m3d .m3d.flip .m3d-text{ order:1; }
.vg-m3d .m3d-stage{ position:relative; aspect-ratio:1/1; max-height:600px; }
.vg-m3d .m3d-stage::before{ content:""; position:absolute; inset:4%; z-index:0; background:radial-gradient(circle at 50% 46%, rgba(0,120,215,.20), transparent 64%); filter:blur(6px); }
.vg-m3d .m3d-canvas{ position:relative; z-index:1; width:100%; height:100%; display:block; cursor:grab; }
.vg-m3d .m3d-canvas:active{ cursor:grabbing; }
.vg-m3d .m3d-stage.gl-failed::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(0,120,215,.28), transparent 70%); }

.vg-m3d .m3d-eyebrow{ display:none; }
.vg-m3d .m3d-idx{ font-family:var(--font-accent); font-style:italic; font-size:1.05rem; color:var(--accent); }
.vg-m3d .m3d-chip{ color:rgba(255,255,255,.6); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.vg-m3d .m3d-title{ font-family:var(--font-accent); font-weight:400; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.08; letter-spacing:-.01em; margin:0; color:#fff; }
.vg-m3d .m3d-title em{ font-style:italic; color:var(--accent); }
.vg-m3d .m3d-desc{ color:rgba(255,255,255,.74); font-size:1.02rem; line-height:1.62; margin:22px 0 26px; max-width:44ch; }
.vg-m3d .m3d-cta{ display:inline-flex; align-items:center; gap:14px; color:#fff; font-weight:600; font-size:.96rem; text-decoration:none; cursor:pointer; background:none; border:none; padding:0; font-family:inherit; }
.vg-m3d .m3d-cta .lbl{ transition:color .25s; }
.vg-m3d .m3d-cta .arw{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:inline-flex; align-items:center; justify-content:center; transition:transform .3s, background .3s, color .3s, border-color .3s; }
.vg-m3d .m3d-cta:hover .arw{ background:var(--accent); border-color:var(--accent); color:var(--ink); transform:translateX(4px); }
.vg-m3d .m3d-cta:hover .lbl{ color:var(--accent); }
/* "yakında" (henüz yönlendirmesi kurulmamış) butonlar — görünür ama edilgen */
.vg-m3d .m3d-cta.soon{ cursor:default; }
.vg-m3d .m3d-cta.soon:hover .arw{ background:none; border-color:rgba(255,255,255,.3); color:#fff; transform:none; }
.vg-m3d .m3d-cta.soon:hover .lbl{ color:#fff; }

/* yüzen veri kartları (çapraz: model tarafında, başlığın karşısında) */
.vg-m3d .m3d-cards{ position:absolute; top:0; bottom:0; width:46%; z-index:3; pointer-events:none; }
.vg-m3d .m3d:not(.flip) .m3d-cards{ left:0; }
.vg-m3d .m3d.flip .m3d-cards{ right:0; }
.vg-m3d .dcard{ position:absolute; min-width:122px; max-width:184px; padding:13px 17px; border-radius:15px; pointer-events:auto;
  background:linear-gradient(150deg, rgba(14,34,58,.74), rgba(8,22,40,.62));
  -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
  border:1px solid rgba(120,180,255,.24); box-shadow:0 22px 48px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:3px; will-change:transform; }
.vg-m3d .dnum{ font-family:var(--font-accent); font-weight:600; font-size:1.65rem; line-height:1; color:var(--accent); letter-spacing:-.01em; }
.vg-m3d .dlbl{ font-size:.71rem; line-height:1.3; font-weight:500; color:rgba(255,255,255,.76); }
.vg-m3d .m3d:not(.flip) .dcard.c1{ top:5%; right:0; }
.vg-m3d .m3d:not(.flip) .dcard.c2{ top:45%; right:-6%; }
.vg-m3d .m3d:not(.flip) .dcard.c3{ bottom:4%; right:4%; }
.vg-m3d .m3d.flip .dcard.c1{ top:5%; left:0; }
.vg-m3d .m3d.flip .dcard.c2{ top:45%; left:-6%; }
.vg-m3d .m3d.flip .dcard.c3{ bottom:4%; left:4%; }
/* motor (engine): kartlar gutter'da dikey dizili — ne modeli ne yazıyı kapatır */
.vg-m3d .m3d.eng .dcard.c1{ top:12%; right:-13%; bottom:auto; }
.vg-m3d .m3d.eng .dcard.c2{ top:43%; right:-13%; bottom:auto; }
.vg-m3d .m3d.eng .dcard.c3{ top:74%; right:-13%; bottom:auto; }

/* başlık satır-maske reveal (GSAP yoksa da görünür kalır) */
.vg-m3d .m3d-title .line-mask{ display:block; overflow:hidden; }
.vg-m3d .m3d-title .line{ display:block; }

@media (max-width:1024px){
  .vg-m3d .m3d-stage{ display:none; }
  .vg-m3d .m3d-inner{ grid-template-columns:1fr; }
  .vg-m3d .m3d-cards{ display:none; }
}
/* reduced-motion / dar ekran: 3B yüklenmez → boş canvas yerine sahneyi gizle */
.m3d-off .vg-m3d .m3d-stage{ display:none; }
.m3d-off .vg-m3d .m3d-inner{ grid-template-columns:1fr; }
.m3d-off .vg-m3d .m3d-cards{ display:none; }