/* =============================================================
   ENYED — Preloader, ScrollProgress & Help FAB (10. Modül)
   ============================================================= */
#preloader {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  transition: transform .9s cubic-bezier(.76,0,.24,1), opacity .6s ease .1s;
}
#preloader.leaving { transform: translateY(-100%); opacity: .4; }
.preloader-mark { position: relative; width: 74px; height: 74px; }
.preloader-mark svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.preloader-mark circle { fill: none; stroke-width: 1.4; }
.preloader-mark .track { stroke: rgba(255, 255, 255, .14); }
.preloader-mark .bar { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 214; stroke-dashoffset: 214; transition: stroke-dashoffset .25s linear; }
.preloader-mark img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; }
.preloader-word { font-family: "Space Grotesk"; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--dim); display: flex; gap: 14px; align-items: center; }
.preloader-word b { color: var(--gold-bright); font-weight: 500; min-width: 34px; text-align: left; }
.preloader-line { width: 180px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.preloader-line i { position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: var(--gold); animation: preloaderSweep 1.3s ease-in-out infinite; }
@keyframes preloaderSweep { 0% { left: -40%; } 100% { left: 100%; } }

.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--gold); z-index: 300; width: 0%; transition: width .05s linear; }

.help-fab-wrap { position: fixed; right: 28px; bottom: 28px; z-index: 250; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.help-fab {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--gold); color: #0B1220; border: none; border-radius: var(--radius-pill);
  padding: 15px 22px 15px 16px; cursor: pointer; box-shadow: 0 10px 30px rgba(1, 36, 78, .35);
  font-family: "Space Grotesk"; font-size: 13px; font-weight: 600; letter-spacing: .3px;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.help-fab:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(1, 36, 78, .45); }
.help-fab .icon-wrap {
  position: relative; width: 34px; height: 34px; border-radius: 50%; background: rgba(11, 18, 32, .16);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.help-fab .icon-wrap svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.help-fab .ping { position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: .6; animation: fabPing 2.2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes fabPing { 0% { transform: scale(1); opacity: .55; } 75%, 100% { transform: scale(1.9); opacity: 0; } }
.help-fab-text { white-space: nowrap; max-width: 170px; overflow: hidden; transition: max-width .35s ease, opacity .3s, margin .35s; }

.help-panel {
  position: absolute; bottom: calc(100% + 14px); right: 0; width: 260px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; transform-origin: bottom right;
  transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
.help-panel.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.help-panel h4 { font-family: "Space Grotesk"; font-size: 14px; margin-bottom: 4px; }
.help-panel p { color: var(--dim); font-size: 12.5px; margin-bottom: 14px; line-height: 1.5; }
.help-action {
  display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px;
  color: inherit; text-decoration: none; font-size: 13px; transition: background .2s; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left; font-family: inherit;
}
.help-action:hover { background: rgba(255, 255, 255, .06); }
.help-action .ai {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.help-action svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.help-action b { display: block; font-size: 12.5px; }
.help-action span { display: block; color: var(--dim); font-size: 11px; margin-top: 1px; }

/* Responsive Adjustments — Help FAB on Mobile */
@media (max-width: 768px) {
  .help-fab-wrap {
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .help-fab {
    padding: 10px 14px 10px 10px;
    font-size: 12px;
  }
  .help-fab .icon-wrap {
    width: 30px;
    height: 30px;
  }
  .help-fab-text {
    max-width: 120px;
  }
  .help-panel {
    width: min(280px, calc(100vw - 32px));
    right: 0;
  }
}

@media (max-width: 420px) {
  .help-fab {
    padding: 10px;
    border-radius: 50%;
  }
  .help-fab-text {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .help-fab, .help-action { cursor: pointer; }
}