/* ==========================================================================
   Groyt — Herkese açık çalma listesi kartları (js/public-playlists.js)
   Dashboard (⭐ Yıldızladıklarım · 🔥 Popüler) ve herkese açık sayfalardaki
   üye kartlarında ortak. Groyt tokenları: amber vurgu, koyu yüzey.
   ========================================================================== */
.gpl-section { container-type: inline-size; }
.gpl-section-sub { font-size: 12.5px; color: var(--text-secondary, #9aa4bd); margin: 2px 0 12px; }
.gpl-section-sub:last-child { margin: 12px 0 0; }
.gpl-section code { font-size: 12px; }

.gpl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; container-type: inline-size; }
@container (min-width: 560px) { .gpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gpl-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

.gpl-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(160deg, rgba(255, 193, 7, 0.06), rgba(255, 255, 255, 0.02) 55%);
  transition: border-color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) { .gpl-card:hover { border-color: rgba(255, 193, 7, 0.35); transform: translateY(-2px); } }
.gpl-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.gpl-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gpl-name { font-weight: 700; font-size: 15px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpl-meta, .gpl-stats { font-size: 12.5px; color: var(--text-secondary, #9aa4bd); }
.gpl-stats { color: #ffd875; }
.gpl-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary, #9aa4bd); }
.gpl-owner img { width: 16px; height: 16px; border-radius: 50%; }

.gpl-cover {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.25); font-size: 22px;
}
.gpl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gpl-cover.is-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gpl-cover.is-lg { width: 84px; height: 84px; border-radius: 14px; font-size: 32px; }

.gpl-tracks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: gpl; }
.gpl-tracks li {
  counter-increment: gpl; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline;
  padding: 5px 8px; border-radius: 8px; font-size: 13px;
}
.gpl-tracks li::before { content: counter(gpl); grid-row: span 2; color: var(--text-tertiary, #636d87); font-size: 12px; font-variant-numeric: tabular-nums; }
.gpl-tracks li:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.gpl-tr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.gpl-tr-title a { color: inherit; text-decoration: none; }
.gpl-tr-title a:hover { color: #FFC107; text-decoration: underline; }
.gpl-tr-author { grid-column: 2; font-size: 12px; color: var(--text-secondary, #9aa4bd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpl-tr-dur { grid-column: 3; grid-row: 1; font-size: 12px; color: var(--text-tertiary, #636d87); font-variant-numeric: tabular-nums; }
.gpl-empty { font-size: 13px; color: var(--text-tertiary, #636d87); }
.gpl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }