/* =========================================================
   PROFILE VIDEO LINKS – Audios-like UI (with icon chips)
   Namespace: tp-vid-*
========================================================= */

.tp-vid-wrap{
  --bg: linear-gradient(180deg, #141414 0%, #0f0f0f 100%);
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --text: #fff;
  --text-dim: rgba(255,255,255,0.75);
  --shadow: 0 0 16px rgba(0,0,0,0.45);
  --card: #151515;
  --card-hover: #1c1c1c;

  --red: #D90404;
  --red-dark: #730707;
  --red-grad: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  --red-soft: rgba(217,4,4,0.18);

  --radius-xl: 14px;
  --radius-lg: 12px;
  --track-h: 92px;

  position: relative;
  margin: 18px 0 22px;
  border-radius: var(--radius-xl);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 12px 16px;
  color: var(--text);
}

/* ==== HEAD ==== */
.tp-vid-head{ margin-bottom: 10px; }
.tp-vid-title{
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:800;
}
.tp-vid-title .bi{ color: var(--red); }
.tp-vid-sub{ margin-top:4px; font-size:13.5px; color:var(--text-dim); }

/* header controls (pager + arrows) */
.tp-vid-ctr{ display:flex; align-items:center; gap:10px; }
.tp-vid-ctr-btn{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:8px; background:#171717; color:#fff;
  border:1px solid var(--border-strong);
  transition:all .18s ease;
}
.tp-vid-ctr-btn:hover{ background:var(--red-grad); border-color:var(--red); }
.tp-vid-ctr-btn.is-disabled{ opacity:.45; pointer-events:none; filter:grayscale(100%); }
.tp-vid-ctr-page{ font-weight:800; font-size:12px; }

/* ==== FILTERS (icon + count) ==== */
.tp-vid-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px; }

.tp-vid-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:#191919; color:var(--text);
  font-weight:700; padding:6px 12px;
  border-radius:999px; font-size:12px; transition:all .18s ease;
  line-height:1; user-select:none;
}
.tp-vid-chip .bi{ font-size:14px; opacity:.9; }
.tp-vid-chip .tp-vid-count{
  margin-left:4px; padding:2px 6px; border-radius:999px;
  font-weight:800; font-size:11px;
  background:#202020; border:1px solid var(--border-strong); color:#ddd;
}
.tp-vid-chip:hover{
  border-color:var(--red);
  box-shadow:0 0 0 2px var(--red-soft) inset;
}
.tp-vid-chip.is-active{
  background:var(--red-grad); border-color:var(--red); color:#fff;
  box-shadow:0 0 0 2px var(--red-soft) inset;
}
.tp-vid-chip.is-active .tp-vid-count{
  background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.24);
}
.tp-vid-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--red-soft); }

/* RTL çip içeriği terslenmesin diye sadece yönü koru */
.tp-vid-rtl .tp-vid-chip{ direction:ltr; }

/* ==== SCROLL STRIP ==== */
.tp-vid-mask{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:calc(var(--radius-xl) - 2px);
  scroll-behavior:smooth; scrollbar-width:none;
}
.tp-vid-mask::-webkit-scrollbar{ display:none; }

.tp-vid-track{
  display:inline-flex; gap:12px; white-space:nowrap;
  padding:2px 0 10px; width:max-content;
}

.tp-vid-empty{ padding:12px; font-size:13px; color:var(--text-dim); }

/* ==== CARD – audios hissi ==== */
.tp-vid-card{
  display:flex; flex-direction:column; justify-content:center;
  gap:6px; min-width:320px; height:var(--track-h);
  padding:12px 14px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 4px 20px rgba(0,0,0,0.35);
  transition:all .18s ease; position:relative;
}
.tp-vid-card:hover{
  background:var(--card-hover); border-color:var(--red);
  box-shadow:0 0 0 2px var(--red-soft) inset, 0 6px 22px rgba(0,0,0,0.4);
  transform:translateY(-1px);
}
.tp-vid-card:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--red-soft), 0 4px 20px rgba(0,0,0,0.35);
}

.tp-vid-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.tp-vid-ico{
  width:32px; height:32px; display:grid; place-items:center;
  color:var(--red); font-size:22px; flex:0 0 32px;
}
.tp-vid-titlecap{
  font-size:14px; font-weight:800; max-width:160px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tp-vid-pill{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:10px; font-size:12px; font-weight:800;
  border:1px solid var(--border-strong);
  background:linear-gradient(180deg,#222 0%, #161616 100%);
  color:var(--text); text-decoration:none; transition:all .18s ease;
}
.tp-vid-card:hover .tp-vid-pill, .tp-vid-pill:hover{
  background:var(--red-grad); border-color:var(--red); color:#fff; transform:translateY(-1px);
}

.tp-vid-type{ font-size:11px; color:var(--text-dim); padding-left:42px; margin-top:2px; }
.tp-vid-desc{ font-size:12px; color:var(--text-dim); padding-left:42px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ==== Modal ==== */
.tp-vid-modal{ background:#121212; color:var(--text); border:1px solid var(--border); border-radius:14px; }
.tp-vid-modal .modal-header{ border-bottom:1px solid var(--border); background:linear-gradient(180deg,#181818,#111111); }
.tp-vid-modal .modal-footer{ border-top:1px solid var(--border); background:#101010; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tp-vid-mask{ scroll-behavior:auto; }
  .tp-vid-card, .tp-vid-pill{ transition:none; }
}

/* Responsive */
@media (max-width: 768px){
  .tp-vid-card{ min-width:280px; }
  .tp-vid-titlecap{ max-width:120px; }
}
@media (max-width: 576px){
  .tp-vid-wrap{ padding:12px 12px; }
  .tp-vid-card{ min-width:260px; }
  .tp-vid-titlecap{ max-width:110px; }
}