/* ==========================================================================
   NOT FM — /podcast/ ve /podcast/<show>/
   Yalnızca bu sayfalarda yükleniyor.

   İKİ TEMA tek dosyada: `.pk--dalga` ve `.pk--editoryal`. Ortak yapı (liste,
   süzgeç, künye) bir kez yazılıyor, tema yalnızca yüzeyi değiştiriyor. İki
   ayrı dosya, ortak kısımların birbirinden ayrışmasıyla biterdi.
   ========================================================================== */

/* KABUĞUN BÖLÜM DOLGUSU İPTAL.
 *
 * `menu.py` gövdeyi `<section class="dark sec">` içine sarıyor ve o kabın
 * kendi üst dolgusu 132px. Podcast bölümleri de kendi dolgusunu veriyordu,
 * ikisi toplanınca sayfanın üstünde 232 piksellik boş bir bant kalıyordu.
 * Kabı buradan sıfırlıyoruz: `:has()` ile, çünkü kabın sınıfını değiştirmek
 * menu.py'nin zemin tablosunu kurcalamak demekti ve oradaki "kapak" değeri
 * `.pk` sınıfını kullanıyor — bizim show sayfası sınıfımızla çakışırdı. */
section.sec:has(> .pi), section.sec:has(> .pk){ padding-top:0; padding-bottom:0 }

/* ======================================================== DİZİN SAYFASI == */
/* ZEMİN DÜZ SİYAH DEĞİL. Tek bir #0a0b0f fazla ölüydü. Üstte sağ omuzda
   kurumsal maviden çok silik bir ışık, aşağı doğru koyulaşan bir taban var.
   Renk farkları küçük tutuldu, arkada duracak bir yüzey burası. */
.pi{
  position:relative; color:#e9ecf2;
  padding:clamp(40px,5vw,64px) 0 clamp(140px,14vw,180px);
  background:
    radial-gradient(1150px 640px at 86% -8%, rgba(49,162,220,.14), transparent 62%),
    linear-gradient(180deg, #101420 0%, #0b0d13 42%, #08090c 100%);
}
/* GENİŞLİK SINIRI KUTUDA DEĞİL YAZIDA. `.pi-tepe` hem `.wrap` hem de kendi
   `max-width:760px`'ini taşıyordu. `.wrap` ortalıyor, dar kutu kendini
   yeniden ortalıyordu ve başlık kartların sol kenarından 210 piksel içeride
   kalıyordu: ne ortalanmış ne hizalanmış. Kutu artık `.wrap`ın tam genişliği,
   satır uzunluğunu paragrafların kendi `max-width`i tutuyor. */
.pi-tepe{ margin-bottom:clamp(36px,5vw,60px) }
.pi-etiket{ margin:0 0 14px; font-size:.72rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:#31a2dc }
.pi-baslik{ margin:0 0 18px; font-size:clamp(2.2rem,5.6vw,4rem); font-weight:800;
  line-height:1.04; letter-spacing:-.035em; color:#fff; max-width:14ch }
.pi-giris{ margin:0 0 12px; font-size:1.05rem; line-height:1.7; color:#a9b3c2; max-width:60ch }
.pi-sayi{ margin:0; font-size:.85rem; color:#6a7587 }

/* AYIRICI. Kurumsal mavi (#31a2dc) soldan sağa sönüyor, altında aynı renkten
   yayvan bir gölge var. Düz bir çizgi koyu zeminde sert duruyordu. Pseudo
   öğe `.pi-tepe`nin İÇİNDE, yani `.wrap` dolgusunu miras alıyor ve tam olarak
   başlıkla, kart ızgarasıyla aynı sol kenardan başlıyor. */
.pi-tepe::after{
  content:""; display:block; height:1px; margin-top:clamp(26px,3.6vw,42px);
  background:linear-gradient(90deg,
    rgba(49,162,220,.55) 0%, rgba(49,162,220,.22) 45%, rgba(49,162,220,0) 92%);
  box-shadow:0 0 16px rgba(49,162,220,.20);
}

.pi-suzgec{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(22px,3vw,32px) }
.pi-cip{ padding:8px 16px; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:.86rem; font-weight:650; background:rgba(255,255,255,.05); color:#98a3b4;
  border:1px solid rgba(255,255,255,.10); transition:background .15s,color .15s,border-color .15s }
.pi-cip:hover{ background:rgba(255,255,255,.10); color:#e4e9f0 }
.pi-cip.acik{ background:#fff; color:#0b0d12; border-color:#fff }

/* MASONRY: CSS sütunları. Grid ile bütün kartlar en uzun kartın boyuna
   çekiliyor ve kısa açıklamalı showun altında ölü boşluk kalıyordu. */
.pi-izgara{ columns:3 300px; column-gap:clamp(14px,2vw,22px) }
.pi-kart{
  display:block; break-inside:avoid; margin:0 0 clamp(14px,2vw,22px);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.pi-kart:hover{ transform:translateY(-3px); border-color:rgba(49,162,220,.42);
  background:rgba(255,255,255,.07); text-decoration:none; color:inherit }
.pi-kart[hidden]{ display:none }
.pi-kapak{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block }
.pi-kapak--bos{ background:linear-gradient(140deg,#1b2130,#0e1219) }
.pi-ic{ padding:clamp(16px,2vw,22px) }
.pi-ad{ margin:0 0 8px; font-size:1.14rem; font-weight:750; color:#fff; line-height:1.3 }
.pi-acik{ margin:0 0 12px; font-size:.9rem; line-height:1.62; color:#9aa5b5 }
.pi-rozetler{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px }
.pi-rozet{ padding:2px 9px; border-radius:999px; font-size:.7rem; font-weight:700;
  background:rgba(49,162,220,.14); color:#7cc6ee; border:1px solid rgba(49,162,220,.22) }
.pi-alt{ margin:0; display:flex; align-items:center; gap:9px; font-size:.8rem; color:#69748b }
.pi-alt span{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6 }
.pi-bos{ color:#8d97a8; font-size:1rem }

/* ========================================================= SHOW SAYFASI == */
.pk{ position:relative; padding:0 0 clamp(150px,15vw,190px) }

/* Tepedeki geniş bant. Afiş yüklüyse net, yoksa kare kapak bulanıklaştırılıp
   zemin yapılıyor: olmayan bir görseli uydurmadan genişlik hissi veriyor. */
/* SAĞDAKİ BOŞLUKTA SİLİK MİKROFON, HER İKİ SAYFADA. Başlık ve açıklama sola
   yaslı, sağ yarı bomboş kalıyordu. Silik olması şart: okunacak bir şey
   değil, zemin. `pointer-events:none` ile hiçbir tıklamayı yakalamıyor,
   `z-index:0` ile içeriğin (z-index:1) altında kalıyor. Dar ekranda hiç
   basılmıyor, orada boşluk zaten yok ve metnin arkasına giriyordu. */
.pi::before, .pk::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  /* Sağ kenar 0: negatif değer verince kutu gövdeden taşıp yatay kaydırma
     çubuğu çıkarıyordu. */
  right:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2331a2dc'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-4.08A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E")
    center/contain no-repeat;
  opacity:.055;
  -webkit-mask-image:linear-gradient(200deg, #000 20%, transparent 78%);
          mask-image:linear-gradient(200deg, #000 20%, transparent 78%);
}
.pk::before{ top:clamp(90px,11vw,150px);
  width:clamp(300px,32vw,520px); height:clamp(300px,32vw,520px) }
/* Dizin sayfasında başlık bloğunun hizasında, kartların üstünde kalıyor. */
.pi::before{ top:clamp(30px,4vw,60px);
  width:clamp(280px,30vw,480px); height:clamp(280px,30vw,480px) }
@media (max-width:1000px){ .pi::before, .pk::before{ display:none } }

/* Yükseklik bilerek kısa. İlk sürüm 26vw'ye kadar çıkıyordu ve geniş
   ekranda içerik başlamadan 270 piksel bulanık boşluk kalıyordu. */
.pk-tepe{
  height:clamp(84px,9.5vw,140px); background-size:cover; background-position:center;
  position:relative;
}
.pk-tepe--bulanik{ filter:blur(28px) saturate(130%); transform:scale(1.1) }
.pk-tepe::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, var(--pk-zemin) 96%);
}
.pk-tepe--bulanik::after{ background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, var(--pk-zemin) 92%) }

.pk-kunye{
  position:relative; z-index:1; margin-top:clamp(-90px,-7.5vw,-58px);
  /* Sol sütun genişliği burada sabit: kapak da düğmeler de aynı ölçüye
     oturuyor, ikisinin ayrı ayrı genişlik taşımasına gerek kalmıyor. */
  display:grid; grid-template-columns:clamp(150px,18vw,210px) minmax(0,1fr);
  gap:clamp(20px,3.5vw,40px);
  /* ÜST HİZA. `flex-end` kapağın ALT kenarını metnin altına yaslıyordu ve
     kapak başlığın çok altında kalıyordu. `start` ile kapağın üst kenarı
     başlığın ilk satırıyla aynı hizada. */
  align-items:start; margin-bottom:clamp(34px,5vw,56px);
}
.pk-showkapak{
  grid-column:1; grid-row:2;
  width:100%; height:auto; aspect-ratio:1; border-radius:18px;
  object-fit:cover; box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10);
  display:block;
}
/* Metin iki satırı da kaplıyor, yani kapağın ve düğmelerin toplam boyunca. */
.pk-kunye__ic{ grid-column:2; grid-row:2 / span 2 }
/* Izgaranın ilk satırı, iki sütunu birden kaplıyor: kapak ve başlık ikinci
   satırda yan yana başlasın diye. */
.pk-geri{ grid-column:1 / -1; justify-self:start; margin-bottom:clamp(14px,2vw,22px);
  font-size:.85rem; font-weight:650; text-decoration:none; color:var(--pk-sonuk) }
.pk-geri:hover{ color:var(--pk-vurgu); text-decoration:none }
.pk-ad{ margin:0 0 12px; font-size:clamp(1.7rem,4.2vw,2.9rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.08; color:var(--pk-yazi) }
.pk-acik{ margin:0 0 10px; max-width:64ch; font-size:1rem; line-height:1.68; color:var(--pk-gri) }
.pk-sayi{ margin:0; font-size:.85rem; color:var(--pk-sonuk) }

/* EYLEM DÜĞMELERİ. `min-height:52px` dokunmatikte rahat bir hedef bırakıyor.
   Renkler tema değişkenlerinden geliyor, dalga ve editoryal temalarda ayrı
   kural yazmaya gerek kalmıyor. */
/* Kapağın altında ALT ALTA. Sütun 210 pikselden dar, yan yana koyunca iki
   düğme de metnini kırıyordu. */
.pk-eylem{ grid-column:1; grid-row:3;
  display:flex; flex-direction:column; gap:9px; margin-top:14px }
.pk-dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px;
  padding:0 18px; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:.98rem; font-weight:700; letter-spacing:-.01em;
  background:var(--pk-cip-zemin); color:var(--pk-yazi);
  border:1px solid var(--pk-cizgi); transition:background .15s, border-color .15s, transform .12s;
}
.pk-dugme svg{ width:19px; height:19px; fill:currentColor; flex:none }
.pk-dugme:hover{ border-color:var(--pk-vurgu); color:var(--pk-vurgu) }
.pk-dugme:active{ transform:translateY(1px) }
/* Yazı rengi tema değişkeninden: editoryal temada vurgu koyu kırmızı,
   sabit bir koyu renk yazsam okunmazdı. */
.pk-dugme--ana{ background:var(--pk-vurgu); border-color:var(--pk-vurgu); color:var(--pk-vurgu-yazi) }
.pk-dugme--ana:hover{ background:var(--pk-vurgu); border-color:var(--pk-vurgu);
  color:var(--pk-vurgu-yazi); filter:brightness(1.1) }
/* Paylaşımdan sonra düğme kendi metnini "Bağlantı kopyalandı" yapıyor, o an
   genişliği değişip yanındakini itmesin diye ölçü değil renk değişiyor. */
.pk-dugme.tamam{ color:var(--pk-vurgu); border-color:var(--pk-vurgu) }

/* MOBİL. Bu blok temel kuralların ARDINDAN gelmek ZORUNDA: önce yazmıştım ve
   aynı özgüllükteki sonraki kurallar onu eziyordu, telefonda hiçbir mobil
   ölçü uygulanmıyor, düğmeler kapağın dar sütununa sıkışıp metinlerini iki
   satıra kırıyordu. Tek sütunda kaynak sırası geçerli: kapak, metin, düğme. */
@media (max-width:700px){
  .pk-kunye{ grid-template-columns:minmax(0,1fr) }
  .pk-showkapak, .pk-kunye__ic, .pk-eylem{ grid-column:1; grid-row:auto }
  /* Kapak ortada: tek sütunda sola yaslı kalınca sağında kendi genişliği
     kadar boşluk bırakıyordu. */
  .pk-showkapak{ width:clamp(160px,44vw,220px); margin-left:auto; margin-right:auto }
  .pk-eylem{ margin-top:clamp(18px,4vw,24px) }
  .pk-dugme{ width:100% }
}

.pk-suzgec{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(18px,2.6vw,28px) }
.pk-cip{ padding:7px 15px; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:.85rem; font-weight:650; background:var(--pk-cip-zemin);
  color:var(--pk-sonuk); border:1px solid var(--pk-cizgi); transition:all .15s }
.pk-cip:hover{ color:var(--pk-yazi) }
.pk-cip.acik{ background:var(--pk-vurgu); color:var(--pk-vurgu-yazi); border-color:var(--pk-vurgu) }

.pk-bolum{ position:relative; cursor:pointer }
.pk-bolum[hidden]{ display:none }

/* ---------------------------------------------------------- tema: dalga -- */
.pk--dalga{
  --pk-zemin:#06070a; --pk-yazi:#fff; --pk-gri:#aab3c2; --pk-sonuk:#6d7889;
  --pk-cizgi:rgba(255,255,255,.09); --pk-cip-zemin:rgba(255,255,255,.05);
  --pk-vurgu:#31a2dc; --pk-vurgu-yazi:#fff;
  background:#06070a;
}
.pk--dalga .pk-bolum{ padding:clamp(20px,2.8vw,28px) 0; border-top:1px solid var(--pk-cizgi) }
.pk--dalga .pk-bolum:last-child{ border-bottom:1px solid var(--pk-cizgi) }
.pk--dalga .pk-bolum:hover{ background:rgba(255,255,255,.03) }
.pk-ust{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:clamp(12px,1.8vw,18px); align-items:center; margin-bottom:14px }
.pk--dalga .pk-cal{
  width:48px; height:48px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05); color:#fff; display:grid; place-items:center;
  transition:background .16s, transform .16s;
}
.pk--dalga .pk-cal:hover{ background:#fff; color:#06070a; transform:scale(1.06) }
.pk--dalga .pk-cal svg{ width:18px; height:18px; fill:currentColor; grid-area:1/1 }
.pk-ic-dur{ display:none }
.pk-bolum.calan .pk-ic-cal{ display:none }
.pk-bolum.calan .pk-ic-dur{ display:block }
.pk--dalga .pk-bolum.calan .pk-cal{ background:#31a2dc; border-color:#31a2dc; color:#fff }
.pk--dalga .pk-kapak{ width:56px; height:56px; border-radius:10px; object-fit:cover; display:block }
@media (max-width:620px){ .pk--dalga .pk-kapak{ display:none } }
.pk-no{ margin:0 0 3px; font-size:.7rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pk-sonuk) }
.pk--dalga .pk-baslik{ margin:0; font-size:clamp(1.02rem,1.9vw,1.3rem); font-weight:700;
  color:#fff; line-height:1.3 }
.pk-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:.8rem; color:var(--pk-sonuk) }
@media (max-width:620px){ .pk--dalga .pk-meta{ display:none } }

/* DALGA: her çubuk kendi rengini taşıyor.
   İlk sürüm ikinci bir kopyayı `clip-path` ile üstüne bindiriyordu ve
   geçilen kısım düz mavi bir blok gibi duruyordu — kullanıcının "mavi üst
   dolgu saçma" dediği şey buydu. Artık tek katman var; JS çalarken hangi
   çubukların geçildiğini `.gecti` sınıfıyla işaretliyor. */
.pk-dalga{ display:flex; align-items:center; gap:2px; height:52px; cursor:pointer }
.pk-dalga__ic{ display:flex; align-items:center; gap:2px; width:100%; height:100% }
.pk-dalga i{
  flex:1; height:var(--h); min-height:2px; border-radius:2px;
  background:rgba(255,255,255,.15); transition:background .12s linear;
}
/* ÇALAN SATIRDA GEÇİŞ KAPALI. `.suanki` çubuğun zemini gradyan, `.gecti`
   olduğunda düz renk. Gradyan ile düz renk ara değerlenemiyor, tarayıcı
   120 ms'lik geçişin ortasında sert takas yapıyordu: çubuk boyandıktan sonra
   bir an griye düşüp maviye atlıyordu, göz kırpması buydu. Kare kare
   güncellenen bir yüzeyde geçişin işlevi de yok. */
.pk-bolum.calan .pk-dalga i{ background:rgba(255,255,255,.22); transition:none }
.pk-bolum.calan .pk-dalga i.gecti{ background:#31a2dc }
/* SINIRDAKİ ÇUBUK KESİRLİ DOLUYOR. Yalnızca `.gecti` ile 96 çubuk 69 saniyeye
   bölününce her çubuk 0,72 saniye sürüyor ve ilerleme saniyede bir zıplıyor
   gibi duruyordu. `--k` çubuğun ne kadarının geçildiği, JS her karede yazıyor.
   İkinci durak `0`: kendinden önceki duraktan küçük olduğu için ona sabitlenir
   ve keskin bir kesim verir, yumuşak geçiş değil. */
.pk-bolum.calan .pk-dalga i.suanki{
  background:linear-gradient(90deg, #31a2dc calc(var(--k, 0) * 100%), rgba(255,255,255,.22) 0);
}
@media (max-width:620px){ .pk-dalga{ height:40px } }

/* ------------------------------------------------------ tema: editoryal -- */
.pk--editoryal{
  --pk-zemin:#f4f1ea; --pk-yazi:#14161a; --pk-gri:#4a4f57; --pk-sonuk:#7a808a;
  --pk-cizgi:rgba(20,22,26,.14); --pk-cip-zemin:transparent;
  --pk-vurgu:#b0392f; --pk-vurgu-yazi:#fff;
  background:#f4f1ea; color:#14161a;
}
.pk--editoryal .pk-bolum{
  display:grid; grid-template-columns:auto auto minmax(0,1fr);
  gap:clamp(16px,3vw,40px); align-items:start;
  padding:clamp(26px,4vw,44px) 0; border-top:1px solid var(--pk-cizgi);
}
.pk--editoryal .pk-bolum:last-child{ border-bottom:1px solid var(--pk-cizgi) }
.pk--editoryal .pk-no{
  font-size:clamp(2rem,5vw,3.6rem); font-weight:800; line-height:.9; margin:0;
  letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(20,22,26,.28);
  text-transform:none;
}
.pk--editoryal .pk-bolum.calan .pk-no{ -webkit-text-stroke-color:#b0392f; color:rgba(176,57,47,.10) }
.pk--editoryal .pk-kapak{
  width:clamp(84px,11vw,132px); height:auto; aspect-ratio:1; border-radius:12px;
  object-fit:cover; display:block; box-shadow:0 12px 30px rgba(20,22,26,.16);
}
@media (max-width:620px){ .pk--editoryal .pk-kapak{ display:none } }
.pk--editoryal .pk-baslik{
  margin:0 0 .5em; font-size:clamp(1.3rem,2.8vw,2rem); font-weight:750;
  line-height:1.16; letter-spacing:-.018em; color:#14161a; max-width:22ch;
}
.pk-ozet{ margin:0 0 1.2em; font-size:.98rem; line-height:1.7; color:#4a4f57; max-width:62ch }
.pk-alt{ display:flex; align-items:center; gap:clamp(12px,2vw,22px); flex-wrap:wrap }
.pk--editoryal .pk-cal{
  display:inline-flex; align-items:center; gap:9px; padding:9px 18px 9px 14px;
  border:1px solid #14161a; border-radius:999px; font-size:.88rem; font-weight:700;
  color:#14161a; transition:background .16s, color .16s;
}
.pk--editoryal .pk-bolum:hover .pk-cal{ background:#14161a; color:#f4f1ea }
.pk--editoryal .pk-cal svg{ width:14px; height:14px; fill:currentColor }
.pk--editoryal .pk-bolum.calan .pk-cal{ background:#b0392f; border-color:#b0392f; color:#fff }
.pk--editoryal .pk-meta{ flex-direction:row; font-size:.85rem; color:#7a808a }

/* ============================================================== ÇALAR ==== */
/* Alt çubuk. Yüksekliği rahat tutuldu: 11px dolgulu ilk sürüm sıkışıktı ve
   dokunma hedefleri 34 piksele düşüyordu, telefonda taban 44 olmalı. */
.pc-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(11,13,18,.92);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.10); color:#e9ecf2;
  transform:translateY(110%); transition:transform .32s cubic-bezier(.2,.8,.3,1);
  cursor:pointer;
}
.pc-bar.acik{ transform:none }
.pc-bar[hidden]{ display:none }
.pc-bar__ic{
  max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1.5fr) auto;
  gap:clamp(12px,2.2vw,24px); align-items:center; padding:16px clamp(14px,3vw,26px);
}
.pc-bar__kapak{ width:54px; height:54px; border-radius:10px; object-fit:cover; display:block }
.pc-bar__baslik{ margin:0; font-size:.96rem; font-weight:700; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pc-bar__alt{ margin:3px 0 0; font-size:.78rem; color:#7e8a9c;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pc-bar__dugmeler{ display:flex; align-items:center; gap:10px }

.pc-mini{ width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:#9aa5b5; display:grid; place-items:center;
  transition:color .15s, background .15s }
.pc-mini:hover{ color:#fff; background:rgba(255,255,255,.09) }
.pc-mini svg{ width:19px; height:19px; fill:currentColor }
.pc-buyuk{ width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:#0b0d12; display:grid; place-items:center; transition:transform .14s }
.pc-buyuk:hover{ transform:scale(1.06) }
.pc-buyuk svg{ width:19px; height:19px; fill:currentColor; grid-area:1/1 }
.pc-ic-dur{ display:none }
.pc-bar.caliyor .pc-ic-cal, .pc-genis.caliyor .pc-ic-cal{ display:none }
.pc-bar.caliyor .pc-ic-dur, .pc-genis.caliyor .pc-ic-dur{ display:block }

.pc-ilerleme{ display:flex; align-items:center; gap:12px }
.pc-sure{ font-size:.78rem; color:#7e8a9c; font-variant-numeric:tabular-nums;
  min-width:38px; text-align:center }
.pc-ray{ position:relative; flex:1; height:18px; cursor:pointer; display:flex; align-items:center }
.pc-ray::before{ content:""; position:absolute; left:0; right:0; height:5px;
  border-radius:5px; background:rgba(255,255,255,.15) }
.pc-ray__dolu{ position:absolute; left:0; height:5px; width:0; border-radius:5px;
  background:linear-gradient(90deg,#31a2dc,#7cc6ee) }
.pc-ray__tut{ position:absolute; left:0; width:12px; height:12px; border-radius:50%;
  background:#fff; transform:translateX(-50%); opacity:0; transition:opacity .15s }
.pc-ray:hover .pc-ray__tut{ opacity:1 }

@media (max-width:820px){
  .pc-bar__ic{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"kapak yazi dugmeler" "ilerleme ilerleme ilerleme";
    row-gap:10px; padding:12px 14px 16px;
  }
  .pc-bar__kapak{ grid-area:kapak; width:46px; height:46px }
  .pc-bar__yazi{ grid-area:yazi; min-width:0 }
  .pc-bar__dugmeler{ grid-area:dugmeler }
  .pc-ilerleme{ grid-area:ilerleme }
  .pc-kapat{ display:none }
}

/* TAM SAYFA ÇALAR. Alt çubuğa tıklayınca açılıyor, şarkı sayfalarındaki
   geniş çalarla aynı davranış. Aşağıdan yukarı kayıyor; kapatma oku yukarıda
   çünkü hareketin tersi yönü orası. */
/* z-index site menüsünün (100) ÜSTÜNDE olmalı. 80'de bırakınca çalar açılıyor
   ama menü üstüne biniyordu ve tam ortadaki kapatma oku menünün altında
   kalıp tıklanamıyordu. Tam sayfa örtü, her şeyi kapatması gerekiyor. */
.pc-genis{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(6,7,10,.97);
  backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
  transform:translateY(100%); transition:transform .34s cubic-bezier(.2,.8,.3,1);
  color:#fff;
}
.pc-genis.acik{ transform:none }
.pc-genis[hidden]{ display:none }
.pc-genis__kapat{
  position:absolute; top:clamp(14px,3vw,26px); left:50%; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.10); color:#fff; display:grid; place-items:center;
}
.pc-genis__kapat:hover{ background:rgba(255,255,255,.18) }
.pc-genis__kapat svg{ width:24px; height:24px }
.pc-genis__ic{ width:min(440px,86vw); text-align:center }
.pc-genis__kapak{
  width:min(340px,74vw); height:auto; aspect-ratio:1; border-radius:22px;
  object-fit:cover; margin:0 auto clamp(24px,4vw,34px); display:block;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.pc-genis__baslik{ margin:0 0 6px; font-size:clamp(1.2rem,3vw,1.6rem); font-weight:750; line-height:1.3 }
.pc-genis__alt{ margin:0 0 clamp(22px,4vw,32px); font-size:.92rem; color:#8b96a8 }
.pc-genis__ilerleme{ margin-bottom:clamp(18px,3vw,26px) }
.pc-ray--genis{ height:22px }
.pc-genis__sure{ display:flex; justify-content:space-between; margin-top:6px;
  font-size:.78rem; color:#8b96a8; font-variant-numeric:tabular-nums }
.pc-genis__dugmeler{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,4vw,28px) }
.pc-mini--genis{ width:52px; height:52px }
.pc-mini--genis svg{ width:23px; height:23px }
.pc-buyuk--genis{ width:70px; height:70px }
.pc-buyuk--genis svg{ width:26px; height:26px }