/* Sallakazan — kampanya akışı (Telegram Mini App) */

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --bg-deep: #080e1f;
  --bg: #0c1530;
  --surface: #111e3a;
  --gold: #d4af37;
  --gold-light: #f0c840;
  --gold-dim: rgba(212, 175, 55, 0.25);
  --gold-glow: rgba(212, 175, 55, 0.5);
  --text: #ffffff;
  --muted: #c5d3e8;
  --accent: #38bdf8;
  --violet: #a855f7;
  --violet-dim: rgba(168, 85, 247, 0.25);
  --cyan: #06b6d4;
  --pink: #f472b6;
  --green: #4ade80;
  --radius: 18px;
  --font: "DM Sans", system-ui, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════
   ANIMATED BACKGROUND — MESH BLOBS
═══════════════════════════════════════ */
@keyframes blob1 {
  0%, 100% { transform: translate(0, 0)    scale(1); }
  25%       { transform: translate(55px, 40px) scale(1.14); }
  50%       { transform: translate(20px, 90px) scale(0.9); }
  75%       { transform: translate(-30px, 30px) scale(1.07); }
}
@keyframes blob2 {
  0%, 100% { transform: translate(0, 0)      scale(1); }
  33%       { transform: translate(-65px, -40px) scale(1.2); }
  66%       { transform: translate(35px, -75px)  scale(0.86); }
}
@keyframes blob3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
  50%       { transform: translate(-50%, -50%) scale(1.35) rotate(180deg); }
}
@keyframes blob4 {
  0%, 100% { transform: translate(0, 0)   scale(1); }
  40%       { transform: translate(-50px, 60px) scale(1.15); }
  70%       { transform: translate(40px, -30px) scale(0.88); }
}

.bg-blobs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-blobs span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.bg-blobs span:nth-child(1) {
  width: 420px;
  height: 420px;
  background: #6d28d9;
  opacity: 0.16;
  top: -130px;
  left: -100px;
  filter: blur(95px);
  animation: blob1 15s ease-in-out infinite;
}

.bg-blobs span:nth-child(2) {
  width: 360px;
  height: 360px;
  background: #0e7490;
  opacity: 0.15;
  bottom: -80px;
  right: -80px;
  filter: blur(85px);
  animation: blob2 19s ease-in-out infinite;
}

.bg-blobs span:nth-child(3) {
  width: 300px;
  height: 300px;
  background: #92400e;
  opacity: 0.13;
  top: 45%;
  left: 50%;
  filter: blur(100px);
  animation: blob3 24s ease-in-out infinite;
}

.bg-blobs span:nth-child(4) {
  width: 250px;
  height: 250px;
  background: #be185d;
  opacity: 0.1;
  top: 20%;
  right: -40px;
  filter: blur(80px);
  animation: blob4 20s ease-in-out infinite;
}

html,
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff !important;
  /* !important: Telegram'ın tema rengi enjeksiyonuna karşı */
  background: #040810 !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

body::before {
  width: 1px;
  height: 100dvh;
  top: 0;
  left: 50%;
  background: linear-gradient(180deg, transparent, rgba(168, 85, 247, 0.06), transparent);
}

body::after {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.04), transparent);
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0 auto;
  padding: 20px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
}

.step {
  display: none;
  animation: fadeIn 0.35s ease;
}

.step.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lead {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid rgba(168, 85, 247, 0.5);
}

.lead strong {
  color: var(--gold-light);
  font-weight: 700;
}

h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 14px;
  text-align: center;
  /* Fallback renk — gradient text çalışmadığında */
  color: #f0c840;
  background: linear-gradient(90deg, var(--gold-light) 0%, #ffe98a 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  margin: 7px auto 0;
  border-radius: 1px;
}

@keyframes borderSpin {
  to { --angle: 360deg; }
}

/* Fallback: @property / conic-gradient desteklenmeyenler için statik gradient kart */
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 16px;
  transition: box-shadow 0.3s;
  /* Güvenli fallback — tüm tarayıcılarda çalışır */
  background: rgba(12, 21, 48, 0.92);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(168, 85, 247, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* backdrop-filter desteği varsa glassmorphism uygula */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card {
    background: linear-gradient(165deg, rgba(17, 30, 58, 0.72) 0%, rgba(10, 20, 45, 0.78) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

/* @property + conic-gradient desteği varsa animasyonlu kenar */
@supports (background: conic-gradient(from 0deg, red, blue)) {
  .card {
    border: 1px solid transparent;
    background:
      linear-gradient(165deg, rgba(17, 30, 58, 0.72) 0%, rgba(10, 20, 45, 0.78) 100%) padding-box,
      conic-gradient(
        from var(--angle),
        rgba(56, 189, 248, 0.5) 0deg,
        rgba(168, 85, 247, 0.65) 90deg,
        rgba(212, 175, 55, 0.55) 180deg,
        rgba(56, 189, 248, 0.5) 360deg
      ) border-box;
    animation: borderSpin 6s linear infinite;
  }
}

.card:focus-within {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.card:focus-within {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-5px) rotate(2deg); }
}

.icon-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.2), var(--gold-dim));
  border: 1px solid rgba(168, 85, 247, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.2), 0 0 0 4px rgba(168, 85, 247, 0.06);
  animation: badgeFloat 3.5s ease-in-out infinite;
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 0.98rem;
  font-family: var(--font);
  font-weight: 500;
  /* iOS WebKit autocomplete sarı arka planını engelle */
  -webkit-box-shadow: 0 0 0 1000px rgba(8, 14, 31, 0.9) inset;
}

.field input::placeholder {
  color: rgba(197, 211, 232, 0.35);
  font-weight: 400;
}


@keyframes btnShimmer {
  0%        { left: -80%; }
  55%, 100% { left: 130%; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #f5d060 0%, #d4930a 50%, #e8b820 100%);
  color: #0a1628;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  gap: 8px;
}

.btn-gold::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  animation: btnShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

.btn-gold:not(:disabled):hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 28px rgba(212, 175, 55, 0.65), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  transform: translateY(-1px);
}

.btn-gold:not(:disabled):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(10, 22, 40, 0.2);
  border-top-color: #0a1628;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}

.btn.loading .btn-spinner {
  display: inline-block;
}

.btn-outline {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-transform: none;
  font-weight: 500;
  margin-top: 10px;
}

.channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
  transition: background 0.2s, border-color 0.2s;
}

.channel-row:hover {
  background: rgba(212, 175, 55, 0.06);
  border-color: rgba(212, 175, 55, 0.22);
}

.channel-row a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(126, 184, 255, 0.1);
  border: 1px solid rgba(126, 184, 255, 0.25);
  border-radius: 8px;
  padding: 6px 14px;
  white-space: nowrap;
  transition: background 0.2s;
}

.channel-row a:hover {
  background: rgba(126, 184, 255, 0.22);
}

.channel-row .meta {
  flex: 1;
  min-width: 0;
}

.channel-row .meta strong {
  display: block;
  font-size: 0.88rem;
}

.channel-row .meta span {
  font-size: 0.75rem;
  color: var(--muted);
}

@keyframes giftOrb {
  0%, 100% { transform: translate(-50%, -55%) scale(1);   opacity: 0.5; }
  50%       { transform: translate(-50%, -55%) scale(1.6); opacity: 0.85; }
}

@keyframes giftOrbRing {
  from { transform: translate(-50%, -55%) rotate(0deg); }
  to   { transform: translate(-50%, -55%) rotate(360deg); }
}

@keyframes giftPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 14px 32px rgba(212, 175, 55, 0.65))
            drop-shadow(0 0 20px rgba(168, 85, 247, 0.4));
  }
}

@keyframes giftShake {
  0%   { transform: scale(1) rotate(0deg); }
  10%  { transform: scale(1.15) rotate(-12deg); }
  22%  { transform: scale(1.28) rotate(14deg); }
  35%  { transform: scale(1.22) rotate(-9deg); }
  50%  { transform: scale(1.18) rotate(9deg); }
  65%  { transform: scale(1.1) rotate(-5deg); }
  80%  { transform: scale(1.04) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.gift-stage {
  position: relative;
  text-align: center;
  padding: 16px 0 8px;
}

.gift-stage::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.13) 0%, rgba(168, 85, 247, 0.06) 50%, transparent 70%);
  pointer-events: none;
  animation: giftOrb 2.8s ease-in-out infinite;
  z-index: 0;
}

.gift-stage::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(0deg);
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.25);
  pointer-events: none;
  animation: giftOrbRing 8s linear infinite;
  z-index: 0;
}

.gift-subtitle {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--violet);
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.8;
}

.gift-box {
  position: relative;
  z-index: 1;
  width: 140px;
  height: 140px;
  margin: 16px auto 12px;
  cursor: pointer;
  user-select: none;
  display: block;
  animation: giftPulse 2.8s ease-in-out infinite;
  will-change: transform;
}

.gift-box dotlottie-player {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.gift-stage.gift-unlocked .gift-box {
  animation: giftShake 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97),
             giftPulse 2.8s ease-in-out 0.65s infinite;
  filter: drop-shadow(0 0 28px rgba(212, 175, 55, 0.9))
          drop-shadow(0 0 50px rgba(240, 200, 64, 0.4));
}

.gift-stage.gift-unlocked::before {
  background: radial-gradient(circle, rgba(240, 200, 64, 0.25) 0%, rgba(168, 85, 247, 0.1) 50%, transparent 70%);
  animation: giftOrb 1.4s ease-in-out infinite;
}

.gift-hint {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.progress-taps {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  margin: 8px 0 6px;
}

@keyframes progressShine {
  0%        { left: -60%; }
  60%, 100% { left: 120%; }
}

.tap-progress-bar {
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tap-progress-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet) 0%, var(--gold-light) 60%, var(--gold) 100%);
  border-radius: 4px;
  transition: width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 10px var(--gold-glow), 0 0 20px rgba(168, 85, 247, 0.4);
}

.tap-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
  border-radius: 4px;
  animation: progressShine 2s ease-in-out infinite;
}

.sensor-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 8px;
}

.msg {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.msg.visible {
  display: block;
  animation: msgSlideIn 0.3s ease;
}

.msg.err {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fecaca;
}

.msg.ok {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #a7f3d0;
}

.msg.neutral {
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.25);
}

.result-panel {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
}

.result-panel h2 {
  font-size: 1.2rem;
  font-weight: 800;
}

.result-lead {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.5;
  color: rgba(197, 211, 232, 0.9);
  letter-spacing: 0.01em;
}

.result-body {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(197, 211, 232, 0.85);
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.65;
}

.result-dates {
  text-align: center;
  margin: 0 0 18px;
  /* box styling added in result panel section below */
}

.result-dates .date-line {
  display: block;
  margin-bottom: 14px;
}

.result-dates .date-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.result-dates .date-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.result-dates .date-note {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 10px;
}

@keyframes fsPop {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(2deg); }
  80%  { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes fsGlow {
  0%, 100% { filter: drop-shadow(0 2px 12px rgba(212, 175, 55, 0.5)); }
  50%       { filter: drop-shadow(0 4px 24px rgba(212, 175, 55, 0.85)) drop-shadow(0 0 40px rgba(168, 85, 247, 0.4)); }
}

.result-fs {
  font-size: 3.5rem;
  font-weight: 800;
  text-align: center;
  margin: 14px 0;
  background: linear-gradient(135deg, var(--violet) 0%, var(--gold-light) 45%, #fff6d4 75%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
  text-shadow: none;
  animation: fsGlow 3s ease-in-out infinite;
}

#step-result.active .result-fs {
  animation: fsPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both, fsGlow 3s ease-in-out 0.85s infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); }
}

.result-badge {
  display: inline-block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 20px;
  padding: 5px 18px;
  letter-spacing: 0.05em;
  animation: badgePulse 2s ease-in-out infinite;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e8eef8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.topbar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), rgba(212, 175, 55, 0.4), transparent);
}

.user-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px 10px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes brandShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.topbar-brand {
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, var(--gold-light), #ffffff, var(--violet), var(--gold-light));
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brandShimmer 4s linear infinite;
}

.topbar strong {
  color: var(--text);
}

/* Numbered step indicator */
.step-nav {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 24px;
  padding: 0 4px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.35s ease;
  position: relative;
}

.step-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.35s ease;
  white-space: nowrap;
}

.step-line {
  flex: 1;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
  margin-top: 14px;
  border-radius: 1px;
  transition: background 0.35s ease;
  min-width: 12px;
}

/* ── Active step ── */
.shell:has(#step-profile.active) .step-item[data-for="profile"] .step-num {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}
.shell:has(#step-profile.active) .step-item[data-for="profile"] .step-label { color: var(--accent); }

.shell:has(#step-channels.active) .step-item[data-for="channels"] .step-num {
  background: rgba(6, 182, 212, 0.2);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.55);
}
.shell:has(#step-channels.active) .step-item[data-for="channels"] .step-label { color: var(--cyan); }

.shell:has(#step-gift.active) .step-item[data-for="gift"] .step-num {
  background: rgba(240, 200, 64, 0.2);
  border-color: var(--gold-light);
  color: var(--gold-light);
  box-shadow: 0 0 14px rgba(240, 200, 64, 0.55);
}
.shell:has(#step-gift.active) .step-item[data-for="gift"] .step-label { color: var(--gold-light); }

.shell:has(#step-result.active) .step-item[data-for="result"] .step-num {
  background: rgba(74, 222, 128, 0.2);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.55);
}
.shell:has(#step-result.active) .step-item[data-for="result"] .step-label { color: var(--green); }

/* ── Completed steps (before active) ── */
.shell:has(#step-channels.active) .step-item[data-for="profile"] .step-num,
.shell:has(#step-gift.active) .step-item[data-for="profile"] .step-num,
.shell:has(#step-gift.active) .step-item[data-for="channels"] .step-num,
.shell:has(#step-result.active) .step-item[data-for="profile"] .step-num,
.shell:has(#step-result.active) .step-item[data-for="channels"] .step-num,
.shell:has(#step-result.active) .step-item[data-for="gift"] .step-num {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.6);
  color: var(--green);
}

/* Completed connector lines */
.shell:has(#step-channels.active) .step-line:first-of-type,
.shell:has(#step-gift.active) .step-line:nth-of-type(1),
.shell:has(#step-gift.active) .step-line:nth-of-type(2),
.shell:has(#step-result.active) .step-line {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.5), rgba(74, 222, 128, 0.2));
}

.dev-banner {
  display: none;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(212, 175, 55, 0.3);
  margin-bottom: 14px;
  background: rgba(212, 175, 55, 0.04);
}

.dev-banner.visible {
  display: block;
}

/* Input field animation */
.field input {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2), 0 0 12px rgba(168, 85, 247, 0.15);
}

/* Sensor status info style */
.sensor-status:not(:empty) {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  margin-top: 6px;
}

/* Channel row accent */
.channel-row a {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(168, 85, 247, 0.08));
  border-color: rgba(56, 189, 248, 0.3);
}

/* ═══════════════════════════════════════
   RESULT PANEL — FULL ANIMATION SUITE
═══════════════════════════════════════ */

/* Spinning ray burst behind the icon */
@keyframes raysRotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

.result-rays {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: conic-gradient(
    from 0deg,
    rgba(212,175,55,0.22) 0deg,    transparent 12deg,
    transparent 24deg, rgba(168,85,247,0.18) 36deg,  transparent 48deg,
    transparent 60deg, rgba(212,175,55,0.2) 72deg,   transparent 84deg,
    transparent 96deg, rgba(56,189,248,0.18) 108deg, transparent 120deg,
    transparent 132deg,rgba(212,175,55,0.22) 144deg, transparent 156deg,
    transparent 168deg,rgba(168,85,247,0.18) 180deg, transparent 192deg,
    transparent 204deg,rgba(212,175,55,0.2) 216deg,  transparent 228deg,
    transparent 240deg,rgba(56,189,248,0.18) 252deg, transparent 264deg,
    transparent 276deg,rgba(212,175,55,0.22) 288deg, transparent 300deg,
    transparent 312deg,rgba(168,85,247,0.18) 324deg, transparent 336deg,
    transparent 348deg,rgba(212,175,55,0.2) 360deg
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}

#step-result.active .result-rays {
  opacity: 1;
  animation: raysRotate 9s linear infinite;
}

/* Confetti burst particles */
@keyframes confettiBurst {
  0%   { transform: scale(0); opacity: 1; }
  65%  { opacity: 0.9; }
  100% { transform: scale(1.1); opacity: 0; }
}

.result-confetti {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 96px;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

#step-result.active .result-confetti {
  animation: confettiBurst 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
  box-shadow:
    -70px -55px 0 4px rgba(240,200,64,0.95),
     70px -55px 0 4px rgba(168,85,247,0.95),
    -95px  8px  0 3px rgba(56,189,248,0.9),
     95px  8px  0 3px rgba(74,222,128,0.9),
      0px -80px  0 5px rgba(244,114,182,0.9),
    -50px  65px  0 3px rgba(240,200,64,0.8),
     50px  65px  0 3px rgba(168,85,247,0.8),
      0px  85px  0 3px rgba(56,189,248,0.75),
    -110px -20px 0 2px rgba(74,222,128,0.7),
     110px -20px 0 2px rgba(244,114,182,0.7),
    -35px -95px  0 3px rgba(240,200,64,0.75),
     35px -95px  0 3px rgba(168,85,247,0.75);
}

/* Slide-in keyframes */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance for every result element */
#step-result.active .result-lead    { animation: slideDown 0.45s ease 0s both; }

@keyframes resultIconBounce {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(5deg); }
  80%  { transform: scale(0.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
#step-result.active .icon-badge { animation: resultIconBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; }

/* Rainbow shimmer title only on result step */
@keyframes rainbowShimmer {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

#step-result.active h2 {
  background: linear-gradient(90deg,
    #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c084fc, #f472b6, #ffd93d, #ff6b6b
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: slideDown 0.45s ease 0.3s both, rainbowShimmer 3.5s linear 0.75s infinite;
}

/* FS number dramatic entrance */
#step-result.active .result-fs {
  animation: fsPop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both,
             fsGlow 3s ease-in-out 1.25s infinite;
}

#step-result.active .result-body    { animation: slideUp 0.45s ease 0.75s both; }
#step-result.active .result-divider { animation: slideUp 0.3s ease 0.68s both; }
#step-result.active .result-dates   { animation: slideUp 0.45s ease 0.9s both; }
#step-result.active .btn            { animation: slideUp 0.45s ease 1.05s both; }

/* Result card glows stronger when active */
#step-result.active .card {
  animation: borderSpin 4s linear infinite, resultCardGlow 3s ease-in-out 1.5s infinite;
}

@keyframes resultCardGlow {
  0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 40px rgba(168,85,247,0.08); }
  50%       { box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 70px rgba(212,175,55,0.22), 0 0 120px rgba(168,85,247,0.14); }
}

/* Divider between FS and body text */
.result-divider {
  width: 60px;
  height: 2px;
  margin: 4px auto 14px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--violet-dim), transparent);
  border-radius: 1px;
}

/* Result dates box */
.result-dates {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 12px 14px;
}

/* Result dates highlight */
.result-dates .date-value {
  color: var(--gold-light);
}

/* ═══════════════════════════════════════
   VIDEO EFEKT OVERLAY
═══════════════════════════════════════ */
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes videoScaleIn {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes skipSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.video-overlay {
  /* Her zaman fixed — display:none+fixed kombinasyonu WebView'da bozuluyor */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* Gizli halde — pointer-events kapalı, görünmez */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: overlayFadeIn 0.3s ease;
}

.video-overlay video {
  width: 100%;
  max-width: 480px;
  max-height: 80dvh;
  object-fit: contain;
  border-radius: 16px;
  animation: videoScaleIn 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) 0.1s both;
}

.video-skip {
  margin-top: 20px;
  padding: 10px 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: skipSlideIn 0.4s ease 0.8s both;
  transition: background 0.15s, color 0.15s;
}

.video-skip:active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}