/* Tema */
:root{
  --bg:#101522; --panel:#151b2a; --text:#ffffff; --muted:#cbd3e1;
  --primary:#7ab8ff; --primary-2:#ff8fcf; --border:#2a3240; --ring:#a6d0ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial}

/* Üst bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0e1320;border-bottom:1px solid var(--border)}
.brand{font-weight:700;letter-spacing:.3px}
.muted{color:var(--muted)}

/* Layout */
.layout{display:grid;gap:12px;padding:12px;min-height:calc(100vh - 56px)}
/* Varsayılan (eski) 2 sütun */
.layout{grid-template-columns:1fr 1fr}
/* 3 sütun (sol: çalar, orta: müzikler, sağ: kategoriler)
   JS, --col-left / --col-right değişkenlerini ayarlayarak genişlikleri büyütüp küçültür. */
.layout.layout-3{grid-template-columns:var(--col-left,360px) 1fr var(--col-right,360px)}

@media (max-width:1280px){
  .layout.layout-3{grid-template-columns:1fr}
}
@media (max-width:1080px){.layout{grid-template-columns:1fr}}

/* Paneller ve kart görünümü */
.pane{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;min-height:60vh;display:flex;flex-direction:column;min-width:0}

/* Panel üst bar (başlık + büyüt/küçült) */
.pane-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.pane-top .pane-title{font-weight:800;letter-spacing:.2px}
.pane-top .pane-controls{display:flex;gap:6px;align-items:center}
.pane-top .pane-controls .btn{padding:4px 8px;font-size:12px;border-radius:10px}

/* Mobil sekmeler */
.mobile-tabs{position:sticky;top:0;z-index:40;display:none;gap:8px;padding:10px 12px;background:#0e1320;border-bottom:1px solid var(--border)}
.mobile-tabs .btn{flex:1;text-align:center}

@media (max-width:1280px){
  .mobile-tabs{display:flex}
  /* Mobilde paneller tek tek gösterilecek (JS ile) */
  .pane{min-height:auto}
  .pane-top .pane-controls{display:none}
}
.cardish{border:1px solid var(--border);border-radius:14px;padding:10px;background:var(--panel)}

/* Satır */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}

/* Formlar ve butonlar */
input[type=text],input[type=date],input[type=search]{flex:1;padding:8px 12px;border-radius:12px;border:1px solid var(--border);background:#0f1524;color:var(--text)}
.btn{background:#0f1524;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer;user-select:none}
.btn:hover{border-color:var(--ring)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#0b1020;font-weight:600}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.small{padding:4px 8px;font-size:12px}

/* Başlıklar */
.title{font-weight:600}
.listHeader{display:flex;align-items:center;justify-content:space-between;margin:6px 0}

/* Listeler */
.list{list-style:none;margin:8px 0 0;padding:0}
.list li{display:flex;gap:8px;align-items:center;padding:8px;border-bottom:1px dashed var(--border);background:transparent}
.list li .meta{margin-left:auto;color:var(--muted);font-size:12px}
.droplist li{cursor:grab}

/* Kart içi liste – sadece çerçeve */
.list.cardish > li{
  transition: background .15s ease, border-color .15s ease;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  margin:6px 0;
}
.list.cardish > li.ghost{opacity:.5}

/* DnD görseli */
.droptarget{outline:2px dashed var(--ring);outline-offset:4px}

/* Oynatıcı */
.nowPlaying .title{margin-bottom:6px}
.center-toolbar{display:flex;gap:8px;align-items:center;margin:8px 0}

/* Kategori grid (yan yana kutular) */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
  margin:8px 0 4px 0;
}
.cat-tile{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(160deg, hsl(var(--cat-h,210), 45%, 22%), hsl(var(--cat-h,210), 55%, 16%));
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  gap:10px;
  /* min-height:120px;  ==> Uzun isimlerde kutu yükselsin diye kaldırdık */
}
.cat-tile:hover{ transform:translateY(-2px); border-color:var(--ring); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.cat-head{ display:flex; align-items:center; justify-content:space-between; }

/* ⇩⇩ GÜNCELLENEN BÖLÜM: Uzun kategori adları alt alta tam görünsün */
.cat-name{
  flex: 1 1 auto;       /* başlık, sayaç ve ikonla uyum */
  min-width: 0;         /* flex içinde doğru kırılma için kritik */
  white-space: normal;  /* tek satıra zorlamayı kaldır */
  overflow: visible;    /* gizleme yok */
  text-overflow: unset; /* üç nokta yok */
  word-break: break-word; /* çok uzun kelimeleri de kır */
  max-width: unset;     /* %70 sınırını kaldırdık ki özgürce sarsın */
  font-weight:700;
}
/* İstersen en fazla 2 satırla sınırla (… olmadan). O zaman yukarıdakini kapatıp bunu aç: */
/*
.cat-name{
  flex:1 1 auto; min-width:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; white-space:normal; text-overflow:clip; word-break:break-word;
}
*/

.cat-count{ font-size:12px; color:var(--muted); }
.cat-icon{ width:42px; height:34px; }

/* Alt bilgi */
.foot{padding:10px 16px;color:var(--muted)}


/* ---------- Hero / Kadına özel estetik başlık ---------- */
.hero{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 12px 10px 12px;
  background: radial-gradient(1200px 120px at 50% 0%, rgba(255,140,207,0.15), rgba(0,0,0,0));
}
.site-title{
  margin:0;
  text-transform:uppercase;        /* BÜYÜK HARF */
  letter-spacing:.15em;            /* estetik boşluk */
  font-weight:800;
  font-size: clamp(22px, 3.4vw, 40px);
  line-height:1.1;
  background: linear-gradient(135deg, #ffc0e0 0%, #ff8fcf 35%, #b0a8ff 75%, #7ab8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;              /* degrade metin */
  text-shadow: 0 0 0 rgba(0,0,0,0);
  position: relative;
}
.site-title::after{                /* İnce zarif alt çizgi */
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-8px;
  width: clamp(140px, 26vw, 380px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,143,207,.9), rgba(255,192,224,.6), rgba(122,184,255,.9));
  box-shadow: 0 2px 12px rgba(255,143,207,.35);
}


/* Ek bileşenler */
.topbar-right{display:flex;gap:8px;align-items:center}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn.danger{background:#402030;border-color:#5b2a40;color:#fff}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted)}
.np-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.np-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.alert{padding:10px;border:1px solid #603; background:#2a1320;border-radius:12px;margin:10px 0}
.alert.ok{border-color:#2f6;background:#112a1a}
.select{flex:1;min-width:240px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#0e1320;color:var(--text)}

.mini-player{position:fixed;left:12px;right:12px;bottom:12px;background:#0e1320;border:1px solid var(--border);border-radius:16px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:30}
.mini-player.hidden{display:none}
.mini-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.mini-actions{display:flex;gap:8px;align-items:center}

/* Kategori kartları */
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
@media (max-width:1080px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{border:1px solid var(--border);border-radius:14px;padding:12px;cursor:pointer;min-height:84px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;user-select:none}
.cat-card:hover{outline:2px solid rgba(166,208,255,.25)}
.cat-title{font-weight:800;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Liste satırları */
.list li.row{border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin:8px 0;background:#0e1320}
.list li.row.active{outline:2px solid rgba(122,184,255,.35)}
.list li.row.dragover{outline:2px dashed rgba(255,143,207,.55)}