/* Vaybak! Vayo yardım arkadaşı (SSS botu) ve /tr|en/faq sayfası: site.css'e ek. Renk ve yazı tipi değişkenleri site.css'ten gelir
   (--bg, --panel, --ink, --muted, --chip, --brand, --link, --warm, --shadow, --focus), bu yüzden açık/koyu tema kendiliğinden uyar.
   Değişince bu dosyanın ?v= numarasını artır. */

/* ---- Başlatıcı (56 px, sağ alt). Betik yoksa SSS sayfasına giden bir bağlantıdır; betik onu düğmeye çevirir ---- */
.vayo-fab {
  position: fixed; z-index: 20; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  display: block; width: 3.5rem; height: 3.5rem; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--brand); color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 .35rem .9rem var(--shadow), 0 .15rem 0 var(--shadow);
}
.vayo-fab img { display: block; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.vayo-fab:focus-visible { border-radius: 50%; outline-offset: 4px; }
/* Başlatıcı altbilginin son bağlantılarını örtmesin */
.vayo-fab + footer { padding-bottom: 5.5rem; }
@keyframes vayo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.28rem); } }
@media (prefers-reduced-motion: no-preference) {
  .vayo-fab img { animation: vayo-float 3.4s ease-in-out infinite; }
  .vayo-fab:hover img, .vayo-fab:focus-visible img { animation-play-state: paused; }
  .vayo-fab:hover { transform: translateY(-2px); }
}

/* ---- Panel (modal <dialog>: odak tuzağı, Escape ve arka planın devre dışı kalması tarayıcıdan) ---- */
.vh-dialog {
  position: fixed; inset: auto max(1rem, env(safe-area-inset-right, 0px)) calc(5.25rem + env(safe-area-inset-bottom, 0px)) auto;
  margin: 0; padding: 0; border: 0; max-width: none; max-height: none; overflow: hidden;
  width: min(24rem, calc(100vw - 2rem));
  height: min(37rem, calc(100vh - 7rem)); height: min(37rem, calc(100dvh - 7rem));
  border-radius: 1.75rem; background: var(--bg); color: var(--ink);
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, .3), 0 .3rem 0 var(--shadow);
}
.vh-dialog:not([open]) { display: none; }
.vh-dialog[open] { display: flex; }
.vh-dialog::backdrop { background: rgba(18, 21, 30, .32); }
@media (max-width: 30rem) {
  .vh-dialog {
    inset: auto .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)) .5rem; width: auto; border-radius: 1.5rem;
    height: min(40rem, calc(100vh - 1rem)); height: min(40rem, calc(100dvh - 1rem));
  }
}
@keyframes vh-pop { from { opacity: 0; transform: translateY(.75rem) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .vh-dialog[open] { animation: vh-pop .18s ease-out; }
}
.vh-card { display: flex; flex-direction: column; width: 100%; min-height: 0; }

.vh-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .7rem .7rem 1rem; background: var(--warm); color: var(--warm-ink); }
.vh-hav { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.vh-ht { min-width: 0; }
.vh-ht h2 { margin: 0; font-size: 1.5rem; line-height: 1.05; font-weight: 800; }
.vh-ht p { margin: 0; font-size: .95rem; line-height: 1.25; }
.vh-close {
  flex: none; margin-left: auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: .15rem solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.vh-close svg { width: 1.2rem; height: 1.2rem; }
.vh-close:hover { background: rgba(255, 255, 255, .35); }
.vh-dialog :focus-visible { outline-offset: 2px; }

/* ---- Sohbet ---- */
.vh-log {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .7rem; padding: .9rem .85rem .6rem;
}
@media (prefers-reduced-motion: no-preference) { .vh-log { scroll-behavior: smooth; } }
.vh-hero { display: flex; justify-content: center; }
.vh-hero img { width: 6rem; height: 6rem; }
.vh-msg { display: flex; align-items: flex-end; gap: .5rem; min-width: 0; }
.vh-me { justify-content: flex-end; }
.vh-av { flex: none; width: 2rem; height: 2rem; border-radius: 50%; }
.vh-av.vh-big { width: 3.25rem; height: 3.25rem; border-radius: 0; align-self: flex-start; }
.vh-b {
  min-width: 0; max-width: calc(100% - 2.5rem); padding: .6rem .85rem .7rem; border-radius: 1.2rem 1.2rem 1.2rem .35rem;
  background: var(--panel); color: var(--ink); box-shadow: 0 .15rem 0 var(--shadow); line-height: 1.4; overflow-wrap: anywhere;
}
.vh-me .vh-b { border-radius: 1.2rem 1.2rem .35rem 1.2rem; background: var(--brand); color: #fff; }
.vh-more { display: block; width: fit-content; margin-top: .25rem; padding: .45rem 0 .15rem; color: var(--link); font-weight: 800; text-underline-offset: .2em; }
.vh-links { display: flex; flex-direction: column; align-items: flex-start; }
.vh-hint { margin: .1rem 0 -.3rem 2.5rem; color: var(--muted); font-size: .95rem; }

.vh-chips, .vh-opts { display: flex; flex-wrap: wrap; gap: .45rem; margin-left: 2.5rem; }
.vh-opts { flex-direction: column; align-items: flex-start; gap: .4rem; }
.vh-chip, .vh-q {
  max-width: 100%; min-height: 2.75rem; padding: .35rem .95rem .4rem; border: .15rem solid var(--link); border-radius: 999px;
  background: var(--panel); color: var(--link); font: inherit; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer;
}
.vh-chip { font-family: var(--font-head); font-size: 1.05rem; }
.vh-q { border-radius: 1.1rem; overflow-wrap: anywhere; }
.vh-chip:hover, .vh-q:hover { background: var(--chip); }

.vh-form { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem .35rem; border-top: .12rem solid var(--chip); background: var(--bg); }
.vh-note { margin: 0; padding: 0 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--bg); color: var(--muted); font-size: .8rem; line-height: 1.3; text-align: center; }
.vh-form input {
  flex: 1 1 auto; min-width: 0; min-height: 2.9rem; padding: 0 1rem; border: .15rem solid var(--chip); border-radius: 999px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 1rem;
}
.vh-form input::placeholder { color: var(--muted); opacity: 1; }
.vh-send {
  flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; cursor: pointer; box-shadow: 0 .15rem 0 var(--brand-deep);
}
.vh-send svg { width: 1.3rem; height: 1.3rem; }
.vh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ---- /tr|en/faq sayfası (trust.css'in .tc-sec, .tc-ico ve .tc-soon sınıfları üstüne) ---- */
.faq .s-hero { gap: .75rem; }
.faq-vayo { width: 9rem; height: 9rem; }
@media (prefers-reduced-motion: no-preference) { .faq-vayo { animation: vayo-float 3.6s ease-in-out infinite; } }
.faq .s-hero button.ghost { background: transparent; cursor: pointer; }
.faq .s-hero button.ghost:hover { background: var(--chip); }
.faq .s-hero .ghost[hidden] { display: none; }
.faq-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.faq-jump a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem .1rem; border-radius: 999px; background: var(--chip); color: var(--ink);
  box-shadow: 0 .15rem 0 var(--shadow); font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; line-height: 1.1; text-decoration: none;
}
.faq-jump a:hover { color: var(--link); }
.faq .tc-sec { scroll-margin-top: 5rem; }
.faq .tc-sec h2 { display: flex; align-items: center; gap: .7rem; }
.faq .tc-sec h2 .tc-ico { flex: none; width: 2.6rem; height: 2.6rem; }
.faq .tc-sec h2 .tc-ico svg { width: 1.5rem; height: 1.5rem; }
.faq .tc-doc > .tc-sec:nth-child(4n+1) .tc-ico { --c: var(--kivil); --ink-c: var(--kivil-ink); }
.faq .tc-doc > .tc-sec:nth-child(4n+2) .tc-ico { --c: var(--explore); --ink-c: var(--explore-ink); }
.faq .tc-doc > .tc-sec:nth-child(4n+3) .tc-ico { --c: var(--watch); --ink-c: var(--watch-ink); }
.faq .tc-doc > .tc-sec:nth-child(4n) .tc-ico { --c: var(--play); --ink-c: var(--play-ink); }
.faq-item { margin: 0 -.75rem; padding: 0 .75rem .35rem; border-radius: 1.1rem; scroll-margin-top: 5rem; }
.faq-item:target { background: var(--chip); }
.faq-item h3 { margin-top: .9rem; }
.faq-see { font-size: .95rem; }
.faq .support-band img { width: 5rem; height: 5rem; }