/* Acilir kapanir radyo (radio.js). Eski sitedeki radyonun yeni site stilinde hali. */
.rp {
  position: fixed; right: var(--gutter, 16px); bottom: 18px; z-index: 40; width: min(300px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; --rp-level: 0.55;
}
.rp-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0.65rem 0.9rem;
  border: 1px solid rgba(215, 178, 137, 0.4); border-radius: 12px; background: rgba(14, 12, 10, 0.92);
  color: var(--accent); font: 500 0.7rem var(--font-mono, monospace); letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); cursor: pointer; transition: border-color 0.2s;
}
.rp-toggle:hover { border-color: var(--accent); }
.rp-label { flex: 1; text-align: left; }
.rp-sym { font-size: 1rem; line-height: 1; }
.rp-bars { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.rp-bars i { width: 2px; height: 30%; background: var(--accent); border-radius: 1px; }
.rp.is-playing .rp-bars i { animation: rp-eq 0.9s ease-in-out infinite; }
.rp.is-playing .rp-bars i:nth-child(2) { animation-delay: -0.3s; }
.rp.is-playing .rp-bars i:nth-child(3) { animation-delay: -0.6s; }
.rp.is-playing .rp-bars i:nth-child(4) { animation-delay: -0.15s; }
@keyframes rp-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

.rp-panel {
  display: grid; gap: 0.8rem; max-height: 0; overflow: hidden; padding: 0 0.95rem; opacity: 0; transform: translateY(8px);
  border: 1px solid transparent; border-radius: 12px; background: rgba(12, 11, 10, 0.95);
  transition: max-height 0.26s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
}
.rp.is-open .rp-panel { max-height: 360px; padding: 0.95rem; opacity: 1; transform: none; border-color: var(--line, rgba(255, 255, 255, 0.1)); }
.rp-note { margin: 0; color: var(--muted-strong); font-size: 0.85rem; }
.rp-wave {
  display: grid; grid-template-columns: repeat(12, 2px); justify-content: space-between; align-items: center; height: 34px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1)); border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1)); padding: 0 2px;
}
.rp-wave span { display: block; height: calc(6px + var(--rp-level) * 14px); border-radius: 2px; background: var(--accent); opacity: 0.3; }
.rp.is-open.is-playing .rp-wave span { opacity: 0.85; animation: rp-wave 0.9s ease-in-out infinite; }
.rp-wave span:nth-child(3n) { animation-duration: 0.7s; }
.rp-wave span:nth-child(3n + 1) { animation-duration: 1.15s; animation-delay: -0.2s; }
.rp-wave span:nth-child(4n) { animation-delay: -0.45s; }
@keyframes rp-wave { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1.25); } }
.rp-now span { display: block; font: 0.6rem var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rp-now strong { display: block; margin-top: 3px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-controls { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 6px; }
.rp-controls button {
  padding: 0.55rem 0; border-radius: 9px; border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.2)); background: none;
  color: var(--text); font: 500 0.7rem var(--font-mono, monospace); letter-spacing: 0.06em; cursor: pointer;
}
.rp-controls button:hover { border-color: var(--accent); }
.rp-controls .rp-main { background: var(--accent); border-color: var(--accent); color: #0b0a09; }
.rp-vol { display: flex; align-items: center; gap: 10px; font: 0.62rem var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rp-vol input { flex: 1; accent-color: var(--accent); }

/* dar masaustu pencerede kategori cubuguyla carpismasin: kapaliyken sadece ikon */
@media (max-width: 1240px) {
  body.is-exploring .rp:not(.is-open) { width: auto; }
  body.is-exploring .rp:not(.is-open) .rp-label, body.is-exploring .rp:not(.is-open) .rp-sym { display: none; }
}