/* ============================================================
   WELCOME SCREEN
   ============================================================ */

.screen-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 36px 52px;
  position: relative;
  background: var(--ground);
}

.welcome-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.welcome-stage-glow {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255, 82, 0, 0.18) 0%, transparent 65%);
  border-radius: 50%;
}

.welcome-stage-glow-top {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 82, 0, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.welcome-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

/* ── Waveform ── */
.waveform {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
}

.waveform-bar {
  width: 5px;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: bottom center;
  box-shadow: 0 0 10px rgba(255, 82, 0, 0.5);
  animation: wv-bounce var(--dur, 1.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.waveform-bar:nth-child(1)  { height: 22px; --delay: 0.00s; --dur: 1.20s; }
.waveform-bar:nth-child(2)  { height: 38px; --delay: 0.18s; --dur: 1.55s; }
.waveform-bar:nth-child(3)  { height: 28px; --delay: 0.36s; --dur: 1.10s; }
.waveform-bar:nth-child(4)  { height: 58px; --delay: 0.09s; --dur: 1.65s; }
.waveform-bar:nth-child(5)  { height: 44px; --delay: 0.27s; --dur: 1.30s; }
.waveform-bar:nth-child(6)  { height: 64px; --delay: 0.05s; --dur: 1.45s; }
.waveform-bar:nth-child(7)  { height: 32px; --delay: 0.42s; --dur: 1.25s; }
.waveform-bar:nth-child(8)  { height: 52px; --delay: 0.21s; --dur: 1.70s; }
.waveform-bar:nth-child(9)  { height: 40px; --delay: 0.33s; --dur: 1.35s; }
.waveform-bar:nth-child(10) { height: 24px; --delay: 0.48s; --dur: 1.15s; }
.waveform-bar:nth-child(11) { height: 48px; --delay: 0.12s; --dur: 1.50s; }
.waveform-bar:nth-child(12) { height: 20px; --delay: 0.57s; --dur: 1.22s; }

@keyframes wv-bounce {
  0%, 100% { transform: scaleY(0.28); opacity: 0.55; }
  50%       { transform: scaleY(1.00); opacity: 1.00; }
}

/* ── Logo ── */
.welcome-logo {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── Bottom content ── */
.welcome-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.welcome-eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.welcome-headline {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.22;
  text-align: center;
  color: var(--text);
  margin-bottom: 12px;
}

.welcome-sub {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.55;
  max-width: 270px;
  margin-bottom: 36px;
}

.welcome-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.welcome-login {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 400;
  cursor: pointer;
  transition: color 180ms ease;
  padding: 12px 16px;
  -webkit-tap-highlight-color: transparent;
}

.welcome-login:hover { color: var(--text); }

.welcome-login strong {
  color: var(--accent);
  font-weight: 600;
}

/* ── Entry animations ── */
.wa {
  opacity: 0;
  transform: translateY(22px);
  animation: wa-in 0.55s var(--ease-out) forwards;
}

.wa-d1 { animation-delay: 0.08s; }
.wa-d2 { animation-delay: 0.22s; }
.wa-d3 { animation-delay: 0.36s; }
.wa-d4 { animation-delay: 0.50s; }
.wa-d5 { animation-delay: 0.64s; }
.wa-d6 { animation-delay: 0.76s; }

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


/* ============================================================
   SHARED AUTH STYLES
   ============================================================ */

.screen-auth {
  display: flex;
  flex-direction: column;
  background: var(--ground);
  overflow-y: auto;
}

/* ── Screen header (back + title) ── */
.screen-header {
  display: flex;
  align-items: center;
  padding: 12px 8px 12px 8px;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ground);
  border-bottom: 1px solid transparent;
}

.btn-back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text);
  transition: background 160ms ease;
  flex-shrink: 0;
}

.btn-back:hover  { background: var(--surface); }
.btn-back:active { background: var(--surface-raised); }

.screen-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.screen-header-right {
  width: 44px;
  flex-shrink: 0;
}

/* ── Auth body ── */
.auth-body {
  flex: 1;
  padding: 20px 28px 40px;
  display: flex;
  flex-direction: column;
}

/* ── Social buttons ── */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.btn-social {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  transition: background 150ms ease, border-color 150ms ease;
}

.btn-social:hover  { background: var(--surface-raised); border-color: rgba(255,255,255,.12); }
.btn-social:active { background: var(--surface-high); }

.btn-social svg { flex-shrink: 0; }

/* ── Divider ── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-divider span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Form ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  padding-left: 2px;
}

.form-input-wrap {
  position: relative;
}

.form-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
}

.form-input::placeholder { color: var(--text-muted); }

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.form-input.is-error {
  border-color: #ff4455;
  box-shadow: 0 0 0 3px rgba(255, 68, 85, 0.1);
}

.form-input.has-prefix { padding-left: 52px; }
.form-input.has-toggle { padding-right: 52px; }

.input-prefix {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  pointer-events: none;
  user-select: none;
}

.input-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-full);
  transition: color 150ms ease;
}

.input-toggle:hover  { color: var(--text-secondary); }
.input-toggle:active { color: var(--text); }

.form-error-msg {
  font-size: var(--text-xs);
  color: #ff4455;
  padding-left: 2px;
  display: none;
}

.form-group.has-error .form-error-msg { display: block; }
.form-group.has-error .form-input     { border-color: #ff4455; box-shadow: 0 0 0 3px rgba(255,68,85,.1); }

/* ── Auth footer link ── */
.auth-footer {
  margin-top: auto;
  padding-top: 28px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.auth-footer a,
.auth-footer button {
  color: var(--accent);
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
}

/* ── Forgot password link ── */
.btn-forgot {
  align-self: flex-end;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0 16px;
  transition: color 150ms ease;
}

.btn-forgot:hover { color: var(--accent); }

/* ============================================================
   OTP SCREEN
   ============================================================ */

.otp-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 24px;
  border: 1.5px solid var(--border-accent);
}

.otp-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  margin-bottom: 10px;
}

.otp-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 36px;
}

.otp-sub strong {
  color: var(--text);
  font-weight: 600;
}

.otp-grid {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 36px;
}

.otp-box {
  width: 46px;
  height: 56px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  caret-color: var(--accent);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
}

.otp-box:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.otp-box.filled {
  border-color: var(--accent);
}

.otp-box::-webkit-inner-spin-button,
.otp-box::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.otp-box[type=number] { -moz-appearance: textfield; }

.otp-resend-wrap {
  text-align: center;
  margin-top: 20px;
}

.otp-resend {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 180ms ease;
}

.otp-resend:not(:disabled):hover { color: var(--accent); }
.otp-resend:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   FORGOT PASSWORD SCREEN
   ============================================================ */

.auth-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
}

.auth-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: rgba(0, 200, 100, 0.08);
  border: 1.5px solid rgba(0, 200, 100, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px auto 24px;
}

.auth-success-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  margin-bottom: 10px;
}

.auth-success-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
}


/* ============================================================
   SETUP / ONBOARDING — SHARED
   ============================================================ */

.screen-setup {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ground);
}

.setup-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 28px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.setup-content::-webkit-scrollbar { display: none; }

.setup-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
  margin-bottom: 6px;
}

.setup-section-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}

.step-counter {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  min-width: 40px;
  text-align: right;
}

/* ── Footer: timeline + CTA ── */
.setup-footer {
  flex-shrink: 0;
  padding: 14px 28px 32px;
  background: var(--ground);
  border-top: 1px solid var(--border);
}

/* ── Timeline ── */
.setup-timeline { margin-bottom: 16px; }

.tl-row {
  display: flex;
  align-items: center;
}

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

.tl-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.tl-item.active .tl-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--accent-subtle);
}

.tl-item.done .tl-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tl-lbl {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.tl-item.active .tl-lbl { color: var(--accent); }
.tl-item.done  .tl-lbl  { color: var(--text-secondary); }

.tl-conn {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-bottom: 16px;
  transition: background 300ms ease;
}

.tl-conn.done { background: var(--accent); }

/* ============================================================
   SETUP WELCOME
   ============================================================ */

.setup-welcome-logo {
  height: 26px;
  width: auto;
  margin-bottom: 28px;
  display: block;
}

.setup-welcome-greeting {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 10px;
}

.setup-welcome-greeting em {
  font-style: normal;
  color: var(--accent);
}

.setup-welcome-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 280px;
}

.setup-steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.setup-steps-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.setup-step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ============================================================
   STEP 1: MEKAN
   ============================================================ */

.map-container {
  width: 100%;
  height: 188px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.07);
  margin-bottom: 14px;
  background: #1a1a2e;
}

#venue-map {
  width: 100%;
  height: 100%;
}

.maps-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a2e;
  color: var(--text-muted);
  font-size: 12px;
  z-index: 2;
  transition: opacity 300ms ease;
}
.maps-loading.hidden { opacity: 0; pointer-events: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.address-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 4px;
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.address-suggestions.open { display: block; }

.address-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 120ms ease;
}
.address-suggestion:last-child { border-bottom: none; }
.address-suggestion:active { background: var(--surface-high); }

.suggestion-main {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.suggestion-sub {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.map-hint {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,8,8,0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  z-index: 3;
}

.map-use-location {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--ground);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--text);
  z-index: 3;
  transition: background 150ms ease;
}
.map-use-location:hover  { background: var(--surface); }
.map-use-location:active { background: var(--surface-raised); }

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   STEP 2: MEKAN TARZI
   ============================================================ */

.venue-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.venue-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.venue-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.venue-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.venue-card-emoji { font-size: 1.75rem; line-height: 1; }

.venue-card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

.venue-card:has(input:checked) .venue-card-name { color: var(--accent); }

.venue-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
}

.venue-card:has(input:checked) .venue-card-check { display: flex; }

/* ============================================================
   STEP 3: MÜZİK TARZI
   ============================================================ */

.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.genre-chip {
  padding: 9px 15px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.genre-chip.selected {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.genre-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 14px;
}

.genre-count.has-selection { color: var(--accent); font-weight: 500; }
.genre-count.error { color: #ff4455; }

/* ============================================================
   STEP 4: SPOTİFY + PLAYLİST
   ============================================================ */

.spotify-hero {
  text-align: center;
  padding: 8px 0 20px;
}

.spotify-logo-wrap {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: rgba(29,185,84,0.06);
  border: 1.5px solid rgba(29,185,84,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.spotify-warning {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.5;
}

.btn-spotify-connect {
  width: 100%;
  padding: 15px 24px;
  background: #1DB954;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  box-shadow: 0 8px 24px rgba(29,185,84,0.28);
}

.btn-spotify-connect:hover  { background: #1ed760; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(29,185,84,0.38); }
.btn-spotify-connect:active { transform: scale(0.962); }
.btn-spotify-connect:disabled { opacity: 0.7; }

.spotify-connected-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(29,185,84,0.06);
  border: 1.5px solid rgba(29,185,84,0.18);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 24px;
}

.badge-check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1DB954;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spotify-connected-text {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #1DB954;
}

.spotify-connected-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 1px;
}

.playlist-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 10px;
}

.playlist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.playlist-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.playlist-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.playlist-cover {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.playlist-info { flex: 1; min-width: 0; }

.playlist-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
}

.playlist-radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms ease, background 160ms ease;
}

.playlist-item:has(input:checked) .playlist-radio-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.playlist-item:has(input:checked) .playlist-radio-dot::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.playlist-new-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.playlist-new-btn:hover { border-color: var(--accent); color: var(--accent); }
.playlist-new-btn.selected { border-color: var(--accent); border-style: solid; color: var(--accent); background: var(--accent-subtle); }

.playlist-new-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ============================================================
   SETUP COMPLETE
   ============================================================ */

.setup-complete-icon {
  width: 80px;
  height: 80px;
  border-radius: 28px;
  background: rgba(0, 200, 100, 0.06);
  border: 1.5px solid rgba(0, 200, 100, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: complete-pop 0.5s var(--ease-spring) forwards;
}

@keyframes complete-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.setup-complete-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 10px;
}

.setup-complete-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 270px;
}

.qr-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.qr-venue-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin: 0;
}

.qr-code-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px;
  line-height: 0;
}

.qr-code-box canvas,
.qr-code-box img {
  display: block;
  border-radius: 4px;
}

.qr-url-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin: 0;
}

/* Mekan kodu: QR okutamayan müşteri bunu uygulamaya elle girer (bkz. Business_model::venueCode) */
.qr-venue-code { display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; padding:10px 12px; border-radius:12px; background:var(--surface-raised); border:1px dashed var(--border); }
.qr-venue-code-lbl { font-size:11px; font-weight:600; color:var(--text-muted); letter-spacing:0.04em; text-transform:uppercase; }
.qr-venue-code-val { font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:0.08em; color:var(--text); user-select:all; }
.qr-venue-code-hint { font-size:11px; color:var(--text-muted); text-align:center; }

.qr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.qr-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 0;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.qr-action-btn:active { background: var(--surface-high); }

.complete-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 0;
  width: 100%;
}

.complete-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.complete-stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.complete-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.complete-stat-div {
  width: 1px;
  height: 32px;
  background: var(--border);
}

/* ============================================================
   PLAYLISTS SCREEN
   ============================================================ */

.screen-playlists {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pl-header {
  flex-shrink: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ground);
}
.pl-header-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.pl-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px 0;
}
.pl-body::-webkit-scrollbar { display: none; }

/* Now playing card */
.pl-now-playing-card {
  background: linear-gradient(135deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--border-accent);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.pl-np-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pl-np-cover {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.pl-np-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 3px;
}
.pl-np-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.pl-np-info {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Animated waveform bars */
.pl-np-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
}
.pl-wave-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
  animation: wave-bar 1s ease-in-out infinite;
}
.pl-wave-bar:nth-child(1) { height: 60%; animation-delay: 0s; }
.pl-wave-bar:nth-child(2) { height: 100%; animation-delay: 0.15s; }
.pl-wave-bar:nth-child(3) { height: 40%; animation-delay: 0.3s; }
.pl-wave-bar:nth-child(4) { height: 80%; animation-delay: 0.45s; }
@keyframes wave-bar {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.4); }
}

/* Section label */
.pl-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Playlist search (Spotify) */
.pl-search { position:relative; margin-bottom:12px; }
.pl-search-box { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.pl-search-ic { color:var(--text-muted); display:flex; flex-shrink:0; }
.pl-search-input { flex:1; background:none; border:none; outline:none; font-size:14px; color:var(--text); min-width:0; }
.pl-search-input::placeholder { color:var(--text-muted); }
.pl-search-clear { background:none; border:none; color:var(--text-muted); cursor:pointer; display:none; align-items:center; justify-content:center; padding:0; flex-shrink:0; }
.pl-search-results { display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); background:#1a1a1a; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.6); z-index:30; }
.pl-search-results.open { display:block; }
.pl-empty { padding:16px 14px; text-align:center; color:var(--text-muted); font-size:13px; }

/* Playlist list */
.pl-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.pl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  transition: background 150ms ease;
  border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
.pl-row:last-child { border-bottom: none; }
.pl-row:active { background: var(--surface-raised); }

.pl-row-active {
  background: var(--accent-subtle);
  cursor: default;
}
.pl-row-active:active { background: var(--accent-subtle); }

.pl-cover {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.pl-meta { flex: 1; min-width: 0; }
.pl-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.pl-info {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}
.pl-chevron { color: var(--text-muted); flex-shrink: 0; }
.pl-active-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

/* Footer */
.pl-footer {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--ground);
}

/* ============================================================
   HOME SCREEN
   ============================================================ */

.screen-home {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Drawer overlay ── */
.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.54);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

/* ── Side drawer ── */
.home-drawer {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 272px;
  background: #0f0f0f;
  border-right: 1px solid var(--border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 300ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.home-drawer.open { transform: translateX(0); }

.drawer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 36px 20px 20px;
  border-bottom: 1px solid var(--border);
}
.drawer-profile-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.drawer-profile-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.drawer-profile-type {
  font-size: 11px;
  color: var(--text-muted);
}
.drawer-profile-text { flex:1; min-width:0; }
.drawer-profile-icon { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.drawer-profile-icon:active { transform:scale(0.94); }
.drawer-edit { flex-shrink:0; width:34px; height:34px; border-radius:10px; background:var(--surface-high); border:1px solid var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.14s ease; }
.drawer-edit:active { background:var(--surface); border-color:var(--accent); color:var(--accent); }

/* Bağlı Hesaplar (ayarlar) */
.set-acc-hint { font-size:12px; line-height:1.5; color:var(--text-secondary); margin-bottom:12px; }
.set-acc { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:13px; background:var(--surface); border:1px solid var(--border); margin-bottom:9px; }
.set-acc.is-active { border-color:var(--accent); background:var(--accent-subtle); }
.set-acc-av { width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px; font-weight:700; color:rgba(255,255,255,0.92); }
.set-acc-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.set-acc-name { font-size:14px; font-weight:600; color:var(--text); }
.set-acc-badge { display:inline-block; margin-left:6px; font-size:10px; font-weight:700; color:var(--accent); background:rgba(255,82,0,0.14); border-radius:999px; padding:2px 8px; vertical-align:middle; }
.set-acc-sub { font-size:12px; color:var(--text-muted); }
.set-acc-sub.on { color:#3ddc84; }
.set-acc-btn { flex-shrink:0; padding:8px 13px; border-radius:10px; background:var(--surface-high); border:1px solid var(--accent); color:var(--accent); font-size:12.5px; font-weight:700; cursor:pointer; }
.set-acc-btn.is-off { border-color:var(--border); color:var(--text-secondary); }
.set-acc-x { flex-shrink:0; width:32px; height:32px; border-radius:50%; background:rgba(229,85,85,0.1); border:1px solid rgba(229,85,85,0.25); color:#e55; font-size:14px; cursor:pointer; }
.set-acc-add { width:100%; margin-top:6px; height:46px; border-radius:13px; background:var(--accent-subtle); border:1px dashed var(--accent); color:var(--accent); font-size:14px; font-weight:700; font-family:var(--font-display); cursor:pointer; }
.set-acc-add:active { filter:brightness(0.95); }

/* Başka hesap bağla — form */
.set-pass-wrap { position:relative; }
.set-pass-wrap .form-input { padding-right:46px; }
.set-pass-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--text-muted); cursor:pointer; }
.set-bind-actions { display:flex; gap:10px; margin-top:6px; }
.set-bind-actions .set-acc-btn { flex:0 0 auto; height:48px; padding:0 18px; border-radius:13px; background:var(--surface-high); border:1px solid var(--border); color:var(--text-secondary); font-family:var(--font-display); }
.set-bind-do { flex:1; height:48px; border-radius:13px; border:none; background:var(--accent); color:#fff; font-size:14.5px; font-weight:700; font-family:var(--font-display); cursor:pointer; }
.set-bind-do:active { filter:brightness(0.95); }

/* Hesap bağlandı — tik overlay */
.set-succ { position:absolute; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:28px; background:rgba(0,0,0,0.78); opacity:0; transition:opacity 0.3s ease; }
.set-succ.open { opacity:1; }
.set-succ-card { width:100%; max-width:300px; background:#161616; border:1px solid var(--border); border-radius:22px; padding:30px 24px 26px; text-align:center; transform:scale(0.9); transition:transform 0.34s cubic-bezier(0.34,1.56,0.64,1); }
.set-succ.open .set-succ-card { transform:scale(1); }
.set-succ-check { width:64px; height:64px; border-radius:50%; background:#3ddc84; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 6px 22px rgba(61,220,132,0.45); animation:set-succ-pop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes set-succ-pop { 0% { transform:scale(0); } 100% { transform:scale(1); } }
.set-succ-title { font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--text); margin-bottom:8px; }
.set-succ-sub { font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* Reklamlar ekranı */
.ad-intro { font-size:12.5px; line-height:1.55; color:var(--text-secondary); background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:13px 14px; margin:16px 16px; }
.ad-intro b { color:var(--text); }
.ad-count { font-size:11px; font-weight:700; letter-spacing:0.1em; color:var(--text-muted); margin:0 16px 10px; }
.ad-item { display:flex; align-items:center; gap:12px; margin:0 16px 10px; padding:10px; border-radius:14px; background:var(--surface); border:1px solid var(--border); transition:opacity 0.15s ease; }
.ad-item.is-off { opacity:0.5; }
.ad-thumb { position:relative; width:96px; aspect-ratio:16/9; flex-shrink:0; border-radius:9px; overflow:hidden; background:#0a0a0a; }
.ad-thumb-media { width:100%; height:100%; object-fit:cover; display:block; }
.ad-kind-badge { position:absolute; bottom:4px; left:4px; font-size:8px; font-weight:700; letter-spacing:0.05em; color:#fff; background:rgba(0,0,0,0.6); border-radius:5px; padding:2px 6px; }
.ad-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ad-name { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-meta { font-size:11.5px; color:var(--text-muted); }
.ad-order { display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.ad-ord { width:26px; height:22px; border-radius:7px; background:var(--surface-high); border:1px solid var(--border); color:var(--text); font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ad-ord:disabled { opacity:0.3; cursor:default; }
.ad-del { flex-shrink:0; width:34px; height:34px; border-radius:10px; background:rgba(229,85,85,0.1); border:1px solid rgba(229,85,85,0.25); color:#e55; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ad-empty { text-align:center; padding:48px 20px; }
.ad-empty-ic { font-size:42px; margin-bottom:12px; }
.ad-empty-t { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text); }
.ad-empty-s { font-size:13px; color:var(--text-muted); margin-top:6px; }

.drawer-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.drawer-nav-item:hover, .drawer-nav-item:active { background: var(--surface); color: var(--text); }
.drawer-nav-item.active { background: var(--accent-subtle); color: var(--accent); }

/* Drawer accordion (Müzisyen / Grup) */
.drawer-acc-head { width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; }
.drawer-acc-head span { flex: 1; text-align: left; }
.drawer-acc-chev { flex-shrink: 0; transition: transform 200ms ease; }
.drawer-acc.open .drawer-acc-chev { transform: rotate(180deg); }
.drawer-acc-body { overflow: hidden; max-height: 0; transition: max-height 220ms ease; }
.drawer-acc.open .drawer-acc-body { max-height: 140px; }
.drawer-sub-item { display: block; padding: 10px 12px 10px 46px; border-radius: 10px; color: var(--text-secondary); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background 150ms ease, color 150ms ease; -webkit-tap-highlight-color: transparent; }
.drawer-sub-item:hover, .drawer-sub-item:active { background: var(--surface); color: var(--text); }

.drawer-bottom {
  padding: 10px 10px 24px;
  border-top: 1px solid var(--border);
}
.drawer-nav-logout { color: #e55; }
.drawer-nav-logout:hover { color: #f66; background: rgba(255,60,60,0.07); }
.drawer-copy {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}

/* ── Header ── */
.home-header {
  flex-shrink: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ground);
  z-index: 10;
}
.home-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.home-icon-btn:active { background: var(--surface-raised); }
.home-logo { height: 20px; width: auto; }

.notif-wrap { position: relative; }
.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--ground);
}

/* ── Body ── */
.home-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 12px;
}
.home-body::-webkit-scrollbar { display: none; }

/* Greeting */
.home-greeting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
}
.greeting-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.greeting-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #3ddc84;
}
.status-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: pulse-green 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.8); }
}
.greeting-clock {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.04em;
}

/* Slider */
.slider-outer { padding: 0 0 0 16px; margin-bottom: 16px; }

.home-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-right: 16px;
}
.home-slider::-webkit-scrollbar { display: none; }

.home-slide {
  flex-shrink: 0;
  width: calc(100% - 48px);
  min-height: 140px;
  border-radius: 18px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px;
  overflow: hidden;
  position: relative;
}
.slide-orange {
  background: linear-gradient(135deg, #c83c00 0%, var(--accent) 100%);
}
.slide-indigo {
  background: linear-gradient(135deg, #1a1a5e 0%, #2d2d8e 100%);
}
.slide-purple {
  background: linear-gradient(135deg, #2a0a3e 0%, #6b21a8 100%);
}
.slide-text { max-width: 62%; }
.slide-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.slide-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 8px;
}
.slide-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
}
.slide-deco {
  font-size: 52px;
  line-height: 1;
  opacity: 0.9;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding-right: 16px;
}
.slider-dot {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: var(--surface-high);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 250ms ease, background 250ms ease;
}
.slider-dot.active { width: 18px; background: var(--accent); }

/* Widget base */
.widget {
  margin: 0 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
}
.widget-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.np-live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #3ddc84;
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: pulse-green 1.8s ease-in-out infinite;
}

/* Now Playing */
.np-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 0;
}
.np-art {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.np-meta { flex: 1; min-width: 0; }
.np-song-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.np-artist-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.np-progress { padding: 14px 16px 4px; }
.np-bar {
  height: 4px;
  background: var(--surface-high);
  border-radius: 2px;
  position: relative;
  margin-bottom: 8px;
  pointer-events: none;
  user-select: none;
}
.np-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 600ms linear;
  pointer-events: none;
}
.np-bar-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  pointer-events: none;
  transition: left 600ms linear;
}
.np-times {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.np-ctrls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 8px 16px 10px;
}

.np-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 16px;
}
.np-vol-ico { color: var(--text-muted); flex-shrink: 0; }
.np-vol-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right, var(--accent) 80%, var(--surface-high) 80%);
}
.np-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,82,0,0.25);
}
.np-vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.np-ctrl {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.np-ctrl:active { color: var(--text); background: var(--surface-raised); }
.np-ctrl-main {
  width: 52px;
  height: 52px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,82,0,0.4);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.np-ctrl-main:active { transform: scale(0.94); background: var(--accent); box-shadow: 0 2px 8px rgba(255,82,0,0.3); }

/* Queue */
.np-queue {
  border-top: 1px solid var(--border);
  padding: 12px 16px 14px;
}
.np-queue-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.np-queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.np-queue-item + .np-queue-item { border-top: 1px solid var(--border); }

.np-q-art {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.np-q-info { flex: 1; min-width: 0; }
.np-q-song {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.np-q-artist {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}
.np-vote-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  flex-shrink: 0;
}
.np-vote-btn.voted {
  border-color: var(--border-accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
/* Kuyruk oy sayısı — customer ile tutarlı yuvarlak içinde sayı (salt gösterim) */
.np-q-votes {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

/* Action cards */
.home-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 16px 16px;
}
.action-card {
  border-radius: 18px;
  padding: 18px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
  position: relative;
  overflow: hidden;
  transition: transform 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.action-card:active { transform: scale(0.97); }

.action-orange {
  background: linear-gradient(145deg, #c83c00 0%, var(--accent) 100%);
  color: #fff;
}
.action-dark {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.action-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.action-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.action-arr {
  position: absolute;
  bottom: 14px;
  right: 14px;
  opacity: 0.6;
}

.action-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.action-big {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.action-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.action-tag-up {
  font-size: 10px;
  font-weight: 600;
  color: #3ddc84;
  background: rgba(61,220,132,0.1);
  border-radius: 4px;
  padding: 2px 6px;
}
.action-tag-up.is-down {
  color: #e55;
  background: rgba(229,85,85,0.1);
}
.action-tag {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Power button ── */
.power-wrap { position: relative; }
.power-btn { transition: color 200ms ease, background 200ms ease; }
.power-btn-off { color: #e55 !important; }
.power-dot {
  position: absolute;
  bottom: 5px; right: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--ground);
  transition: background 300ms ease;
}
.power-dot.active  { background: #3ddc84; }
.power-dot.paused  { background: #e55; }

/* ── Stats row ── */
.home-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 14px;
}
.home-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.hstat-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.hstat-body { flex: 1; min-width: 0; }
.hstat-val {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 3px;
  transition: color 400ms ease;
}
.hstat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hstat-live-dot {
  position: absolute;
  top: 10px; right: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: pulse-green 2s ease-in-out infinite;
}
.hstat-trend {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #3ddc84;
}
.hstat-trend.is-down { color: #e55; }

/* ── Footer: Spotify mini-player ── */
.home-footer {
  flex-shrink: 0;
  background: #111;
  border-top: 1px solid var(--border);
}

.hfooter-prog-bar {
  height: 2px;
  background: rgba(255,255,255,0.08);
}
.hfooter-prog-fill {
  height: 100%;
  background: var(--accent);
  width: 38%;
  transition: width 600ms linear;
}

.hfooter-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px;
}

.hfooter-art {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hfooter-track {
  flex: 1;
  min-width: 0;
}
.hfooter-track-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.hfooter-track-artist {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

.hfooter-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.hfooter-vol-icon {
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 150ms ease;
}
.hfooter-vol-icon:active { color: var(--text); }

.hfooter-vol-slider {
  width: 52px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right, var(--accent) 80%, rgba(255,255,255,0.12) 80%);
}
.hfooter-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.hfooter-vol-slider::-moz-range-thumb {
  width: 10px; height: 10px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.hfooter-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
  flex-shrink: 0;
}
.hfooter-play-btn:active { transform: scale(0.9); opacity: 0.85; }

/* ── Footer trackzone (tappable to open queue sheet) ── */
.hfooter-trackzone {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Volume percentage text ── */
.hfooter-vol-pct {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 26px;
  font-variant-numeric: tabular-nums;
}

/* ── Venue Status Card ── */
.venue-status-card {
  margin: 12px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 14px 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vc-info { flex: 1; min-width: 0; }

.vc-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.vc-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vc-uptime-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 5px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.vc-details {
  font-size: 11px;
  color: var(--text-muted);
}

.vc-status-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #3ddc84;
  font-weight: 600;
}

/* ── Venue card power button ── */
.vc-power-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1.5px solid rgba(61, 220, 132, 0.28);
  background: rgba(61, 220, 132, 0.1);
  color: #3ddc84;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
  -webkit-tap-highlight-color: transparent;
}
.vc-power-btn:active { transform: scale(0.93); }
.vc-power-btn.vc-power-off {
  border-color: rgba(229, 85, 85, 0.28);
  background: rgba(229, 85, 85, 0.1);
  color: #e55;
}

.vc-power-dot {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  border: 1.5px solid var(--surface);
  animation: pulse-green 1.8s ease-in-out infinite;
}

/* ── Queue bottom sheet ── */
.queue-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.queue-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.queue-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #0f0f0f;
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  z-index: 70;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-height: 76%;
  display: flex;
  flex-direction: column;
}
.queue-sheet.open { transform: translateY(0); }

.queue-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  margin: 12px auto 0;
  flex-shrink: 0;
}

.queue-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}

.queue-sheet-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.queue-sheet-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease;
}
.queue-sheet-close:active { background: var(--surface-high); }

/* Now playing row inside sheet */
.queue-now-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.queue-now-art {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.queue-now-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.queue-now-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.queue-now-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.queue-now-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.queue-now-artist {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Progress bar inside sheet now-playing */
.queue-np-progress {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.queue-np-bar {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-bottom: 6px;
  overflow: hidden;
}
.queue-np-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 600ms linear;
}
.queue-np-times {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Sheet scrollable body */
.queue-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.queue-sheet-body::-webkit-scrollbar { display: none; }

.queue-section-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Queue items inside sheet inherit .np-queue-item styles */
.queue-sheet-body .np-queue-item {
  border-top: none;
  border-bottom: 1px solid var(--border);
  padding: 9px 0;
}
.queue-sheet-body .np-queue-item:last-child { border-bottom: none; }


/* ============================================================
   PLAYLIST DETAIL / EDIT SCREEN
   ============================================================ */

.screen-pd { display:flex; flex-direction:column; overflow:hidden; position:relative; }

/* Header */
.pd-header { flex-shrink:0; height:56px; display:flex; align-items:center; gap:10px; padding:0 12px; border-bottom:1px solid var(--border); }
.pd-name-input { flex:1; background:none; border:none; outline:none; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text); min-width:0; }
.pd-name-input::placeholder { color:var(--text-muted); font-weight:500; }

/* Search */
.pd-search-section { flex-shrink:0; padding:10px 14px 0; position:relative; z-index:20; }
.pd-search-box { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.pd-search-ic { color:var(--text-muted); display:flex; align-items:center; flex-shrink:0; }
.pd-search-input { flex:1; background:none; border:none; outline:none; font-size:14px; color:var(--text); min-width:0; }
.pd-search-input::placeholder { color:var(--text-muted); }
.pd-search-clear { background:none; border:none; color:var(--text-muted); cursor:pointer; display:none; align-items:center; justify-content:center; padding:0; flex-shrink:0; }

.pd-search-results { display:none; position:absolute; left:14px; right:14px; top:calc(100% + 6px); background:#1a1a1a; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.6); z-index:30; }
.pd-search-results.open { display:block; }

.pd-result-row { display:flex; align-items:center; gap:10px; padding:10px 14px; }
.pd-result-row + .pd-result-row { border-top:1px solid var(--border); }
.pd-result-art { width:36px; height:36px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; }
.pd-result-info { flex:1; min-width:0; }
.pd-result-name { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.pd-result-artist { display:block; font-size:11px; color:var(--text-secondary); }
.pd-result-add { width:30px; height:30px; border-radius:50%; background:var(--accent); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:opacity 150ms ease; }
.pd-result-add:active { opacity:0.8; }
.pd-no-results { padding:14px; text-align:center; color:var(--text-muted); font-size:13px; }

/* Body */
.pd-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:10px 0 12px; }
.pd-body::-webkit-scrollbar { display:none; }

.pd-section-head { display:flex; align-items:center; gap:8px; padding:4px 16px 8px; }
.pd-section-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); }
.pd-count { font-size:10px; font-weight:700; color:var(--accent); background:var(--accent-subtle); border-radius:4px; padding:1px 6px; }
.pd-empty { padding:32px 24px; text-align:center; color:var(--text-muted); font-size:13px; line-height:1.7; }

/* Song row */
.pd-song-row { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; transition:background 140ms ease; -webkit-tap-highlight-color:transparent; }
.pd-song-row + .pd-song-row { border-top:1px solid var(--border); }
.pd-song-row:active { background:var(--surface-raised); }
.pd-song-art { width:44px; height:44px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; }
.pd-song-info { flex:1; min-width:0; }
.pd-song-name { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.pd-song-artist { display:block; font-size:11px; color:var(--text-secondary); }
.pd-song-votes { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#3ddc84; background:rgba(61,220,132,0.1); border-radius:6px; padding:3px 7px; flex-shrink:0; }

.pd-row-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.pd-reorder-wrap { display:flex; flex-direction:column; gap:2px; }
.pd-reorder-btn { width:24px; height:24px; border-radius:6px; background:var(--surface-raised); border:1px solid var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 140ms ease; }
.pd-reorder-btn:disabled { opacity:0.25; cursor:not-allowed; }
.pd-reorder-btn:not(:disabled):active { background:var(--surface-high); color:var(--text); }
.pd-remove-btn { width:32px; height:32px; border-radius:50%; background:rgba(229,85,85,0.1); border:1.5px solid rgba(229,85,85,0.22); color:#e55; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 140ms ease; flex-shrink:0; }
.pd-remove-btn:active { background:rgba(229,85,85,0.2); }
.pd-remove-btn.pd-remove-locked { background:rgba(255,255,255,0.04); border-color:var(--border); color:var(--text-muted); cursor:not-allowed; }
.pd-modal-remove-btn.pd-remove-locked { background:rgba(255,255,255,0.04); border-color:var(--border); color:var(--text-muted); cursor:not-allowed; }

/* Footer */
.pd-footer { flex-shrink:0; display:flex; gap:10px; padding:12px 16px 16px; border-top:1px solid var(--border); background:var(--ground); }
.pd-btn-save { flex:1; height:46px; border-radius:13px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:14px; font-weight:600; cursor:pointer; font-family:var(--font-display); transition:background 140ms ease; }
.pd-btn-save:active { background:var(--surface-raised); }
.pd-btn-publish { flex:1; height:46px; border-radius:13px; border:none; background:var(--accent); color:#fff; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font-display); box-shadow:0 4px 16px rgba(255,82,0,0.35); transition:opacity 140ms ease, transform 140ms ease; }
.pd-btn-publish:active { opacity:0.88; transform:scale(0.97); }

/* Song detail modal */
.pd-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.75); z-index:90; display:flex; align-items:center; justify-content:center; padding:20px 14px; opacity:0; transition:opacity 300ms ease; }
.pd-modal-overlay.open { opacity:1; }
.pd-modal-card { width:80%; height:80%; background:#111; border-radius:22px; overflow:hidden; position:relative; display:flex; flex-direction:column; transform:scale(0.94) translateY(16px); transition:transform 320ms cubic-bezier(0.25,0.46,0.45,0.94); border:1px solid rgba(255,255,255,0.07); }
.pd-modal-overlay.open .pd-modal-card { transform:scale(1) translateY(0); }

.pd-modal-art { width:100%; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.pd-modal-emoji { font-size:80px; filter:drop-shadow(0 6px 20px rgba(0,0,0,0.6)); position:relative; z-index:1; }
.pd-modal-art-fade { position:absolute; bottom:0; left:0; right:0; height:90px; background:linear-gradient(to top,#111,transparent); z-index:2; }
.pd-modal-close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.12); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:background 150ms ease; }
.pd-modal-close:active { background:rgba(255,255,255,0.15); }

.pd-modal-body { padding:14px 18px 20px; flex-shrink:0; }
.pd-modal-name { font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--text); letter-spacing:0.04em; margin-bottom:4px; line-height:1.2; }
.pd-modal-artist { font-size:13px; color:var(--accent); font-weight:500; margin-bottom:14px; }

.pd-modal-actions { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
.pd-modal-remove-btn { display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; background:rgba(229,85,85,0.12); border:1.5px solid rgba(229,85,85,0.25); color:#e55; font-size:13px; font-weight:600; cursor:pointer; transition:background 140ms ease; }
.pd-modal-remove-btn:active { background:rgba(229,85,85,0.22); }
.pd-modal-reorder { display:flex; gap:8px; }
.pd-modal-order-btn { width:40px; height:40px; border-radius:10px; background:var(--surface-raised); border:1px solid var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 140ms ease, color 140ms ease; }
.pd-modal-order-btn:disabled { opacity:0.25; cursor:not-allowed; }
.pd-modal-order-btn:not(:disabled):active { background:var(--surface-high); color:var(--text); }

/* Preview player inside modal */
.pd-modal-player { background:var(--surface); border-radius:16px; border:1px solid var(--border); padding:14px 16px 16px; }
.pd-player-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:12px; }
.pd-player-bar { height:4px; background:var(--surface-raised); border-radius:2px; overflow:hidden; margin-bottom:6px; }
.pd-player-fill { height:100%; background:var(--accent); border-radius:2px; width:0; transition:width 800ms linear; }
/* pd-player-times and pd-player-btn defined below with horizontal layout */

/* Song order number */
.pd-song-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  flex-shrink: 0;
}

/* Drag handle + right area */
.pd-row-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.pd-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  /* parmakla rahat yakalansın: dar tutamaç mobilde tutturulamıyordu */
  width: 26px;
  min-height: 34px;
  padding: 4px 2px;
  opacity: 0.5;
  touch-action: none;
}
.pd-drag-handle:active { cursor: grabbing; opacity: 1; }
.pd-drag-handle.pd-drag-locked { cursor: not-allowed; opacity: 0.25; }

/* Sürükleme durumları ortak katmanda: .nc-dragging / .nc-drop-ph
   (shared/css/components.css). Eski .pd-dragging ve .pd-drag-over kuralları
   HTML5 drag-and-drop ile birlikte kaldırıldı. */
.pd-draggable { cursor: default; }

/* Modal: position picker */
.pd-modal-pos-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
}
.pd-pos-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.pd-pos-display { display:flex; align-items:center; gap:5px; }
.pd-pos-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pd-pos-edit-btn {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--surface-high);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease;
}
.pd-pos-edit-btn:active { background:var(--accent); color:#fff; border-color:var(--accent); }
.pd-pos-select {
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  max-width: 110px;
}

/* Modal player: bar + times on left, play button on right — same row, 10px gap */
.pd-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd-player-track {
  flex: 1;
  min-width: 0;
}
.pd-player-times {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}
.pd-player-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,82,0,0.4);
  transition: transform 130ms ease, box-shadow 130ms ease;
}
.pd-player-btn:active { transform:scale(0.91); box-shadow:0 2px 7px rgba(255,82,0,0.3); }

/* Vote count in list row */
.pd-song-votes {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-raised);
  border-radius: 6px;
  padding: 3px 7px;
  flex-shrink: 0;
}
.pd-song-votes.has-votes {
  color: #3ddc84;
  background: rgba(61,220,132,0.1);
}

/* Vote count in modal */
.pd-modal-vote-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.pd-modal-vote-row.has-votes {
  color: #3ddc84;
}

/* Publish "live" state — buton artık "Yayını Durdur" aksiyonu olduğu için
   tıklanabilir görünmeli ve durdurma rengini taşımalı. */
.pd-btn-live {
  background: linear-gradient(135deg, #6d1230, #b3243f) !important;
  box-shadow: 0 4px 16px rgba(179,36,63,0.35) !important;
  cursor: pointer;
}

/* Confirmation dialog */
.pd-confirm-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 95;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.pd-confirm-overlay.open { opacity: 1; pointer-events: auto; }
.pd-confirm-card {
  width: 100%;
  background: #161616;
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--border);
  padding: 24px 20px 32px;
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.pd-confirm-overlay.open .pd-confirm-card { transform: translateY(0); }
.pd-confirm-msg {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
}
.pd-confirm-btns { display:flex; gap:10px; }
.pd-confirm-cancel {
  flex: 1; height: 46px; border-radius: 13px;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
}
.pd-confirm-ok {
  flex: 1; height: 46px; border-radius: 13px;
  background: var(--accent); border: none;
  color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,82,0,0.3);
}

/* ============================================================
   SETTINGS SCREEN
   ============================================================ */

.screen-settings { display:flex; flex-direction:column; overflow:hidden; position:relative; }
.set-header-title { flex:1; text-align:center; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text); }

/* Tabs (segmented) */
.set-tabs { flex-shrink:0; display:flex; gap:3px; margin:12px 14px; padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.set-tabs::-webkit-scrollbar { display:none; }
.set-tab { flex:0 0 auto; height:36px; padding:0 16px; border:none; background:none; color:var(--text-secondary); font-size:12px; font-weight:600; font-family:var(--font-display); letter-spacing:-0.01em; border-radius:10px; cursor:pointer; transition:background 160ms ease, color 160ms ease; white-space:nowrap; }
.set-tab.active { background:var(--accent); color:#fff; box-shadow:0 2px 10px rgba(255,82,0,0.3); }

/* Body + panels */
.set-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 16px 16px; }
.set-body::-webkit-scrollbar { display:none; }
.set-panel { display:none; }
.set-panel.active { display:block; animation:set-fade 220ms ease; }
@keyframes set-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Section */
.set-section { padding:18px 0; border-bottom:1px solid var(--border); }
.set-section:last-child { border-bottom:none; }
.set-section-title { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:14px; }
.set-section-title svg { color:var(--accent); flex-shrink:0; }
.set-hint { font-size:12px; color:var(--text-secondary); margin:-4px 0 12px; line-height:1.5; }

/* Label row with approval tag */
.set-label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.set-label-row .form-label { padding-left:2px; margin:0; }
.set-approval-tag { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; color:#e0a544; background:rgba(224,165,68,0.12); border:1px solid rgba(224,165,68,0.28); border-radius:7px; padding:3px 8px; flex-shrink:0; white-space:nowrap; }
.set-approval-tag svg { flex-shrink:0; }
.set-pending { display:none; align-items:center; gap:4px; font-size:10px; font-weight:600; color:#e0a544; background:rgba(224,165,68,0.12); border-radius:7px; padding:4px 9px; margin-top:8px; width:fit-content; }
.set-pending.show { display:inline-flex; }
.set-pending svg { flex-shrink:0; }

/* Inline input icon (location) */
.set-input-ic { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; display:flex; }

/* Toggle switch */
.set-switch-row { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border); }
.set-switch-row:last-child { border-bottom:none; }
.set-switch-row .srow-text { flex:1; min-width:0; }
.set-switch-row .srow-title { display:block; font-size:14px; font-weight:600; color:var(--text); margin-bottom:2px; }
.set-switch-row .srow-sub { display:block; font-size:12px; color:var(--text-secondary); line-height:1.4; }

.set-switch { position:relative; display:inline-block; width:46px; height:27px; flex-shrink:0; }
.set-switch input { opacity:0; width:0; height:0; position:absolute; }
.set-slider { position:absolute; inset:0; background:var(--surface-high); border:1px solid var(--border); border-radius:999px; cursor:pointer; transition:background 200ms ease, border-color 200ms ease; }
.set-slider::before { content:''; position:absolute; width:21px; height:21px; left:2px; top:2px; background:#fff; border-radius:50%; transition:transform 200ms cubic-bezier(0.4,0.1,0.2,1); box-shadow:0 1px 3px rgba(0,0,0,0.4); }
.set-switch input:checked + .set-slider { background:var(--accent); border-color:var(--accent); }
.set-switch input:checked + .set-slider::before { transform:translateX(19px); }

/* Image grid */
.set-img-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.set-img-tile { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); }
.set-img-ph { font-size:26px; opacity:0.5; }
.set-img-del { position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.6); border:none; color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.set-img-del:active { background:rgba(229,85,85,0.9); }
.set-img-add { aspect-ratio:1; border-radius:12px; border:1.5px dashed var(--border); background:var(--surface); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:300; cursor:pointer; transition:background 160ms ease, border-color 160ms ease, color 160ms ease; }
.set-img-add:active { background:var(--surface-raised); border-color:var(--accent); color:var(--accent); }

/* Footer */
.set-footer { flex-shrink:0; padding:12px 16px 16px; border-top:1px solid var(--border); background:var(--ground); }
.set-save-btn { width:100%; height:48px; border-radius:14px; border:none; background:var(--accent); color:#fff; font-size:15px; font-weight:700; font-family:var(--font-display); cursor:pointer; box-shadow:0 4px 16px rgba(255,82,0,0.35); transition:opacity 140ms ease, transform 140ms ease; }
.set-save-btn:active { opacity:0.9; transform:scale(0.98); }

/* Swipe slide-in animations */
.set-slide-l { animation:set-in-l 260ms var(--ease-out); }
.set-slide-r { animation:set-in-r 260ms var(--ease-out); }
@keyframes set-in-l { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
@keyframes set-in-r { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:none; } }

/* Sub-labels + textarea */
.set-sub-label { font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:4px; }
.set-textarea { height:auto; min-height:72px; padding:12px 16px; line-height:1.5; resize:none; font-family:var(--font-body); }

/* Cover image (wide) */
.set-cover-tile { position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.set-single-ph { color:rgba(255,255,255,0.75); font-size:13px; font-weight:600; }
.set-img-change { position:absolute; bottom:8px; right:8px; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:9px; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.14); color:#fff; font-size:11.5px; font-weight:600; cursor:pointer; }
.set-img-change:active { background:rgba(0,0,0,0.8); }
.set-single-del { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,0.6); border:none; color:#fff; font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.set-single-del:active { background:rgba(229,85,85,0.9); }

/* Profile image (square + actions) */
.set-profile-row { display:flex; align-items:center; gap:14px; }
.set-profile-tile { width:80px; height:80px; border-radius:18px; overflow:hidden; flex-shrink:0; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:30px; }
.set-profile-actions { display:flex; flex-direction:column; gap:8px; }
.set-mini-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:10px; background:var(--surface-high); border:1px solid var(--border); color:var(--text); font-size:12.5px; font-weight:600; cursor:pointer; transition:background 140ms ease; }
.set-mini-btn:active { background:var(--surface-raised); }
.set-mini-btn.danger { color:#e55; background:rgba(229,85,85,0.08); border-color:rgba(229,85,85,0.2); }

/* Gallery add as button */
.set-img-add { padding:0; font-family:var(--font-display); }


/* ============================================================
   REPORTS SCREEN
   ============================================================ */

.screen-reports { display:flex; flex-direction:column; overflow:hidden; position:relative; }

.rep-period { display:flex; gap:4px; margin:4px 0 12px; padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.rep-period-btn { flex:1; height:36px; border:none; background:none; color:var(--text-secondary); font-size:11.5px; font-weight:600; font-family:var(--font-display); border-radius:10px; cursor:pointer; white-space:nowrap; transition:background 160ms ease, color 160ms ease; }
.rep-period-btn.active { background:var(--accent); color:#fff; box-shadow:0 2px 10px rgba(255,82,0,0.3); }

/* Raporlar ana tablar */
.rep-maintabs { flex-shrink:0; display:flex; gap:4px; margin:12px 16px 0; padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.rep-mtab { flex:1; height:38px; border:none; background:none; color:var(--text-secondary); font-size:13px; font-weight:600; font-family:var(--font-display); border-radius:10px; cursor:pointer; transition:background 160ms ease, color 160ms ease; }
.rep-mtab.active { background:var(--accent); color:#fff; box-shadow:0 2px 10px rgba(255,82,0,0.3); }

/* Tarih aralığı */
.rep-range { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.rep-date { flex:1; min-width:0; height:44px; padding:0 12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:13px; -webkit-appearance:none; appearance:none; }
.rep-range-sep { color:var(--text-muted); flex-shrink:0; }
.rep-range-go { flex-shrink:0; padding:0 16px; height:44px; border-radius:12px; background:var(--accent); border:none; color:#fff; font-size:13px; font-weight:700; font-family:var(--font-display); cursor:pointer; }

/* Banlı kullanıcı arama + unban */
.rep-search { display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0 13px; height:46px; margin:12px 0; }
.rep-search-ic { color:var(--text-muted); display:flex; flex-shrink:0; }
.rep-search input { flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-size:14px; }
.rep-search input::placeholder { color:var(--text-muted); }
.rv-unban { flex-shrink:0; padding:8px 13px; border-radius:10px; background:var(--surface-high); border:1px solid var(--accent); color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; }
.rv-unban:active { background:var(--surface); }
.rep-empty { text-align:center; padding:30px 16px; color:var(--text-muted); font-size:13px; }

.rep-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 16px 16px; }
.rep-body::-webkit-scrollbar { display:none; }

/* Hero cards */
.rep-hero-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.rep-hero-card { border-radius:18px; padding:16px; border:1px solid var(--border); position:relative; overflow:hidden; }
.rep-hero-revenue { background:linear-gradient(150deg,#2a1200,#160a00); }
.rep-hero-earn { background:linear-gradient(150deg,#06231b,#04140f); }
.rep-hero-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rep-hero-ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.rep-hero-revenue .rep-hero-ic { color:#ff8547; background:rgba(255,82,0,0.16); }
.rep-hero-earn .rep-hero-ic { color:#3ddc84; background:rgba(61,220,132,0.16); }
.rep-hero-trend { font-size:11px; font-weight:700; }
.rep-hero-trend.up { color:#3ddc84; }
.rep-hero-val { font-family:var(--font-display); font-size:21px; font-weight:800; color:var(--text); letter-spacing:-0.02em; line-height:1.1; margin-bottom:4px; }
.rep-hero-lbl { font-size:11.5px; color:var(--text-secondary); }

/* Stat row */
.rep-stat-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; }
.rep-stat-card { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; }
.rep-stat-ic { width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.rep-stat-val { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text); letter-spacing:-0.02em; }
.rep-stat-lbl { font-size:11px; color:var(--text-secondary); margin-top:1px; }

/* Section */
.rep-section { margin-top:18px; }
.rep-section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.rep-section-title { font-size:13px; font-weight:700; color:var(--text); font-family:var(--font-display); }
.rep-section-meta { font-size:13px; font-weight:700; color:var(--accent); }

/* Bar chart */
.rep-chart { display:flex; align-items:flex-end; gap:7px; height:140px; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.rep-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; }
.rep-bar-track { flex:1; width:100%; display:flex; align-items:flex-end; }
.rep-bar-fill { width:100%; border-radius:6px 6px 3px 3px; background:linear-gradient(to top,var(--accent),#ff8547); min-height:4px; animation:rep-grow 500ms var(--ease-out) backwards; }
@keyframes rep-grow { from { height:0 !important; } }
.rep-bar-lbl { font-size:9.5px; color:var(--text-muted); font-weight:600; }

/* Most liked songs */
.rep-song-list { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.rep-song-row { display:flex; align-items:center; gap:11px; padding:11px 13px; }
.rep-song-row + .rep-song-row { border-top:1px solid var(--border); }
.rep-song-rank { width:20px; flex-shrink:0; text-align:center; font-family:var(--font-display); font-size:14px; font-weight:800; color:var(--text-muted); }
.rep-song-rank.top { color:var(--accent); }
.rep-song-art { width:42px; height:42px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:19px; }
.rep-song-info { flex:1; min-width:0; }
.rep-song-name { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-song-artist { display:block; font-size:11px; color:var(--text-secondary); margin-top:1px; }
.rep-song-votes { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:#3ddc84; background:rgba(61,220,132,0.1); border-radius:7px; padding:4px 9px; flex-shrink:0; }
.rep-song-votes svg { width:13px; height:13px; }

/* ============================================================
   INVOICES SCREEN
   ============================================================ */

.screen-invoices { display:flex; flex-direction:column; overflow:hidden; position:relative; }

.inv-tabs { flex-shrink:0; display:flex; gap:4px; margin:12px 16px; padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.inv-tab { flex:1; height:36px; border:none; background:none; color:var(--text-secondary); font-size:13px; font-weight:600; font-family:var(--font-display); border-radius:10px; cursor:pointer; transition:background 160ms ease, color 160ms ease; }
.inv-tab.active { background:var(--accent); color:#fff; box-shadow:0 2px 10px rgba(255,82,0,0.3); }

.inv-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 16px 16px; }
.inv-body::-webkit-scrollbar { display:none; }

/* Summary */
.inv-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.inv-sum-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 15px; }
.inv-sum-lbl { font-size:11px; color:var(--text-secondary); margin-bottom:5px; }
.inv-sum-val { font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-0.02em; }
.inv-sum-pending { color:#e0a544; }
.inv-sum-paid { color:#3ddc84; }

/* List */
.inv-list { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.inv-row { display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer; transition:background 140ms ease; -webkit-tap-highlight-color:transparent; }
.inv-row + .inv-row { border-top:1px solid var(--border); }
.inv-row:active { background:var(--surface-raised); }
.inv-row-ic { width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--surface-high); color:var(--text-secondary); }
.inv-row-info { flex:1; min-width:0; }
.inv-row-title { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-row-meta { display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
.inv-row-right { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.inv-row-amount { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text); }

/* Status badge */
.inv-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:700; border-radius:7px; padding:3px 8px; white-space:nowrap; }
.inv-st-paid { color:#3ddc84; background:rgba(61,220,132,0.12); }
.inv-st-pending { color:#e0a544; background:rgba(224,165,68,0.12); }
.inv-st-overdue { color:#ff5a5a; background:rgba(255,90,90,0.12); }

/* Detail bottom sheet */
.inv-sheet-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); z-index:95; display:flex; align-items:flex-end; opacity:0; transition:opacity 300ms ease; }
.inv-sheet-overlay.open { opacity:1; }
.inv-sheet { width:100%; background:#161616; border-radius:24px 24px 0 0; border-top:1px solid var(--border); padding:10px 20px 28px; transform:translateY(100%); transition:transform 320ms cubic-bezier(0.25,0.46,0.45,0.94); max-height:88%; overflow-y:auto; scrollbar-width:none; }
.inv-sheet::-webkit-scrollbar { display:none; }
.inv-sheet-overlay.open .inv-sheet { transform:translateY(0); }
.inv-sheet-handle { width:40px; height:4px; border-radius:999px; background:var(--surface-high); margin:0 auto 18px; }
.inv-sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.inv-sheet-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--text); }
.inv-sheet-no { font-size:12px; color:var(--text-muted); margin-top:3px; }

.inv-sheet-rowinfo { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px; background:var(--surface); border-radius:14px; margin-bottom:14px; }
.inv-info-lbl { display:block; font-size:11px; color:var(--text-secondary); margin-bottom:3px; }
.inv-info-val { display:block; font-size:13px; font-weight:600; color:var(--text); }

.inv-items { border:1px solid var(--border); border-radius:14px; padding:6px 14px; margin-bottom:18px; }
.inv-item-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; font-size:13px; color:var(--text-secondary); }
.inv-item-row + .inv-item-row { border-top:1px solid var(--border); }
.inv-item-row span:last-child { color:var(--text); font-weight:600; white-space:nowrap; }
.inv-item-row.inv-sub { color:var(--text-muted); }
.inv-item-row.inv-total { font-size:15px; font-weight:700; color:var(--text); }
.inv-item-row.inv-total span:last-child { color:var(--accent); font-family:var(--font-display); font-size:16px; }

.inv-sheet-actions { display:flex; gap:10px; }
.inv-pay-btn { flex:1; height:48px; border-radius:14px; border:none; background:var(--accent); color:#fff; font-size:14px; font-weight:700; font-family:var(--font-display); cursor:pointer; box-shadow:0 4px 16px rgba(255,82,0,0.35); }
.inv-pay-btn:active { opacity:0.9; }
.inv-dl-btn { flex:1; height:48px; border-radius:14px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:14px; font-weight:600; font-family:var(--font-display); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; }
.inv-dl-btn:active { background:var(--surface-raised); }

/* ============================================================
   PAYMENTS / ÖDEMELER (hakediş + faturalar)
   ============================================================ */

.screen-pay { display:flex; flex-direction:column; overflow:hidden; position:relative; }
.screen-pay .inv-tab { font-size:12px; white-space:nowrap; }
.pay-note { font-size:12px; line-height:1.5; color:var(--text-secondary); margin-bottom:14px; }

.pay-earn-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:12px; }
.pay-earn-head { display:flex; align-items:center; justify-content:space-between; }
.pay-earn-month { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text); }
.pay-earn-status { font-size:10px; font-weight:700; color:#e0a544; background:rgba(224,165,68,0.12); border:1px solid rgba(224,165,68,0.25); border-radius:7px; padding:3px 8px; white-space:nowrap; }
.pay-earn-period { font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.pay-earn-breakdown { display:flex; flex-direction:column; gap:10px; margin-top:13px; padding:13px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pay-earn-row { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-secondary); }
.pay-earn-label { display:inline-flex; align-items:center; gap:8px; }
.pay-earn-label svg { flex-shrink:0; }
.pay-ic-vote svg { color:var(--accent); }
.pay-ic-ad svg { color:#2dd4bf; }
.pay-val { color:var(--text); font-weight:600; }
.pay-earn-total { display:flex; align-items:center; justify-content:space-between; padding:14px 0 0; }
.pay-earn-total > span:first-child { font-size:13px; color:var(--text-secondary); }
.pay-earn-amount { font-family:var(--font-display); font-size:21px; font-weight:800; color:#3ddc84; letter-spacing:-0.02em; }

.pay-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 32px; text-align:center; }
.pay-empty-ic { width:60px; height:60px; border-radius:18px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:14px; }
.pay-empty-title { font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px; }
.pay-empty-sub { font-size:13px; color:var(--text-secondary); }

/* ============================================================
   SON OY VERENLER WIDGET (home)
   ============================================================ */

.voters-section { margin:18px 16px 22px; }
.voters-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0; }
.voters-title { font-size:13px; font-weight:700; color:var(--text); font-family:var(--font-display); }
.voters-live { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#3ddc84; }
.voters-live-dot { width:6px; height:6px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 3px rgba(61,220,132,0.18); animation:voters-pulse 1.6s ease-in-out infinite; }
@keyframes voters-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

/* Continuous marquee */
.voters-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.voters-track { display:flex; width:max-content; animation:voters-marquee 26s linear infinite; }
/* oy yokken şerit kaymasın, tek satır bilgi göster */
.voters-track.is-empty { width:100%; animation:none; justify-content:center; }
.voters-empty { font-size:12.5px; color:var(--text-muted); padding:14px 4px; }
.voters-marquee:active .voters-track { animation-play-state:paused; }
@keyframes voters-marquee { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion: reduce) { .voters-track { animation:none; } }

.voter-card { flex:0 0 auto; width:118px; height:118px; margin-right:10px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:12px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color 0.14s ease; }
.voter-card:active { border-color:var(--accent); }
.voter-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.voter-name { font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.voter-song { display:flex; align-items:center; gap:3px; font-size:10.5px; color:var(--accent); max-width:100%; }
.voter-song svg { flex-shrink:0; }
.voter-song span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   GENERIC DETAIL SCREEN
   ============================================================ */

.screen-detail { display:flex; flex-direction:column; overflow:hidden; position:relative; background:var(--ground); }
.detail-hero { position:relative; flex-shrink:0; min-height:232px; padding:0 22px 26px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.detail-back { position:absolute; top:16px; left:14px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.32); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.18); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.detail-back:active { background:rgba(0,0,0,0.5); }
.detail-emoji { position:absolute; top:28px; right:18px; font-size:76px; line-height:1; opacity:0.92; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35)); z-index:0; }
.detail-hero-fade { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.4), transparent 55%); pointer-events:none; z-index:0; }
.detail-hero-text { position:relative; z-index:1; }
.detail-eyebrow { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.82); margin-bottom:7px; }
.detail-title { font-family:var(--font-display); font-size:27px; font-weight:800; letter-spacing:-0.02em; color:#fff; line-height:1.12; }
.detail-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:22px; }
.detail-body::-webkit-scrollbar { display:none; }
.detail-meta { font-size:12px; font-weight:600; color:var(--accent); margin-bottom:14px; }
.detail-para { font-size:14.5px; line-height:1.7; color:var(--text-secondary); margin-bottom:16px; }
.detail-para:last-child { margin-bottom:0; }
.detail-footer { flex-shrink:0; padding:12px 16px 16px; border-top:1px solid var(--border); background:var(--ground); }
.detail-cta { width:100%; height:50px; border-radius:14px; border:none; background:var(--accent); color:#fff; font-size:15px; font-weight:700; font-family:var(--font-display); cursor:pointer; box-shadow:0 4px 16px rgba(255,82,0,0.35); transition:opacity 140ms ease; }
.detail-cta:active { opacity:0.9; }

/* ============================================================
   MÜZİSYEN / GRUP İSTEKLERİ
   ============================================================ */

.screen-band { display:flex; flex-direction:column; overflow:hidden; position:relative; }

.band-filter { justify-content: space-between; flex-shrink:0; display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.band-filter::-webkit-scrollbar { display:none; }
.band-filter-btn { width: calc(33% - 6px); display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all 150ms ease; }
.band-filter-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.band-filter-count { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 5px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; }
.band-filter-btn.active .band-filter-count { background:rgba(0,0,0,0.25); }

.band-list { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:14px 16px 16px; }
.band-list::-webkit-scrollbar { display:none; }

.band-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; margin-bottom:12px; }
.band-card-top { display:flex; align-items:center; gap:12px; }
.band-avatar { width:48px; height:48px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:23px; }
.band-info { flex:1; min-width:0; }
.band-name { display:block; font-size:15px; font-weight:700; color:var(--text); font-family:var(--font-display); }
/* Sanatçının resmi ve adı profil sayfasına götürür (bkz. band-requests.js openProfile). */
.band-who { cursor:pointer; }
.band-name-go { color:var(--accent); font-weight:800; margin-left:2px; }
.band-genre { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-secondary); margin-top:3px; }
.band-genre svg { flex-shrink:0; opacity:0.7; margin-left:2px; }
.band-members { margin-left:1px; }

.band-when { display:flex; gap:10px; margin:13px 0; }
.band-when-item { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text); background:var(--surface-raised); border:1px solid var(--border); border-radius:9px; padding:7px 11px; }
.band-when-item svg { color:var(--accent); flex-shrink:0; }
.band-sched { display:inline-flex; align-items:center; gap:7px; margin:13px 0; height:38px; padding:0 14px; border-radius:10px; background:var(--surface-raised); border:1px solid var(--border); color:var(--text); font-size:13px; font-weight:600; font-family:var(--font-display); cursor:pointer; transition:background 140ms ease; }
.band-sched:active { background:var(--surface-high); }
.band-sched svg { color:var(--accent); flex-shrink:0; }

.band-actions { display:flex; gap:10px; }
.band-btn { flex:1; height:42px; border-radius:12px; font-size:13.5px; font-weight:700; font-family:var(--font-display); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:opacity 140ms ease, background 140ms ease; }
.band-reject { background:rgba(229,85,85,0.1); border:1.5px solid rgba(229,85,85,0.25); color:#e55; }
.band-reject:active { background:rgba(229,85,85,0.2); }
.band-approve { background:#3ddc84; border:none; color:#06231b; box-shadow:0 4px 14px rgba(61,220,132,0.28); }
.band-approve:active { opacity:0.9; }

.band-status { display:flex; align-items:center; justify-content:center; gap:7px; height:42px; border-radius:12px; font-size:13.5px; font-weight:700; font-family:var(--font-display); }
.band-status.is-approved { color:#3ddc84; background:rgba(61,220,132,0.1); border:1px solid rgba(61,220,132,0.22); }
.band-status.is-rejected { color:#e55; background:rgba(229,85,85,0.08); border:1px solid rgba(229,85,85,0.2); }

.band-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 32px; text-align:center; }
.band-empty-ic { width:64px; height:64px; border-radius:20px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:16px; }
.band-empty-title { font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px; }
.band-empty-sub { font-size:13px; color:var(--text-secondary); }

/* ============================================================
   REGISTER CONSENT (KVKK + Üyelik Sözleşmesi)
   ============================================================ */

.auth-consent { margin:4px 0 4px; }
.consent-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:11px; }
.consent-cb { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.consent-box { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border); background:var(--surface); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; margin-top:1px; transition:background 150ms ease, border-color 150ms ease; }
.consent-cb:checked + .consent-box { background:var(--accent); border-color:var(--accent); }
.consent-cb:checked + .consent-box::after { content:''; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(0,-1px); }
.consent-text { font-size:12.5px; line-height:1.5; color:var(--text-secondary); }
.consent-link { background:none; border:none; padding:0; margin:0; color:var(--accent); font-weight:600; font-size:12.5px; font-family:inherit; cursor:pointer; text-decoration:underline; }
.consent-error { display:none; font-size:11px; color:#ff4455; padding-left:2px; margin-top:2px; }
.auth-consent.has-error .consent-error { display:block; }
.auth-consent.has-error .consent-box { border-color:#ff4455; }

/* Agreement bottom sheet */
.agr-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.72); z-index:120; display:flex; align-items:flex-end; opacity:0; transition:opacity 300ms ease; }
.agr-overlay.open { opacity:1; }
.agr-sheet { width:100%; background:#161616; border-radius:24px 24px 0 0; border-top:1px solid var(--border); padding:10px 22px 26px; transform:translateY(100%); transition:transform 320ms cubic-bezier(0.25,0.46,0.45,0.94); max-height:84%; display:flex; flex-direction:column; }
.agr-overlay.open .agr-sheet { transform:translateY(0); }
.agr-handle { width:40px; height:4px; border-radius:999px; background:var(--surface-high); margin:0 auto 16px; flex-shrink:0; }
.agr-title { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--text); margin-bottom:14px; flex-shrink:0; }
.agr-content { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-bottom:16px; }
.agr-content::-webkit-scrollbar { display:none; }
.agr-content p { font-size:13.5px; line-height:1.65; color:var(--text-secondary); margin-bottom:13px; }
.agr-content p:last-child { margin-bottom:0; }
.agr-actions { display:flex; gap:10px; flex-shrink:0; }
.agr-close { flex:1; height:48px; border-radius:14px; background:var(--surface); border:1.5px solid var(--border); color:var(--text); font-size:14px; font-weight:600; font-family:var(--font-display); cursor:pointer; }
.agr-close:active { background:var(--surface-raised); }
.agr-accept { flex:1.4; height:48px; border-radius:14px; background:var(--accent); border:none; color:#fff; font-size:14px; font-weight:700; font-family:var(--font-display); cursor:pointer; box-shadow:0 4px 16px rgba(255,82,0,0.35); }
.agr-accept:active { opacity:0.9; }

/* ============================================================
   QR KOD SCREEN
   ============================================================ */

.screen-qr { display:flex; flex-direction:column; overflow:hidden; position:relative; }
.qr-screen-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:24px 22px; display:flex; flex-direction:column; align-items:center; }
.qr-screen-body::-webkit-scrollbar { display:none; }
.qr-intro { font-size:13.5px; line-height:1.6; color:var(--text-secondary); text-align:center; margin-bottom:22px; max-width:300px; }
.qr-hint { display:flex; align-items:center; gap:7px; margin-top:18px; font-size:12px; color:var(--text-muted); text-align:center; }
.qr-hint svg { flex-shrink:0; color:var(--accent); }

/* ============================================================
   TL (₺) GLYPH ICON
   ============================================================ */
.tl-icon { font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }

/* ============================================================
   MÜZİSYEN / GRUP ARA + DETAY
   ============================================================ */
.ms-searchbar { flex-shrink:0; display:flex; gap:10px; padding:12px 16px; }
.ms-search-box { flex:1; display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0 13px; height:42px; }
.ms-search-ic { color:var(--text-muted); display:flex; flex-shrink:0; }
.ms-search-box input { flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-size:14px; }
.ms-search-box input::placeholder { color:var(--text-muted); }
.ms-filter-btn { position:relative; flex-shrink:0; width:42px; height:42px; border-radius:12px; background:var(--surface); border:1px solid var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ms-filter-btn:active { background:var(--surface-high); }
.ms-filter-count { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; display:none; align-items:center; justify-content:center; }

.ms-active { flex-shrink:0; display:none; flex-wrap:wrap; gap:7px; padding:0 16px 10px; }
.ms-active-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; background:var(--accent-subtle); border:1px solid var(--accent); color:var(--accent); font-size:11.5px; font-weight:600; cursor:pointer; }
.ms-active-chip svg { opacity:0.8; }

.ms-list { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 16px 18px; display:flex; flex-direction:column; gap:10px; }
.ms-list::-webkit-scrollbar { display:none; }
.ms-result { display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:12px; border-radius:15px; background:var(--surface); border:1px solid var(--border); cursor:pointer; transition:background 150ms ease; }
.ms-result:active { background:var(--surface-high); }
.ms-result-thumb { width:58px; height:58px; border-radius:13px; flex-shrink:0; background-size:cover; background-position:center; }
.ms-result-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ms-result-name { font-size:15px; font-weight:700; color:var(--text); font-family:var(--font-display); }
.ms-result-sub { font-size:11.5px; font-weight:600; color:var(--accent); }
.ms-result-meta { font-size:11.5px; color:var(--text-muted); display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-result-meta svg { flex-shrink:0; }
.ms-result-chev { color:var(--text-muted); flex-shrink:0; }

/* Filter / composer bottom sheet */
.ms-sheet-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); z-index:95; display:flex; align-items:flex-end; opacity:0; transition:opacity 320ms ease; }
.ms-sheet-overlay.open { opacity:1; }
.ms-sheet { width:100%; background:#161616; border-radius:24px 24px 0 0; border-top:1px solid var(--border); padding:10px 20px 26px; transform:translateY(100%); transition:transform 320ms cubic-bezier(0.25,0.46,0.45,0.94); max-height:90%; overflow-y:auto; scrollbar-width:none; }
.ms-sheet::-webkit-scrollbar { display:none; }
.ms-sheet-overlay.open .ms-sheet { transform:translateY(0); }
.ms-sheet-handle { width:40px; height:4px; border-radius:999px; background:var(--surface-high); margin:0 auto 16px; }
.ms-sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ms-sheet-title { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--text); }
.ms-sheet-clear { background:none; border:none; color:var(--accent); font-size:13px; font-weight:600; cursor:pointer; }
.ms-sheet-sub { font-size:12.5px; color:var(--text-secondary); margin-bottom:16px; }
.ms-flabel { font-size:11.5px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.4px; margin:16px 0 9px; }

.ms-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ms-chip { padding:8px 13px; border-radius:999px; background:var(--surface); border:1.5px solid var(--border); color:var(--text-secondary); font-size:12.5px; font-weight:600; cursor:pointer; transition:all 0.14s ease; -webkit-tap-highlight-color:transparent; }
.ms-chip:active { background:var(--surface-high); }
.ms-chip.on { background:var(--accent-subtle); border-color:var(--accent); color:var(--accent); }
.ms-seg { display:flex; gap:8px; }
.ms-seg-btn { flex:1; padding:11px 6px; border-radius:11px; background:var(--surface); border:1.5px solid var(--border); color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.14s ease; -webkit-tap-highlight-color:transparent; }
.ms-seg-btn:active { background:var(--surface-high); }
.ms-seg-btn.on { background:var(--accent-subtle); border-color:var(--accent); color:var(--accent); }

.ms-apply { width:100%; margin-top:22px; height:50px; border-radius:14px; background:var(--accent); border:none; color:#fff; font-size:15px; font-weight:700; font-family:var(--font-display); cursor:pointer; }
.ms-apply:active { filter:brightness(0.92); }

/* Detail screen */
.screen-md { display:flex; flex-direction:column; overflow:hidden; position:relative; }
.md-scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:14px 16px 20px; }
.md-scroll::-webkit-scrollbar { display:none; }
.md-foot { flex-shrink:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--bg); }
.ms-cta { width:100%; height:52px; border-radius:15px; background:var(--accent); border:none; color:#fff; font-size:15px; font-weight:700; font-family:var(--font-display); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; }
.ms-cta:active { filter:brightness(0.92); }
.md-times { display:flex; gap:12px; }
.md-time-col { flex:1; }
.ms-sublabel { display:block; font-size:11px; color:var(--text-muted); margin-bottom:5px; }

/* ============================================================
   DOĞUM GÜNÜ MESAJI
   ============================================================ */
.bd-intro { font-size:12.5px; line-height:1.55; color:var(--text-secondary); background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:13px 14px; margin-bottom:18px; }
.bd-intro b { color:var(--text); }
.bd-textarea { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:12px 14px; color:var(--text); font-size:14px; font-family:inherit; line-height:1.5; resize:vertical; outline:none; }
.bd-textarea:focus { border-color:var(--accent); }
.bd-textarea::placeholder { color:var(--text-muted); }
.bd-count { display:block; text-align:right; font-size:11px; color:var(--text-muted); margin-top:5px; }
.bd-search { position:relative; }
.bd-search-box { display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:0 13px; height:48px; }
.bd-search-ic { color:var(--text-muted); display:flex; flex-shrink:0; }
.bd-search-box input { flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-size:14px; }
.bd-search-box input::placeholder { color:var(--text-muted); }
.bd-results { display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); background:#1a1a1a; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,0.6); z-index:30; }
.bd-results.open { display:block; }
.bd-result { display:flex; align-items:center; gap:11px; padding:10px 12px; cursor:pointer; }
.bd-result + .bd-result { border-top:1px solid var(--border); }
.bd-result:active { background:var(--surface-high); }
.bd-result-art { width:42px; height:42px; border-radius:9px; flex-shrink:0; background-size:cover; background-position:center; background-color:var(--surface-high); }
.bd-result-info { flex:1; min-width:0; }
.bd-result-name { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-result-artist { display:block; font-size:11.5px; color:var(--text-secondary); margin-top:1px; }
.bd-no { padding:14px; text-align:center; color:var(--text-muted); font-size:13px; }
.bd-sel { display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px; border-radius:14px; background:var(--accent-subtle); border:1px solid var(--accent); }
.bd-sel-art { width:48px; height:48px; border-radius:11px; flex-shrink:0; background-size:cover; background-position:center; background-color:var(--surface-high); }
.bd-sel-info { flex:1; min-width:0; }
.bd-sel-name { display:block; font-size:14px; font-weight:700; color:var(--text); font-family:var(--font-display); }
.bd-sel-artist { display:block; font-size:12px; color:var(--accent); margin-top:2px; }
.bd-sel-change { flex-shrink:0; background:var(--surface); border:1px solid var(--border); color:var(--text-secondary); font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px; cursor:pointer; }

/* Doğum günü kutlaması — sıra listesindeki özel öğe */
.np-queue-item.bday-next { border:1px solid var(--accent); background:rgba(255,82,0,0.06); border-radius:12px; padding:8px 10px; margin:2px 0; }
.np-queue-item.bday-next + .np-queue-item { border-top:none; }
.bday-art { background:linear-gradient(135deg,#ff5200,#ff9a4d); }
.bday-remove { width:28px; height:28px; flex-shrink:0; border-radius:50%; background:rgba(229,85,85,0.12); border:1px solid rgba(229,85,85,0.25); color:#e55; font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bday-remove:active { background:rgba(229,85,85,0.2); }

/* Kutlama geçmişi */
.bd-history-item { display:flex; align-items:flex-start; gap:12px; padding:13px; border-radius:14px; background:var(--surface); border:1px solid var(--border); margin-bottom:10px; }
.bd-history-cover { width:44px; height:44px; border-radius:10px; flex-shrink:0; background-size:cover; background-position:center; background-color:var(--surface-high); }
.bd-history-body { flex:1; min-width:0; }
.bd-history-song { font-size:13.5px; font-weight:700; color:var(--text); font-family:var(--font-display); }
.bd-history-artist { font-size:12px; font-weight:500; color:var(--text-secondary); }
.bd-history-msg { display:block; font-size:12.5px; color:var(--text-secondary); font-style:italic; line-height:1.5; margin-top:4px; }
.bd-history-meta { display:block; font-size:11px; color:var(--text-muted); margin-top:6px; }
.bd-history-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.bd-history-status { font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.bd-history-status.st-planned { background:var(--accent-subtle); color:var(--accent); }
.bd-history-status.st-played { background:rgba(60,180,120,0.14); color:#3cb478; }
.bd-history-status.st-cancelled { background:rgba(229,85,85,0.12); color:#e55; }
.bd-history-cancel { font-size:11px; font-weight:600; color:var(--text-secondary); background:none; border:1px solid var(--border); border-radius:999px; padding:5px 11px; cursor:pointer; }
.bd-history-cancel:active { background:var(--surface-high); }

/* ============================================================
   OY VERENLER (raporlar) + KULLANICI DETAYI
   ============================================================ */
.rv-list { display:flex; flex-direction:column; gap:8px; }
.rv-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 12px; border-radius:13px; background:var(--surface); border:1px solid var(--border); cursor:pointer; transition:background 150ms ease; }
.rv-row:active { background:var(--surface-high); }
.rv-av { width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--accent-subtle); color:var(--accent); font-size:14px; font-weight:700; font-family:var(--font-display); }
.rv-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rv-name { font-size:14px; font-weight:600; color:var(--text); }
.rv-sub { font-size:12px; color:var(--text-muted); }
.rv-chev { color:var(--text-muted); flex-shrink:0; }
.rv-banned { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:rgba(229,85,85,0.14); color:#e55; font-size:10px; font-weight:700; vertical-align:middle; }

.screen-vd { display:flex; flex-direction:column; overflow:hidden; position:relative; }
.vd-scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:14px 16px 20px; }
.vd-scroll::-webkit-scrollbar { display:none; }
.vd-id { display:flex; align-items:center; gap:14px; padding:14px; border-radius:16px; background:var(--surface); border:1px solid var(--border); }
.vd-id-link { width:100%; cursor:pointer; text-align:left; font:inherit; transition:border-color 0.14s ease; }
.vd-id-link:active { border-color:var(--accent); }
.vd-id-chev { margin-left:auto; color:var(--text-muted); flex-shrink:0; display:flex; }
.vd-profile-btn { width:100%; margin-top:10px; height:46px; border-radius:13px; background:var(--accent-subtle); border:1px solid var(--accent); color:var(--accent); font-size:14px; font-weight:700; font-family:var(--font-display); cursor:pointer; }
.vd-profile-btn:active { filter:brightness(0.95); }
.up-nosoc { font-size:12.5px; color:var(--text-muted); }
.vd-av { width:54px; height:54px; border-radius:15px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--accent-subtle); color:var(--accent); font-size:18px; font-weight:700; font-family:var(--font-display); }
.vd-id-text { display:flex; flex-direction:column; gap:3px; }
.vd-id-name { font-size:16px; font-weight:700; color:var(--text); font-family:var(--font-display); }
.vd-id-sub { font-size:12.5px; color:var(--text-muted); }
.vd-ban { width:100%; margin-top:12px; height:46px; border-radius:13px; background:rgba(229,85,85,0.1); border:1px solid rgba(229,85,85,0.3); color:#e55; font-size:14px; font-weight:700; font-family:var(--font-display); cursor:pointer; }
.vd-ban:active { background:rgba(229,85,85,0.16); }
.vd-ban.is-unban { background:var(--surface); border-color:var(--border); color:var(--text-secondary); }
.vd-songs { display:flex; flex-direction:column; gap:8px; }
.vd-song { display:flex; align-items:center; gap:12px; padding:12px; border-radius:13px; background:var(--surface); border:1px solid var(--border); }
.vd-song-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.vd-song-name { font-size:13.5px; font-weight:600; color:var(--text); }
.vd-song-sub { font-size:11.5px; color:var(--text-muted); }
.vd-refund { flex-shrink:0; padding:8px 13px; border-radius:10px; background:var(--accent-subtle); border:1px solid var(--accent); color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; }
.vd-refund:active { filter:brightness(0.94); }
.vd-refunded { flex-shrink:0; font-size:11.5px; font-weight:700; color:#3ddc84; }
.vd-free { flex-shrink:0; font-size:11px; color:var(--text-muted); }


/* ── Mekan Ekranları (screens.js) ── */
.scr-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#666; margin-right:6px; vertical-align:middle; }
.scr-dot.is-on { background:#3ddc84; box-shadow:0 0 8px rgba(61,220,132,0.7); }
/* sarı: bağlı ama bir süredir veri çekmiyor — kırmızı: yanıt vermediği için eşleşme düştü */
.scr-dot.is-idle { background:#f5a524; box-shadow:0 0 8px rgba(245,165,36,0.5); }
.scr-dot.is-off { background:#e55; box-shadow:0 0 8px rgba(238,85,85,0.5); }
.scr-card-dropped { opacity:0.72; border-color:rgba(229,85,85,0.28); }
.scr-drop-note { font-size:12px; line-height:1.5; color:var(--text-secondary); background:rgba(229,85,85,0.08); border:1px solid rgba(229,85,85,0.18); border-radius:10px; padding:8px 10px; margin:10px 0 0; }

/* Kutlama mesajı çalarken mini oynatıcı: kuyruktaki şarkı değil kutlama gösterilir,
   kullanıcı farkı hemen görsün diye üst kenar vurgulanır. */
.home-footer.is-celebrating { box-shadow: inset 0 2px 0 #ffd23f; }
.home-footer.is-celebrating .hfooter-track-name { color: #ffd23f; }

/* Kutlama mesajının "Sıradakiler" listesinde sürüklenmesi.
   touch-action:none ŞART: olmadan tarayıcı parmağı liste kaydırma sanıyor ve
   pointermove olayları bize hiç gelmiyor. Tutamaç, parmakla rahat yakalansın
   diye satır yüksekliği boyunca uzatıldı. */
.bday-grip { flex-shrink:0; width:26px; align-self:stretch; min-height:38px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.bday-grip:hover { color:var(--accent); }
.bday-grip:active { cursor:grabbing; color:var(--accent); }
/* Sürükleme görselleri ortak katmanda (shared/css/components.css > .nc-drop-ph,
   .nc-dragging). Burada yalnız listeye özgü olan kalır. */



/* Yayındaki listede sıralamanın neden kapalı olduğunu açıklayan not */
.pd-order-note { font-size:11.5px; line-height:1.5; color:var(--text-secondary); background:rgba(255,82,0,0.07); border:1px solid rgba(255,82,0,0.18); border-radius:10px; padding:8px 10px; margin:0 0 10px; }

/* Kutlama çalarken: tek yapılabilecek işlem iptal */
.qs-celeb-stop { width:calc(100% - 32px); margin:0 16px 10px; height:38px; border-radius:10px; border:1px solid rgba(229,85,85,0.3); background:rgba(229,85,85,0.1); color:#e55; font-size:12.5px; font-weight:600; cursor:pointer; }
.qs-celeb-stop:active { background:rgba(229,85,85,0.18); }
.qs-celeb-stop:disabled { opacity:0.5; cursor:default; }
/* Ekran kartındaki eylemler kart başlığına yapışmasın (paylaşılan .mz-req-acts'ın
   üst boşluğu yok; orada üstte başka içerik oluyor). */
.scr-acts { margin-top:14px; margin-bottom:0; }

/* Sahne isteği kartında canlı yayın satırı */
.band-live-now { margin:10px 0 0; padding:9px 11px; border-radius:11px; font-size:12.5px; line-height:1.5;
  background:rgba(229,85,85,0.10); border:1px solid rgba(229,85,85,0.28); color:#f0d5d5; }
.band-live-now b { color:#fff; }
.mz-req-act.band-golive { background:var(--accent-subtle); border-color:var(--accent); color:var(--accent); font-weight:700; }
/* Sesin hangi ekrandan çıkacağı (bkz. business/screens.js setAudio) */
.scr-audio-on { border-color:var(--accent) !important; color:var(--accent) !important; }
/* "Hemen Çal" bedelini ödeyen kullanıcı (playlist satırı) */
.pd-song-hcby { font-size:10.5px; font-weight:600; color:var(--accent); background:var(--accent-subtle); border-radius:6px; padding:2px 6px; white-space:nowrap; flex-shrink:0; }


/* İstekler: yayındaki istek listede yoksa (başka sekmede ya da silinmiş) baştaki canlı şeridi */
.band-live-card .band-live-now { margin-top:0; }
.band-live-card .mz-req-acts { margin:10px 0 0; }

/* ── Hemen Çal rozeti (mekan ekranındakinin aynısı) ──
   Üye resminin gösterilmesine izin verdiyse oy sayısı yerine RESMİ, sağ
   altında eski HÇ rozetinin küçüğü. İzin ya da resim yoksa eski rozet kalır. */
.np-hc, .pd-hc { position:relative; flex-shrink:0; }
.np-hc { width:40px; height:40px; }
.pd-hc { width:32px; height:32px; margin-right:4px; }
.np-hc-av, .pd-hc-av { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#2a2f2c;
  font-family:var(--font-display); font-size:12px; font-weight:700; color:#fff; box-shadow:0 0 0 2px #3ddc84, 0 0 12px rgba(61,220,132,0.45); }
.np-hc-mark, .pd-hc-mark { position:absolute; right:-7px; bottom:-5px; min-width:22px; height:18px; padding:0 4px; box-sizing:border-box; border-radius:999px;
  display:flex; align-items:center; justify-content:center; background:#3ddc84; color:#06231b; font-family:var(--font-display);
  font-size:9px; font-weight:800; line-height:1; border:2px solid #0f0f0f; }
.pd-hc-mark { min-width:20px; height:16px; font-size:8.5px; border-color:var(--ground); }
/* Yeni gelen Hemen Çal: rozet dönerek büyür, işaret patlar, etrafında yeşil dalga */
.np-hc.is-new .np-hc-av,
.np-q-votes.is-new { animation:np-hc-in 900ms cubic-bezier(0.2,1.6,0.4,1) both; }
.np-hc.is-new .np-hc-mark { animation:np-hc-pop 520ms cubic-bezier(0.2,1.6,0.4,1) 480ms both; }
.np-q-votes.is-new { position:relative; }
.np-hc.is-new::after,
.np-q-votes.is-new::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #3ddc84; opacity:0;
  animation:np-hc-wave 1.1s ease-out 300ms 3; pointer-events:none; }
@keyframes np-hc-in { 0% { opacity:0; transform:scale(0.2) rotate(-30deg); } 60% { opacity:1; transform:scale(1.28) rotate(8deg); } 100% { opacity:1; transform:scale(1) rotate(0deg); } }
@keyframes np-hc-pop { 0% { opacity:0; transform:scale(0.3); } 100% { opacity:1; transform:scale(1); } }
@keyframes np-hc-wave { 0% { opacity:0.95; transform:scale(1); } 100% { opacity:0; transform:scale(2.2); } }

/* Ayarlar → Hesap → Hesabı Sil (Google Play / App Store şartı; bkz. App.deleteAccountFlow) */
.set-danger-zone { margin-top:22px; border-bottom:none; }
.set-danger-zone .set-section-title { color:#ff6b6b; }
.set-danger-btn { width:100%; height:46px; border-radius:14px; background:rgba(229,85,85,0.08); border:1px solid rgba(229,85,85,0.4); color:#ff6b6b; font-size:14px; font-weight:700; font-family:var(--font-display); cursor:pointer; }
.set-danger-btn:active { background:rgba(229,85,85,0.16); }