/* ============================================================
   RADIOTHEME - radio-card.css
   Radio station card: single row layout with logo, name,
   city/country, genres, and play button
   ============================================================ */

/* ------------------------------------------------------------
   RADIO LIST CONTAINER
   ------------------------------------------------------------ */
.radio-list {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.radio-list-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   var(--space-2);
}

.radio-list-count {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.radio-list-count span {
    font-weight: var(--font-weight-bold);
    color:       var(--color-text-primary);
}

/* ------------------------------------------------------------
   RADIO CARD - Single Row
   ------------------------------------------------------------ */
.radio-card {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    padding:         var(--space-3) var(--space-4);
    background:      var(--color-bg-secondary);
    border-bottom:   1px solid var(--color-border-light);
    cursor:          pointer;
    transition:      all var(--transition-fast);
    position:        relative;
    text-decoration: none;
    color:           inherit;

    /* Left accent border - hidden by default */
    border-left:     3px solid transparent;

    /* CLS fix: sabit minimum yükseklik — lazy-load görseller yüklenirken
       layout shift olmasın. 50px logo + 2×padding-y = 68px min. */
    min-height:      68px;
    box-sizing:      border-box;

    /* Render performansı: görünür alanın dışındaki kartlar render edilmez.
       contain-intrinsic-size tarayıcıya kart yüksekliğini önceden bildirir
       — scroll pozisyonu ve layout stabil kalır. */
    content-visibility:     auto;
    contain-intrinsic-size: 0 72px;
}

.radio-card:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top:    1px solid var(--color-border-light);
}

.radio-card:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.radio-card:first-child:last-child {
    border-radius: var(--radius-lg);
    border-top:    1px solid var(--color-border-light);
}

/* Hover state */
.radio-card:hover {
    background:        var(--color-bg);
    border-left-color: var(--color-accent);
}

.radio-card:hover .play-btn {
    opacity:    1;
    transform:  scale(1);
}

/* Active / currently playing state */
.radio-card.is-playing {
    background:        var(--color-accent-alpha);
    border-left-color: var(--color-accent);
}

.radio-card.is-playing .play-btn {
    opacity:          1;
    transform:        scale(1);
    background-color: var(--color-accent);
    color:            white;
}

.radio-card.is-playing .station-name {
    color: var(--color-accent);
}

/* ------------------------------------------------------------
   STATION LOGO (50x50)
   ------------------------------------------------------------ */
.station-logo-wrap {
    flex-shrink: 0;
    position:    relative;
    overflow:    hidden;
    border-radius: var(--radius-md);
    width:       52px;
    height:      52px;
    aspect-ratio: 1;
}

.station-logo {
    width:         52px;
    height:        52px;
    border-radius: var(--radius-md);
    object-fit:    cover;
    background:    var(--color-bg);
    border:        1px solid var(--color-border-light);
    display:       block;
}

/* Fallback logo when no image */
.station-logo-fallback {
    width:            52px;
    height:           52px;
    border-radius:    var(--radius-md);
    background:       linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
    border:           1px solid var(--color-border-light);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    font-family:      var(--font-display);
    font-size:        var(--font-size-lg);
    font-weight:      var(--font-weight-extrabold);
    color:            var(--color-accent);
    text-transform:   uppercase;
    letter-spacing:   -0.03em;
    overflow:         hidden;
}

/* Live indicator dot on logo */
.station-live-dot {
    position:         absolute;
    bottom:           2px;
    right:            2px;
    width:            10px;
    height:           10px;
    background-color: var(--color-success);
    border-radius:    50%;
    border:           2px solid var(--color-bg-secondary);
    animation:        pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(0.85); }
}

/* ------------------------------------------------------------
   STATION INFO
   ------------------------------------------------------------ */
.station-info {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            3px;
}

/* Station name */
.station-name {
    font-family:    var(--font-display);
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-bold);
    color:          var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    transition:     color var(--transition-fast);
    line-height:    1.3;
}

/* City and Country */
.station-location {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    font-size:   var(--font-size-xs);
    color:       var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.station-location .location-separator {
    color: var(--color-border);
}

.station-location .country-flag {
    font-size: 0.85em;
}

.station-location .location-country {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Genre tags */
.station-genres {
    display:    flex;
    align-items: center;
    gap:         var(--space-1);
    flex-wrap:   nowrap;
    overflow:    hidden;
}

.genre-tag {
    display:        inline-block;
    padding:        1px var(--space-2);
    background:     var(--color-bg);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-full);
    font-size:      0.75rem; /* 12px */
    font-weight:    var(--font-weight-medium);
    color:          var(--color-text-muted);
    white-space:    nowrap;
    transition:     all var(--transition-fast);
    text-decoration: none;
}

.genre-tag:hover {
    border-color: var(--color-accent);
    color:        var(--color-accent);
    background:   var(--color-accent-alpha);
}

.radio-card.is-playing .genre-tag {
    border-color: rgba(255, 107, 53, 0.3);
    color:        var(--color-accent);
}

/* More genres indicator */
.genres-more {
    font-size:   0.75rem;
    color:       var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   STATION META (right side)
   ------------------------------------------------------------ */
.station-meta {
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
    flex-shrink:    0;
}

/* Bitrate badge */
.bitrate-badge {
    font-size:   var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color:       var(--color-text-muted);
    letter-spacing: var(--letter-spacing-wide);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   PLAY BUTTON
   ------------------------------------------------------------ */
.play-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background-color: var(--color-bg);
    border:           1px solid var(--color-border);
    color:            var(--color-text-muted);
    cursor:           pointer;
    flex-shrink:      0;
    opacity:          0;
    transform:        scale(0.85);
    transition:       all var(--transition-spring);
    z-index:          var(--z-base);
}

/* Kart hover'ında play butonu siyah arka planla çık */
.radio-card:hover .play-btn {
    opacity:          1;
    transform:        scale(1);
    background-color: var(--color-text-primary);
    border-color:     var(--color-text-primary);
    color:            #fff;
}

/* Play butonuna hover'da turuncu */
.radio-card:hover .play-btn:hover,
.play-btn:hover {
    background-color: var(--color-accent) !important;
    border-color:     var(--color-accent) !important;
    color:            #fff !important;
    transform:        scale(1.08) !important;
    box-shadow:       var(--shadow-accent);
}

.play-btn svg {
    width:  16px;
    height: 16px;
    fill:   currentColor;
    flex-shrink: 0;
}

/* Active kart — play butonu her zaman görünür, accent rengi, pause ikonu */
.radio-card.is-playing .play-btn,
.radio-card.is-paused  .play-btn {
    opacity:          1 !important;
    transform:        scale(1) !important;
    background-color: var(--color-accent) !important;
    border-color:     var(--color-accent) !important;
    color:            #fff !important;
    box-shadow:       var(--shadow-accent);
}

/* İkon durumları */
.play-btn svg.icon-play  { display: block; }
.play-btn svg.icon-pause { display: none;  }

.play-btn.is-playing svg.icon-play,
.radio-card.is-playing .play-btn svg.icon-play  { display: none;  }
.play-btn.is-playing svg.icon-pause,
.radio-card.is-playing .play-btn svg.icon-pause { display: block; }

.play-btn.is-paused svg.icon-play,
.radio-card.is-paused .play-btn svg.icon-play   { display: block; }
.play-btn.is-paused svg.icon-pause,
.radio-card.is-paused .play-btn svg.icon-pause  { display: none;  }

/* Touch cihazlarda her zaman göster */
@media (hover: none) {
    .play-btn {
        opacity:   1;
        transform: scale(1);
    }
}

/* ------------------------------------------------------------
   EQUALIZER ANIMATION (when playing)
   ------------------------------------------------------------ */
.equalizer {
    display:         none;
    align-items:     flex-end;
    justify-content: center;
    gap:             2px;
    height:          20px;
    width:           100%;
    /* Logo üzerine overlay — station-logo-wrap position:relative içinde */
    position:        absolute;
    bottom:          6px;
    left:            0;
    right:           0;
    z-index:         2;
}

.radio-card.is-playing .equalizer {
    display: flex;
}

.radio-card.is-playing .station-logo,
.radio-card.is-playing .station-logo-fallback {
    filter: brightness(0.55);
}

.eq-bar {
    width:            3px;
    background-color: var(--color-accent);
    border-radius:    1px;
    animation:        eq-bounce 1s ease-in-out infinite;
}

.eq-bar:nth-child(1) { animation-delay: 0s;     animation-duration: 0.9s; }
.eq-bar:nth-child(2) { animation-delay: 0.15s;  animation-duration: 1.1s; }
.eq-bar:nth-child(3) { animation-delay: 0.05s;  animation-duration: 0.8s; }
.eq-bar:nth-child(4) { animation-delay: 0.2s;   animation-duration: 1.2s; }

@keyframes eq-bounce {
    0%, 100% { height: 4px; }
    50%       { height: 14px; }
}

/* Paused equalizer */
.radio-card.is-paused .eq-bar {
    animation-play-state: paused;
    height:               6px;
}

/* ------------------------------------------------------------
   SKELETON LOADING STATE
   ------------------------------------------------------------ */
.radio-card-skeleton {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    pointer-events: none;
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-border-light) 25%,
        var(--color-border) 50%,
        var(--color-border-light) 75%
    );
    background-size: 200% 100%;
    animation:       skeleton-shimmer 1.5s infinite;
    border-radius:   var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-logo {
    width:         50px;
    height:        50px;
    border-radius: var(--radius-md);
    flex-shrink:   0;
}

.skeleton-content {
    flex:    1;
    display: flex;
    flex-direction: column;
    gap:     var(--space-2);
}

.skeleton-title {
    height: 14px;
    width:  60%;
}

.skeleton-subtitle {
    height: 11px;
    width:  40%;
}

.skeleton-tags {
    height: 10px;
    width:  50%;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .station-logo,
    .station-logo-fallback {
        width:  46px;
        height: 46px;
    }
}

@media (max-width: 480px) {
    .radio-card {
        padding:  var(--space-3);
        gap:      var(--space-2);
    }

    .station-logo,
    .station-logo-fallback {
        width:  42px;
        height: 42px;
    }

    .bitrate-badge {
        display: none;
    }

    .station-genres .genre-tag:nth-child(n+2) {
        display: none;
    }

    /* Mobilde station-name biraz daha büyük — tıklama hedefi */
    .station-name {
        font-size: var(--font-size-md);
    }
}

/* Full-card detail link overlay */
.radio-card-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}
.radio-card { position: relative; }
.radio-card .station-logo-wrap,
.radio-card .station-info,
.radio-card .station-meta {
    position: relative;
    z-index: 1;
    pointer-events: none;
}
/* Genre, şehir, ülke ve play butonu — pointer-events geri aç */
.radio-card .station-genres a,
.radio-card .station-location .location-link,
.radio-card .play-btn {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* station-name link */
a.station-name {
    color: inherit;
    text-decoration: none;
    display: block;
}
a.station-name:hover {
    text-decoration: underline;
    color: var(--color-primary, #6c63ff);
}
/* station-logo-wrap as link */
a.station-logo-wrap {
    text-decoration: none;
    flex-shrink: 0;
}

/* Kart içi konum linkleri (ülke, şehir) — tıklanabilir görünüm */
.station-location .location-link {
    color:           var(--color-accent, #6c63ff);
    text-decoration: none;
    transition:      color var(--transition-fast), opacity var(--transition-fast);
    cursor:          pointer;
    opacity:         0.82;
    font-weight:     var(--font-weight-medium);
}
.station-location .location-link:hover {
    color:           var(--color-accent);
    text-decoration: underline;
    opacity:         1;
}

/* ============================================================
   FAVORİ BUTONU — Radio Card
   ============================================================ */

.rt-card-favorite {
    position:        absolute;
    top:             6px;
    left:            6px;
    width:           28px;
    height:          28px;
    background:      rgba(0,0,0,0.45);
    border:          none;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    padding:         0;
    color:           rgba(255,255,255,0.5);
    opacity:         0;
    transform:       scale(0.8);
    transition:      opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, background 0.18s ease;
    z-index:         2;
    flex-shrink:     0;
}

/* Kart hover'da veya favori ise göster */
.radio-card:hover .rt-card-favorite,
.radio-card:focus-within .rt-card-favorite {
    opacity:   1;
    transform: scale(1);
}

/* Her zaman görünür: zaten favoriye ekliyse */
.rt-card-favorite.is-favorite {
    opacity:    1;
    transform:  scale(1);
    color:      #e53e3e;
    background: rgba(229,62,62,0.15);
}

.rt-card-favorite:hover {
    background: rgba(229,62,62,0.2);
    color:      #e53e3e;
}

.rt-card-favorite svg { width: 14px; height: 14px; display: block; }

/* Dolu kalp — sadece is-favorite'de */
.rt-card-favorite .fav-icon-empty  { display: block;  }
.rt-card-favorite .fav-icon-filled { display: none;   }
.rt-card-favorite.is-favorite .fav-icon-empty  { display: none;  }
.rt-card-favorite.is-favorite .fav-icon-filled { display: block; }

/* ── In-feed ad banner ── */
.in-feed-ad {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2) 0;
    grid-column: 1 / -1;
}
.in-feed-ad--placeholder {
    height: 54px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}