/* ============================================================
   VG — İmza Harita (anasayfa gömülü sürüm)
   Prototipten alınan stiller, #harita altına SCOPE'lu → başka
   hiçbir sayfaya/sınıfa sızmaz. Bootstrap ile çakışmaz.
   Yazı tipleri: site ile aynı (Playfair Display + Montserrat).
   ============================================================ */
#harita{ background:#06182c; color:#fff; padding:clamp(60px,9vh,110px) 0 0; position:relative; --accent:#3aa0ff; overflow:hidden; }
#harita *{ box-sizing:border-box; }
#harita .wrap{ width:min(1180px,92vw); margin-inline:auto; padding-inline:clamp(8px,2vw,16px); }

#harita .harita-head{ text-align:center; max-width:760px; margin-inline:auto; }
#harita .harita-eyebrow{ display:inline-block; color:var(--accent); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; font-family:'Montserrat',sans-serif; }
#harita .harita-head h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.08; letter-spacing:-.02em; margin:0; color:#fff; }
#harita .harita-head h2 em{ font-style:italic; color:var(--accent); }
#harita .harita-head p{ color:rgba(255,255,255,.78); font-size:1.05rem; margin:16px auto 0; max-width:54ch; line-height:1.6; font-family:'Montserrat',sans-serif; }

/* ülke seçim çipleri (teknik bilmeyen için basit) */
#harita .harita-countries{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
#harita .ctry-pill{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:999px; padding:10px 18px; font-weight:500; font-size:.95rem; cursor:pointer; transition:background .25s, border-color .25s, color .25s, transform .2s; font-family:'Montserrat',sans-serif; line-height:1; }
#harita .ctry-pill .cf{ font-size:1.05em; }
#harita .ctry-pill b{ color:rgba(255,255,255,.5); font-weight:600; font-size:.85em; }
#harita .ctry-pill:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); transform:translateY(-1px); }
#harita .ctry-pill.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
#harita .ctry-pill.active b{ color:rgba(255,255,255,.6); }

/* sahne (harita + panel) */
#harita .harita-stage{ position:relative; height:min(72vh,660px); margin-top:28px; contain:layout paint; }
/* PERF: harita kendi GPU katmanında → sayfa kaydırılırken devasa SVG yeniden ÇİZİLMEZ, sadece composite olur */
#harita-map{ position:absolute; inset:0; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
#harita-map .vg-map{ width:100%; height:100%; display:block; cursor:default; }
/* PERF: zoom katmanı GPU'da composite edilsin → büyüme/kaydırma akıcı, ülke yolları her karede yeniden çizilmez */
#harita .map-zoom{ transform-box:view-box; transform-origin:0 0; transition:transform .8s cubic-bezier(.22,1,.36,1); will-change:transform; }
/* PERF (takılma fix): vector-effect:non-scaling-stroke KALDIRILDI. Zoom (ülke seçimi) sırasında
   .map-zoom CSS-transform ile büyürken non-scaling-stroke tarayıcıyı katmanı her karede YENİDEN
   RASTER'lamaya zorluyordu (51 ülke yolu + 401 nokta) → asıl takılma kaynağı buydu. Strok artık
   ölçekle birlikte büyür → tarayıcı önbelleğe alınmış bitmap'i GPU'da kaydırır → zoom pürüzsüz.
   Yan etki: yakınlaşınca sınır/nokta çizgisi çok hafif kalınlaşır (fark edilmez). */
#harita .cn{ fill:#12304f; stroke:rgba(255,255,255,.1); stroke-width:.7; }
#harita .cn.is-ours{ fill:#1d4d7d; cursor:pointer; transition:fill .15s; }
#harita .cn.is-ours:hover{ fill:#2a66a3; }
#harita .cn.active{ fill:#0078D7; }
#harita .map-dots{ shape-rendering:optimizeSpeed; }
#harita .map-dots .dot{ fill:var(--accent); stroke:#fff; stroke-width:1; cursor:pointer; transition:opacity .35s; }
#harita .map-dots .dot.dim{ opacity:.22; }
#harita .map-dots .dot.on{ fill:#ffffff; stroke:#0078D7; r:4.2; }

/* yönlendiren yan panel (ülkenin üniversiteleri) */
/* PERF: backdrop-filter blur KALDIRILDI — zoom sırasında arkadaki hareketli haritayı her kare yeniden bulanıklaştırması en büyük takılma kaynağıydı. Opak zeminle görünüm neredeyse aynı. */
#harita .harita-panel{ position:absolute; left:20px; top:20px; bottom:20px; z-index:5; width:min(340px,84vw); background:rgba(8,22,40,.975); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:18px; display:flex; flex-direction:column; opacity:0; transform:translateX(-16px); transition:opacity .4s, transform .4s; pointer-events:none; box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
#harita .harita-panel.show{ opacity:1; transform:none; pointer-events:auto; }
#harita .hp-head{ font-weight:600; font-size:1.05rem; padding:4px 4px 14px; border-bottom:1px solid rgba(255,255,255,.1); font-family:'Montserrat',sans-serif; }
#harita .hp-head span{ color:rgba(255,255,255,.55); font-weight:500; font-size:.85rem; }
#harita .hp-list{ overflow-y:auto; margin-top:8px; display:flex; flex-direction:column; gap:5px; flex:1 1 auto; min-height:0; }
#harita .hp-item{ display:flex; align-items:center; gap:12px; background:transparent; border:none; border-radius:12px; padding:10px; cursor:pointer; text-align:left; color:#fff; transition:background .2s; text-decoration:none; }
#harita .hp-item:hover{ background:rgba(255,255,255,.07); }
#harita .hp-item img{ width:40px; height:40px; object-fit:contain; background:#fff; border-radius:9px; padding:5px; flex-shrink:0; }
#harita .hp-item .hp-dot{ width:12px; height:12px; border-radius:50%; background:var(--accent); margin:14px; flex-shrink:0; }
#harita .hp-meta{ flex:1; min-width:0; }
#harita .hp-meta b{ display:block; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Montserrat',sans-serif; }
#harita .hp-meta small{ color:rgba(255,255,255,.6); font-size:.8rem; }
#harita .hp-go{ color:var(--accent); font-size:.82rem; font-weight:600; white-space:nowrap; flex-shrink:0; }
/* "Tümünü keşfet" tuşu — panelin altına sabit, listeyi sınırlayıp tıklama takılmasını çözer */
#harita .hp-more{ flex-shrink:0; display:block; text-align:center; margin-top:10px; padding:12px; border-radius:12px; background:var(--accent); color:#fff; font-weight:600; font-size:.92rem; text-decoration:none; font-family:'Montserrat',sans-serif; transition:background .2s, transform .2s; }
#harita .hp-more:hover{ background:#2a78c9; transform:translateY(-1px); color:#fff; }

/* korunan SEO metni (Venture Global kimdir / hizmetler) — harita altında */
#harita .harita-seo{ padding:58px 0 clamp(60px,9vh,100px); }
#harita .harita-seo .hs-head{ text-align:center; max-width:720px; margin:0 auto 36px; }
#harita .harita-seo .hs-head h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(1.5rem,3.2vw,2.3rem); margin:0 0 10px; color:#fff; }
#harita .harita-seo .hs-head p{ color:rgba(255,255,255,.7); font-size:1.02rem; margin:0; font-family:'Montserrat',sans-serif; }
#harita .hs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
#harita .hs-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:28px 30px; }
#harita .hs-card h3{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.2rem; margin:0 0 12px; color:#fff; }
#harita .hs-card p{ color:rgba(255,255,255,.74); margin:0; line-height:1.65; font-size:.98rem; font-family:'Montserrat',sans-serif; }

@media (max-width:768px){
  #harita .hs-grid{ grid-template-columns:1fr; }
  /* mobil: panel haritanın ÜSTÜNE binmesin → harita üstte sabit, üniversite paneli ALTINDA açılsın */
  #harita .harita-stage{ height:auto; }
  #harita-map{ position:relative; inset:auto; width:100%; height:52vh; }
  #harita .harita-panel{ position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto;
    transform:none; max-height:62vh; margin-top:14px; display:none; }
  #harita .harita-panel.show{ display:flex; opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  #harita .map-zoom, #harita .harita-panel, #harita .cn, #harita .map-dots .dot{ transition:none !important; }
  #harita .map-dots .dot.on{ animation:none !important; }
}