/* =========================================================
   VENÜS SİGORTA · SİGORTA DANIŞMANI — Yön 3 "PUSULA"
   Beyaz panel, ince çizgi, yumuşatılmış kare köşeler (.totop ile
   aynı dil). Davranış _ortak/danisman.js içinde; bu dosya yalnızca
   Pusula paletini giydirir.

   z-index 95: içeriğin üstünde, mobil menü (99) ve header (100)
   altında. Sağ alttaki .totop (right, z-index 90) ile çakışmaz.
   ========================================================= */

.vd{
  position:fixed; z-index:95; left:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  width:min(392px, calc(100vw - 2rem));
  font-family:var(--font); color:var(--ink-2);
  display:none;
  /* sona doğru sönümlenen giriş eğrisi: --e-out gibi hedefi aşmaz */
  --vd-yumusak:cubic-bezier(.16,.68,.28,1);
}
.vd.vd-var{ display:block; }
.vd *{ box-sizing:border-box; }
.vd-marka{ width:58%; height:auto; fill:currentColor; display:block; }
.vd-ik{ flex:none; }

/* ---------- ÇENGEL ----------
   Giriş kasıtlı olarak yumuşak: avatar önce, balon 220 ms sonra. */
.vd-cengel{ display:flex; align-items:flex-end; gap:12px; pointer-events:none; }
.vd-cengel.gir{ pointer-events:auto; }
.vd-cengel .vd-avatar,
.vd-cengel .vd-balon{
  opacity:0; will-change:opacity,transform;
  transition:opacity 520ms var(--vd-yumusak), transform 520ms var(--vd-yumusak), filter 520ms var(--vd-yumusak);
}
.vd-cengel .vd-avatar{ transform:translateY(10px) scale(.84); filter:blur(3px); }
.vd-cengel .vd-balon{
  transform:translate(-12px,12px) scale(.97); filter:blur(4px);
  transform-origin:0 100%; transition-delay:.22s;
}
.vd-cengel.gir .vd-avatar,
.vd-cengel.gir .vd-balon{ opacity:1; transform:none; filter:none; }
.vd.vd-acik .vd-cengel{ opacity:0; pointer-events:none; }

.vd-avatar{
  position:relative; width:56px; height:56px; flex:none; border-radius:18px;
  background:var(--brand); color:#fff; display:grid; place-items:center;
  border:0; padding:0; cursor:pointer; box-shadow:0 18px 34px -14px rgba(208,32,26,.75);
}
.vd-avatar::after{
  content:""; position:absolute; inset:-6px; border-radius:24px;
  border:1.5px solid var(--brand); opacity:0;
}
/* nabız giriş bittikten sonra başlar, açılışı sertleştirmesin */
.vd-cengel.gir .vd-avatar::after{ animation:vd-nabiz 2.6s var(--e-out) 1.15s infinite; }
@keyframes vd-nabiz{ 0%{transform:scale(.92);opacity:.55} 70%{transform:scale(1.2);opacity:0} 100%{opacity:0} }
.vd-avatar > i{
  position:absolute; right:-3px; bottom:-3px; width:14px; height:14px; border-radius:50%;
  background:#22B573; border:2.5px solid var(--paper);
}

.vd-balon{
  position:relative; background:var(--paper); color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 6px;
  padding:1rem 1.15rem .9rem; box-shadow:var(--sh-2);
  cursor:pointer; text-align:left;
  transition:border-color var(--t), transform var(--t) var(--e-out), box-shadow var(--t);
}
.vd-balon:hover{ border-color:var(--brand-100); transform:translateY(-2px); }
.vd-balon .kim{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-weight:800; }
.vd-balon .mtn{ margin-top:.5rem; font-size:.9rem; line-height:1.5; color:var(--ink-soft); }
.vd-balon .mtn b{ font-weight:800; color:var(--ink); }
.vd-balon .alt{
  margin-top:.8rem; display:flex; align-items:center; gap:.5rem;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}
.vd-balon .alt span{ color:var(--ink); font-weight:700; border-bottom:2px solid var(--brand); padding-bottom:2px; }
.vd-kapat{
  position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  font-size:14px; line-height:1; border:0; padding:0; cursor:pointer;
  box-shadow:var(--sh-1); transition:background var(--t-fast);
}
.vd-kapat:hover{ background:var(--brand); }

/* ---------- PANEL ---------- */
.vd-panel{
  position:absolute; left:0; bottom:0; width:100%;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:0 40px 80px -28px rgba(16,19,23,.35);
  display:flex; flex-direction:column; height:min(600px, calc(100vh - 4rem));
  opacity:0; transform:translateY(16px) scale(.975); transform-origin:0 100%; pointer-events:none;
  transition:opacity 420ms var(--vd-yumusak), transform 420ms var(--vd-yumusak);
}
.vd-panel.ac{ opacity:1; transform:none; pointer-events:auto; }
.vd-ray{ height:3px; background:var(--surface-2); flex:none; }
.vd-ray i{ display:block; height:100%; width:0; background:var(--brand); transition:width 420ms var(--e-out); }

.vd-bas{
  display:flex; align-items:center; gap:.75rem; padding:1rem 1rem .9rem;
  border-bottom:1px solid var(--line); background:var(--surface); flex:none;
}
.vd-bas .av{
  position:relative; width:40px; height:40px; flex:none; border-radius:13px;
  background:var(--brand); color:#fff; display:grid; place-items:center;
}
.vd-bas .av .vd-marka{ width:62%; }
.vd-bas .av i{
  position:absolute; right:-3px; bottom:-3px; width:11px; height:11px; border-radius:50%;
  background:#22B573; border:2px solid var(--surface);
}
.vd-bas .kimlik{ min-width:0; }
.vd-bas .ad{ font-weight:800; font-size:.95rem; letter-spacing:-.025em; color:var(--ink); }
.vd-bas .dr{
  margin-top:2px; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); white-space:nowrap; font-weight:600;
}
.vd-bas .dr .kisa{ display:none; }
.vd-bas .sag{ margin-left:auto; display:flex; gap:2px; }
.vd-bas .sag button{
  width:32px; height:32px; border-radius:10px; border:0; background:none; padding:0;
  color:var(--ink-mute); display:grid; place-items:center; font-size:17px; line-height:1;
  cursor:pointer; transition:background var(--t-fast), color var(--t-fast);
}
.vd-bas .sag button:hover{ background:var(--surface-2); color:var(--ink); }

/* Dokunma hedefi: rozetler görsel olarak küçük kalır, tıklanabilir alan
   görünmez bir katmanla 44px'e tamamlanır (WCAG 2.5.5 / Apple HIG). */
.vd-bas .sag button, .vd-kapat{ position:relative; }
.vd-bas .sag button::after, .vd-kapat::after{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}

/* ---------- AKIŞ ---------- */
.vd-akis{
  flex:1; overflow-y:auto; padding:1.25rem 1rem .5rem;
  display:flex; flex-direction:column; gap:.7rem; scrollbar-width:thin;
}
.vd-akis::-webkit-scrollbar{ width:5px; }
.vd-akis::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:var(--r-sm); }
/* flex:none şart: .vd-akis bir flex kolonu; içerik taştığında öğeler shrink ile
   ezilir ve overflow:hidden taşıyan .vd-ozet otomatik asgari boyutunu kaybedip
   birkaç piksele iner (künye görünmez olur). */
.vd-akis > *{ flex:none; }
/* Mesajlar aşağıya yaslanır (sohbet uygulaması davranışı): panel 600 px ve akış
   yeni başladığında üstte iki balon + altta boşluk görüntüsü oluşuyordu.
   justify-content:flex-end taşan içerikte üst mesajları erişilemez kılar;
   ilk öğeye margin-top:auto vermek taşma anında kendiliğinden 0'a döner. */
.vd-akis::before{ content:""; margin-top:auto; margin-bottom:-.7rem; }

.vd-msj{
  max-width:86%; font-size:.9rem; line-height:1.55; padding:.7rem .9rem;
  border-radius:var(--r-md); animation:vd-gir .42s var(--e-out) both;
}
@keyframes vd-gir{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.vd-msj.bot{
  background:var(--surface); border:1px solid var(--line-2);
  border-bottom-left-radius:6px; align-self:flex-start; color:var(--ink-2);
}
.vd-msj.bot b{ font-weight:800; color:var(--ink); }
.vd-msj.ben{
  background:var(--brand); color:#fff; border-bottom-right-radius:6px;
  align-self:flex-end; font-weight:600;
}
.vd-yaz{
  align-self:flex-start; display:flex; gap:5px; padding:.85rem .95rem;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-md); border-bottom-left-radius:6px;
}
.vd-yaz span{ width:6px; height:6px; border-radius:50%; background:var(--ink-mute); animation:vd-zipla 1.25s infinite; }
.vd-yaz span:nth-child(2){ animation-delay:.16s; }
.vd-yaz span:nth-child(3){ animation-delay:.32s; }
@keyframes vd-zipla{ 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

/* ---------- ÖZET KÜNYESİ ---------- */
.vd-ozet{
  align-self:stretch; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; animation:vd-gir .5s var(--e-out) both;
}
.vd-ozet .ust{
  background:var(--ink); color:#fff; padding:.65rem .95rem;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.vd-ozet dl{ display:grid; grid-template-columns:auto 1fr; background:var(--paper); margin:0; }
.vd-ozet dt{
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
  font-weight:600; padding:.65rem .75rem .65rem .95rem; border-top:1px solid var(--line-2);
}
.vd-ozet dd{
  font-size:.8125rem; font-weight:700; color:var(--ink); margin:0; text-align:right;
  padding:.65rem .95rem .65rem .75rem; border-top:1px solid var(--line-2);
}
.vd-ozet dl > *:nth-child(1), .vd-ozet dl > *:nth-child(2){ border-top:0; }
.vd-oner{
  background:var(--brand-050); border-top:1px solid var(--line-2);
  padding:.85rem .95rem; display:flex; align-items:center; gap:.75rem;
}
.vd-oner .ik{
  width:38px; height:38px; flex:none; border-radius:12px;
  background:var(--paper); color:var(--brand); display:grid; place-items:center;
  box-shadow:var(--sh-1);
}
.vd-oner b{ display:block; font-size:.8125rem; font-weight:800; color:var(--ink); }
.vd-oner span{
  display:block; margin-top:2px; font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:600;
}

/* ---------- ALT RAF ---------- */
.vd-alt{ flex:none; border-top:1px solid var(--line); padding:.75rem 1rem 1rem; background:var(--surface); }
.vd-alt:empty{ display:none; }

.vd-cip{ display:flex; flex-wrap:wrap; gap:.4rem; }
.vd-cip button{
  font-family:inherit; font-size:.8125rem; font-weight:700; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.55rem .9rem; cursor:pointer;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  animation:vd-gir .34s var(--e-out) both;
}
.vd-cip button:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-1px); }

.vd-girdi{ display:flex; gap:.5rem; align-items:center; }
.vd-girdi input{
  flex:1; min-width:0; font-family:inherit; font-size:.9rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.75rem 1rem;
}
.vd-girdi input::placeholder{ color:var(--ink-mute); }
.vd-girdi input:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050); }
.vd-girdi button{
  width:44px; height:44px; flex:none; border-radius:14px; border:0; padding:0;
  background:var(--brand); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:background var(--t-fast), transform var(--t-fast);
}
.vd-girdi button:hover{ background:var(--brand-600); transform:rotate(-8deg); }

.vd-form{ display:grid; gap:.45rem; }
.vd-form .sr{
  display:flex; align-items:center; gap:.6rem; padding:0 .85rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.vd-form .sr:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050); }
.vd-form .sr b{
  flex:none; width:72px; font-size:.625rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:700;
}
.vd-form input{
  flex:1; min-width:0; background:transparent; border:0; padding:.7rem 0;
  font-family:inherit; font-size:.9rem; color:var(--ink);
}
.vd-form input::placeholder{ color:var(--ink-mute); }
.vd-form input:focus{ outline:0; }
.vd-onay{
  display:flex; gap:.55rem; align-items:flex-start; cursor:pointer;
  font-size:.72rem; line-height:1.5; color:var(--ink-soft); margin-top:.15rem;
}
.vd-onay input{ width:15px; height:15px; flex:none; margin:.15rem 0 0; accent-color:var(--brand); }
.vd-gonder{
  margin-top:.15rem; font-family:inherit; font-size:.9rem; font-weight:800; color:#fff;
  background:var(--brand); border:0; border-radius:var(--r-pill); padding:.8rem;
  display:flex; align-items:center; justify-content:center; gap:.55rem; cursor:pointer;
  transition:background var(--t-fast);
}
.vd-gonder:hover{ background:var(--brand-600); }

.vd-cta{ display:grid; gap:.4rem; }
.vd-cta a{
  display:flex; align-items:center; gap:.7rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.7rem .85rem; font-size:.8125rem; font-weight:700;
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.vd-cta a:hover{ border-color:var(--brand); background:var(--brand-050); transform:translateX(3px); }
.vd-cta a .ik{ color:var(--brand); flex:none; display:grid; place-items:center; }
.vd-cta a em{
  margin-left:auto; font-style:normal; font-size:.625rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
}
.vd-gizli{
  margin:.7rem 0 0; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); text-align:center; font-weight:600;
}

/* ---------- MOBİL: alt yaprak ---------- */
@media (max-width:560px){
  .vd{ left:.75rem; right:.75rem; bottom:.75rem; width:auto; }
  .vd-panel{ height:min(78vh,560px); max-height:calc(100vh - 5.5rem); }
  .vd-cengel{ gap:.6rem; }
  .vd-balon .mtn{ font-size:.85rem; }
  .vd-bas .dr{ letter-spacing:.03em; }
  .vd-bas .dr .uzun{ display:none; }
  .vd-bas .dr .kisa{ display:inline; }
}

@media (prefers-reduced-motion:reduce){
  .vd-cengel.gir .vd-avatar::after{ animation:none; }
  .vd-yaz span{ animation:none; }
  .vd-cengel .vd-avatar, .vd-cengel .vd-balon{ transition-duration:.01ms; transition-delay:0s; filter:none; }
  .vd-panel{ transition-duration:.01ms; }
  .vd-msj, .vd-ozet, .vd-cip button{ animation:none; }
}