/* FSM TV: radyo.css üzerine. Aynı tasarım dili; video ağırlıklı bileşenler. */
:root{
  --tv-ust:#f4f5f7; --menu-zemin:#f4f5f7; --menu-cizgi:rgba(27,35,64,.14);                       /* üst bölüm: açık nötr; logodaki kırmızıyla yeterli kontrast */
  --tv-ust-cizgi:rgba(27,35,64,.10);
  --tv-ust-yazi:#1b2340;
  --tv-ust-uzerinde:rgba(27,35,64,.06); /* menü bağlantısı üzerine gelince */
  --tv-kart:#24305a;                      /* koyu zemin üstündeki kartlar */
  --tv-kart-cizgi:rgba(255,255,255,.08);
  --tv-sonuk-nokta:#8a93b3;               /* yayın yokken durum noktası */
}

/* ---------- Üst bölüm (açık) ---------- */
.ust{background:var(--tv-ust);border-bottom-color:var(--tv-ust-cizgi);color:var(--tv-ust-yazi)}
.menu-dugme{background:transparent;border-color:rgba(27,35,64,.18);color:var(--murekkep)}
.menu-dugme:hover{background:var(--tv-ust-uzerinde)}
.menu.acik{background:var(--tv-ust);border-bottom-color:var(--tv-ust-cizgi);box-shadow:0 10px 24px rgba(27,35,64,.12)}
.menu a{border-bottom-color:var(--tv-ust-cizgi);transition:color .15s,background-color .15s}
.menu a:hover{color:var(--murekkep)}
.menu a[aria-current="page"]{color:var(--murekkep);text-decoration:underline;text-decoration-color:var(--kirmizi);text-decoration-thickness:2px;text-underline-offset:6px}

.tv-canli{background:var(--murekkep);color:#fff;padding-block:16px 20px}
.tv-canli .baslik-satir{margin-bottom:10px}
.tv-canli .baslik-satir a{color:#fff}
.tv-canli .etiket{color:#fff}
.tv-baslik{font-size:22px;font-stretch:90%;font-weight:800;margin-bottom:12px}
.oynatici{position:relative;aspect-ratio:16/9;background:#0e1430;border-radius:var(--kose);overflow:hidden;max-width:100%;box-shadow:0 1px 2px rgba(0,0,0,.16),0 6px 18px rgba(0,0,0,.12)}
.oynatici iframe,.oynatici video{position:absolute;inset:0;width:100%;height:100%;border:0}
.oynatici.kapali{display:grid;place-items:center}
.oynatici.kapali img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.oynatici.kapali p{position:relative;background:rgba(14,20,48,.85);padding:10px 14px;border-radius:8px;font-weight:600;font-size:15px;text-align:center;margin:16px}
.yayin-durum-satir{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px;font-size:15px;color:var(--lacivert-acik)}
.yayin-durum-satir span:last-child{min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yayin-durum-satir a{color:#fff;font-weight:600}
.canli-rozet{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;padding:3px 10px;border-radius:999px;border:1px solid}
.canli-rozet{color:#fff;background:var(--kirmizi);border-color:var(--kirmizi)}
.canli-rozet::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:nabiz 1.6s ease-in-out infinite}
/* Yayın yokken: düğme görünümü yok, nokta + yazı */
/* Son yayın satırı kart görünümünde */
@keyframes nabiz{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.canli-rozet::before{animation:none}}
.yayin-yok{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--tv-kart);border-radius:var(--kose);padding:16px}
.yayin-yok .isik{width:12px;height:12px;border-radius:50%;background:var(--tv-sonuk-nokta);margin-top:6px}
.yayin-yok strong{font-size:18px}
.yayin-yok p{color:var(--lacivert-acik);font-size:15px;margin-top:2px}

.videolar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
.kart{display:grid;gap:6px;text-decoration:none;align-content:start}
.kapak{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--tv-kart);display:grid;place-items:center}
.kapak img{width:100%;height:100%;object-fit:cover}
.kapak img.kapak-logo{width:50%;height:auto;object-fit:contain}
.oynat-isareti{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;background:var(--kirmizi);color:#fff;display:grid;place-items:center;font-size:14px}
.kart .ad{font-weight:700;font-size:15px;line-height:1.25;color:#fff}
.kart:hover .ad{text-decoration:underline}
.kart .meta{font-size:13px;color:var(--lacivert-acik)}
/* Video kartı vurgusu: kart biraz kalkar, kapak gölge alır, görsel kapağın içinde büyür ve siyah-beyaz olur
   (yalnız görsel; oynat işareti, başlık ve tarih renkli kalır).
   Yalnız fare olan cihazlarda üzerine gelince; klavye odağında her cihazda. */
.kart{transition:transform .22s ease}
.kapak{isolation:isolate;transition:box-shadow .22s ease} /* isolation: büyüyen görsel yuvarlak köşeden taşmaz (Safari) */
.kapak img{transition:transform .22s ease,filter .22s ease}
@media (hover:hover) and (pointer:fine){
  .kart:hover{transform:translateY(-2px)}
  .kart:hover .kapak{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.45)}
  .kart:hover .kapak img{transform:scale(1.05);filter:grayscale(1)}
}
.kart:focus-visible{transform:translateY(-2px)}
.kart:focus-visible .kapak{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.45)}
.kart:focus-visible .kapak img{transform:scale(1.05);filter:grayscale(1)}
@media (prefers-reduced-motion:reduce){
  .kart,.kapak img{transition:none}
  .kart:hover,.kart:focus-visible,.kart:hover .kapak img,.kart:focus-visible .kapak img{transform:none}
}
.sayfalama{display:flex;justify-content:center;align-items:center;gap:16px;padding-top:20px;font-weight:600}
.sayfalama span:not(:nth-child(2)){color:var(--tv-sonuk-nokta)}

@media (min-width:900px){
  .tv-canli{padding-block:24px 32px}
  .tv-canli > .ic{max-width:1040px}
  .videolar{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
  .yayin-yok{padding:22px}
  /* Menü: eşit aralık, bağlantının kendisi tıklama alanı; üzerine gelince açık zemin */
  .menu ul{gap:4px}
  .menu a{padding:8px 11px;border-radius:6px}
  .menu a:hover{background:var(--tv-ust-uzerinde)}
}

/* ---------- Alt bilgi (footer) ---------- */
.alt .ic{gap:20px;align-items:start}
.alt a{text-decoration:none;color:#e4e7f0;transition:color .15s}
.alt nav a:hover,.alt nav a:focus-visible,.alt-iletisim a:hover,.alt-iletisim a:focus-visible{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.alt a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
/* Sütun başlıkları: küçük, soluk; büyük harf ya da harf aralığı yok */
.alt-baslik{font-size:13px;font-weight:600;line-height:1.3;color:var(--tv-sonuk-nokta);margin-bottom:8px}
/* YouTube (sosyal) düğmesi: yumuşak köşe, hafif zemin, ince çerçeve */
.sosyal a{border-radius:12px;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;transition:background-color .15s,border-color .15s}
.sosyal a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#fff}
/* Telif: üç sütunun altında iki satır; her satırın üstünde footer çizgisiyle aynı ayırıcı. Firma adı kalın, üzerine gelince açılır. */
.telif{grid-column:1/-1;display:grid;gap:12px;font-size:13px;line-height:1.5;color:var(--tv-sonuk-nokta);text-align:center;overflow-wrap:anywhere}
.telif p{border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.alt .telif a{color:var(--tv-sonuk-nokta);font-weight:700}
.alt .telif a:hover,.alt .telif a:focus-visible{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (min-width:900px){
  .alt .ic{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr);align-items:start}
  .alt nav{justify-self:end}
  /* Telif solda, imza aynı satırın sağ ucunda; sağ boşluk yukarı çık düğmesi için (radyo-alt.css ile aynı) */
  .telif{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;text-align:left;padding-right:max(0px,calc(70px - var(--kenar) - max(0px,(100vw - var(--genislik)) / 2)))}
  .telif p{border-top:0;padding-top:0}
}

/* ---------- Menüde canlı işareti ---------- */
.menu-canli{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--kirmizi);margin-left:6px;vertical-align:middle;position:relative;top:-1px}

/* ---------- Radyo kutusu (ana sayfa) ---------- */
.radyo-kutu{padding-bottom:0}
.radyo-kart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;border:1px solid rgba(255,255,255,.14);border-radius:var(--kose);padding:12px 14px}
.radyo-oynat{width:48px;height:48px;border-radius:50%;border:0;background:var(--kirmizi);color:#fff;display:grid;place-items:center;font-size:22px}
.radyo-oynat .durdur-ikon,.radyo-oynat[aria-pressed="true"] .oynat-ikon{display:none}
.radyo-oynat[aria-pressed="true"] .durdur-ikon{display:inline-block}
.radyo-bilgi h2{font-size:17px;font-weight:800}
.radyo-bilgi p{color:var(--lacivert-acik);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radyo-git{grid-column:1/-1;justify-self:start;font-weight:600;font-size:14px}
@media (min-width:600px){.radyo-kart{grid-template-columns:auto minmax(0,1fr) auto}.radyo-git{grid-column:auto}}

/* ---------- Arama ---------- */
.arama{display:flex;gap:8px;margin-top:14px;max-width:560px}
.arama input{flex:1;min-width:0;height:46px;border:1px solid var(--cizgi);border-radius:8px;padding:0 14px;font:inherit}
.arama input:focus{outline:2px solid #fff;outline-offset:0;border-color:var(--murekkep)}
.arama button{height:46px;padding:0 20px;border:0;border-radius:8px;background:var(--tv-kart);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:700}
.arama-sonuc{color:var(--lacivert-acik);margin-bottom:14px}

/* ---------- Koyu içerik zemini (Canlı yayın bölümüyle aynı) ---------- */
/* Header açık kalır; içerik ve footer --murekkep. Kısa sayfada footer ekranın altında, altında boşluk yok. */
html{background:var(--murekkep)}
body{background:var(--murekkep);color:#e4e7f0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#icerik{flex:1 0 auto}
.alt{flex:none;border-top:1px solid rgba(255,255,255,.12)}
#icerik :focus-visible{outline-color:#fff}
.sayfa-baslik h1,.bolum h2,.bolum-bas h2{color:#fff}
.sayfa-baslik p{color:var(--lacivert-acik)}
.sayfa-baslik .etiket{color:var(--lacivert-acik)}
/* Sayfa başlığı TV'de daha küçük, daha az kalın: 390 px'te 23 px, 900 px ve üstünde 33 px, arası kademeli */
.sayfa-baslik h1{font-size:clamp(23px,15.35px + 1.961vw,33px);font-weight:700}
.baslik-satir a,.bolum-bas a,.sayfalama a{color:#fff}
.iletisim dt{color:var(--lacivert-acik)}
/* İletişim formu: alanlar beyaz kalır, yazısı koyu; mesajlar açık renk */
.form-kutu{border-top-color:rgba(255,255,255,.12)}
.istege-bagli,.f-not{color:var(--lacivert-acik)}
.f-alan input,.f-alan select,.f-alan textarea{color:var(--murekkep)}
.f-alan input:focus,.f-alan select:focus,.f-alan textarea:focus{outline-color:#fff}
.form-tamam,.form-hata,.f-hata{color:#fff}