/* DL-EKLENTI ai-biolink: ana sayfa vitrini (views/showcase.php). Yalnız ≥1300 px (link media ile yüklenir).
   Katmanlar: .vt-side (kaydırma + fare derinliği) > .vt-tilt (eğim) > .vt-float (süzülme) > .vt-phone.
   Bütün hareketler transform/opacity; hareket hassasiyeti açık kullanıcıda durağan. */

@media (min-width: 1300px) {
    .vt { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; --vt-p: 0; --vt-mx: 0; --vt-my: 0;
        /* kutuyla telefon arası: geniş ekranda açılır (en çok 200 px), dar masaüstünde 62 px; telefon ekrandan taşmaz */
        --vt-gap: clamp(62px, calc((100vw - 760px) / 2 - 196px - 110px), 200px); }
    /* sitenin hero örtü katmanı vitrini soldurmasın: vitrin ve kutu örtünün üstünde */
    .aibl-hero { z-index: 2; }
    .aibl-hero > *:not(.vt) { position: relative; z-index: 3; }

    .vt-side {
        position: absolute; top: -190px; width: min(196px, calc((100vw - 760px) / 2 - 78px));
        will-change: transform;
    }
    .vt:not(.is-ready) .vt-side { visibility: hidden; } /* belirme vt-rise animasyonunda (saydamlık dahil) */
    /* kaydırınca solma: saydamlığı showcase.js kabın kendisine verir (var() ile opacity hesabı her tarayıcıda geçerli değil) */
    .vt-left { right: calc(100% + var(--vt-gap)); transform: translate(calc(var(--vt-p) * -70px + var(--vt-mx) * -10px), calc(var(--vt-p) * 30px + var(--vt-my) * -8px)) scale(calc(1 - var(--vt-p) * .22)); }
    .vt-right { left: calc(100% + var(--vt-gap)); top: -130px; transform: translate(calc(var(--vt-p) * 70px + var(--vt-mx) * -14px), calc(var(--vt-p) * 30px + var(--vt-my) * -10px)) scale(calc(1 - var(--vt-p) * .22)); }

    .vt-left .vt-tilt { transform: rotate(-7deg); }
    .vt-right .vt-tilt { transform: rotate(6deg); }
    .vt-tilt { transform-origin: 50% 60%; }

    .vt-float { animation: vt-float 7s ease-in-out infinite; }
    .vt-right .vt-float { animation-duration: 8s; animation-delay: -3s; }
    .vt-side { transform-origin: 50% 40%; }
    .vt:not(.is-ready) .vt-float { transform: translateY(40px); }
    .vt.is-ready .vt-tilt { animation: vt-rise .9s cubic-bezier(.2, .9, .3, 1.1) both; }
    .vt.is-ready .vt-right .vt-tilt { animation-delay: .15s; }

    /* telefon */
    .vt-phone {
        position: relative; width: 100%; aspect-ratio: 9 / 18.5; border-radius: 30px; overflow: hidden;
        border: 7px solid #0B0B0D; background: #0B0B0D;
        box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 60px -20px rgba(217, 250, 49, .25);
    }
    .vt-notch { position: absolute; top: 7px; left: 50%; width: 34%; height: 16px; margin-left: -17%; border-radius: 10px; background: #0B0B0D; z-index: 5; }

    /* ekranlar üst üste; etkin olan görünür */
    .vt-screen {
        position: absolute; inset: 0; padding: 26px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px;
        background: linear-gradient(160deg, var(--bg1), var(--bg2)); color: var(--ink); font-family: var(--tf, inherit);
        opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform .6s ease;
    }
    .vt-screen.is-on { opacity: 1; transform: none; }
    .vt-head { position: relative; width: 100%; padding-bottom: 22px; margin-bottom: 2px; }
    .vt-cover { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; border-radius: 12px; }
    .vt-logo { position: absolute; left: 50%; bottom: 0; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; border: 3px solid var(--bg1); object-fit: cover; }
    .vt-title { font-weight: 800; font-size: 13px; letter-spacing: -.01em; text-align: center; line-height: 1.15; text-transform: var(--tt, none); }
    .vt-desc { font-size: 8.5px; color: var(--sub); text-align: center; line-height: 1.35; margin-bottom: 3px; }
    .vt-btn {
        width: 100%; padding: 7px 6px; font-size: 9px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn-bd); border-radius: var(--btn-r); box-shadow: var(--btn-sh);
    }
    .vt-btn i, .vt-btn svg { margin-right: 3px; }
    .vt-soc { display: flex; gap: 8px; margin-top: 2px; }
    .vt-soc span { width: 21px; height: 21px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink); background: rgba(127, 127, 127, .14); }

    /* etkin ekranın içi sırayla belirir */
    .vt-screen.is-on > * { animation: vt-in .55s cubic-bezier(.2, .8, .2, 1) both; }
    .vt-screen.is-on > :nth-child(2) { animation-delay: .08s; }
    .vt-screen.is-on > :nth-child(3) { animation-delay: .14s; }
    .vt-screen.is-on > :nth-child(4) { animation-delay: .2s; }
    .vt-screen.is-on > :nth-child(5) { animation-delay: .26s; }
    .vt-screen.is-on > :nth-child(6) { animation-delay: .32s; }
    .vt-screen.is-on > :nth-child(7) { animation-delay: .38s; }

    /* yüzen kartlar */
    .vt-chip {
        position: absolute; z-index: 3; white-space: nowrap; font-size: 10.5px; font-weight: 600; color: #F4F4F5;
        padding: 6px 10px; border-radius: 10px; background: rgba(24, 24, 28, .82); border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        animation: vt-chip 6s ease-in-out infinite;
    }
    body[data-theme-style="light"] .vt-chip { color: #18181B; background: rgba(255, 255, 255, .9); border-color: rgba(0, 0, 0, .06); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .35); }
    .vt-chip b { color: #D9FA31; font-weight: 800; }
    body[data-theme-style="light"] .vt-chip b { color: #5B7A00; }
    .vt-chip.is-pop { animation: vt-pop .5s cubic-bezier(.2, .9, .3, 1.4) both, vt-chip 6s ease-in-out .5s infinite; }
    .vt-chip-btn { background: #D9FA31; color: #111; border-color: transparent; }
    body[data-theme-style="light"] .vt-chip-btn { background: #111; color: #fff; }

    /* kartlar telefonun kenarına yaslı: kutuya ve ekran kenarına taşmaz */
    .vt-left .vt-chip-1 { top: 15%; left: -34px; animation-delay: -1s; }
    .vt-left .vt-chip-2 { top: 50%; right: -40px; animation-delay: -3s; }
    .vt-left .vt-chip-3 { top: 80%; left: -22px; animation-delay: -4.5s; }
    .vt-right .vt-chip-1 { top: 10%; left: -40px; animation-delay: -2s; }
    .vt-right .vt-chip-2 { top: 46%; right: -34px; animation-delay: -4s; }
    .vt-right .vt-chip-3 { top: 78%; left: -26px; animation-delay: -.5s; }

    .vt-dots { display: inline-flex; gap: 3px; margin-right: 4px; vertical-align: middle; }
    .vt-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: vt-dot 1.2s ease-in-out infinite; }
    .vt-dots i:nth-child(2) { animation-delay: .15s; }
    .vt-dots i:nth-child(3) { animation-delay: .3s; }

    @keyframes vt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes vt-rise { from { opacity: 0; transform: translateY(60px) rotate(0deg) scale(.92); } }
    @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes vt-chip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes vt-pop { from { opacity: 0; transform: scale(.7) translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes vt-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

    /* yalnız ekrandayken ve sekme görünürken hareket */
    .vt.is-paused .vt-float, .vt.is-paused .vt-chip, .vt.is-paused .vt-dots i { animation-play-state: paused !important; } /* yalnız sonsuz süzülmeler; giriş animasyonu ilk karede donmasın */
}

/* dar masaüstünde yalnız telefonlar: kartlar ekran kenarına taşmasın */
@media (min-width: 1300px) and (max-width: 1439.98px) {
    .vt-chip { display: none; }
}

@media (min-width: 1300px) and (prefers-reduced-motion: reduce) {
    .vt *, .vt { animation: none !important; transition: none !important; }
    .vt-side { opacity: 1 !important; }
}