/* =========================================================
   TALENT PROFILE – AUDIOS (Public Slider Showcase)
   Dark gradient + Experiences header style
   Namespace: tp-aud-*
========================================================= */

:root{
  --tp-aud-bg: #0d0d0f;
  --tp-aud-card: #141417;
  --tp-aud-card-2: #17171b;
  --tp-aud-text: #fff;
  --tp-aud-muted: #bcbcbc;
  --tp-aud-border: #222226;
  --tp-aud-red-1:#D90404;
  --tp-aud-red-2:#730707;
  --tp-aud-pill-bg: #1b1b1f;
  --tp-aud-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.tp-aud-cardwrap{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%) , var(--tp-aud-bg);
  border:1px solid var(--tp-aud-border);
  border-radius:16px;
  padding:22px 22px 12px;
  color:var(--tp-aud-text);
  box-shadow: var(--tp-aud-shadow);
}

.tp-aud-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:12px;
}
.tp-aud-headleft{ display:flex; flex-direction:column; gap:4px; }
.tp-aud-title{
  font-size:20px; font-weight:700; margin:0;
  display:flex; gap:10px; align-items:center;
}
.tp-aud-title .bi{ color: var(--tp-aud-red-1); }
.tp-aud-subtitle{ font-size:13px; color:var(--tp-aud-muted); margin:0; }

/* Header controls (Experiences tarzı) */
.tp-aud-headctrl{ display:flex; align-items:center; gap:10px; }
.tp-aud-hbtn{
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--tp-aud-border);
  background:#121215; color:#fff; display:grid; place-items:center;
}
.tp-aud-hbtn:hover{ border-color: rgba(217,4,4,.45); }
.tp-aud-counter{ color:#cfcfcf; font-weight:600; min-width:44px; text-align:center; }

/* Empty */
.tp-aud-empty{
  background: var(--tp-aud-card);
  border:1px dashed var(--tp-aud-border);
  border-radius:14px; padding:28px; text-align:center; color:var(--tp-aud-muted);
}

/* Slider */
.tp-aud-slider{ position:relative; }

/* Track */
.tp-aud-track{
  display:flex; gap:16px;
  overflow:hidden; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:6px 8px 14px;
}

/* Item columns: 1/2/3 */
.tp-aud-item{ scroll-snap-align:start; flex:0 0 calc(100%); }
@media (min-width:576px){ .tp-aud-item{ flex-basis: calc((100% - 16px)/2); } }
@media (min-width:992px){ .tp-aud-item{ flex-basis: calc((100% - 32px)/3); } }

.tp-aud-item-inner{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 35%), var(--tp-aud-card);
  border:1px solid var(--tp-aud-border);
  border-radius:16px; padding:16px 16px 12px; height:100%;
  display:flex; flex-direction:column; gap:12px;
}

/* Top row -> brand • meta • cta */
.tp-aud-row{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }

.tp-aud-brand{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  background: radial-gradient(160% 160% at 30% 20%, var(--tp-aud-red-1), var(--tp-aud-red-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.tp-aud-brand .bi{ color:#fff; font-size:18px; }

.tp-aud-meta{ min-width:0; }
.tp-aud-open{ all:unset; cursor:pointer; display:block; min-width:0; }
.tp-aud-name{
  font-weight:700; font-size:15px; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tp-aud-submeta{
  margin-top:2px; font-size:12.5px; color:var(--tp-aud-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Copy pill */
.tp-aud-cta .tp-aud-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-size:13px; line-height:1; border-radius:999px;
  background:var(--tp-aud-pill-bg);
  border:1px solid var(--tp-aud-border); color:#fff;
}
.tp-aud-cta .tp-aud-btn .bi{ font-size:16px; }
.tp-aud-cta .tp-aud-btn:hover{
  border-color: rgba(217,4,4,.5);
  box-shadow:0 0 0 2px rgba(217,4,4,.12) inset;
}

/* Player – koyu siyah gradyan */
.tp-aud-player{
  background: linear-gradient(180deg,#0c0c0f 0%, #121214 100%);
  border:1px solid var(--tp-aud-border);
  border-radius:14px; padding:10px;
}
.tp-aud-player audio{
  width:100%;
  color-scheme: dark;
  filter: saturate(1.05) contrast(1.03);
}
.tp-aud-player audio::-webkit-media-controls-enclosure{
  background: linear-gradient(180deg,#101014,#18181c);
  border-radius:10px;
  border:1px solid #232327;
}
.tp-aud-player audio::-webkit-media-controls-panel{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Modal */
.tp-aud-modal[hidden]{ display:none !important; }
.tp-aud-modal{
  position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.65);
  display:grid; place-items:center; padding:20px;
}
.tp-aud-modal-dialog{
  width:min(760px, 96vw); background:var(--tp-aud-card);
  border:1px solid var(--tp-aud-border);
  border-radius:18px; box-shadow: var(--tp-aud-shadow);
  overflow:hidden; position:relative;
}
.tp-aud-x{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:999px;
  background:var(--tp-aud-pill-bg); border:1px solid var(--tp-aud-border);
  color:#fff; display:grid; place-items:center;
}
.tp-aud-modal-header{ padding:18px 18px 8px; }
.tp-aud-modal-title{ margin:0; font-size:18px; }
.tp-aud-modal-body{ padding:0 18px 12px; color:var(--tp-aud-muted); }
.tp-aud-modal-body audio{ width:100%; margin-top:10px; }
.tp-aud-modal-footer{
  display:flex; gap:10px; justify-content:flex-end; padding:12px 18px 16px;
  background:#111115; border-top:1px solid var(--tp-aud-border);
}
.tp-aud-modal-copy, .tp-aud-modal-close{
  border:1px solid var(--tp-aud-border); background:var(--tp-aud-pill-bg);
  color:#fff; padding:8px 12px; border-radius:10px; font-size:14px;
}
.tp-aud-modal-copy .bi{ margin-right:6px; }
.tp-aud-modal-copy:hover, .tp-aud-modal-close:hover{ border-color: rgba(217,4,4,.45); }

/* Toast */
.tp-aud-toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  padding:8px 12px; border-radius:10px; font-size:13px;
  color:#fff; background: rgba(0,0,0,.8); border:1px solid var(--tp-aud-border);
  box-shadow: var(--tp-aud-shadow); z-index:120;
}