/* VONSAWEB 3D katmanı — 2026-10-29
   Yalnız görsel derinlik ekler; içerik, bağlantılar, formlar, dil geçişi ve asistan davranışı değişmez.
   Hareket kuralları "prefers-reduced-motion" tercihine uyar. Sabit konumlu düğmelerin (WhatsApp, asistan,
   uygulama yükleme) üst öğelerine bilerek dönüşüm verilmez.
   Geri almak için sayfadaki 3d.css ve 3d.js etiketlerini kaldırmak yeterlidir. */

/* ---------- 1. WebGL küre tuvali ---------- */
.v3d-globe{position:absolute;z-index:0;display:block;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.v3d-globe.is-ready{opacity:1}
.hp-hero .v3d-globe{top:50%;left:70%;width:min(44vw,650px);height:min(44vw,650px);transform:translate(-50%,-52%)}
.vws-service .hero.v3d-has-globe{position:relative;isolation:isolate;overflow:hidden}
.vws-service .hero.v3d-has-globe>.wrap{position:relative;z-index:1}
/* Hizmet sayfaları: tuval hero yüksekliğinde; küre boyutu yükseklikten gelir, kenarda kesilmez. */
.vws-service .hero .v3d-globe{top:0;left:89%;width:min(46vw,620px);height:100%;transform:translateX(-50%)}
.vws-service .hero .v3d-globe.is-ready{opacity:.9}
@media(max-width:1280px){.vws-service .hero .v3d-globe{left:100%}}
@media(max-width:1000px){
  .hp-hero .v3d-globe{top:auto;left:auto;right:-21vw;bottom:calc(9vw + 40px);width:92vw;height:92vw;transform:none}
  .vws-service .hero .v3d-globe{top:-18vw;left:auto;right:-30vw;width:72vw;height:72vw;transform:none}
  .vws-service .hero .v3d-globe.is-ready{opacity:.42}
}

/* ---------- 2. Hero: derinlik, başlık kabartması, kart girişi ---------- */
html.v3d .hp-hero.hp-scope h1 .hp-accent,
html.v3d .vws-service .hero h1 .vonsa-display{text-shadow:0 1px 0 #0a6ad6,0 2px 0 #0960c4,0 3px 0 #0855b0,0 4px 0 #074a9b,0 6px 2px rgba(0,10,30,.45),0 12px 22px rgba(0,25,70,.55)}
html.v3d .hp-hero.hp-scope h1>span:first-child{text-shadow:0 1px 0 #cfdcf0,0 2px 0 #9fb4d3,0 3px 0 #6f87ab,0 6px 14px rgba(0,8,24,.55)}
html.v3d .hp-scope .hp-service-photo-card{box-shadow:0 14px 30px rgba(0,8,24,.34)}
html.v3d-fine .hp-hero .hp-presenter{transform:translate3d(calc(var(--v3d-hx,0) * -12px),calc(var(--v3d-hy,0) * -7px),0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
/* Kart girişi yalnız CSS ile çalışır ve her durumda kartın kendi hâlinde biter (JS'e bağlı değildir). */
@media(prefers-reduced-motion:no-preference){
  .hp-hero .hp-hero-services .hp-service-photo-card{animation:v3dCardIn 1s cubic-bezier(.16,.84,.3,1) backwards}
  .hp-hero .hp-hero-services .hp-service-photo-card:nth-child(2){animation-delay:.12s}
  .hp-hero .hp-hero-services .hp-service-photo-card:nth-child(3){animation-delay:.24s}
}
@keyframes v3dCardIn{from{opacity:0;transform:perspective(900px) translate3d(0,26px,-60px) rotateX(-32deg)}}

/* ---------- 3. 3D düğmeler ---------- */
/* Mavi düğmeler (ana sayfa, hizmet sayfaları), mavi-mor düğmeler (kampanya, alt sayfalar), çerçeveli düğmeler */
html.v3d .hp-scope .hp-button,
html.v3d .vws-service .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.16),0 4px 0 #0047b8,0 10px 22px rgba(0,98,250,.32);transition:transform .14s ease,box-shadow .14s ease,background .16s}
html.v3d #campaign .promoAction .btn.primary,
html.v3d [data-vw-layout="subpage"] .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.14),0 4px 0 #4a3fc0,0 14px 34px rgba(110,110,255,.34);transition:transform .14s ease,box-shadow .14s ease,background .16s,filter .14s}
html.v3d .vws-service .btn:not(.primary){box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 0 #04101f,0 10px 20px rgba(0,0,0,.28);transition:transform .14s ease,box-shadow .14s ease,background .16s}
@media(hover:hover){
  html.v3d .hp-scope .hp-button:hover,
  html.v3d .vws-service .btn.primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.16),0 6px 0 #0047b8,0 16px 30px rgba(0,122,255,.4)}
  html.v3d #campaign .promoAction .btn.primary:hover,
  html.v3d [data-vw-layout="subpage"] .btn.primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.14),0 6px 0 #4a3fc0,0 18px 38px rgba(110,110,255,.42)}
  html.v3d .vws-service .btn:not(.primary):hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 0 #04101f,0 14px 26px rgba(0,0,0,.34)}
}
html.v3d .hp-scope .hp-button:active,
html.v3d .vws-service .btn.primary:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.16),0 1px 0 #0047b8,0 4px 10px rgba(0,98,250,.28)}
html.v3d #campaign .promoAction .btn.primary:active,
html.v3d [data-vw-layout="subpage"] .btn.primary:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 0 #4a3fc0,0 5px 12px rgba(110,110,255,.3)}
html.v3d .vws-service .btn:not(.primary):active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 #04101f,0 4px 10px rgba(0,0,0,.25)}

/* ---------- 4. Bölümler: hakkımızda çerçevesi, kampanya görseli, süreç rozetleri ---------- */
html.v3d .hp-owner-photo{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,6,20,.38)}
html.v3d #campaign .vonsaPromoPhoto{border-radius:18px;--v3d-persp:1400px}
html.v3d #campaign .vonsaPromoPhoto img{box-shadow:0 24px 48px rgba(0,8,24,.5),0 2px 0 rgba(255,255,255,.05)}
@media(min-width:801px){
  html.v3d #campaign .vonsaPromoPhoto.v3d-pose{--v3d-bry:9;--v3d-brx:3}
}
@media(max-width:800px){
  html.v3d #campaign .vonsaPromoPhoto{border-radius:14px}
}
@media(min-width:641px){
  html.v3d #process.vonsaProcessPro .stepNum{background:radial-gradient(circle at 34% 28%,#22558f,#0d2038 58%,#081426);box-shadow:0 0 0 6px #081522,0 0 24px rgba(75,144,255,.26),inset 0 2px 2px rgba(255,255,255,.2),inset 0 -5px 9px rgba(0,0,0,.5)}
}

/* ---------- 5. Logo: üzerine gelince 3D dönüş ---------- */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  html.v3d .top .brand .brandMark img,
  html.v3d .vws-header .vws-brand img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
  html.v3d .top .brand:hover .brandMark img,
  html.v3d .vws-header .vws-brand:hover img{transform:perspective(300px) rotateY(360deg)}
}

/* ---------- 6. Fare ile 3D eğim (yalnız ince imleçli cihazlar; sınıfları 3d.js ekler) ---------- */
html.v3d .v3d-tilt{--v3d-x:0;--v3d-y:0;--v3d-z:0px;--v3d-gx:50%;--v3d-gy:50%;transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .16s}
html.v3d .v3d-pos{position:relative}
html.v3d .v3d-tilt.v3d-hot,
html.v3d .v3d-tilt.v3d-pose{transform:perspective(var(--v3d-persp,1000px)) rotateX(calc((var(--v3d-brx,0) - var(--v3d-y) * var(--v3d-max,8)) * 1deg)) rotateY(calc((var(--v3d-bry,0) + var(--v3d-x) * var(--v3d-max,8)) * 1deg)) translateZ(var(--v3d-z))}
html.v3d .v3d-tilt.v3d-hot{--v3d-z:14px;transition:transform .16s ease-out,box-shadow .3s ease,border-color .16s;box-shadow:calc(var(--v3d-x) * -16px) calc(20px + var(--v3d-y) * -12px) 42px rgba(0,8,24,.48)}
html.v3d .hp-owner-photo.v3d-tilt.v3d-hot{box-shadow:calc(var(--v3d-x) * -10px) calc(18px + var(--v3d-y) * -8px) 40px rgba(0,6,20,.4)}
html.v3d .hp-scope .hp-service-photo-card.v3d-hot{border-color:#5fc3ff}
html.v3d .v3d-tilt.v3d-glare::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--v3d-gx) var(--v3d-gy),rgba(200,234,255,.26),rgba(90,170,255,.1) 32%,transparent 60%);opacity:0;transition:opacity .45s ease}
html.v3d .v3d-tilt.v3d-glare.v3d-hot::after{opacity:1}
/* Ek hizmetler: cam yüzey ve parlama kendi hücresinin sınırları içinde kalır. */
html.v3d .hp-services-grid>article.v3d-tilt{isolation:isolate}
html.v3d .hp-services-grid>article.v3d-tilt::before{content:"";position:absolute;inset:4px 6px;z-index:-1;border-radius:14px;background:linear-gradient(155deg,rgba(30,96,168,.4),rgba(8,30,58,.66));box-shadow:inset 0 0 0 1px rgba(95,195,255,.28),inset 0 -5px 14px rgba(0,8,24,.25);opacity:0;transition:opacity .4s ease;pointer-events:none}
html.v3d .hp-services-grid>article.v3d-hot::before{opacity:1}
html.v3d .hp-services-grid>article.v3d-tilt.v3d-hot{--v3d-z:0px;transform:perspective(1000px) rotateX(calc(var(--v3d-y) * -2deg)) rotateY(calc(var(--v3d-x) * 2deg)) scale(.98);box-shadow:none}
html.v3d .hp-services-grid>article.v3d-glare::after{inset:4px 6px;border-radius:14px}
/* Ana sayfa hero kartları üst kapsayıcıdan "pointer-events:none" devralır; eğim için yalnız kartlar etkileşir. */
html.v3d-fine .hp-hero .hp-service-photo-card.v3d-tilt{pointer-events:auto}

/* ---------- 7. Kaydırınca 3D giriş (yalnız hareket tercihi açıkken 3d.js ekler) ---------- */
html.v3d .v3d-pending{opacity:0}
html.v3d .v3d-in{animation:v3dRise .95s cubic-bezier(.16,.84,.3,1) var(--v3d-delay,0s) backwards}
html.v3d #process .step.v3d-in .stepNum{animation:v3dCoin .8s cubic-bezier(.2,.8,.2,1) calc(var(--v3d-delay,0s) + .1s) backwards}
@keyframes v3dRise{from{opacity:0;transform:perspective(1100px) translate3d(0,46px,-90px) rotateX(15deg)}}
@keyframes v3dCoin{from{transform:perspective(500px) rotateY(-180deg)}}

/* ---------- 8. Erişilebilirlik: hareket azaltma tercihi ---------- */
@media(prefers-reduced-motion:reduce){
  html.v3d .v3d-pending{opacity:1}
  html.v3d .v3d-in,html.v3d #process .step.v3d-in .stepNum{animation:none}
  html.v3d .v3d-tilt.v3d-hot{transform:none}
  html.v3d .hp-services-grid>article.v3d-tilt.v3d-hot{transform:none}
}