:root {
  --bg:          #ecf0f1;      /* Açık ferah arkaplan */
  --surface:     #ffffff;      /* Kartlar ve panel için bembeyaz yüzey */
  --surface2:    #f4f6f7;      /* Hafif gri/mavi vurgular */
  --surface3:    #e5e8e8;      /* Çizgiler ve butonlar */
  --gold:        #b8860b;      /* Açık temada okunabilen Koyu Altın Sarısı */
  --gold-light:  #daa520;
  --gold-dim:    rgba(184, 134, 11, .1);
  --gold-border: rgba(184, 134, 11, .25);
  --text:        #2c3e50;      /* Koyu lacivert/gri (Çok şık durur) */
  --text-2:      #546e7a;      /* İkincil metinler */
  --text-3:      #78909c;      /* Soluk yazılar */
  --danger:      #e74c3c;
  --player-h:    82px;
  --ease:        cubic-bezier(.4,0,.2,1);
}

/* İSTASYON IZGARASI */
#stations-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 14px;
  padding: 12px;
}
.station-card {
  position:relative; cursor:pointer; border-radius:50%; overflow:hidden;
  background:var(--surface); border:1px solid rgba(255,255,255,.05);
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.station-card:hover { transform:translateY(-5px) scale(1.02); box-shadow:0 16px 40px rgba(0,0,0,.6); border-color:var(--gold-border); }
.station-card.active { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold),0 16px 48px rgba(201,168,76,.18); }
.station-card.active::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(201,168,76,.18) 0%,transparent 55%); pointer-events:none; }
.station-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.station-card:hover img { transform:scale(1.08); }
.card-label {
  position: relative; z-index: 2; width: 100%; padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  font-size: .65rem; font-weight: 500; letter-spacing: .04em;
  text-align: center; color: #ffffff;
}
.card-label .marquee-wrap { width: 100%; }
/* Kartın içindeki metin kayma animasyonu */
.card-marquee-text {
  display: inline-block;
  animation: marquee 12s linear infinite;
}
.card-marquee-text.still {
  animation: none;
}
.playing-bars { display:none; position:absolute; top:8px; right:8px; gap:2px; align-items:flex-end; height:14px; z-index:3; }
.station-card.active .playing-bars { display:flex; }
.playing-bars span { display:block; width:3px; background:var(--gold); border-radius:2px; animation:bar .9s ease-in-out infinite; }
.playing-bars span:nth-child(2){animation-delay:.15s} .playing-bars span:nth-child(3){animation-delay:.3s}
@keyframes bar{0%,100%{height:3px}50%{height:14px}}

/* ALT PLAYER */
#floating-player {
  position:fixed; bottom:0; left:0; right:0; height:var(--player-h);
  background: rgba(255, 255, 255, 0.92); 
  backdrop-filter:blur(28px) saturate(1.6); 
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-top:1px solid var(--gold-border);
  display:flex; align-items:center; gap:14px; padding:0 18px;
  transform:translateY(100%); transition:transform .4s var(--ease); z-index:900;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
}
#floating-player.visible { transform:translateY(0); }

#player-cover-wrap {
  flex-shrink:0; width:52px; height:52px; border-radius:9px; overflow:hidden;
  border:1px solid var(--gold-border); box-shadow:0 4px 18px rgba(0,0,0,.5);
  cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s var(--ease); position:relative;
}
#player-cover-wrap:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(201,168,76,.25); }
#player-cover-wrap .cover-hint {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); opacity:0; transition:opacity .2s;
  font-size:.55rem; color:var(--gold); letter-spacing:.06em; flex-direction:column; gap:3px;
}
#player-cover-wrap:hover .cover-hint { opacity:1; }
#current-cover { width:100%; height:100%; object-fit:cover; display:block; }

.player-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
#station-label { font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.marquee-wrap {
  overflow:hidden; white-space:nowrap;
  mask-image:linear-gradient(to right,transparent,black 5%,black 90%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 90%,transparent);
}
#song-title { display:inline-block; font-size:1.2rem; color:var(--text); animation:marquee 20s linear infinite; }
#song-title.still { animation:none; }
@keyframes marquee{0%{transform:translateX(55%)}100%{transform:translateX(-100%)}}

.player-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-right: 50px}
.ctrl-btn {
  background:none; border:none; cursor:pointer; color:var(--text-2); font-size:1rem;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:color .2s,background .2s;
}
.ctrl-btn:hover { color:var(--gold); background:var(--gold-dim); }
#play-pause-btn { width:42px; height:42px; font-size:2rem; background:var(--gold); color: #ffffff;; border-radius:50%; }
#play-pause-btn:hover { background:var(--gold-light); }
#volume-slider {
  -webkit-appearance:none; appearance:none; width:72px; height:3px; border-radius:2px; outline:none; cursor:pointer;
  background:linear-gradient(to right, var(--gold) var(--vol,80%), var(--surface3) var(--vol,80%));
}
#volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:var(--gold-light); }
#close-btn:hover { color:#e07060; background:rgba(176,58,46,.15); }

/* DETAY PANELİ */
#detail-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  z-index:800; opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
#detail-overlay.open { opacity:1; pointer-events:all; }

#detail-panel {
  position: fixed; left: 0; right: 0; bottom: var(--player-h);
  height: calc(100vh - var(--player-h) - 20px); /* ARTIK SABİT YÜKSEKLİK */
  background: var(--surface); 
  border-top: 1px solid var(--gold-border);
  border-radius: 24px 24px 0 0; z-index: 850;
  transform: translateY(150%); transition: transform .4s var(--ease);
  display: flex; flex-direction: column; /* FLEX İLE İÇERİĞİ BÖLÜYORUZ */
  box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
  top: 10%;
  max-width: 72vh;
}
#detail-panel.open { transform: translateY(0); }

/* Tıklanabilir Üst Bar */
.panel-header {
  flex-shrink: 0; padding: 12px 20px;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; /* Tıklanabilir olduğunu belli eden imleç */
  border-bottom: 1px solid var(--surface3);
  transition: background .2s;
}
.panel-header:hover { background: var(--surface2); }
.drag-handle { width: 45px; height: 5px; background: var(--surface3); border-radius: 3px; transition: background .2s; }
.panel-header:hover .drag-handle { background: var(--gold); }

.tabs { flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--surface3); padding: 0 10px; }
.tabs::-webkit-scrollbar{display:none}
.tab-btn {
  background:none; border:none; cursor:pointer; color:var(--text-3);
  font-family:'DM Sans',sans-serif; font-size:1.2rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; padding:8px 14px;
  border-radius:8px 8px 0 0; white-space:nowrap; transition:color .2s,background .2s;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn:hover { color:var(--text-2); }
.tab-btn.active { color:var(--gold); border-bottom-color:var(--gold); }

.panel-body {
  flex: 1; /* Kalan tüm alanı kapla */
  overflow-y: auto; /* Yazılar uzarsa SADECE burası kaysın */
  padding-bottom: 20px;
}
.panel-body::-webkit-scrollbar{width:4px}
.panel-body::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px}

.tab-pane { display:none; padding:20px; animation:fadeIn .25s var(--ease); }
.tab-pane.active { display:block; }
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* GENEL BİLGİ */
.song-hero { 
  display: flex;           /* İçerikleri yan yana dizer */
  align-items: center;     /* Dikeyde ortalar (İstersen 'flex-start' yapıp üstten hizalayabilirsin) */
  gap: 24px;               /* Resim ile yazılar arasındaki boşluk */
  padding: 20px; 
  flex-shrink: 0; 
  margin-bottom: 0;
}

.song-hero-cover { 
  width: 140px;            /* Kapak genişliği */
  height: 140px;           /* Kapak yüksekliği */
  flex-shrink: 0;          /* Alan daralsa bile resim küçülmesin */
  border-radius: 12px; 
  overflow: hidden; 
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* Açık temaya uygun yumuşak gölge */
  border: 1px solid var(--surface3);
}
.song-hero-cover img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}
.song-meta { 
  flex: 1;                 /* Sağdaki kalan tüm boşluğu kaplar */
  display: flex; 
  flex-direction: column;  /* Yazıları kendi içinde alt alta dizer */
  gap: 10px;               /* Yazılar arası boşluk */
  justify-content: center; 
}
.song-meta h2 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; color:var(--text); line-height:1.2; }
.song-meta .artist-tag { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.meta-row { display:flex; gap:6px; flex-wrap:wrap; }
.meta-chip {
  background:var(--surface2); border:1px solid rgba(255,255,255,.06); border-radius:20px;
  padding:3px 10px; font-size:1.1rem; color:var(--text-2); display:flex; align-items:center; gap:5px;
}
.meta-chip i { color:var(--gold); font-size:1.5rem; }

.action-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.action-btn {
  display:inline-flex; align-items:center; gap:7px; padding:8px 16px;
  border-radius:8px; font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:500;
  letter-spacing:.05em; cursor:pointer; transition:all .2s; border:1px solid; text-decoration:none;
}
.btn-yt   { background:rgba(255, 0, 0, 0.53); border-color:rgba(255,0,0,.3); color:#ff6b6b; }
.btn-yt:hover { background:rgba(255,0,0,.22); }
.btn-lyrics { background:var(--gold-dim); border-color:var(--gold-border); color:var(--gold); }
.btn-lyrics:hover { background:rgba(201,168,76,.22); }
.btn-about { background:var(--surface2); border-color:rgba(255,255,255,.08); color:var(--text-2); }
.btn-about:hover { color:var(--text); }

.about-box {
  background:var(--surface2); border:1px solid rgba(255,255,255,.06); border-radius:10px;
  padding:14px 16px; font-size:1.3rem; line-height:1.7; color:var(--text-2); margin-top:4px;
}
.about-box.hidden { display:none; }

.writers-section { margin-top:16px; }
.section-label { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; }
.writers-list { display:flex; gap:6px; flex-wrap:wrap; }
.writer-tag { background:var(--surface3); border-radius:4px; padding:3px 10px; font-size:.7rem; color:var(--text-2); }

/* ŞARKI SÖZLERİ */
.lyrics-container { font-size:1.2rem; line-height:2.1; color:var(--text-2); }
.lyric-line { padding:1px 6px; border-radius:4px; transition:color .3s,font-weight .3s; }
.lyric-line.active { color:var(--gold-light); font-weight:500; }
.lyrics-placeholder { color:var(--text-3); font-size:.82rem; text-align:center; padding:40px 0; letter-spacing:.08em; }

/* ALBÜM */
.album-hero { display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:start; margin-bottom:16px; }
@media(max-width:440px){.album-hero{grid-template-columns:1fr}}
.album-cover { border-radius:8px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.5); border:1px solid var(--gold-border); aspect-ratio:1; }
.album-cover img { width:100%;height:100%;object-fit:cover;display:block; }
.album-info h3 { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:700; color:var(--text); margin-bottom:6px; }
.album-era { font-size:.9rem; letter-spacing:.5em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.album-date { font-size:1.1rem; color:var(--text-3); }

.tracklist { margin-top:16px; }
.tracklist-title { font-size:1.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.05); }
.track-item { display:flex; align-items:center; gap:10px; padding:3px 0; border-bottom:1px solid rgba(255,255,255,.03); font-size:1.2rem; color:var(--text-2); transition:color .2s; }
.track-item:hover { color:var(--text); }
.track-item.current-track { color:var(--gold-light); font-weight:500; }
.track-num { width:20px; text-align:right; font-size:1.3rem; color:var(--text-3); flex-shrink:0; }
.track-item.current-track .track-num { color:var(--gold); }

.other-albums-section { margin-top:24px; }
.other-albums-grid { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.other-album-chip { background:var(--surface2); border:1px solid rgba(255,255,255,.06); border-radius:8px; padding:5px 10px; font-size:.72rem; color:var(--text-2); }

/* YÜKLEME */
.loading-msg { grid-column:1/-1; text-align:center; color:var(--text-3); padding:60px 0; font-size:.85rem; letter-spacing:.08em; }
.error-msg { grid-column:1/-1; color:#e07060; text-align:center; padding:40px; }
.no-data { color:var(--text-3); font-size:.8rem; text-align:center; padding:30px 0; letter-spacing:.06em; }

/* Önceki / Sonraki butonlar — biraz daha küçük olsun */
#prev-station-btn,
#next-station-btn {
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
}
 
/* Dar ekranlarda ses slider gizlensin, butonlar sığsın */
@media (max-width: 480px) {
  #volume-slider,
  #volume-slider + i,
  .fa-volume-low {
    display: none;
  }
  #prev-station-btn,
  #next-station-btn {
    width: 28px;
    height: 28px;
    font-size: .8rem;
  }
    .song-hero { 
    flex-direction: column; /* Alt alta diz */
    text-align: center;     /* Yazıları ortala */
    gap: 16px;
  }
  .song-meta { 
    align-items: center; 
  }
  .meta-row, .action-row { 
    justify-content: center; 
  }
  .song-hero{grid-template-columns:1fr}
}