:root{
  --navy:#0A2E5C;
  --navy2:#0E3A73;
  --navy3:#071F3F;
  --white:#FFFFFF;
  --red:#C4161C;
  --green:#2FAE60;
  --muted: rgba(255,255,255,.78);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--navy2), var(--navy3));
  color:var(--white);
}

.container{
  max-width: 980px;
  margin:0 auto;
  padding: 0 16px 90px;
}

/* Topbar */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  padding: 14px 0 10px;
  background: linear-gradient(180deg, rgba(10,46,92,.98), rgba(7,31,63,.94));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand .custom-logo-link img{height:34px; width:auto; display:block;}
.weather{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:700;}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--white);
  cursor:pointer;
}

.section-title{
  margin: 16px 0 10px;
  font-weight:900;
  letter-spacing:.5px;
}

.live-strip{
  margin-top: 12px;
  background: var(--red);
  padding: 10px 12px;
  border-radius: 12px 12px 0 0;
  text-align:center;
  font-weight:1000;
  letter-spacing:.6px;
}

.player{
  background: rgba(0,0,0,.18);
  border-radius: 0 0 14px 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
}

.player-media{
  position: relative;
  width:100%;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.35);
}
.player-media iframe,
.player-media video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.badge-live{
  position:absolute;
  top:10px; left:10px;
  background: var(--red);
  padding:6px 10px;
  border-radius: 10px;
  font-weight:1000;
  font-size: 12px;
}

.player-meta{
  padding: 10px 12px 12px;
}
.player-meta .title{
  font-weight:1000;
  margin:0 0 6px;
}
.player-meta .sub{
  margin:0;
  color: var(--muted);
  font-weight:700;
}

/* KIRMIZI RSS BANDI */
.rssbar{
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--red);
  display:flex;
  align-items:center;
}

.rssbar__label{
  padding: 12px 12px;
  font-weight: 1000;
  letter-spacing: .4px;
  white-space: nowrap;
  background: rgba(0,0,0,.18);
  border-right: 1px solid rgba(255,255,255,.18);
}

.rssbar__track{
  flex:1;
  overflow:hidden;
  padding: 12px 0;
}

.rssbar__move{
  display:inline-flex;
  align-items:center;
  gap: 18px;
  white-space: nowrap;
  will-change: transform;
  animation: rssMove 45s linear infinite;
}

.rssbar__item{
  color: var(--white);
  text-decoration:none;
  font-weight: 900;
}

.rssbar__item:hover{ text-decoration: underline; }

.rssbar__sep{
  color: rgba(255,255,255,.75);
  font-weight: 900;
}

@keyframes rssMove{
  0%   { transform: translateX(10%); }
  100% { transform: translateX(-120%); }
}

@media (prefers-reduced-motion: reduce){
  .rssbar__move{ animation:none; }
}

/* Programs */
.programs-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 16px;
}
.programs-head a{
  color: var(--muted);
  text-decoration:none;
  font-weight:900;
}

.programs{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
.programs::-webkit-scrollbar{height:8px}
.programs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:20px}

.program-card{
  scroll-snap-align: start;
  min-width: 220px;
  max-width: 220px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  position: relative;
}
.program-card .thumb{
  width:100%;
  aspect-ratio: 3/4;
  background: rgba(0,0,0,.25);
  position: relative;
}
.program-card .thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}
.program-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78));
}
.program-card .meta{
  position:absolute;
  left:12px; right:12px; bottom:12px;
}
.program-card .name{
  margin:0;
  font-weight:1000;
  font-size: 18px;
}
.program-card .desc{
  margin:6px 0 0;
  color: var(--muted);
  font-weight:800;
  font-size: 13px;
}
.pill{
  position:absolute;
  top:10px; left:10px;
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px;
  border-radius: 12px;
  font-weight:1000;
  font-size: 12px;
  background: rgba(10,46,92,.72);
  border:1px solid rgba(255,255,255,.12);
}
.pill.live{background: var(--red)}
.pill.time{background: rgba(14,58,115,.85)}
.pill.day{background: rgba(10,46,92,.80)}

/* Bottom nav (mobil) */
.bottom-nav{
  position: fixed;
  left:0; right:0; bottom:0;
  background: linear-gradient(180deg, rgba(7,31,63,.0), rgba(7,31,63,.95) 22%, rgba(7,31,63,.98));
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 10px 14px 12px;
  z-index: 80;
}
.bottom-nav .wrap{
  max-width: 980px;
  margin: 0 auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color: var(--muted);
  text-decoration:none;
  font-weight:900;
  font-size: 12px;
}
.nav-item .dot{
  width:14px; height:14px;
  border-radius:50%;
  background: rgba(255,255,255,.18);
}
.nav-item.active{color: var(--white)}
.nav-item.active .dot{background: var(--green)}

/* Desktop: bottom nav gizle */
@media (min-width: 900px){
  .bottom-nav{display:none;}
  .container{padding-bottom: 24px;}
}