/* ============================================================
   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ı.
   ============================================================ */
/* SARMALAYICI KOYU ZEMİN (chapter'lardaki "beyaz patlama fix"in aynısı): Safari scroll'da yeni compositing
   katmanı oluşturunca, katman bir kare boyanmadan önce arkasında ne varsa ona karşı compositing yapar.
   Sarmalayıcı şeffafken arkadaki KREM body (#fff8f2) sızıp BEYAZ patlatıyordu — koyu zemin → sadece navy görünür (görünmez). */
.vg-m3d{ --accent:#1E8FE6; --ink:#06182c; --font-accent:'Playfair Display',Georgia,serif; background:#06182c; }
/* isolation:isolate KALDIRILDI: Safari'de bölüm-boyu yeni backing-store katmanı oluşturup beyaz patlama boşluğunu açıyordu;
   iç z-index'ler (0/1/3) zaten çalışıyor (chapter'larda da isolation yok). */
.vg-m3d .m3d{ background:#06182c; color:#fff; padding:clamp(58px,9vh,116px) 0; overflow:hidden; position:relative; }
.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; }
/* filter:blur KALDIRILDI: canlı alpha-canvas üzerinde Safari off-screen filtre katmanı oluşturup beyaz patlamaya katkı veriyordu.
   Yumuşaklık gradient'in transparent durağı genişletilerek korundu (görsel ~aynı, off-screen katman yok). */
.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 58%); }
.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;
  /* SOLID koyu-navy (önceden frosted-glass'tı). backdrop-filter KALDIRILDI: o blur, kartın ALTINDAKİ
     canlı GLB canvas'ının parlaklığını örnekleyip saturate(1.2) ile "beyaz patlama"ya bloom yapıyordu.
     Parlak modeller (bayrak/dna/motor) patlıyor, karanlık justice patlamıyordu — fark tam da buydu.
     Solid arka plan → canvas parlaklığı hiç örneklenmez → bloom fiziksel olarak imkânsız. */
  background:linear-gradient(150deg, rgba(14,34,58,.94), rgba(8,22,40,.9));
  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; }