/* ─────────────────────────── SANATCI LISTESI ───────────────────────────
 * Yalnizca artists.html yukluyor. Referans: MUSIZK muzik uygulamasi konsepti
 * (sol gezinme rayi, ustte arama, one cikan sanatci, numarali satir listesi).
 * Alinan sey YERLESIM; referans acik temali ve mavi vurgulu, buradaki dil
 * K1'in kendisi: koyu zemin, Cormorant baslik, tan aksan, kutu yerine
 * `--rule` kil cizgileri. Token'lar style.css :root'tan.
 *
 * Bu dosya sayfanin tamamina sahip: artists.html'de satir ici <style> blogu
 * YOK. (Eskiden vardi ve artists.css'ten sonra geldigi icin esit ozgullukte
 * onu eziyordu; o yuzden burasi yalnizca `.ar-` onekli sinif kullanabiliyordu.
 * Blok kaldirildi, onek kisitlamasi da onunla birlikte.)
 */

.ap {
  --ap-rail: 232px;
  /* Header sticky ve 74px + 1px kenarlik; ray onun altina yapisiyor. */
  --ap-stick: 99px;
  /* Sitenin geneli 1120px; burada 1040 cunku ray dustukten sonra kalan
   * sutun 824px'e cikiyordu ve tek satirlik bir isim o genislikte
   * kayboluyordu. 1040'ta liste 760px: taranabilir bir olcu. */
  width: min(1040px, 92%);
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-8);
}

@media (min-width: 1000px) {
  .ap {
    display: grid;
    grid-template-columns: var(--ap-rail) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* ── Sol ray ──────────────────────────────────────────────────────────
 * Referansta EXPLORE / MY MUSIC / PLAYLIST gruplari. Buradaki karsiligi
 * taramanin gercek eksenleri: siralama, katalog sayilari, takip edilenler.
 * ≤999px'de ray ustte yatay bir seride dusuyor. */

@media (min-width: 1000px) {
  .ap-rail {
    position: sticky;
    top: var(--ap-stick);
    max-height: calc(100vh - var(--ap-stick) - var(--space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }
}

.ap-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 var(--space-6);
}

.ap-group + .ap-group { margin-top: var(--space-6); }

.ap-group-label {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Siralama: referansin sol menu satirlari. Hap degil satir — hap dili
 * sayfanin geri kalaninda yok ve rayda iki hap kenar cubugu gibi durmuyor. */
.ap-tabs { display: flex; flex-direction: column; gap: 2px; }

.ap-tab {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}

/* Aktif satirin isareti: solda tan bir kirpik. 1px'lik renkli kenarlik
 * degil, gercekten kisa bir cizgi — satirin tamamini boyamiyor. */
.ap-tab::before {
  content: "";
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.18s;
}

.ap-tab:hover { color: var(--text); background: var(--surface); }
.ap-tab.is-on { color: var(--text); background: var(--accent-wash); }
.ap-tab.is-on::before { background: var(--accent); }

/* Katalog sayilari. Referansin koyu istatistik karolarinin yerini rayda
 * duran sayi satirlari aldi: karo dili sayfada baska yerde yok. */
.ap-counts { list-style: none; margin: 0; padding: 0; }

.ap-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 7px 12px;
}

.ap-count-n {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.ap-count-l { font-size: var(--text-xs); color: var(--faint); }

/* Takip edilenler: referansin PLAYLIST listesi. Yuvarlak s/b avatar +
 * isim. Oturum yoksa bolum hic cizilmiyor (giris daveti degil, sessizlik). */
.ap-mine { list-style: none; margin: 0; padding: 0; }

.ap-mine a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s, background 0.18s;
}

.ap-mine a:hover { color: var(--text); background: var(--surface); }

.ap-mine-art {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
}

.ap-mine-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Arama ────────────────────────────────────────────────────────────
 * Referansta ustte tam genislik arama cubugu. */

.ap-search { position: relative; margin-bottom: var(--space-6); }

.ap-search > svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

#artistSearchInput {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 46px 14px 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

#artistSearchInput:focus {
  border-color: var(--accent-soft);
  background: var(--surface-2);
}

#artistSearchInput::placeholder { color: var(--faint); }

.ap-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 7px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--faint);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 0.18s;
}

.ap-clear:hover { color: var(--text); }

/* ── One cikan sanatci ────────────────────────────────────────────────
 * Referansin kahramani: solda portre, saginda isim ve eylem. Portre
 * kesilmiyor (saydam arka planli gorselimiz yok), yumusak dikdortgen.
 * Yalnizca aktif siralamada GERCEK bir sayisi olan sanatci one cikiyor;
 * yoksa bolum hic cizilmiyor. */

.ap-feature {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}

.ap-feature-art {
  position: relative;
  aspect-ratio: 1 / 1.08;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.ap-feature-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ap-feature-meta {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.ap-feature-meta b { color: var(--text); font-weight: 700; }

.ap-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  margin-top: var(--space-4);
  padding: 0 22px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #15120e;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}

.ap-pill:hover { background: #dcc29f; border-color: #dcc29f; }

/* ── Liste basligi ────────────────────────────────────────────────────
 * Referansta listenin ustundeki "Play all" satiri. Burada sayilacak tek
 * sey var: kac sanatci ve hangi siraya gore. */

.ap-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-3);
}

#apSubtitle {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* ── Satir listesi ────────────────────────────────────────────────────
 * Referansin numarali parca listesi. Katalogdaki 46 binin coğunda
 * fotograf yok; kutulu kart izgarasi bu yuzden harf daireleriyle
 * doluyordu. Satir hem daha yogun hem taranabilir.
 *
 * SIRA NUMARASI yalnizca aktif siralamada gercekten bir sayisi olan
 * satirlarda var. Geri kalan on binlerce sanatcinin sirasi keyfi;
 * onlari 11'den 46.534'e numaralamak olmayan bir siralama uydururdu. */

.ap-rows { list-style: none; margin: 0; padding: 0; }

.ap-row + .ap-row { border-top: 1px solid var(--rule); }

.ap-row-link {
  display: grid;
  grid-template-columns: 2.6ch 44px minmax(0, 1fr) 10px;
  align-items: center;
  gap: var(--space-4);
  padding: 11px var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background 0.18s;
}

.ap-row-link:hover { background: var(--surface); }

.ap-row-rank {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ap-row-art {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
}

/* Isim ve sayilar tek hucrede, yan yana. Meta sagdaki kenara
 * PERCINLENMIYOR: 60 satirin yalnizca 16'sinda bir sayi var, yani sag
 * sutun satirlarin dortte ucunde bos bir kolon olarak duruyordu ve
 * isimden sayiya 435px goz yolu aciyordu. */
.ap-row-body {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.ap-row-name {
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-row-meta {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sutun her zaman ayrilmis (satir hover'da kaymiyor), ok yalnizca
 * hedeflenen satirda gorunuyor. */
.ap-row-go {
  color: var(--accent-soft);
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
}

.ap-row-link:hover .ap-row-go,
.ap-row-link:focus-visible .ap-row-go {
  opacity: 1;
  transform: translateX(2px);
}

/* ── Portreler ────────────────────────────────────────────────────────
 * Kural (sayfa geneli): insan portreleri gri, renk kapaklarin. */

.ap-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.25s, transform 0.4s;
}

.ap-row-link:hover .ap-img,
.ap-mine a:hover .ap-img { filter: grayscale(1) contrast(1.05) brightness(1.18); }

.ap-feature-art .ap-img { object-position: center 20%; }

/* Fotografsiz sanatci: kirik gorsel ya da duz daire yerine plak olugu. */
.ap-bare {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    repeating-radial-gradient(circle, #171717 0 2px, #1c1c1c 2px 3px, #141414 3px 5px),
    var(--surface-2);
  color: var(--accent-soft);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
}

.ap-row-art .ap-bare { font-size: var(--text-md); }
.ap-mine-art .ap-bare { font-size: var(--text-sm); }
.ap-feature-art .ap-bare { font-size: clamp(2.6rem, 7vw, 3.6rem); }

/* ── Durumlar ─────────────────────────────────────────────────────────── */

.ap-state {
  margin: 0;
  padding: var(--space-8) var(--space-3);
  color: var(--muted);
  font-size: var(--text-base);
}

.ap-more-wrap { display: flex; justify-content: center; margin-top: var(--space-6); }

.ap-more {
  min-height: 42px;
  padding: 0 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}

.ap-more:hover { color: var(--text); border-color: var(--accent-soft); }
.ap-more:disabled { opacity: 0.5; cursor: default; }

/* Iskelet: liste gelirken sayfa ziplamasin. Satirla ayni olculerde. */
.ap-skel {
  display: grid;
  grid-template-columns: 2.6ch 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 11px var(--space-3);
}

.ap-skel + .ap-skel { border-top: 1px solid var(--rule); }
.ap-skel .s-av { width: 44px; height: 44px; border-radius: 50%; }
.ap-skel .s-tx { height: 11px; border-radius: 3px; }

.ap-skel .s-av,
.ap-skel .s-tx {
  background: linear-gradient(90deg, #151515 25%, #1e1e1e 50%, #151515 75%);
  background-size: 200% 100%;
  animation: apShimmer 1.4s linear infinite;
}

@keyframes apShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Tarayici yuzeyleri ───────────────────────────────────────────────
 * Cizmedigimiz parcalar da tasarima ait: secim, odak halkasi, kaydirma. */

.ap ::selection { background: var(--accent-soft); color: #15120e; }

.ap a:focus-visible,
.ap button:focus-visible,
.ap input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Hareket ──────────────────────────────────────────────────────────
 * Tek bir acilis ani: one cikan sanatci bir kez yukseliyor ve altindaki
 * cizgi soldan "oluk" gibi ciziliyor. Satirlar tek tek belirmiyor. */

@media (prefers-reduced-motion: no-preference) {
  .ap-feature {
    animation: apRise 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
    background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    animation-name: apRise, apDraw;
    animation-duration: 0.62s, 0.9s;
    animation-delay: 0s, 0.24s;
  }
}

@keyframes apRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes apDraw {
  from { background-size: 0 1px; }
  to   { background-size: 100% 1px; }
}

/* ── ≤999px: ray ustte yatay serit ───────────────────────────────────── */

@media (max-width: 999px) {
  .ap-rail {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--rule);
  }

  .ap-title { margin-bottom: var(--space-4); }

  /* Gruplar yan yana; her biri kendi icinde yatay kaydirilabilir ve
   * kaydirma cubugu gizli — sayfanin kendisi yana kaymiyor. */
  .ap-group + .ap-group { margin-top: var(--space-4); }
  .ap-group-label { margin-bottom: var(--space-2); }

  .ap-tabs { flex-direction: row; gap: var(--space-2); }

  .ap-tab {
    width: auto;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
  }

  .ap-tab::before { display: none; }
  .ap-tab.is-on { background: var(--accent); border-color: var(--accent); color: #15120e; }

  .ap-counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
  .ap-count { padding: 0; }

  .ap-mine,
  .ap-scroll-x {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .ap-mine::-webkit-scrollbar { display: none; }
  .ap-mine a { flex: 0 0 auto; padding: 5px 10px 5px 5px; background: var(--surface); }
  .ap-mine-name { max-width: 12ch; }
}

@media (max-width: 560px) {
  .ap-feature {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--space-4);
  }

  .ap-row-link {
    grid-template-columns: 2.4ch 40px minmax(0, 1fr) 10px;
    gap: var(--space-3);
    padding: 10px var(--space-2);
  }

  /* Dar ekranda meta satirin altina degil, hic gosterilmiyor: isim zaten
   * kirpiliyordu ve iki sayi ismin yerini aliyordu. Sanatci sayfasinda var. */
  .ap-row-meta { display: none; }
  .ap-row-art { width: 40px; height: 40px; }
  .ap-skel { grid-template-columns: 2.4ch 40px minmax(0, 1fr); gap: var(--space-3); }
}