/* Radyo FSM: radyo.css üzerine, yalnız radyo şablonunda yüklenir (TV radyo.css + tv.css kullanır, buradan etkilenmez).
   Renk paleti (koyu tema), sabit üst bölüm, ana sayfa oynatıcı kartı, üzerine gelince efektleri, alt bilgi.
   Oynatıcının kendisi ortak bileşen: alttaki .radyo-mini çubuğu (ortak/radyo-oynatici, radyo.css, radyo.js).
   Tasarım: stajyer (07.10.2026), oynatıcı altyapısına uyarlandı. */

/* ---------- Renk paleti (radyonun bütün renkleri burada) ----------
   FSM TV ile aynı: açık üst bölüm, koyu lacivert içerik ve alt bilgi, bir ton açık lacivert kartlar, FSM kırmızısı vurgu.
   radyo.css'teki değişkenler radyo için yeniden tanımlanır; aşağıdaki "Renkler" bölümü yalnız bu değişkenleri kullanır.
   Kontrast (WCAG): --metin 12.5:1, --soluk 9:1 (kartta 7.5:1), --vurgu-yazi 6.8:1 (kartta 5.6:1), kırmızı düğmede beyaz 5.6:1.
   Kırmızı (--kirmizi) koyu zeminde yazı için yetersiz (2.8:1): yalnız düğme, nokta, çubuk; kırmızı yazı --vurgu-yazi. */
:root{
  --zemin:#1b2340;                     /* sayfa zemini (içerik + alt bilgi) */
  --yuzey:#24305a;                     /* kartlar, yayın akışı kutusu, künye */
  --murekkep:#1b2340;                  /* lacivert: açık zemin üstünde yazı, alt çubuk zemini */
  --metin:#e4e7f0;                     /* koyu zeminde gövde yazısı */
  --baslik:#ffffff;                    /* koyu zeminde başlıklar, öne çıkan yazı */
  --soluk:#c3c6d1;                     /* ikincil yazı (sunan, saat, açıklama) */
  --lacivert-acik:#c3c6d1;
  --cizgi:rgba(255,255,255,.12);       /* koyu zeminde ayırıcı çizgiler */
  --kart-cizgi:rgba(255,255,255,.08);  /* kart çerçevesi */
  --kart-uzerinde:rgba(255,255,255,.4);/* karta gelince çerçeve */
  --kart-koyu:#0b0f1c;                 /* program kutusu: üzerine gelince zemin */
  --kart-koyu-cizgi:rgba(255,255,255,.18);
  --kirmizi:#c8281e;                   /* vurgu: oynat düğmesi, canlı noktası, ilerleme çubuğu */
  --kirmizi-koyu:#a92017;              /* kırmızı düğmenin üzerine gelince */
  --vurgu-yazi:#ff8a80;                /* koyu zeminde kırmızı yazı (etiketler, "şimdi" saati) */
  --ust-zemin:#f4f5f7; --menu-zemin:#f4f5f7; --menu-cizgi:rgba(27,35,64,.14);                 /* üst bölüm (logo + menü) */
  --ust-cizgi:rgba(27,35,64,.10);
  --kapak:#f4f5f7;                     /* oynatıcı kartında logonun zemini */
  --alan:#ffffff;                      /* form alanları */
  --alan-cerceve:#c9ccd6;
  --tamam:#3fae66;                     /* form başarı çerçevesi */
  --sonuk:#8a93b3;                     /* alt bilgi sütun başlıkları (lacivert zeminde 5:1) */
}

/* Üst bölüm (logo + menü, radyo.css .ust) kaydırınca üstte sabit. Zemin ve alt çizgi radyo.css'ten.
   z-index 20 (radyo.css) korunur: alt çubuğun (15) üstünde; mobil menü paneli .ust'ün içinde açılır.
   --ust-y sabit üst bölümün yüksekliği: telefonda 6+44+6 + 1 çizgi, geniş ekranda 10+56+10 + 1 çizgi. */
:root{--ust-y:57px}
.ust{position:sticky;top:0}
.ust .ic{padding-block:6px}
.ust .logo img{height:36px}
@media (min-width:900px){
  :root{--ust-y:77px}
  .ust .ic{padding-block:10px}
  .ust .logo img{height:56px}
}
/* Sayfa içi atlamalar (ör. iletişim #form) sabit üst bölümün altında kalsın; .form-kutu'nun 16 px payı bunun üstüne eklenir */
html{scroll-padding-top:var(--ust-y)}


/* Ana sayfa oynatıcı kartı: iki sütunlu düzenin (Şimdi yayında + Yayın akışı) üstünde, içerik genişliğinde.
   Telefonda tek sütun (kapak üstte, her şey ortalı); 900 px üstünde yatay: solda kare kapak, sağda dikeyde ortalı bilgi + düğme.
   HTML sırası kapak, bilgi, kontrol; yerleşim grid alanlarıyla. Oynat düğmesi radyo.css'teki .oynat. */
.kart-bolum{padding-block:32px 18px}
.radyo-kart{display:grid;gap:16px;justify-items:center;padding:16px 16px 24px;
  background:var(--yuzey);border:1px solid var(--kart-cizgi);border-radius:var(--kose);text-align:center}
.kart-kapak{width:min(100%,280px);aspect-ratio:1/1;display:grid;place-items:center;background:var(--kapak);border-radius:8px}
.kart-kapak img{width:80%;height:auto}
.kart-bilgi{width:100%;display:grid;gap:4px;min-width:0;line-height:1.3}
.kart-bilgi small{font-size:14px;font-weight:700;color:var(--soluk)}
.kart-bilgi strong{font-size:22px;line-height:1.25;color:var(--baslik)}
.kart-bilgi span{font-size:16px;color:var(--soluk)}
/* Uzun parça ve sanatçı adları en fazla iki satır */
.kart-bilgi strong,.kart-bilgi span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.kart-bilgi .kart-dinleyici{display:block;font-size:14px;margin-top:2px}
.kart-bilgi .kart-dinleyici:empty{display:none}
/* Telefonda dalga düğmenin üstünde ortalı satır; geniş ekranda düğmenin yanında */
.kart-kontrol{display:flex;flex-direction:column;align-items:center;gap:12px}
.kart-kontrol .dalga{order:-1;height:24px}
.radyo-kart .oynat{width:92px;height:92px;font-size:40px;flex:none}
.radyo-kart .oynat:disabled{opacity:.5;cursor:not-allowed}
@media (min-width:900px){
  .kart-bolum{padding-block:32px 0}
  .radyo-kart{grid-template-columns:300px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:"kapak ." "kapak bilgi" "kapak kontrol" "kapak .";
    column-gap:40px;row-gap:20px;justify-items:start;padding:20px;text-align:left}
  .kart-kapak{grid-area:kapak;width:300px}
  .kart-bilgi{grid-area:bilgi;gap:6px}
  .kart-bilgi strong{font-size:30px;line-height:1.2}
  .kart-bilgi span{font-size:18px}
  .kart-bilgi .kart-dinleyici{font-size:15px}
  .kart-kontrol{grid-area:kontrol;flex-direction:row;gap:16px}
  .kart-kontrol .dalga{order:0}
}

/* ---------- Renkler: radyo.css kurallarının koyu zemine uyarlanması (değerler yukarıdaki paletten) ---------- */
html{background:var(--zemin)}
body{color:var(--metin)}
#icerik :focus-visible,.duyuru :focus-visible,.alt :focus-visible{outline-color:var(--baslik)}

/* Üst bölüm açık kalır (logo kırmızı-lacivert); menüde açık sayfa kırmızı (5.1:1) */
.ust{background:var(--ust-zemin);border-bottom-color:var(--ust-cizgi);color:var(--murekkep)}
.menu-dugme{background:transparent;border-color:rgba(27,35,64,.18)}
.menu.acik{background:var(--ust-zemin);border-bottom-color:var(--ust-cizgi);box-shadow:0 10px 24px rgba(27,35,64,.12)}
.menu a{border-bottom-color:var(--ust-cizgi)}
@media (min-width:900px){.menu,.menu.acik{background:none;box-shadow:none}}

.duyuru{border-bottom-color:var(--cizgi)}
.etiket,.duyuru b,.akis li.simdi time{color:var(--vurgu-yazi)}
.simdi h1,.baslik-satir h2,.bolum h2,.sayfa-baslik h1,.kisi-bas h1,.form-kutu h2,.sonraki b{color:var(--baslik)}
.baslik-satir a,.bolum-bas a{color:var(--baslik)}

/* Yayın akışı: gün düğmeleri kartın içinde koyu, seçili gün beyaz */
.gunler a{border-color:var(--cizgi)}
.gunler a[aria-current="true"]{background:var(--baslik);border-color:var(--baslik);color:var(--murekkep)}

/* Program kartları */
.programlar a{background:var(--yuzey);border-color:var(--kart-cizgi)}

/* Alt bilgi içerikle aynı zeminde; üstünde ince çizgi */
.alt{border-top:1px solid var(--cizgi)}

/* İletişim formu: alanlar beyaz, yazısı lacivert; mesajlar açık renk */
.f-alan input,.f-alan select,.f-alan textarea{background:var(--alan);border-color:var(--alan-cerceve);color:var(--murekkep)}
.f-alan input:focus,.f-alan select:focus,.f-alan textarea:focus{outline-color:var(--baslik)}
.tur-sec input,.f-onay input{accent-color:var(--kirmizi)}
.form-tamam{border-color:var(--tamam);color:var(--baslik)}
.form-hata{border-color:var(--kirmizi);color:var(--baslik)}
.f-hata{color:var(--vurgu-yazi)}
.f-gonder:hover{background:var(--kirmizi-koyu)}

/* ---------- Programcı fotoğrafları: üzerine gelince büyür ----------
   Bağlantının tamamı (fotoğraf + ad) tetikler. Büyüme transform ile: yer kaplamaz, komşuları itmez, yuvarlak kalır.
   Fareyle yalnız fareli cihazda (dokunmatikte takılı kalmasın); klavye odağında her cihazda. */
.kisiler .av{transition:transform .25s ease,box-shadow .25s ease}
@media (hover:hover) and (pointer:fine){
  .kisiler a:hover .av{transform:scale(1.12);box-shadow:0 0 0 3px var(--kirmizi),0 8px 20px rgba(0,0,0,.45)}
}
.kisiler a:focus-visible .av{transform:scale(1.12);box-shadow:0 0 0 3px var(--kirmizi),0 8px 20px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){
  .kisiler .av{transition:none}
  .kisiler a:hover .av,.kisiler a:focus-visible .av{transform:none}
}

/* ---------- Alt bilgi: telif ve yapımcı tek satırda (telif solda, imza sağ uçta; dar ekranda alt alta) ----------
   Sağ boşluk: yukarı çık düğmesi (sağ altta 16 + 46 px) imzanın üstüne binmesin; geniş ekranda kap zaten içeride. */
.alt .ic.alt-telif{display:block;margin-top:22px;font-size:14px;color:var(--soluk)}
.alt-telif-satir{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;padding-top:16px;border-top:1px solid var(--cizgi)}
@media (min-width:760px){.alt-telif-satir{padding-right:max(0px,calc(70px - var(--kenar) - max(0px,(100vw - var(--genislik)) / 2)))}}
.alt-imza a{font-weight:700;color:var(--baslik);text-decoration:none}
.alt-imza a:hover{text-decoration:underline}

/* ---------- Üst menü: üzerine gelince kutucuk (yalnız geniş ekran; telefon menüsüne dokunmaz) ----------
   Bağlantı normalde düz yazı; fare ya da klavye odağında lacivert kutu, beyaz yazı (açık sayfa da).
   radyo.css'teki 22 px aralık bağlantıların iç boşluğuna taşındı (11+11, aralık 0): yazıların yeri değişmez;
   eksi kenar boşluğu son bağlantının yazısını eskisi gibi sağ kenara hizalar. */
@media (min-width:900px){
  .menu ul{gap:0}
  .menu a{padding:8px 11px;border-radius:8px;transition:background-color .2s ease,color .2s ease}
  .menu a:hover,.menu a:focus-visible{background:var(--murekkep);color:var(--baslik)}
}
@media (prefers-reduced-motion:reduce){.menu a{transition:none}}

/* ---------- Alt bilgi: sütun başlıkları, sade bağlantılar (FSM TV ile aynı dil) ----------
   Bağlantılar normal kalınlıkta, alt çizgisiz, açık renk; üzerine gelince beyaz + alt çizgi.
   Telif ve imza satırı (.alt-telif) ayrı kurallarda, burası ona dokunmaz. */
.alt-baslik{font-size:13px;font-weight:600;line-height:1.3;color:var(--sonuk);margin-bottom:8px}
.alt-iletisim{color:var(--metin)}
.alt-iletisim a,.alt nav a{color:var(--metin);text-decoration:none;transition:color .15s}
.alt-iletisim a:hover,.alt-iletisim a:focus-visible,.alt nav a:hover,.alt nav a:focus-visible{color:var(--baslik);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.alt nav ul{gap:10px 20px}

/* ---------- Program kutuları: üzerine gelince büyür, zemin siyaha döner ----------
   Ana sayfa, Programlar ve programcı sayfası (aynı parça: radyo/parca/program-kartlari).
   Büyüme transform ile: yer kaplamaz, komşuları itmez; büyüyen kutu z-index ile komşuların üstünde.
   Fareyle yalnız fareli cihazda (dokunmatikte takılı kalmasın); klavye odağında her cihazda.
   Hareketi azalt: büyüme ve geçiş yok, yalnız renk değişir (geçişleri radyo.css'teki genel kural da kapatır). */
.programlar a{position:relative;transition:transform .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
@media (hover:hover) and (pointer:fine){
  .programlar a:hover{z-index:1;transform:scale(1.04);background:var(--kart-koyu);border-color:var(--kart-koyu-cizgi);box-shadow:0 10px 24px rgba(0,0,0,.5)}
  .programlar a:hover .ad{color:var(--baslik)}
  .programlar a:hover .kim,.programlar a:hover .saat{color:var(--soluk)}
}
.programlar a:focus-visible{z-index:1;transform:scale(1.04);background:var(--kart-koyu);border-color:var(--kart-koyu-cizgi);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.programlar a:focus-visible .ad{color:var(--baslik)}
.programlar a:focus-visible .kim,.programlar a:focus-visible .saat{color:var(--soluk)}
@media (prefers-reduced-motion:reduce){
  .programlar a{transition:none}
  .programlar a:hover,.programlar a:focus-visible{transform:none}
}