/* ============================================================
   AKBAK — Canlı Destek widget'ı
   Sağ alt köşe: "yukarı çık" düğmesinin ÜSTÜNDE durur.
   ============================================================ */

.dstk {
  --dstk-w: 372px;
  position: fixed; right: 26px; bottom: 88px; z-index: 95;
  font-family: var(--font-body);
}

/* ---------- Açma düğmesi ---------- */
.dstk-btn {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px 0 16px;
  border: 0; border-radius: 26px; cursor: pointer;
  background: var(--primary); color: #fff;
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  box-shadow: var(--shadow-md);
  transition: background .3s, transform .3s var(--ease), box-shadow .3s;
}
.dstk-btn:hover { background: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.dstk-btn svg { width: 22px; height: 22px; flex: none; }

/* Çevrimiçi noktası: mesai içinde yeşil, dışında gri. */
.dstk-dot {
  position: absolute; top: 6px; right: 12px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #9aa4bd; border: 2px solid var(--primary);
}
.dstk.is-open-hours .dstk-dot { background: #35d07f; }
.dstk.is-open-hours .dstk-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(53, 208, 127, .6); animation: dstk-pulse 2s infinite;
}
@keyframes dstk-pulse {
  0% { transform: scale(.7); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Okunmamış rozeti */
.dstk-badge {
  position: absolute; top: -6px; left: -6px; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 11px; background: #e5484d; color: #fff;
  font-size: .75rem; font-weight: 800; line-height: 22px; text-align: center;
  display: none;
}
.dstk-badge.is-on { display: block; }

/* ---------- Pencere ---------- */
.dstk-panel {
  position: absolute; right: 0; bottom: 66px;
  width: min(var(--dstk-w), calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 160px));
  display: none; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.dstk.is-open .dstk-panel { display: flex; animation: dstk-in .28s var(--ease); }
@keyframes dstk-in { from { opacity: 0; transform: translateY(14px); } }

.dstk-head {
  background: var(--navy-900); color: #fff; padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 12px;
}
.dstk-head h4 { color: #fff; font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 3px; }
.dstk-head p { color: #b9c5ec; font-size: .8rem; margin: 0; }
.dstk-head .dstk-x {
  margin-left: auto; background: transparent; border: 0; color: #b9c5ec;
  cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0 2px;
}
.dstk-head .dstk-x:hover { color: #fff; }

/* WhatsApp şeridi: pencere hangi ekranda olursa olsun DAİMA görünür. */
.dstk-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; background: #e9f9ef; color: #0f7a43;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  border-bottom: 1px solid #cdeedb; cursor: pointer;
  border-left: 0; border-right: 0; border-top: 0; width: 100%;
}
.dstk-wa:hover { background: #d9f4e5; color: #0b5c32; }
.dstk-wa svg { width: 18px; height: 18px; flex: none; }

.dstk-body { padding: 18px; overflow-y: auto; flex: 1; }
.dstk-body h5 { font-family: var(--font-display); font-size: .95rem; margin: 0 0 12px; }

/* ---------- Betikli akış: seçenek düğmeleri ---------- */
.dstk-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dstk-opt {
  padding: 12px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-soft); color: var(--ink); cursor: pointer;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  transition: border-color .2s, background .2s, color .2s;
}
.dstk-opt:hover { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary); }

/* ---------- Formlar ---------- */
.dstk-field { margin-bottom: 10px; }
.dstk-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.dstk-field input, .dstk-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font-body); font-size: .9rem; color: var(--ink); background: #fff;
}
.dstk-field input:focus, .dstk-field textarea:focus { outline: none; border-color: var(--primary-500); }
.dstk-check { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: var(--ink-soft); margin: 12px 0; }
.dstk-check input { margin-top: 2px; flex: none; }
.dstk-submit {
  width: 100%; padding: 12px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--primary); color: #fff; font-family: var(--font-body);
  font-size: .92rem; font-weight: 700;
}
.dstk-submit:hover { background: var(--navy-900); }
.dstk-submit:disabled { opacity: .6; cursor: default; }
.dstk-err { color: #c0392b; font-size: .78rem; margin: 8px 0 0; }
.dstk-ok { background: #e9f9ef; color: #0f7a43; padding: 12px; border-radius: 12px; font-size: .86rem; }

/* ---------- Mesai dışı ---------- */
.dstk-closed-note {
  background: #fff6e5; border: 1px solid #ffe0a8; color: #8a5a00;
  padding: 12px; border-radius: 12px; font-size: .86rem; margin-bottom: 14px;
}
.dstk-hours { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: 14px; }
.dstk-hours td { padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.dstk-hours td:last-child { text-align: right; font-weight: 700; color: var(--ink); }
.dstk-hours tr.is-today td { color: var(--primary); }

/* ---------- Yazışma ---------- */
.dstk-log { display: flex; flex-direction: column; gap: 8px; }
.dstk-msg { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: .87rem; line-height: 1.45; word-wrap: break-word; }
.dstk-msg .dstk-meta { display: block; font-size: .68rem; opacity: .65; margin-top: 3px; }
.dstk-msg.is-visitor { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.dstk-msg.is-agent { align-self: flex-start; background: var(--bg-soft); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.dstk-msg.is-bot { align-self: flex-start; background: var(--primary-50); color: var(--navy-800); border-bottom-left-radius: 4px; }
.dstk-msg.is-system { align-self: center; background: transparent; color: var(--ink-soft); font-size: .76rem; text-align: center; }

.dstk-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.dstk-compose textarea {
  flex: 1; resize: none; height: 42px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--font-body); font-size: .88rem;
}
.dstk-compose textarea:focus { outline: none; border-color: var(--primary-500); }
.dstk-compose button {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--primary); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.dstk-compose button:hover { background: var(--navy-900); }
.dstk-compose svg { width: 18px; height: 18px; }

.dstk-typing { font-size: .76rem; color: var(--ink-soft); padding: 0 18px 8px; }

@media (max-width: 480px) {
  .dstk { right: 16px; bottom: 80px; left: 16px; }
  .dstk-btn { margin-left: auto; }
  .dstk-panel { right: 0; left: 0; width: auto; }
  .dstk-opts { grid-template-columns: 1fr; }
}