/* ============================================================
   VG — Sinematik chapter bölümleri (anasayfa gömülü sürüm)
   Prototipten alınan stiller, .vg-chapters altına SCOPE'lu →
   başka sayfalara/sınıflara sızmaz, Bootstrap ile çakışmaz.
   Fontlar/renkler açık tanımlı (.vg2 değişken bağımlılığı yok).
   ============================================================ */
.vg-chapters{ --accent:#1E8FE6; --blue:#0078D7; --navy:#005A9E; --ink:#06182c;
  --font-display:'Montserrat',sans-serif; --font-accent:'Playfair Display',Georgia,serif;
  background:#06182c; }  /* koyu zemin: resim açılmadan/boyanmadan önce krem sayfa zemini sızmasın (beyaz patlama fix) */

.vg-chapters .chapter{ position:relative; height:100svh; height:100vh; min-height:600px; overflow:hidden; display:flex; align-items:flex-end; color:#fff; background:#06182c; }
.vg-chapters .chapter-media{ position:absolute; inset:-9% 0; z-index:1; will-change:transform; }
.vg-chapters .chapter-media img{ width:100%; height:100%; object-fit:cover; }
.vg-chapters .chapter-shade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(rgba(8,28,52,.34), rgba(8,28,52,.34)),
    linear-gradient(90deg, rgba(4,16,30,.86) 0%, rgba(4,16,30,.45) 42%, transparent 76%),
    linear-gradient(to top, rgba(4,16,30,.82) 0%, rgba(4,16,30,.1) 42%, transparent 62%); }
.vg-chapters .chapter-inner{ position:relative; z-index:3; width:min(1240px,92vw); margin-inline:auto; padding:0 clamp(4px,2vw,12px) clamp(64px,12vh,140px); }
.vg-chapters .chapter-idx{ display:none; }
.vg-chapters .chapter-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.1; letter-spacing:-.02em; max-width:16ch; margin:0; color:#fff; }
.vg-chapters .chapter-text{ margin:22px 0 0; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.6; max-width:46ch; color:rgba(255,255,255,.9); }
.vg-chapters .chapter-title .line-mask{ display:block; overflow:hidden; padding-bottom:.09em; }
.vg-chapters .chapter-title .line{ display:block; }

/* model (globe/plane/diploma) — ortada, yüzer */
.vg-chapters .chapter-3d{ position:absolute; z-index:3; top:46%; left:50%; transform:translate(-50%,-50%); width:min(440px,33vw); aspect-ratio:1/1; }
.vg-chapters .chapter-3d.diploma{ width:min(580px,46vw); top:39%; }
.vg-chapters .chapter-3d.wide{ width:min(920px,66vw); top:61%; }
.vg-chapters .chapter-3d canvas{ width:100%; height:100%; display:block; cursor:grab; }
.vg-chapters .chapter-3d canvas:active{ cursor:grabbing; }

/* yüzen overlay içerik (yorumlar / veri kartları) */
.vg-chapters .chapter-aside{ position:absolute; z-index:4; right:clamp(20px,6vw,84px); top:50%; transform:translateY(-50%); width:min(400px,40vw); display:flex; flex-direction:column; gap:13px; align-items:flex-start; }
.vg-chapters .chapter.flip-3 .chapter-inner{ text-align:right; }
.vg-chapters .chapter.flip-3 .chapter-title, .vg-chapters .chapter.flip-3 .chapter-text{ margin-left:auto; }
.vg-chapters .chapter.flip-3 .chapter-aside{ right:auto; left:clamp(20px,6vw,84px); align-items:flex-start; }
.vg-chapters .chapter.flip-3 .chapter-shade{ background:
  linear-gradient(rgba(8,28,52,.34), rgba(8,28,52,.34)),
  linear-gradient(270deg, rgba(4,16,30,.86) 0%, rgba(4,16,30,.45) 42%, transparent 76%),
  linear-gradient(to top, rgba(4,16,30,.82) 0%, rgba(4,16,30,.1) 42%, transparent 62%); }

/* ch02 (Süreç): uçağı sağa, Zeynep yorumunu yukarı */
.vg-chapters .ch-process .chapter-3d.wide{ left:53%; }
.vg-chapters .ch-process .chapter-aside{ top:30%; }
/* ch04 (Sonuç): iki yorum (sol Elif + sağ Mert) — diploma biraz küçülür, Mert sağa kayar, çakışma kalkar */
.vg-chapters .ch-diploma .chapter-3d.diploma{ width:min(520px,42vw); top:38%; }
.vg-chapters .ch-diploma .chapter-aside{ right:clamp(16px,4vw,52px); }

/* öğrenci yorumu kartları */
.vg-chapters .testimonial-card{ background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:26px; color:#fff; margin:0; box-shadow:0 28px 64px -26px rgba(0,0,0,.75); }
.vg-chapters .testimonial-card blockquote{ margin:0 0 18px; font-size:1.1rem; line-height:1.5; font-weight:500; }
.vg-chapters .testimonial-card figcaption{ display:flex; align-items:center; gap:12px; }
.vg-chapters .t-avatar{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--navy)); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-accent); color:#fff; flex-shrink:0; }
.vg-chapters .t-meta b{ display:block; font-size:.96rem; } .vg-chapters .t-meta small{ color:rgba(255,255,255,.72); font-size:.83rem; }
.vg-chapters .sample-flag{ font-size:.68rem; color:rgba(255,255,255,.5); letter-spacing:.04em; }
.vg-chapters .testimonial-card.mini{ width:min(330px,30vw); padding:18px 20px; margin-bottom:26px; }
.vg-chapters .testimonial-card.mini blockquote{ font-size:.98rem; line-height:1.45; margin:0 0 13px; }
.vg-chapters .testimonial-card.mini .t-avatar{ width:34px; height:34px; font-size:.92rem; }
.vg-chapters .testimonial-card.mini .t-meta b{ font-size:.9rem; } .vg-chapters .testimonial-card.mini .t-meta small{ font-size:.78rem; }

/* globe veri kartları (sol) */
.vg-chapters .data-card{ background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); border-radius:16px; padding:16px 22px; display:flex; flex-direction:column; gap:2px; min-width:210px; box-shadow:0 12px 34px -18px rgba(0,0,0,.6); }
.vg-chapters .data-num{ font-family:var(--font-accent); font-weight:600; font-size:2rem; color:var(--accent); line-height:1; }
.vg-chapters .data-lbl{ color:rgba(255,255,255,.82); font-size:.84rem; font-weight:500; }

/* mobil / tablet: 3B model + yüzen kartlar gizli → temiz başlık+metin (asla bozulmaz) */
@media (max-width:1024px){
  .vg-chapters .chapter-3d,
  .vg-chapters .chapter-aside,
  .vg-chapters .testimonial-card.mini{ display:none; }
  .vg-chapters .chapter{ min-height:520px; height:78svh; }
}
/* reduced-motion / dar ekran: 3B yüklenmez → boş canvas yerine gizle */
.m3d-off .vg-chapters .chapter-3d{ display:none; }