/* =========================================================
   GLOBAL UI — Cross-cutting: Reading progress + WhatsApp float
   Her sayfada sabit. Premium, sezgisel, dikkat dağıtmayan.
   ========================================================= */

/* ---------- Reading progress bar (top hairline) ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 250; /* above nav */
  pointer-events: none;
}
.reading-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
    var(--brand-magenta) 0%,
    var(--brand-magenta-soft) 50%,
    var(--brand-indigo) 100%);
  box-shadow:
    0 0 8px rgba(230, 22, 115, 0.45),
    0 0 16px rgba(230, 22, 115, 0.2);
  border-radius: 0 2px 2px 0;
  will-change: width;
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress__bar { box-shadow: none; }
}

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 36px rgba(37, 211, 102, 0.36),
    0 4px 12px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  z-index: 200;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 320ms var(--ease-premium),
    box-shadow 320ms var(--ease-out),
    background 200ms var(--ease-out);
  /* Initial state — fade-in after page load */
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  animation: wa-enter 700ms var(--ease-premium) 800ms forwards;
}

@keyframes wa-enter {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.wa-float:hover {
  transform: translateY(-3px);
  background: #2ee277;
  box-shadow:
    0 20px 44px rgba(37, 211, 102, 0.44),
    0 6px 16px rgba(0, 0, 0, 0.2);
}
.wa-float:active { transform: translateY(-1px); }

.wa-float svg {
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 2;
}

/* Pulse ring — subtle, every 3.5s */
.wa-float::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: wa-pulse 3.2s ease-out infinite;
  animation-delay: 2s;
  pointer-events: none;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  80% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Tooltip — appears on hover (desktop only) */
.wa-float__tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #14141b;
  color: #fff;
  font-family: var(--ff-body);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-premium);
  letter-spacing: 0.01em;
}
.wa-float__tip::after {
  /* Caret pointing to button */
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #14141b;
}
.wa-float__tip strong {
  display: block;
  font-weight: 600;
  color: #fff;
}
.wa-float__tip span {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1px;
}

@media (hover: hover) and (min-width: 720px) {
  .wa-float:hover .wa-float__tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; opacity: 1; transform: none; }
  .wa-float::before { animation: none; opacity: 0; }
}

/* Mobile: tighter, no tooltip */
@media (max-width: 720px) {
  .wa-float { width: 54px; height: 54px; }
  .wa-float svg { width: 26px; height: 26px; }
  .wa-float__tip { display: none; }
}

/* =========================================================
   AI Required Badge — "AI Asistanı ile" cross-sell chip
   Kullanım: <span class="ai-required"><svg/>AI Asistanı ile</span>
   AI Asistan eklentisi gerektiren özelliklerin yanında kullanılır.
   ========================================================= */
.ai-required {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-pill, 999px);
  background: linear-gradient(135deg, rgba(230, 22, 115, 0.14), rgba(52, 60, 144, 0.12));
  border: 1px solid rgba(230, 22, 115, 0.22);
  color: var(--brand-magenta-deep, #c4145f);
  font-family: var(--ff-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.ai-required svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
/* Dark section içinde (founder, multi-outlet-dark vb.) — yumuşatılmış */
.section-dark .ai-required,
.insight .ai-required {
  background: linear-gradient(135deg, rgba(230, 22, 115, 0.18), rgba(52, 60, 144, 0.16));
  border-color: rgba(230, 22, 115, 0.32);
  color: #ff7fb4;
}