/* ─────────────────────────── PROFIL SAYFASI ───────────────────────────
 * Yalnizca profile.html yukluyor (/@kullanici). Referans: "profile page
 * design.jpg" (fotografli buyuk profil karti, ustune binen yuvarlak avatar,
 * ince cizgiyle ayrilan istatistikler, hap CTA, sag ustte yuvarlak dugme).
 * Silent Vinyls yorumu: fotograf yerine uyenin kendi rafi; en yuksek puan
 * verdigi ve begendigi albumlerin kapaklari. Bos raf yuvasi plak olugu.
 * Masaustunde raf sagdan, mobilde ustten karta karisiyor.
 * Token'lar style.css :root'tan (bkz. design-system/DIRECTION.md).
 */

.profile-page {
  width: min(var(--max-width), 92%);
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-8);
}

/* ── Profil karti ─────────────────────────────────────────────────── */

/* Kart kirpmiyor: avatar menusu (kendi profilinde) kartin disina tasabilmeli.
 * Yuvarlak koseyi rafin kendisi tasiyor. */
.pf-card {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid #25221f;
}

/* Raf: kapak mozaigi. Kapaklar gercek; eksik yuvalar plak olugu.
 * Mozaik "fotograf" gibi davransin diye tek bir perde altinda birlesiyor:
 * tek tek kapaklar parlamiyor, kart zeminine karisarak bitiyor. */
.pf-banner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 21px 21px 0 0;
  background: var(--surface-2);
  -webkit-mask-image: linear-gradient(180deg, #000 16%, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.09) 82%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 16%, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.09) 82%, transparent 98%);
  pointer-events: none;
}
/* Perde: kapaklarin uzerinde tek sicak katman. Beyaz bir kapak da,
 * koyu bir kapak da ayni sessizlige iniyor. */
.pf-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 13, 13, 0.3), rgba(13, 13, 13, 0.62)),
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(13, 13, 13, 0.5) 100%);
}
.pf-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    repeating-radial-gradient(circle at 50% 50%, #171717 0 2px, #1c1c1c 2px 3px, #141414 3px 5px);
}
/* Bos yuva: ortada koyu tan etiket, plak oldugu belli olsun. */
.pf-tile.is-empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--surface-2) 0 6%, #3a3127 7% 100%);
  opacity: 0.55;
}
.pf-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.66) contrast(0.96);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pf-tile img.is-loaded { opacity: 1; }

.pf-share {
  position: absolute;
  z-index: 3;
  top: var(--space-4);
  right: var(--space-4);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, 0.16);
  background: rgba(13, 13, 13, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.pf-share svg { width: 18px; height: 18px; }
.pf-share:hover {
  background: rgba(13, 13, 13, 0.85);
  border-color: rgba(210, 180, 140, 0.55);
  color: var(--accent);
}

.pf-body {
  position: relative;
  z-index: 2;
  padding: 0 var(--space-5) var(--space-5);
  margin-top: -72px;
}

/* ── Avatar ── */
.profile-avatar-wrap {
  position: relative;
  width: 104px;
  height: 104px;
}
.profile-avatar-circle {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 0 0 4px var(--surface), 0 12px 30px rgba(0, 0, 0, 0.5);
}
.profile-avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: none; }
.profile-avatar-circle svg { width: 100%; height: 100%; display: block; }

.avatar-upload-btn {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: var(--accent);
  color: #15120e;
  cursor: pointer;
}
.avatar-upload-btn svg { width: 15px; height: 15px; }
.avatar-upload-btn.visible { display: grid; }

.avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  min-width: 196px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transform-origin: top left;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.avatar-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.avatar-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  transition: background 0.15s;
}
.avatar-menu-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
.avatar-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.avatar-menu-item.is-danger { color: #ff9d9d; }
.avatar-menu-item.is-danger:hover { background: rgba(255, 157, 157, 0.1); }

/* ── Kimlik ── */
.profile-info { min-width: 0; margin-top: var(--space-4); }
.profile-info h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.profile-info .bio {
  max-width: 52ch;
  margin-top: var(--space-2);
  color: #d9d3c9;
  font-size: var(--text-base);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.profile-info .bio:empty { display: none; }

/* Bos biyografi bir davet: yalnizca kendi profilinde, formu acar. */
.pf-bio-add {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(125, 119, 109, 0.4);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.18s, text-decoration-color 0.18s;
}
.pf-bio-add:hover { color: var(--accent); text-decoration-color: var(--accent-soft); }
.pf-bio-add[hidden] { display: none; }

.pf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3);
  color: var(--faint);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.pf-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.pf-meta-item:empty { display: none; }
.pf-meta svg { width: 15px; height: 15px; flex-shrink: 0; }

.profile-links { display: contents; }
.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  text-decoration: none;
  transition: color 0.18s;
}
.profile-link:hover { color: var(--text); }
.profile-link.is-spotify:hover svg { color: #1db954; }
.profile-link.is-apple:hover svg { color: #fa243c; }

/* ── Istatistikler: iki grup (yazdiklari / insanlar), ince cizgiyle ayrik ── */
.pf-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) 0;
  margin-top: var(--space-5);
}
.pf-stat-group { display: flex; }
.pf-stat,
.follow-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 var(--space-5);
  border: 0;
  border-left: 1px solid #2c2925;
  background: none;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}
.pf-stat-group > :first-child { padding-left: 0; border-left: 0; }
.pf-stat-group + .pf-stat-group > :first-child { padding-left: var(--space-5); border-left: 1px solid #2c2925; }
.pf-stat b,
.follow-stat b {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.pf-stat[hidden] { display: none; }
.pf-stat-score b { color: var(--accent); }
.pf-stat-score b::before {
  content: "★";
  margin-right: 3px;
  font-size: 0.7em;
  vertical-align: 2px;
  opacity: 0.85;
}
button.follow-stat,
a.follow-stat { cursor: pointer; transition: color 0.18s; }
button.follow-stat:hover,
a.follow-stat:hover { color: var(--muted); }
button.follow-stat:hover b,
a.follow-stat:hover b { color: var(--accent); }
.elo-stat b { color: var(--accent); }

/* ── Eylemler ── */
.pf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}
.pf-pill,
.pf-actions .follow-btn,
.pf-actions .edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #15120e;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.pf-actions .follow-btn { min-width: 116px; line-height: 42px; }
.pf-pill:hover,
.pf-actions .follow-btn:hover,
.pf-actions .edit-btn:hover { background: #dcc29f; border-color: #dcc29f; opacity: 1; }
.pf-actions .follow-btn.following {
  background: transparent;
  border-color: #3a3631;
  color: var(--text);
}
.pf-actions .follow-btn.following:hover { border-color: #6b3b3b; color: #ff9d9d; }
#followSignIn[hidden] { display: none; }

/* "Tools" satirinin karsiligi: begenilen albumlerden kucuk kapak yigini. */
.pf-shelf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s;
}
.pf-shelf[hidden] { display: none; }
.pf-shelf:hover { color: var(--text); }
.pf-shelf-covers { display: flex; }
.pf-shelf-covers img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--surface);
  background: var(--surface-2);
}
.pf-shelf-covers img + img { margin-left: -9px; }

/* ── Duzenleme formu ── */
.profile-edit-form {
  display: none;
  max-width: 520px;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.profile-edit-form.visible { display: block; }
.profile-edit-form input,
.profile-edit-form textarea {
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.profile-edit-form input:focus,
.profile-edit-form textarea:focus { outline: none; border-color: var(--accent-soft); }
.profile-edit-form textarea { min-height: 84px; resize: vertical; }
.edit-link-field label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
.pf-form-actions { display: flex; gap: var(--space-2); }
.save-profile-btn,
.pf-form-actions .edit-btn {
  min-height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.save-profile-btn { border: 1px solid var(--accent); background: var(--accent); color: #15120e; }
.pf-form-actions .edit-btn { border: 1px solid var(--border); background: none; color: var(--text); }
.pf-form-actions .edit-btn:hover { border-color: var(--accent-soft); }
#editMsg { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-xs); }

/* ── Bolumler ─────────────────────────────────────────────────────── */

.pf-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-7);
}
.pf-sections > * { min-width: 0; }

.pf-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pf-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  line-height: 1.05;
}
.pf-count {
  color: var(--faint);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pf-count:empty { display: none; }

/* Bos durum: davet. Baskasinin profilinde ikincil bolumler hic gorunmuyor. */
.empty-state {
  padding: var(--space-5);
  border: 1px dashed #2e2a26;
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.empty-state a {
  color: var(--accent);
  font-weight: 700;
  text-underline-offset: 3px;
}
.viewing-other .pf-section-secondary:has(.empty-state) { display: none; }
.pf-section[hidden] { display: none; }

/* ── Incelemeler: kutusuz, K1 dili ── */
.reviews-list { display: flex; flex-direction: column; }
.review-card-small {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
}
.review-card-small:first-child { border-top: 0; padding-top: var(--space-2); }
.review-card-small > img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: transform 0.25s ease;
}
.review-card-small:hover > img { transform: rotate(-2deg); }
.rc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.rc-heading { min-width: 0; }
.review-card-small h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.review-card-small h4 a { color: inherit; text-decoration: none; transition: color 0.15s; }
.review-card-small h4 a:hover { color: var(--accent); }
.review-card-small .artist {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.review-card-small .artist:hover { color: var(--text); }
.review-card-small .score-badge { margin-top: 4px; flex-shrink: 0; }
.review-card-small .review-text {
  max-width: 62ch;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: #e6e1d8;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.rc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--faint);
  font-size: var(--text-xs);
}
.review-type-badge {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid #2e2a26;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.rc-actions { display: flex; gap: var(--space-4); margin-top: var(--space-3); }
.rc-btn-edit,
.rc-btn-delete {
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s;
}
.rc-btn-edit:hover { color: var(--text); }
.rc-btn-delete:hover { color: #ff9d9d; }
.rc-edit-form { margin-top: var(--space-3); }
.rc-rating-picker { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--space-3); }
.rc-rating-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.rc-rating-btn:hover { border-color: var(--accent-soft); color: var(--accent); }
.rc-rating-btn.selected { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.rc-textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  resize: vertical;
}
.rc-textarea:focus { outline: none; border-color: var(--accent-soft); }
.rc-char-count { display: block; margin-top: 4px; color: var(--faint); font-size: var(--text-xs); }
.rc-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.rc-save-btn,
.rc-cancel-btn {
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}
.rc-save-btn { border: 1px solid var(--accent); background: var(--accent); color: #15120e; }
.rc-cancel-btn { border: 1px solid var(--border); background: none; color: var(--muted); }
.rc-cancel-btn:hover { color: var(--text); border-color: var(--accent-soft); }

/* ── Begenilen albumler: kutusuz kapak rafi ── */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}
.favorites-grid > .empty-state { grid-column: 1 / -1; }
.favorite-card {
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.favorite-cover { position: relative; }
.favorite-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: transform 0.25s ease;
}
.favorite-card:hover img { transform: rotate(-2deg); }
.favorite-card-info { margin-top: var(--space-2); }
.favorite-card-info h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.favorite-card:hover h4 { color: var(--accent); }
.favorite-card-info p {
  margin-top: 1px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.favorite-card .own-rating {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(13, 13, 13, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Kaldir dugmesi: yalnizca opacity ile gizli (klavye odagi alabilsin),
 * hover/focus-within'de gorunur, dokunmatikte hep gorunur.
 * tests/pages.spec.ts bunu kontrol ediyor. */
.remove-fav-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.78);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.favorite-card:hover .remove-fav-btn,
.favorite-card:focus-within .remove-fav-btn { opacity: 1; }
.remove-fav-btn:hover { color: #ff9d9d; border-color: rgba(255, 157, 157, 0.5); }
.remove-fav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .remove-fav-btn { opacity: 1; } }

/* Profil sahibinin verdigi puan (score-badge dilinde, kucuk) */
.own-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(210, 180, 140, 0.32);
  background: rgba(210, 180, 140, 0.12);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.5;
  flex-shrink: 0;
}
.own-rating::before { content: "★"; font-size: 0.82em; opacity: 0.85; }

/* ── Yazisiz puanlar ── */
.pf-scored {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--space-3);
}
.pf-scored-item { position: relative; display: block; }
.pf-scored-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.pf-scored-item .own-rating { position: absolute; left: 5px; bottom: 5px; background: rgba(13, 13, 13, 0.82); }

/* ── Begenilen parcalar: albume gore gruplu, kutusuz ── */
.liked-track-groups { display: flex; flex-direction: column; }
.liked-group {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
}
.liked-group:first-child { border-top: 0; padding-top: 0; }
.liked-group-cover { display: block; width: 56px; height: 56px; }
.liked-group-cover img,
.liked-group-noart {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.liked-group-body { min-width: 0; }
.liked-group-album {
  display: block;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.liked-group-album:hover { color: var(--accent); }
.liked-group-artist {
  margin-bottom: 6px;
  color: var(--faint);
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.liked-track-list { list-style: none; display: flex; flex-direction: column; }
.liked-track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 6px;
  margin-left: -6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.liked-track:hover { background: rgba(255, 255, 255, 0.04); }
.liked-track.is-extra { display: none; }
.liked-group.expanded .liked-track.is-extra { display: flex; }
.liked-track-name {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.liked-track:hover .liked-track-name { color: var(--text); }
.liked-track-remove {
  flex-shrink: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.liked-track:hover .liked-track-remove,
.liked-track:focus-within .liked-track-remove { opacity: 1; }
.liked-track-remove:hover { color: #ff9d9d; }
@media (hover: none) { .liked-track-remove { opacity: 1; } }
.liked-more {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}
.liked-more:hover { text-decoration: underline; }

/* ── Takipci listesi ── */
.follow-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.follow-modal.open { display: flex; }
.follow-modal-box {
  width: 100%;
  max-width: 380px;
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.follow-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}
.follow-modal-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s;
}
.follow-modal-row:hover { background: rgba(255, 255, 255, 0.04); }
.follow-modal-row img,
.follow-modal-row svg {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
  flex-shrink: 0;
}
.follow-modal-empty { padding: 28px 20px; text-align: center; color: var(--muted); font-size: var(--text-sm); }

/* ── Odak ── */
.pf-share:focus-visible,
.pf-pill:focus-visible,
.pf-actions .follow-btn:focus-visible,
.pf-actions .edit-btn:focus-visible,
.pf-shelf:focus-visible,
.follow-stat:focus-visible,
.avatar-upload-btn:focus-visible,
.favorite-card h4 a:focus-visible,
.review-card-small a:focus-visible,
.rc-btn-edit:focus-visible,
.rc-btn-delete:focus-visible,
.liked-group a:focus-visible,
.liked-more:focus-visible,
.profile-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Genis ekran ──────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .pf-body { padding: 0 var(--space-6) var(--space-6); }
  .pf-banner { grid-template-columns: repeat(6, 1fr); aspect-ratio: 6 / 1.5; }
  .pf-tile { aspect-ratio: auto; }
  .favorites-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Masaustu: raf sagdan karta karisiyor (referansin ikinci varyanti). */
@media (min-width: 1024px) {
  .profile-page { padding-top: var(--space-7); }
  .pf-card { min-height: 392px; }
  /* Rafinda tek kapak olmayan uye: kart icerigi kadar, bos kutu kadar degil. */
  .pf-card-bare { min-height: 312px; }
  .pf-banner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    aspect-ratio: 3 / 2;
    /* Kart uzayinca (duzenleme formu acik, uzun biyografi) raf da genisliyor;
       kimligin sutununa girmesin diye genislik sinirli. */
    max-width: 60%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    border-radius: 0 21px 21px 0;
    /* Uzun ve yavas gecis: raf sag kenardan baslayip kimligin bulundugu
       sutuna varmadan kart zeminine karisiyor. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 26%, rgba(0, 0, 0, 0.58) 58%, #000 92%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 26%, rgba(0, 0, 0, 0.58) 58%, #000 92%);
  }
  /* Genis ekranda perde de yataya doner: sag kenarda kart cercevesine
     carpmadan sonuyor, uste/alta dogru koseleri yumusatiyor. */
  .pf-banner::after {
    background:
      linear-gradient(90deg, rgba(13, 13, 13, 0.5), rgba(13, 13, 13, 0.3) 45%, rgba(13, 13, 13, 0.46)),
      linear-gradient(180deg, rgba(13, 13, 13, 0.4), transparent 28%, transparent 66%, rgba(13, 13, 13, 0.46));
  }
  .pf-tile { aspect-ratio: auto; }
  /* Govde kartin tamamini kapliyor, ama okunan her sey (isim, biyografi,
     meta, istatistik) rafin baslamadigi sol sutunda kaliyor. Boylece
     yalnizca eylem satiri kartin sag kenarina kadar uzanabiliyor. */
  .pf-body {
    margin-top: 0;
    padding: var(--space-7) var(--space-7) var(--space-6);
  }
  .profile-info h2,
  .profile-info .bio,
  .pf-bio-add,
  .pf-meta,
  .pf-stats { max-width: 592px; }
  .profile-avatar-wrap,
  .profile-avatar-circle { width: 112px; height: 112px; }
  .profile-info h2 { font-size: 3.6rem; }
  /* Referanstaki denge: birincil hap kartin sag kenarinda, rafin uzerinde;
     kucuk kapak satiri solda. Kapak satiri yoksa hap yine sagda kaliyor. */
  .pf-actions { justify-content: flex-end; }
  .pf-shelf { order: -1; margin-right: auto; }
  .pf-pill,
  .pf-actions .follow-btn,
  .pf-actions .edit-btn { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }

  .pf-sections {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
      "reviews favs"
      "reviews scored"
      "reviews tracks"
      "reviews .";
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--space-8);
    row-gap: var(--space-7);
    margin-top: var(--space-8);
  }
  .pf-section-reviews { grid-area: reviews; }
  .pf-section-favs { grid-area: favs; }
  .pf-section-scored { grid-area: scored; }
  .pf-section-tracks { grid-area: tracks; }
  .pf-section-favs .favorites-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-card-small { grid-template-columns: 104px minmax(0, 1fr); }
  .review-card-small > img { width: 104px; height: 104px; }
}

@media (max-width: 639px) {
  .pf-body { margin-top: -84px; }
  .profile-avatar-wrap,
  .profile-avatar-circle { width: 92px; height: 92px; }
  .pf-share { top: var(--space-3); right: var(--space-3); }
  .pf-stats { flex-direction: column; }
  .pf-stat-group + .pf-stat-group > :first-child { padding-left: 0; border-left: 0; }
  .pf-stat, .follow-stat { padding: 0 var(--space-4); }
  .review-card-small { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); }
  .review-card-small > img { width: 64px; height: 64px; }
  .review-card-small h4 { font-size: var(--text-lg); }
  .review-card-small .review-text { font-size: var(--text-md); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-tile img,
  .review-card-small > img,
  .favorite-card img,
  .avatar-menu { transition-duration: 0.01s; }
  .review-card-small:hover > img,
  .favorite-card:hover img { transform: none; }
}