/* Studio Genç — Admin (Sade, stabil scroll, tek dropdown) */
/* ======================================================= */
:root{
  --bg:#0b0b0b; --surface:#121212; --surface-2:#0f0f0f;
  --text:#f5f5f5; --muted:#bdbdbd; --border:#232323; --accent:#d4af37;
  --danger:#e24a4a; --ok:#31c48d; --shadow:0 14px 40px rgba(0,0,0,.35);
  --ff:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --fs-1: clamp(15px,1.6vw,16px); --fs-2: clamp(16px,1.8vw,18px);
  --r:14px; --pad:14px; --h:40px; --gap-1:8px; --gap-2:12px; --gap-3:16px; --container:1280px;
  --tr:.18s; --tr-long:.28s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(100% 80% at 10% 0%, #161616, #0b0b0b);
  color:var(--text); font-family:var(--ff); font-size:var(--fs-1); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px}
*::-webkit-scrollbar{height:8px;width:8px}
*::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}
.muted{color:var(--muted)} .small{font-size:.92em}

/* ===== Top bar (tek sticky öğe) ===== */
.zen-top{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:rgba(11,11,11,.72); border-bottom:1px solid var(--border)}
.zen-top-inner{max-width:var(--container); margin:0 auto; display:flex; align-items:center; gap:var(--gap-2); min-height:66px; padding:10px 3%}
.zen-brand{margin:0; font-size:var(--fs-2); letter-spacing:.3px}
.zen-actions{margin-left:auto; display:flex; gap:10px}

.icon-btn,.btn,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; height:var(--h); min-width:var(--h);
  padding:0 12px; border-radius:12px; border:1px solid var(--border); cursor:pointer; text-decoration:none;
  transition:transform var(--tr), box-shadow var(--tr-long), border-color var(--tr), color var(--tr), background var(--tr); color:var(--text);
}
.icon-btn{background:#1a1a1a}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.btn{background:var(--accent); border-color:var(--accent); color:#111; font-weight:700}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(212,175,55,.28)}
.btn-ghost{background:#1a1a1a; color:var(--text)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-sm{height:36px; padding:0 10px; border-radius:10px; font-weight:600}

/* ===== Kartlar / Formlar ===== */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:var(--pad); box-shadow:var(--shadow)}
.input,.select{
  width:100%; height:var(--h); background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:0 12px; outline:none;
  transition:border-color var(--tr), box-shadow var(--tr);
}
.input:focus,.select:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}
.zen-center{max-width:420px; margin:14vh auto}

/* ===== Yerleşim ===== */
.zen-shell{max-width:var(--container); margin:20px auto; padding:0 3%; display:grid; gap:var(--gap-3)}
.category-bar{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--gap-3)}
.cb-left{display:grid; gap:6px; min-width:260px}
.cb-label{font-weight:700; opacity:.9}
.cb-right{display:flex; gap:10px}

/* ===== Uploader ===== */
.uploader{display:grid; gap:var(--gap-2)}
.dropzone{
  position:relative; min-height:126px; border:1px dashed var(--border); border-radius:var(--r);
  background:rgba(255,255,255,.03); overflow:hidden;
}
.dropzone input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer}
.dropzone.dragover{border-color:var(--accent); background:rgba(212,175,55,.08)}
.dz-center{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); text-align:center}
.dz-icon{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#1a1a1a; border:1px solid var(--border); margin-bottom:6px}

/* ===== Önizleme listesi ===== */
.preview-list{display:grid; gap:10px}
.preview-item{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:8px 10px}
.pi-left{display:flex; align-items:center; gap:12px}
.pi-thumb{width:48px; height:48px; border-radius:10px; overflow:hidden; background:#111; border:1px solid var(--border)}
.pi-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pi-name{max-width:48vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pi-meta{color:var(--muted); font-size:.9em}
.pi-right{display:flex; align-items:center; gap:12px; width:260px}
.pi-bar{flex:1; height:6px; border-radius:999px; overflow:hidden; background:#111; border:1px solid var(--border)}
.pi-bar span{display:block; height:100%; width:0%; background:var(--accent); transition:width var(--tr-long)}
.pi-remove{width:32px; height:32px; border-radius:10px; border:1px solid var(--border); background:#1a1a1a; color:var(--muted); cursor:pointer}
.pi-remove:hover{color:var(--danger); border-color:var(--danger)}
@media (max-width:600px){ .pi-right{width:200px} }

/* ===== Galeri ===== */
.grid{display:grid; gap:var(--gap-3); grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.thumb{position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:border-color var(--tr), transform var(--tr), box-shadow var(--tr-long)}
.thumb:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.28)}
.thumb img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.thumb .bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border-top:1px solid var(--border); color:var(--muted); font-size:1rem}
.thumb .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:68%}
.row-actions{display:flex; gap:8px}
.btn-icon{width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:#1a1a1a; color:var(--text); display:grid; place-items:center; cursor:pointer; transition:border-color var(--tr), color var(--tr), transform var(--tr)}
.btn-icon:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}

/* Rename satırı */
.rename{display:none; align-items:center; gap:12px; padding:10px; border-top:1px dashed var(--border)}
.rename .rename-input{flex:1; min-width:0}
.rename .ext{opacity:.7}

/* ===== Modal (Kategoriler) ===== */
.modal{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); backdrop-filter:blur(2px)}
.modal.open{display:flex}
.modal-dialog{width:min(760px,94vw)}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); padding-bottom:8px}
.modal-body{padding-top:10px}
.sep{border:0; border-top:1px dashed var(--border); margin:14px 0}
.modal-actions{display:flex; justify-content:flex-end}

/* Kategori listesi (modal içi) */
.cat-list{display:grid; gap:10px}
.cat{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px 12px}
.cat strong{font-weight:700}
.cat small{color:var(--muted)}
.cat .del{height:32px; min-width:32px; border-radius:10px; border:1px solid var(--border); background:#1a1a1a; color:var(--muted); cursor:pointer}
.cat .del:hover{color:var(--danger); border-color:var(--danger)}

/* ===== Toast ===== */
.toast{position:fixed; right:16px; bottom:16px; z-index:90; display:grid; gap:8px}
.toast .t{background:#121212; color:var(--text); border:1px solid var(--border); padding:10px 12px; border-radius:12px; box-shadow:var(--shadow); min-width:220px}
.toast .ok{border-color:color-mix(in srgb, var(--ok) 55%, var(--border))}
.toast .err{border-color:color-mix(in srgb, var(--danger) 55%, var(--border))}

/* ===== Hareket azaltma ===== */
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }