/* ============================================================
   RADIOTHEME — single-station.css  v3  (Tab Layout)
   Hero daima görünür | Tab 1: Ana | Tab 2: Hakkında | Tab 3: Şarkı Geçmişi
   Rating + Favori her zaman sd-sticky-bar içinde görünür.
   ============================================================ */

/* ── Sayfa Layout ── */
.station-detail-page .content-area {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:   "radio-list sidebar-left sidebar-right";
    gap:                   var(--space-4);
    align-items:           start;
    padding:               0 var(--space-4);
}
.station-detail                            { min-width: 0; grid-area: radio-list; }
.station-detail-page .sidebar-left-column  { grid-area: sidebar-left; }
.station-detail-page .sidebar-right-column { grid-area: sidebar-right; }

/* ── Breadcrumb ── */
.station-detail-page > .breadcrumb-nav { padding: var(--space-3) var(--space-4) var(--space-2); margin: 0; }
.breadcrumb-nav   { font-size: var(--font-size-sm, 0.85rem); color: var(--color-text-muted); margin-bottom: 0; }
.breadcrumb-list  { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb-item  { display: flex; align-items: center; gap: 0.25rem; }
.breadcrumb-item:not(:last-child)::after { content: '›'; color: var(--color-text-muted); opacity: 0.5; font-size: 0.9em; margin-left: 0.15rem; }
.breadcrumb-link  { color: var(--color-accent, #ff6b35); text-decoration: none; font-weight: 500; transition: opacity 0.15s; }
.breadcrumb-link:hover { opacity: 0.75; text-decoration: underline; }
.breadcrumb-current { color: var(--color-text-primary); font-weight: 500; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Ana Kart ── */
.sd-card {
    background:    var(--color-surface, #fff);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-6);
    margin-bottom: var(--space-6);
    overflow:      hidden;
}

/* ══════════════════════════════════════════
   HERO — Logo | Bilgi (her zaman görünür)
   ══════════════════════════════════════════ */
.sd-hero {
    display:               grid;
    grid-template-columns: 100px 1fr;
    gap:                   0 var(--space-5);
    align-items:           start;
    margin-bottom:         var(--space-5);
}

/* Logo */
.sd-logo-wrap {
    grid-column: 1;
    grid-row:    1 / 3;
    width:  100px;
    height: 100px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    align-self: start;
}
.sd-logo-img {
    width: 100px; height: 100px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    display: block;
    border: 1px solid var(--color-border);
    transition: opacity 0.3s ease;
}
.sd-logo-fallback {
    width: 100px; height: 100px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-accent) 0%, #ff8c5e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: var(--font-weight-extrabold);
    color: #fff;
}

/* Sağ bilgi */
.sd-info {
    grid-column: 2;
    grid-row:    1;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         var(--space-2);
}

/* Başlık + Play */
.sd-title-row {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}
.sd-title {
    font-family:    var(--font-display);
    font-size:      var(--font-size-2xl);
    font-weight:    var(--font-weight-extrabold);
    color:          var(--color-text-primary);
    line-height:    1.15;
    letter-spacing: -0.025em;
    flex:           1;
    margin:         0;
}

/* Play butonu */
.sd-play-btn.play-btn, .sd-play-btn {
    flex-shrink:     0 !important;
    width:           50px !important;
    height:          50px !important;
    border-radius:   50% !important;
    background:      var(--color-accent) !important;
    color:           #fff !important;
    border:          none !important;
    cursor:          pointer !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    opacity:         1 !important;
    transform:       scale(1) !important;
    transition:      background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast) !important;
    box-shadow:      0 2px 12px rgba(255,107,53,0.35) !important;
}
.sd-play-btn.play-btn:hover, .sd-play-btn:hover { background: var(--color-accent-dark, #e05a2a) !important; transform: scale(1.07) !important; box-shadow: 0 4px 18px rgba(255,107,53,0.5) !important; }
.sd-play-btn.play-btn.is-playing, .sd-play-btn.is-playing { background: var(--color-accent-dark, #e05a2a) !important; }
.sd-play-btn svg { width: 22px !important; height: 22px !important; }

/* Şu an çalan satırı */
.sd-song-row {
    display:    flex;
    align-items: center;
    gap:         var(--space-2);
    min-height:  1.5rem;
}
.sd-song-note { font-size: var(--font-size-sm); color: var(--color-accent); flex-shrink: 0; opacity: 0.7; display: none; }
.sd-song-row.has-song .sd-song-note { display: block; }

.sd-song-marquee-wrap { flex: 1; min-width: 0; overflow: hidden; position: relative; }
.sd-song-text {
    display:     block;
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color:       var(--color-text-muted);
    white-space: nowrap;
    transition:  color var(--transition-fast);
}
.sd-song-row.has-song .sd-song-text { color: var(--color-text-secondary); }
@keyframes sd-marquee { 0%,15% { transform: translateX(0); } 85%,100% { transform: translateX(var(--sd-marquee-offset, -60%)); } }
.sd-song-text.is-marquee { animation: sd-marquee 12s linear infinite alternate; }

.sd-no-song-wrap { display: none; align-items: center; gap: 6px; }
.sd-song-row.is-playing .sd-no-song-wrap { display: inline-flex; }
.sd-song-row.has-song   .sd-no-song-wrap { display: none; }

.sd-live-dots { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; flex-shrink: 0; }
.sd-live-dots span { display: inline-block; width: 3px; height: 3px; border-radius: 2px 2px 0 0; background-color: var(--color-accent, #FF6B35); animation: none; }
.sd-live-dots.is-playing span { animation: sd-eq-bar 2.2s ease-in-out infinite; }
.sd-live-dots.is-playing span:nth-child(1) { animation-delay: 0.0s; }
.sd-live-dots.is-playing span:nth-child(2) { animation-delay: 0.4s; }
.sd-live-dots.is-playing span:nth-child(3) { animation-delay: 0.8s; }
.sd-live-dots.is-playing span:nth-child(4) { animation-delay: 0.2s; }
.sd-live-dots.is-playing span:nth-child(5) { animation-delay: 0.6s; }
@keyframes sd-eq-bar { 0%,100% { height: 3px; } 25% { height: 11px; } 50% { height: 5px; } 75% { height: 13px; } }

.sd-np-label { font-size: var(--font-size-xs, 0.75rem); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; letter-spacing: 0.02em; }

/* ── Sticky Bar: Rating + Favori (hero içinde, tab dışında) ── */
.sd-sticky-bar {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--space-3);
    padding-top: var(--space-2);
    border-top:  1px solid var(--color-border-light, rgba(255,255,255,0.08));
}

/* Rating widget (sticky bar içinde kompakt) */
.sd-sticky-bar .rt-rating-widget {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--space-2);
}
.rt-stars-display { display: flex; gap: 2px; }
.rt-star {
    background:  none;
    border:      none;
    font-size:   1.2rem;
    cursor:      pointer;
    color:       var(--color-border, #ccc);
    padding:     0 1px;
    transition:  color var(--transition-fast), transform var(--transition-fast);
    line-height: 1;
}
.rt-star.active, .rt-star:hover { color: #f59e0b; }
.rt-star:hover { transform: scale(1.15); }
.rt-rating-info {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-muted);
    white-space: nowrap;
}
.rt-vote-count { opacity: 0.75; }
.rt-rating-placeholder { opacity: 0.6; }
.rt-rating-msg { font-size: var(--font-size-xs); color: var(--color-accent); }

/* Favori butonu (sticky bar içinde) */
.sd-fav-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         7px 14px;
    border-radius:   var(--radius-full, 999px);
    border:          1.5px solid var(--color-border, rgba(255,255,255,0.18));
    background:      transparent;
    color:           var(--color-text-secondary);
    font-size:       var(--font-size-sm);
    font-weight:     var(--font-weight-medium);
    cursor:          pointer;
    transition:      all var(--transition-fast);
    white-space:     nowrap;
}
.sd-fav-btn:hover                           { border-color: #e05; color: #e05; }
.sd-fav-btn.is-favorite                     { background: rgba(238,0,85,.12); border-color: #e05; color: #e05; }
.sd-fav-btn svg                             { width: 15px; height: 15px; flex-shrink: 0; }
.sd-fav-btn .fav-icon-empty                 { display: block; }
.sd-fav-btn .fav-icon-filled                { display: none; }
.sd-fav-btn.is-favorite .fav-icon-empty     { display: none; }
.sd-fav-btn.is-favorite .fav-icon-filled    { display: block; }

/* ══════════════════════════════════════════
   TAB NAVİGASYONU
   ══════════════════════════════════════════ */
.sd-tabs {
    display:       flex;
    gap:           0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-4);
}
.sd-tab-btn {
    padding:         10px 20px;
    background:      transparent;
    border:          none;
    border-bottom:   3px solid transparent;
    margin-bottom:   -2px;
    font-size:       var(--font-size-sm);
    font-weight:     var(--font-weight-semibold);
    color:           var(--color-text-muted);
    cursor:          pointer;
    transition:      color var(--transition-fast), border-color var(--transition-fast);
    white-space:     nowrap;
    letter-spacing:  0.01em;
}
.sd-tab-btn:hover           { color: var(--color-text-primary); }
.sd-tab-btn--active,
.sd-tab-btn[aria-selected="true"] {
    color:        var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ══════════════════════════════════════════
   TAB PANELLERİ
   ══════════════════════════════════════════ */
.sd-tab-panel { display: none; }
/* Açık panel: JS tarafından inline style="display:block" atanır */

/* ── TAB 1: Meta Etiketler ── */
.sd-meta-tags {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-4);
    align-items:   center;
}
.sd-tag {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         3px 10px;
    border-radius:   var(--radius-full);
    font-size:       var(--font-size-xs);
    font-weight:     var(--font-weight-medium);
    text-decoration: none;
    transition:      all var(--transition-fast);
    white-space:     nowrap;
}
.sd-tag--genre   { background: var(--color-accent-alpha, rgba(255,107,53,0.1)); color: var(--color-accent); border: 1px solid rgba(255,107,53,0.2); }
.sd-tag--genre:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.sd-tag--country { background: rgba(59,130,246,0.08); color: #3b82f6; border: 1px solid rgba(59,130,246,0.2); }
.sd-tag--city    { background: rgba(16,185,129,0.08); color: #10b981; border: 1px solid rgba(16,185,129,0.2); }
.sd-tag--city:hover { background: #10b981; color: #fff; border-color: #10b981; }
.sd-tag--meta    { background: rgba(0,0,0,0.04); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.sd-tag--lang    { background: rgba(139,92,246,0.08); color: #8b5cf6; border: 1px solid rgba(139,92,246,0.2); }

/* ── Share satırı ── */
.sd-share-row {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    flex-wrap:   wrap;
}
.sd-share-label {
    font-size:      10px;
    font-weight:    var(--font-weight-semibold);
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space:    nowrap;
}
.sd-icon-row  { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sd-icon-btn  {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--radius-md);
    color: #fff; text-decoration: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}
.sd-icon-btn:hover     { opacity: .82; transform: translateY(-2px); }
.sd-icon-btn svg       { width: 17px; height: 17px; }
.sd-icon-btn--fb       { background: #1877f2; }
.sd-icon-btn--tw       { background: #000; }
.sd-icon-btn--wa       { background: #25d366; }
.sd-icon-btn--email    { background: var(--color-accent, #ff6b35); }

/* ── TAB 2: Hakkında ── */
.sd-description {
    font-size:    var(--font-size-sm);
    color:        var(--color-text-secondary);
    line-height:  var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}
.sd-description p           { margin-bottom: var(--space-2); }
.sd-description p:last-child { margin-bottom: 0; }

.sd-about-row {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-2);
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-3);
}
.sd-about-row svg           { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
.sd-about-row a             { color: var(--color-accent); text-decoration: none; }
.sd-about-row a:hover       { text-decoration: underline; }
.sd-about-row address       { font-style: normal; }
.sd-about-row--address svg  { color: var(--color-text-muted); }
.sd-about-row--website svg  { color: #3b82f6; }
.sd-about-row--phone svg    { color: #10b981; }
.sd-about-row--email svg    { color: #6366f1; }

.sd-social-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
    margin-top: var(--space-3);
}
.sd-social-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         5px 12px 5px 8px;
    border-radius:   var(--radius-full, 999px);
    font-size:       var(--font-size-xs);
    font-weight:     var(--font-weight-medium);
    color:           #fff;
    text-decoration: none;
    transition:      opacity var(--transition-fast), transform var(--transition-fast);
    white-space:     nowrap;
}
.sd-social-btn:hover      { opacity: .82; transform: translateY(-1px); }
.sd-social-btn svg        { width: 14px; height: 14px; flex-shrink: 0; }
.sd-social-btn--fb        { background: #1877f2; }
.sd-social-btn--tw        { background: #000; }
.sd-social-btn--ig        { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.sd-social-btn--yt        { background: #ff0000; }
.sd-social-btn--tt        { background: #010101; }

/* ── TAB 3: Şarkı Geçmişi ── */
.sd-song-history--tab {
    border:        1px solid var(--color-border, rgba(255,255,255,.08));
    border-radius: var(--radius-md, 10px);
    overflow:      hidden;
}
.sd-song-history-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--space-2) var(--space-3);
    background:      var(--color-surface-2, rgba(255,255,255,.04));
    border-bottom:   1px solid var(--color-border, rgba(255,255,255,.08));
}
.sd-song-history-label {
    font-size:   var(--font-size-xs, 11px);
    font-weight: var(--font-weight-semibold, 600);
    color:       var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sd-song-history-clear {
    background: transparent; border: none;
    color:       var(--color-text-muted);
    cursor:      pointer;
    font-size:   var(--font-size-xs, 11px);
    padding:     2px 6px;
    border-radius: 4px;
    transition:  color .15s;
}
.sd-song-history-clear:hover { color: var(--color-danger, #ef4444); }
.sd-song-history-list { list-style: none; margin: 0; padding: 0; }
.sd-song-history-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-3);
    border-bottom:   1px solid var(--color-border, rgba(255,255,255,.05));
    transition:      background .15s;
}
.sd-song-history-item:last-child { border-bottom: none; }
.sd-song-history-item:hover { background: var(--color-surface-hover, rgba(255,255,255,.04)); }
.sd-song-history-title {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-secondary, #cbd5e1);
    flex:        1;
    min-width:   0;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-song-history-time {
    font-size:   var(--font-size-xs, 11px);
    color:       var(--color-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}
.sd-history-empty {
    text-align: center;
    padding:    var(--space-6) var(--space-3);
    font-size:  var(--font-size-sm);
    color:      var(--color-text-muted);
    margin:     0;
}

/* ── Benzer istasyonlar ── */
.related-stations            { margin-bottom: var(--space-6); }
.related-stations .section-title { font-size: var(--font-size-xl); margin-bottom: var(--space-4); color: var(--color-text-primary); }

/* ── Player altı leaderboard ── */
.sd-leaderboard-wrap {
    width: 100%; display: flex; justify-content: center;
    padding: var(--space-4) var(--space-4) 0;
    max-width: 760px; margin: 0 auto;
}
.ad-zone-placeholder--leaderboard {
    width: 728px; height: 90px; max-width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px dashed var(--color-border); border-radius: var(--radius-md);
    color: var(--color-text-muted); font-size: var(--font-size-sm); gap: 4px;
}
.ad-zone-placeholder--leaderboard span { font-weight: var(--font-weight-semibold); }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media ( max-width: 1024px ) {
    .station-detail-page .content-area {
        grid-template-columns: 1fr var(--sidebar-width, 280px);
        grid-template-areas: "radio-list sidebar-left" "radio-list sidebar-right";
    }
}

@media ( max-width: 768px ) {
    .station-detail-page .content-area {
        grid-template-columns: 1fr;
        grid-template-areas: "radio-list" "sidebar-left" "sidebar-right";
        padding: 0 var(--space-3);
        gap: var(--space-4);
    }
    .station-detail-page .sidebar-left-column,
    .station-detail-page .sidebar-right-column { grid-area: unset; }

    .sd-card { padding: var(--space-4); }

    .sd-hero { grid-template-columns: 80px 1fr; gap: var(--space-3) var(--space-3); }
    .sd-logo-wrap { width: 80px; height: 80px; }
    .sd-logo-img, .sd-logo-fallback { width: 80px; height: 80px; }
    .sd-logo-fallback { font-size: 2rem; }

    .sd-title {
        font-size: var(--font-size-xl);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sd-play-btn.play-btn, .sd-play-btn { width: 44px !important; height: 44px !important; }
    .sd-play-btn svg { width: 18px !important; height: 18px !important; }

    .sd-sticky-bar { gap: var(--space-2); }

    .sd-tab-btn { padding: 8px 14px; font-size: var(--font-size-xs); }

    .breadcrumb-current { max-width: 160px; }

    @media (max-width: 767px) {
        .sd-leaderboard-wrap { padding: var(--space-3) var(--space-3) 0; }
        .ad-zone-placeholder--leaderboard { width: 320px; height: 50px; }
    }
}

@media ( max-width: 480px ) {
    .station-detail-page .content-area { padding: 0 var(--space-2); }
    .sd-card { padding: var(--space-3); }
    .sd-title { font-size: var(--font-size-lg); }
    .sd-tab-btn { padding: 8px 10px; }
    .sd-social-btn span { display: none; }
    .sd-social-btn { padding: 6px 8px; }
}