/* Vudy karşılama paneli: giriş sayfasının sağ alanı.
   Kullanım ve entegrasyon notları için README.md dosyasına bakın.
   Her sınıf "vk-" ile başlar, mevcut stillerle çakışmaz. Boyutlar (cqw) panelin kendi genişliğine göre ölçeklenir. */

.vk-root {
  --vk-ink: #14213d;
  --vk-ust: #2c3550;
  --vk-alt: #3d4763;
  --vk-ad-1: #053f55; --vk-ad-2: #0a5d6b; --vk-ad-3: #0f7078;
  position: relative; overflow: hidden;
  height: 100%; min-height: 100%;
  /* Videonun zemin renkleriyle aynı gradyan; video kenarları panele karışır */
  background: linear-gradient(180deg, #a3a4b9 0%, #adaec2 55%, #d6d5e2 100%);
}

/* Sahnenin boyutunu ve yerini JS panele göre hesaplar (yerlestir); aşağıdaki değerler JS çalışana kadar geçerlidir */
.vk-scene {
  position: absolute; left: 50%; top: 50%;
  width: min(100cqw, 100vh); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
.vk-scene video, .vk-scene .vk-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  /* panelde boşluk kalırsa kenarlar yumuşakça erir; kalmazsa maske tamamen opak olur (JS ayarlar) */
  -webkit-mask-image: var(--vk-mx, linear-gradient(#000, #000)), var(--vk-my, linear-gradient(#000, #000));
          mask-image: var(--vk-mx, linear-gradient(#000, #000)), var(--vk-my, linear-gradient(#000, #000));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.vk-poster { opacity: 0; }
.vk-sakin .vk-poster { opacity: 1; }
.vk-sakin video { display: none; }

/* Konuşma balonu: buzlu cam, kutu ve kuyruk tek kontur (JS çizer) */
.vk-balon {
  position: absolute;
  right: 1cqw; top: 2.5cqw;
  width: 35cqw;
  pointer-events: none;
  transform-origin: 12% 112%;
  transform: scale(0);
}
.vk-balon.vk-goster { animation: vk-pop .55s cubic-bezier(.18, 1.35, .35, 1) forwards; }
@keyframes vk-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.vk-balon > svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.vk-cam {
  position: absolute; left: 0; top: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .52) 0%, rgba(255, 255, 255, .28) 100%);
  -webkit-backdrop-filter: blur(1.6cqw) saturate(1.25);
          backdrop-filter: blur(1.6cqw) saturate(1.25);
}
.vk-govde { position: relative; z-index: 2; padding: 3cqw 3.6cqw 2.8cqw; }
.vk-ust { font-size: clamp(12px, 2.5cqw, 40px); color: var(--vk-ust); font-weight: 600; letter-spacing: .005em; }
.vk-ad {
  margin: .1cqw 0;
  padding: .14em .04em .2em;   /* gradyanlı yazıda g, ü, Ö çıkıntıları kesilmesin */
  font-size: clamp(18px, 4.7cqw, 80px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  overflow-wrap: anywhere;
  background: linear-gradient(100deg, var(--vk-ad-1) 0%, var(--vk-ad-2) 55%, var(--vk-ad-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vk-ad.vk-baslik { font-size: clamp(17px, 4.1cqw, 72px); }
.vk-alt { font-size: clamp(11px, 2.3cqw, 36px); color: var(--vk-alt); font-weight: 500; }
.vk-ust, .vk-ad, .vk-alt { opacity: 0; transform: translateY(.9cqw); }
.vk-balon.vk-goster .vk-ust { animation: vk-yukari .40s .10s ease-out forwards; }
.vk-balon.vk-goster .vk-ad   { animation: vk-yukari .40s .20s ease-out forwards; }
.vk-balon.vk-goster .vk-alt  { animation: vk-yukari .40s .32s ease-out forwards; }
@keyframes vk-yukari { to { opacity: 1; transform: translateY(0); } }

/* "yazıyor…" noktaları: asıl balondan önce kısa süre görünür */
.vk-yaziyor {
  position: absolute; left: 65cqw; top: 9.5cqw; z-index: 3;
  display: flex; gap: 1.3cqw; align-items: center;
  padding: 2.4cqw 3.2cqw; border-radius: 4cqw; background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(1.4cqw); backdrop-filter: blur(1.4cqw); border: .25cqw solid rgba(255, 255, 255, .65);
  opacity: 0; transform: scale(.5); transform-origin: 0% 100%; pointer-events: none;
}
.vk-yaziyor i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #4a5470; display: block; }
.vk-yaziyor.vk-ac { animation: vk-ic .25s ease-out forwards; }
.vk-yaziyor.vk-ac i { animation: vk-nokta 1s infinite ease-in-out; }
.vk-yaziyor.vk-ac i:nth-child(2) { animation-delay: .15s; }
.vk-yaziyor.vk-ac i:nth-child(3) { animation-delay: .3s; }
.vk-yaziyor.vk-kapa { animation: vk-dis .18s ease-in forwards; }
@keyframes vk-ic { to { opacity: 1; transform: scale(1); } }
@keyframes vk-dis { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.6); } }
@keyframes vk-nokta { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-.9cqw); opacity: 1; } }

/* Hareketi azaltma tercihi ya da animasyon kapalıysa: hareketsiz kare ve anında balon */
.vk-sakin .vk-balon, .vk-sakin .vk-ust, .vk-sakin .vk-ad, .vk-sakin .vk-alt { animation: none !important; opacity: 1; transform: none; }
.vk-sakin .vk-yaziyor { display: none; }

/* Dışarıdan durdur() çağrılınca balon ve yazı animasyonları da donar */
.vk-dur .vk-balon, .vk-dur .vk-balon *, .vk-dur .vk-yaziyor, .vk-dur .vk-yaziyor * { animation-play-state: paused !important; }