/* Header logo: doğal boy, çerçevesiz */
.site-logo{
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

/* Menu bar styling */
.menu-bar {
  background-color: #1ca3ec; /* deniz mavisi */
  width: 100%;
}
.menu-bar .nav-link {
  color: #fff;
  font-weight: 600;
}
.menu-bar .nav-link:hover {
  text-decoration: underline;
}

/* Radio card */
.radio-card {
  background-color: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  height: 70px; /* istenen yükseklik */
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.radio-card:hover { 
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.radio-logo {
  width: 100%;
  height: 100%;
  
  
  border: 2px solid #ddd;

  object-fit: cover;
  border-radius: 0 !important;
}

.radio-name {
  font-weight: 700;
  margin: 0;
}

.play-btn {
  background-color: #343a40; /* koyu gri */
  color: #fff;
  border: none;
  border-radius: .5rem;
  padding: .4rem .75rem;
  transition: background-color .2s ease, transform .2s ease;
}
.play-btn:hover {
  background-color: #0d6efd; /* mavi */
  transform: scale(1.05);
}

/* Playing state */
.radio-card.playing .radio-logo {
  border-color: #dc3545; /* kırmızı */
  box-shadow: 0 0 0 3px rgba(220,53,69,.25);
}
.radio-card.playing .play-btn {
  background-color: #dc3545;
}

.logo-box{width:90px;height:90px;border-radius:10px;overflow:hidden;background:transparent;border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center}


/* === Playing state: full card red, text white, keep button color === */
.radio-card.playing{ background-color:#dc3545; color:#fff; }
.radio-card.playing .radio-name{ color:#fff; }
.radio-card.playing .play-btn{
  background-color: #343a40 !important; /* keep default dark */
  color:#fff !important;
}


/* === Spacing fixes === */
#radio-grid.row { --bs-gutter-x: 1rem; --bs-gutter-y: 1.25rem; }
.radio-card { padding: .75rem; border-radius: .75rem; }

/* Dikey boşlukları garanti et */
#radio-grid { --bs-gutter-y: 1.25rem; }
#radio-grid > [class*="col-"] { margin-bottom: 1.25rem; } /* gutter çalışmasa bile boşluk */

/* Kart içi nefes alanı */
.radio-card { padding: 1rem; border-radius: .75rem; }

/* Logo kutuları üst-alt birleşmesin, kutu ölçüsünde resmi kapla */
.logo-box{
  width: 90px; height: 90px;
  border-radius: 10px; overflow: hidden;
  background: transparent; border: 1px solid rgba(0,0,0,.08);
  margin-right: .75rem;                 /* yatay boşluk */
  flex: 0 0 90px;                       /* sabit kutu */
}
.radio-logo{
  width: 100%; height: 100%;
  object-fit: cover;                    /* resmi kutuyu tamamen doldur */
  border-radius: 0 !important;
}
@media (max-width:576px){
  .logo-box{ width:72px; height:72px; flex-basis:72px; }
}

#radio-grid.row { --bs-gutter-x: 1rem; --bs-gutter-y: 1.25rem; }
#radio-grid > [class*="col-"] { margin-bottom: 1.25rem; }

/* Mobil uyumlu, efektli menü */
.menu-bar { position: sticky; top: 0; z-index: 1030; }
.glass-nav {
  background: linear-gradient(90deg,#0d6efd 0%,#6610f2 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  backdrop-filter: saturate(160%) blur(8px);
}
.navbar-nav .nav-link {
  color: #fff;
  padding: .75rem 1rem;
  border-radius: .75rem;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.navbar-nav .nav-link::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: .4rem;
  height: 2px; background: rgba(255,255,255,.9);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
  border-radius: 1px;
}
.navbar-nav .nav-link:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.25);
  background-color: rgba(255,255,255,.08);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-nav .nav-link.active { background: rgba(255,255,255,.14); }

/* Küçük ekran: rahat dokunma ve blok düzen */
@media (max-width: 767.98px) {
  .navbar-collapse { padding: .5rem 0; }
  .navbar-nav .nav-item + .nav-item { margin-top: .25rem; }
  .navbar-nav .nav-link { width: 100%; }
}


/* Link alt-çizgisini kapat, efekt kalsın */
.glass-nav .navbar-nav .nav-link,
.glass-nav .navbar-nav .nav-link:hover,
.glass-nav .navbar-nav .nav-link:focus,
.glass-nav .navbar-nav .nav-link.active { text-decoration: none !important; }

/* Toggler görünürlüğü ve focus */
.navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-toggler:focus { box-shadow: 0 0 0 .15rem rgba(255,255,255,.25); }