/* ============================================================
   Kanal Utku — Panel ortak tasarımı (üye paneli / admin paneli)
   index.html ile aynı tasarım dilini (renk, tipografi, kart stili)
   kullanır; register/login/panel/istekler/management sayfalarında
   ortak olarak yüklenir.
   ============================================================ */
:root{
  --bg:#f7f7fb;
  --surface:#ffffff;
  --surface-alt:#f1f2f7;
  --border:#e7e8f0;
  --text:#14151f;
  --muted:#6b7080;
  --accent:#ff4d29;
  --accent-dark:#e63b17;
  --accent-soft:#fff1ec;
  --navy:#12131a;
  --radius:18px;
  --shadow:0 10px 30px rgba(20,21,31,.06);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
h1,h2,h3,h4{font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.3px; color:var(--navy);}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}

/* ---------- Top bar ---------- */
.panel-topbar{
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.panel-topbar__inner{
  max-width:1080px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:14px;
}
.panel-logo{display:flex; align-items:center; gap:10px; margin-right:auto; font-weight:700; color:var(--navy);}
.panel-logo .dot-icon{width:32px; height:32px; border-radius:10px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;}
.panel-topbar nav{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

/* ---------- Admin hesap açılır menüsü (popup) ---------- */
.admin-account-menu{position:relative;}
.admin-account-trigger{
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:.86rem; font-weight:600; color:var(--text);
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; transition:background .15s;
}
.admin-account-trigger:hover{background:var(--surface-alt);}
.admin-account-trigger .avatar{
  width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0;
}
.admin-account-trigger .caret{font-size:.65rem; color:var(--muted);}
.admin-account-dropdown{
  display:none; flex-direction:column; gap:2px; position:absolute; top:calc(100% + 8px); right:0; min-width:270px; z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 34px rgba(20,21,31,.16); padding:8px;
}
.admin-account-dropdown.open{display:flex;}
.admin-account-dropdown__info{padding:10px 12px 12px; margin-bottom:6px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px;}
.admin-account-dropdown__info strong{color:var(--navy); font-size:.94rem;}
.admin-account-dropdown__profile{display:flex; align-items:center; gap:10px;}
.admin-account-dropdown__avatar{
  width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; font-family:'Poppins',sans-serif;
  font-weight:700; font-size:1.05rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.admin-account-dropdown__profile-text{display:flex; flex-direction:column; gap:4px; min-width:0;}
.admin-account-dropdown__badge{display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700; padding:2px 9px; border-radius:999px; width:fit-content;}
.admin-account-dropdown__badge.is-verified{background:#e9fbf1; color:#0f9d58;}
.admin-account-dropdown__badge.is-fallback{background:#fff4e0; color:#b06b00;}
.admin-account-dropdown__meta{display:flex; flex-wrap:wrap; gap:6px;}
.admin-account-dropdown__meta span{
  font-size:.68rem; font-weight:600; color:var(--muted); background:var(--surface-alt); padding:4px 9px; border-radius:999px;
}
.admin-account-dropdown a{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; font-size:.86rem; font-weight:600; color:var(--text);}
.admin-account-dropdown a:hover{background:var(--surface-alt);}

/* ---------- Admin giriş geçmişi (mini görsel) ---------- */
.admin-login-history{display:flex; flex-direction:column; gap:6px; padding:6px 4px 8px;}
.admin-login-history__item{display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:10px; background:var(--surface-alt);}
.admin-login-history__item--current{background:var(--accent-soft);}
.admin-login-history__label{display:flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; color:var(--navy);}
.admin-login-history__dot{width:6px; height:6px; border-radius:50%; background:var(--muted); flex-shrink:0;}
.admin-login-history__item--current .admin-login-history__dot{background:#0f9d58;}
.admin-login-history__meta{font-size:.68rem; color:var(--muted); margin-left:12px;}
.admin-login-history__ip{font-family:ui-monospace,Consolas,monospace; font-size:.72rem; color:var(--text); margin-left:12px;}

/* ---------- Layout ---------- */
.panel-shell{max-width:1080px; margin:0 auto; padding:36px 24px 64px;}
.panel-shell--narrow{max-width:480px;}
.panel-head{margin-bottom:28px;}
.panel-head .eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:6px 14px; border-radius:999px;
  margin-bottom:12px;
}
.panel-head h1{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:6px;}
.panel-head p{color:var(--muted); font-size:.95rem;}

/* ---------- Card / buttons (index.html ile aynı) ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:700; font-size:.88rem;
  padding:11px 20px; border-radius:999px; cursor:pointer; border:none; transition:.15s; white-space:nowrap;
}
.btn-accent{background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(255,77,41,.3);}
.btn-accent:hover{transform:translateY(-2px);}
.btn-outline{background:#fff; color:var(--navy); border:1.5px solid var(--border);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-danger{background:#fdeaea; color:#c0392b;}
.btn-danger:hover{background:#fbdada;}
.btn-sm{padding:7px 14px; font-size:.78rem;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none !important;}

/* ---------- Forms ---------- */
.form-row{display:grid; gap:8px; margin-bottom:16px;}
.form-row label{font-size:.82rem; color:var(--muted); font-weight:600;}
.form-row .hint{font-size:.76rem; color:var(--muted); font-weight:400;}
.form-row input, .form-row select, .form-row textarea{
  background:var(--surface-alt); border:1.5px solid transparent; border-radius:12px; padding:12px 14px;
  color:var(--text); font-family:inherit; font-size:.9rem; resize:vertical; width:100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-soft);
}
.form-row input:disabled{color:var(--muted); cursor:not-allowed;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.form-check{display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color:var(--muted); margin-bottom:18px;}
.form-check input{width:16px; height:16px; margin-top:2px; flex-shrink:0;}

/* ---------- Alerts ---------- */
.alert{padding:13px 18px; border-radius:12px; font-size:.88rem; margin-bottom:20px; font-weight:600;}
.alert-error{background:#fdeaea; color:#c0392b;}
.alert-success{background:#e9fbf1; color:#0f9d58;}

/* ---------- Auth card ---------- */
.auth-card{padding:36px 34px; margin-top:12px;}
.auth-foot{text-align:center; margin-top:18px; font-size:.86rem; color:var(--muted);}
.auth-foot a{color:var(--accent); font-weight:700;}

/* ---------- Badges (istek durumu) ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; padding:4px 11px; border-radius:999px;}
.badge-pending{background:#fff4e0; color:#b06b00;}
.badge-approved{background:#e9fbf1; color:#0f9d58;}
.badge-rejected{background:#fdeaea; color:#c0392b;}

/* ---------- User cards (Üyeler) ---------- */
.user-cards{display:grid; gap:14px; margin-bottom:16px;}
.user-card{padding:20px 24px;}
.user-card__head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border);}
.user-card__title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.user-card__name{font-size:1rem; color:var(--navy);}
.user-card__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px 20px;}
.user-field{display:grid; gap:4px; min-width:0;}
.user-field--wide{grid-column:1 / -1;}
.user-field .label{font-size:.7rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);}
.user-field .value{font-size:.9rem; color:var(--text); word-break:break-word;}
.user-field .value.mono{font-family:ui-monospace,Consolas,monospace; font-size:.74rem; color:var(--muted); word-break:break-all;}

/* ---------- Stat tiles ---------- */
.stat-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:16px; margin-bottom:32px;}
.stat-tile{padding:20px; text-align:center;}
.stat-tile b{display:block; font-family:'Poppins',sans-serif; font-size:1.5rem; color:var(--navy);}
.stat-tile span{color:var(--muted); font-size:.78rem;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; margin-bottom:24px;}
table{width:100%; border-collapse:collapse; min-width:560px;}
thead{background:var(--surface-alt);}
th{text-align:left; font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); padding:12px 16px;}
td{padding:12px 16px; font-size:.86rem; border-top:1px solid var(--border); vertical-align:middle;}
tbody tr:hover{background:var(--accent-soft);}
.cell-muted{color:var(--muted); font-size:.8rem;}
.empty-row{text-align:center; padding:28px; color:var(--muted);}

/* ---------- Section ---------- */
.panel-section{margin-bottom:40px;}
.panel-section h2{font-size:1.15rem; margin-bottom:16px;}

/* ---------- Admin shell ---------- */
.admin-shell{max-width:1180px; margin:0 auto; padding:28px 24px 64px; display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start;}
.admin-sidebar{position:sticky; top:88px; display:grid; gap:4px;}
.admin-sidebar a{
  display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px; font-weight:600; font-size:.88rem;
  color:var(--muted);
}
.admin-sidebar a:hover{background:var(--surface-alt); color:var(--text);}
.admin-sidebar a.active{background:var(--accent-soft); color:var(--accent);}
.admin-main{min-width:0;}

/* ---------- Music library ---------- */
.music-list{display:grid; gap:10px;}
.music-row{
  display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border);
}
.music-row__info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.music-row .name{font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.music-row .folder{font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.music-row .size{color:var(--muted); font-size:.76rem; flex-shrink:0;}

/* ---------- Play log (Son Anında Başlatmalar) ---------- */
.play-log-list{display:grid; gap:10px;}
.play-log-item{
  display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid transparent;
}
.play-log-item--latest{border-left-color:var(--accent); background:var(--accent-soft);}
.play-log-item__icon{
  width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
}
.play-log-item__info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.play-log-item__info .name{font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.play-log-item__info .meta{font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.play-log-item__side{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; text-align:right;}
.play-log-item__side .who{font-size:.78rem; font-weight:600; color:var(--navy);}
.play-log-item__side .when{font-size:.72rem; color:var(--muted);}

/* ---------- Tabs (Üyeler) ---------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.tab-btn{
  display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:700; font-size:.85rem;
  padding:10px 16px; border-radius:999px; cursor:pointer; border:1.5px solid var(--border); background:#fff; color:var(--muted);
  transition:.15s;
}
.tab-btn:hover{border-color:var(--accent); color:var(--accent);}
.tab-btn.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.tab-count{background:rgba(0,0,0,.08); font-size:.72rem; font-weight:700; padding:1px 8px; border-radius:999px;}
.tab-btn.active .tab-count{background:rgba(255,255,255,.25);}
.badge-online{background:#e9fbf1; color:#0f9d58;}

/* ---------- Numaralı sayfalama ---------- */
.pagination{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:18px;}
.pagination .page-ellipsis{padding:0 4px; color:var(--muted); font-size:.82rem;}

/* ---------- Modal (Üye Düzenle) ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(18,19,26,.55);
  align-items:center; justify-content:center; padding:20px; z-index:100;
}
.modal-overlay.open{display:flex;}
.modal-box{max-width:560px; width:100%; max-height:90vh; overflow-y:auto; padding:28px;}
.modal-box h3{font-size:1.2rem; margin-bottom:6px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:4px;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .admin-shell{grid-template-columns:1fr;}
  .admin-sidebar{position:static; display:flex; overflow-x:auto; gap:6px; padding-bottom:4px;}
  .admin-sidebar a{white-space:nowrap;}
  .stat-tiles{grid-template-columns:1fr 1fr;}
  .user-card__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .form-grid{grid-template-columns:1fr;}
  .panel-topbar__inner{padding:14px 16px;}
  .stat-tiles{grid-template-columns:1fr;}
  .user-card__grid{grid-template-columns:1fr;}
}