/* ==========================================================
   Yardımcı (sağ alt): ana buton, çevresinde açılan butonlar,
   ipucu balonu ve panel (Sorular / Tema / Dil)
   ========================================================== */

.assist {
  --fab: 60px;
  --mini: 44px;
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 60;
  width: var(--fab);
  height: var(--fab);
}
body.menu-open .assist { display: none; }

/* ---------- Ana buton ---------- */
.assist-fab {
  position: relative;
  width: var(--fab);
  height: var(--fab);
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  background: var(--elev);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .45s var(--spring), border-color .3s;
  /* backwards: bitince hover dönüşümünü ezmesin */
  animation: fabIn .8s var(--spring) .35s backwards;
}
.assist-fab:hover { transform: scale(1.06); border-color: var(--accent); }
.assist-fab:active { transform: scale(.96); }
.assist-fab:focus-visible { outline-offset: 4px; }

@keyframes fabIn {
  from { opacity: 0; transform: translateY(24px) scale(.6); }
  to { opacity: 1; transform: none; }
}

/* yavaş dönen kesikli halka — hero çekirdeğiyle aynı dil */
.assist-fab-ring {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  pointer-events: none;
  animation: fabSpin 22s linear infinite;
}
.assist-fab-ring circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 26 10 4 10;
  opacity: .55;
  transition: opacity .3s;
}
@keyframes fabSpin { to { transform: rotate(360deg); } }
.assist.is-orbit .assist-fab-ring circle,
.assist.is-panel .assist-fab-ring circle { opacity: .9; }

/* açılışta dikkat çeken tek nabız */
.assist-fab::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.assist.is-intro .assist-fab::after { animation: fabPulse 2.2s var(--ease) .6s 2; }
@keyframes fabPulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ikon geçişi: ana ikon ↔ kapat */
.assist-fab .ico-main,
.assist-fab .ico-close {
  grid-area: 1 / 1;
  transition: transform .45s var(--spring), opacity .25s;
}
.assist-fab .ico-main { display: grid; place-items: center; }
.assist-fab .ico-main img { width: 32px; height: 32px; }
.assist-fab .ico-close { opacity: 0; transform: rotate(-90deg) scale(.5); color: var(--text); }
.assist.is-orbit .ico-main,
.assist.is-panel .ico-main { opacity: 0; transform: rotate(90deg) scale(.5); }
.assist.is-orbit .ico-close,
.assist.is-panel .ico-close { opacity: 1; transform: none; }
/* açılışta butonlar açık olsa da simge görünür kalır */
.assist.is-intro .ico-main { opacity: 1; transform: none; }
.assist.is-intro .ico-close { opacity: 0; transform: rotate(-90deg) scale(.5); }

/* ---------- Çevresinde açılan butonlar ---------- */
.assist-orbit li {
  position: absolute;
  left: calc((var(--fab) - var(--mini)) / 2);
  top: calc((var(--fab) - var(--mini)) / 2);
  width: var(--mini);
  height: var(--mini);
}

.orbit-btn {
  position: relative;
  width: var(--mini);
  height: var(--mini);
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  background: var(--elev);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(0, 0) scale(.3);
  pointer-events: none;
  /* kapanırken ters sırayla */
  transition:
    transform .35s var(--ease) calc((4 - var(--i)) * 30ms),
    opacity .2s ease calc((4 - var(--i)) * 30ms),
    border-color .2s, color .2s;
}
.assist.is-orbit .orbit-btn {
  opacity: 1;
  transform: translate(var(--x), var(--y)) scale(1);
  pointer-events: auto;
  transition:
    transform .6s var(--spring) calc(var(--i) * 55ms),
    opacity .25s ease calc(var(--i) * 55ms),
    border-color .2s, color .2s;
}
.assist.is-orbit .orbit-btn:hover,
.assist.is-orbit .orbit-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.orbit-btn:focus-visible { outline-offset: 3px; }

.orbit-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity .2s, transform .3s var(--ease);
}
.orbit-btn:hover .orbit-tip,
.orbit-btn:focus-visible .orbit-tip { opacity: 1; transform: translate(0, -50%); }

/* ---------- İpucu balonu ---------- */
/* ana butonun hemen üstünde, sağa hizalı */
.assist-hint {
  position: absolute;
  right: 0;
  bottom: calc(var(--fab) + 14px);
  width: max-content;
  max-width: calc(100vw - 32px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--elev);
  color: var(--text);
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .3s, transform .5s var(--spring), border-color .2s;
}
.assist-hint:hover { border-color: var(--accent); }
.assist-hint.is-visible { opacity: 1; transform: none; }
.assist-hint-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: hintBlink 1.8s ease-in-out infinite;
}
@keyframes hintBlink { 50% { opacity: .3; } }

/* ---------- Panel ---------- */
.assist-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(384px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 120px));
  max-height: min(600px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--elev);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transition: opacity .22s ease, transform .5s var(--spring);
}
.assist-panel.is-visible { opacity: 1; transform: none; }

.assist-head { padding: 18px 18px 0; }
.assist-kicker { font-size: 10.5px; letter-spacing: .12em; color: var(--accent-text); }
.assist-title {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* segment sekmeler, kayan gösterge */
.assist-tabs {
  --n: 3;
  --idx: 0;
  position: relative;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  padding: 4px;
  border-radius: 11px;
  background: var(--hover-tint);
}
.assist-tabs-ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  inset-inline-start: 4px;
  width: calc((100% - 8px) / var(--n));
  border-radius: 8px;
  background: var(--elev);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transform: translateX(calc(var(--idx) * 100%));
  transition: transform .45s var(--spring);
}
.assist-tabs button {
  position: relative;
  z-index: 1;
  height: 34px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: color .2s;
}
.assist-tabs button[aria-selected="true"] { color: var(--text); }
.assist-tabs button:focus-visible { outline-offset: -2px; }

.assist-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 16px;
}
.assist-pane.is-entering { animation: paneIn .4s var(--ease) both; }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.assist-foot {
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line);
}
.assist-demo { width: 100%; min-height: 44px; font-weight: 500; }

.assist-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Sorular ---------- */
.assist-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--muted);
  transition: border-color .2s;
}
.assist-search:focus-within { border-color: var(--accent); }
.assist-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.assist-search input::placeholder { color: var(--muted); }
.assist-search input::-webkit-search-cancel-button { filter: grayscale(1); }

.faq-list { margin-top: 8px; }
.faq-item {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
  animation: faqIn .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.faq-item:hover,
.faq-item:focus-visible { background: var(--hover-tint); }
.faq-item:focus-visible { outline-offset: -2px; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.faq-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-text); }
.faq-q { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; }
.faq-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.faq-go { color: var(--muted); transition: transform .3s var(--ease), color .2s; }
.faq-item:hover .faq-go,
.faq-item:focus-visible .faq-go { transform: translateX(3px); color: var(--accent); }
.faq-empty { margin: 18px 4px 6px; font-size: 13.5px; color: var(--muted); }

/* ---------- Tema ---------- */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.theme-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .2s, transform .35s var(--spring);
}
.theme-opt:hover { transform: translateY(-2px); border-color: var(--line-3); }
.theme-opt[aria-pressed="true"] { border-color: var(--accent); }
.theme-opt[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotIn .4s var(--spring) both;
}
@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
.theme-name { font-size: 13px; font-weight: 500; }

.theme-swatch {
  position: relative;
  display: block;
  height: 64px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.theme-swatch i {
  position: absolute;
  left: 10px;
  height: 4px;
  border-radius: 2px;
}
.theme-swatch i:nth-child(1) { top: 14px; width: 42%; }
.theme-swatch i:nth-child(2) { top: 26px; width: 62%; }
.theme-swatch i:nth-child(3) { top: 42px; width: 26%; background: var(--accent) !important; }

.sw-dark { background: #0D0E10; }
.sw-dark i { background: rgba(255, 255, 255, .28); }
.sw-light { background: #F5F4F0; }
.sw-light i { background: rgba(18, 19, 21, .22); }
.sw-navy { background: #0A1020; }
.sw-navy i { background: rgba(174, 190, 230, .32); }
.sw-pearl { background: #F3F5F8; }
.sw-pearl i { background: rgba(15, 23, 38, .2); }
.sw-stone { background: #E3E0D9; }
.sw-stone i { background: rgba(18, 19, 21, .24); }
.sw-system { display: flex; }
.sw-system b { flex: 1 1 50%; }
.sw-system b:first-child { background: #F5F4F0; }
.sw-system b:last-child { background: #0D0E10; }

/* ---------- Dil ---------- */
.lang-list { display: flex; flex-direction: column; gap: 8px; }
.lang-opt {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.lang-opt:hover { background: var(--hover-tint); }
.lang-opt[aria-pressed="true"] { border-color: var(--accent); }
.lang-code {
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: 8px;
  background: var(--hover-tint);
  font-size: 12px;
  font-weight: 500;
}
.lang-opt[aria-pressed="true"] .lang-code { background: var(--accent); color: var(--on-accent); }
.lang-name { font-size: 14.5px; font-weight: 500; display: flex; flex-direction: column; line-height: 1.3; }
.lang-name small { font-size: 12px; font-weight: 400; color: var(--muted); }
.lang-check { color: var(--accent); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s var(--spring); }
.lang-opt[aria-pressed="true"] .lang-check { opacity: 1; transform: none; }

/* ---------- Küçük ekranlar ---------- */
@media (max-width: 560px) {
  .assist { --fab: 56px; --mini: 42px; }
  .assist-hint { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .assist-fab-ring { animation: none; }
}