/* Akor içeriklerinde 2 sütun görünüm */
.icerikDetay.two-column {
  column-count: 2;
  column-gap: 30px;
}

/* Paragraflar blok gibi davransın, ortadan bölünmesin */
.icerikDetay.two-column p {
  break-inside: avoid;
  display: block;
}

/* Boş satır için <br><br> varsa yeni blok gibi algılansın */
.icerikDetay.two-column br {
  line-height: 1.6em;
}

/* ChordPress sheet ve chord diyagramları tam genişlikte */
.icerikDetay.two-column .cpress_chordsheet,
.icerikDetay.two-column .cpress-chord,
.icerikDetay.two-column .chord-block svg,
.icerikDetay.two-column svguitar {
  column-span: all;   /* sütunları iptal et */
  display: block;     /* tek sütunda kalsın */
  break-inside: avoid;
}
/* Boş satır (<p>&nbsp;</p>) geldiğinde yeni sütuna geçsin */
.icerikDetay.two-column p:empty,
.icerikDetay.two-column p:has(br:only-child),
.icerikDetay.two-column p:has(&nbsp;) {
  break-after: column;   /* sütun kırılır */
}
.icerikDetay.two-column p.column-break {
  break-after: column;
}

/* Mobilde tek sütun */
@media (max-width: 768px) {
  .icerikDetay.two-column {
    column-count: 1;
  }
}
/* ChordPress 2 sütun görünümü */
.cpress.twocol {
    column-count: 2;
    column-gap: 40px;
}

.cpress.twocol .cpress_line {
    break-inside: avoid;
    page-break-inside: avoid;
}


.song-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  color: #333;
  margin: 8px 0 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;

  /* 🔹 Scroll için eklenenler */
  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ccc transparent;
}

/* 🔹 WebKit tarayıcılar (Chrome, Edge, Safari) için kaydırma stili */
.song-toolbar::-webkit-scrollbar {
  height: 6px;
}

.song-toolbar::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.song-toolbar::-webkit-scrollbar-track {
  background: transparent;
}


/* Ortak görünüm: metin gibi */
.toolbar-text {
  display: inline-block;
  font-weight: 500;
  color: #333;
  
}

/* Tıklanabilir olanlar (butonlar) */
.toolbar-text[style*="cursor:pointer"],
.toolbar-text.toggle-columns-btn {
  transition: color 0.2s ease;
}

.toolbar-text[style*="cursor:pointer"]:hover,
.toolbar-text.toggle-columns-btn:hover {
  color: #d33;
  text-decoration: underline;
}

/* Mobilde ikiye böl gizlensin */
@media (max-width: 768px) {
  .toggle-columns-btn {
    display: none !important;
  }
}

/* 🎯 Kaydedilmiş ton kalıcı kırmızı */
.song-toolbar .toolbar-text.saved {
  color: #d33 !important;
  cursor: default !important;
}

/* 🎵 Kaydedilmemiş durum (Tonu Kaydet) hover efekti */
.song-toolbar .save-tone-btn:not(.saved):hover {
  color: #d33 !important;
  text-decoration: underline;
  cursor: pointer;
}

/* 🎵 Giriş yap uyarısı - not ekleme satırıyla aynı stil */
.login-warning {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 10pt;
  background: #f9f9f9;
  border-left: 3px solid #ddd;
  color: #000; /* yazı siyah */
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.login-warning a {
  color: #0073aa; /* WordPress mavi */
  font-weight: normal;
  text-decoration: none;
}

.login-warning a:hover {
  color: #0073aa; /* hover’da da değişmesin */
  text-decoration: none;
}
.scroll-speed-panel {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
  padding: 8px 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 10pt;
}

.scroll-speed-panel span {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.scroll-speed-panel span.active {
  background: #d33;
  color: #fff;
}