/* ==========================================================================
   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) }
/* Satır uzunluğu sınırı okunabilirlik içindir: uzun satırlarda göz bir
   sonraki satırın başını kaybediyor. Ama 64 karakter, tam genişlikte akan
   başlığın yanında hem dar hem tutarsız duruyordu. 78 hâlâ rahat okunan
   aralıkta ve künyeyi dengeliyor. */
.pk-acik{ margin:0 0 10px; max-width:78ch; 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;
}
/* Yatay dolgu 0 değil: satır vurgulandığında (hover ve çalan) metin ve
   tarih vurgunun kenarına yapışıyordu, sıkışık duruyordu. */
.pk--dalga .pk-bolum{
  padding:clamp(20px,2.8vw,28px) clamp(14px,1.6vw,22px);
  border-top:1px solid var(--pk-cizgi); border-radius:14px;
}
.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;
}
/* Editoryal temanın satır özeti. */
.pk--editoryal .pk-ozet{ margin:0 0 1.2em; font-size:.98rem; line-height:1.7; color:#4a4f57; max-width:62ch }

/* DALGA TEMASINDA ÖZET. Panelde yazılan açıklama bu temada hiç basılmıyordu.
   İki satırla sınırlı: satır kompakt, altında dalga formu var ve tam metin
   listeyi okunmaz uzunluğa çıkarıyor. Tamamı tam sayfa çalarda. */
.pk--dalga .pk-ozet{
  margin:5px 0 0; font-size:.88rem; line-height:1.55; color:var(--pk-gri);
  max-width:70ch;
}
.pk-ozet:empty{ display:none }

/* AÇILIR ÖZET. İki satır gösteriliyor, tamamı "devamı" ile açılıyor.
   Kırpma CSS'te, sunucuda değil: kaç karakterin iki satır ettiği yazı
   tipine ve ekran genişliğine bağlı, sunucu bunu bilemez. Düğme de JS
   tarafından yalnızca metin gerçekten taşıyorsa basılıyor. */
.pk-ozet{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pk-bolum.ozet-acik .pk-ozet{ -webkit-line-clamp:unset; overflow:visible }
.pk-devam{
  display:inline-block; margin-top:6px; padding:0; border:0; background:none;
  font-family:inherit; font-size:.82rem; font-weight:650; cursor:pointer;
  color:var(--pk-vurgu); text-decoration:underline; text-underline-offset:3px;
}
.pk-devam:hover{ opacity:.8 }
.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(14px,2.4vw,20px); font-size:.92rem; color:#8b96a8 }
/* Bölümün açıklaması ÇALARDA ÜÇ SATIR. İlk sürüm kendi içinde kayıyordu ve
   çaların ortasında bir kaydırma çubuğu duruyordu, çirkindi. Burası dinleme
   ekranı, okuma ekranı değil: üç satır ne dinlediğini söylemeye yetiyor,
   tamamı bölüm listesinde "devamı" ile açılıyor. Alt kenar maskeyle
   sönüyor, yani metnin devamı olduğu kesikten değil solmadan anlaşılıyor. */
/* KAP SABİT YÜKSEKLİKTE, METİN ALTA YAPIŞIK.
   Üç satırlık yer ayrılıyor ve açıklama o kabın alt kenarına sabitleniyor.
   Açılınca yüksekliği artıyor, alt kenarı sabit olduğu için YUKARI doğru
   büyüyüp kapağın üzerine biniyor. Aşağı büyümek kumandaları ekrandan
   iterdi, kabın kendisi büyümek de altındaki her şeyi kaydırırdı. */
.pc-genis__acikkap{
  position:relative; z-index:2;
  margin:0 auto clamp(20px,3.4vw,28px); max-width:52ch;
  font-size:.92rem; line-height:1.65; height:4.95em;
}
.pc-genis__acik{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  max-height:100%; overflow:hidden; cursor:pointer;
  font-size:1em; line-height:inherit; color:#9aa5b6; text-align:left;
  border-radius:14px; transition:max-height .28s ease, background .2s, padding .2s;
  -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
}
.pc-genis__acik:hover{ color:#c3cbd8 }
/* Açıkken maske kalkıyor: sönümlenme "devamı var" demek, tamamı
   okunuyorken yalan söylerdi. Zemin opak, arkasındaki kapak okumayı
   bozmasın diye. */
.pc-genis__acikkap.acik .pc-genis__acik{
  max-height:min(46vh, 22em); overflow-y:auto;
  padding:14px 16px; background:rgba(8,10,14,.96);
  box-shadow:0 -18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  color:#c9d2df;
  -webkit-mask-image:none; mask-image:none;
}
/* İnce ve koyu kaydırma çubuğu. Varsayılan geniş açık çubuk koyu panelin
   üstünde bir kusur gibi duruyordu. */
.pc-genis__acikkap.acik .pc-genis__acik{
  scrollbar-width:thin; scrollbar-color:#39404d transparent;
}
.pc-genis__acikkap.acik .pc-genis__acik::-webkit-scrollbar{ width:6px }
.pc-genis__acikkap.acik .pc-genis__acik::-webkit-scrollbar-track{ background:transparent }
.pc-genis__acikkap.acik .pc-genis__acik::-webkit-scrollbar-thumb{
  background:#39404d; border-radius:99px;
}
.pc-genis__acikkap.acik .pc-genis__acik::-webkit-scrollbar-thumb:hover{ background:#4a5361 }
.pc-genis__acikkap:has(.pc-genis__acik:empty){ display:none }
.pc-genis__acik:empty{ display:none }
.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 }