/* ============================================================
   yönetim paneli — stil
   ============================================================ */

:root{
  --bg:#0a0a10; --panel:#101018; --panel-2:#15151f;
  --ink:#eceef7; --dim:#9a9db4; --faint:#63667e;
  --accent:#7c5cff; --accent-2:#22d3ee; --ok:#33d17a; --warn:#ffb020; --bad:#ff5470;
  --stroke:rgba(255,255,255,.09); --stroke-2:rgba(255,255,255,.16);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }

body{
  margin:0; min-height:100vh;
  font-family:var(--font); font-size:14px;
  color:var(--ink);
  background:
    radial-gradient(60% 45% at 15% -5%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(50% 40% at 92% 4%, rgba(34,211,238,.12), transparent 62%),
    var(--bg);
  background-attachment:fixed;
}

/* ============ ortak parçalar ============ */

.btn{
  font:inherit; font-weight:500;
  padding:9px 15px; border-radius:10px;
  border:1px solid var(--stroke-2);
  background:var(--panel-2); color:var(--ink);
  cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center; gap:7px; white-space:nowrap;
  transition:background .18s, border-color .18s, transform .12s, opacity .18s;
}
.btn:hover{ background:#1c1c28; border-color:rgba(255,255,255,.26) }
.btn:active{ transform:scale(.97) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn[disabled]{ opacity:.5; cursor:not-allowed }

.btn.primary{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  border-color:transparent; color:#08080e; font-weight:600;
  box-shadow:0 6px 20px -8px var(--accent);
}
.btn.primary:hover{ filter:brightness(1.1); background:linear-gradient(135deg,var(--accent-2),var(--accent)) }

.btn.ghost{ background:transparent; border-color:var(--stroke) }
.btn.ghost:hover{ background:rgba(255,255,255,.05) }
.btn.danger{ color:var(--bad); border-color:rgba(255,84,112,.3) }
.btn.danger:hover{ background:rgba(255,84,112,.1) }
.btn.wide{ width:100% }
.btn.tiny{ padding:5px 9px; font-size:.82rem }

.btn.add{
  width:100%; margin-top:12px; padding:11px;
  border-style:dashed; background:transparent; color:var(--dim);
}
.btn.add:hover{ color:var(--ink); border-color:var(--accent); background:rgba(124,92,255,.06) }

/* alanlar */
.field{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.field > span{
  font-size:.72rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint);
}

input,select,textarea{
  font:inherit; color:var(--ink);
  background:#0c0c13; border:1px solid var(--stroke);
  border-radius:9px; padding:10px 12px; width:100%;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder,textarea::placeholder{ color:#4e5166 }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,92,255,.18); background:#0e0e17;
}
textarea{ resize:vertical; line-height:1.55 }
select{ cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239a9db4' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px }

.field.color input[type=color]{
  height:42px; padding:3px; cursor:pointer; background:#0c0c13;
}

.hint{ margin:0 0 16px; color:var(--dim); font-size:.87rem; line-height:1.6 }
.hint code{
  font-family:var(--mono); font-size:.85em;
  background:rgba(255,255,255,.07); padding:2px 6px; border-radius:5px; color:var(--accent-2);
}
.hint em{ color:var(--ink); font-style:normal }

.muted{ color:var(--faint) }

.msg{ margin:10px 0 0; font-size:.85rem; text-align:center }
.msg.err{ color:var(--bad) }

/* ============ giriş ekranı ============ */

.lock{ position:fixed; inset:0; display:grid; place-items:center; padding:20px; z-index:20 }
.lock.gone{ display:none }

.lock-card{
  width:100%; max-width:352px;
  padding:34px 28px 26px;
  border-radius:20px; border:1px solid var(--stroke);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  backdrop-filter:blur(20px);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.9);
  text-align:center;
}

.lock-icon{
  width:52px; height:52px; margin:0 auto 16px;
  border-radius:15px; display:grid; place-items:center;
  border:1px solid var(--stroke-2); background:rgba(124,92,255,.13);
}
.lock-icon svg{ width:24px; height:24px; fill:none; stroke:var(--accent-2);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }

.lock-card h1{ margin:0 0 6px; font-size:1.24rem; font-weight:650; letter-spacing:-.015em }
.lock-sub{ margin:0 0 22px; color:var(--dim); font-size:.88rem }

.field.pw{ position:relative }
.field.pw input{ padding-right:44px; text-align:center; letter-spacing:.14em }
.eye{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; border-radius:8px;
  background:transparent; color:var(--faint); cursor:pointer; display:grid; place-items:center;
}
.eye:hover{ color:var(--ink); background:rgba(255,255,255,.06) }
.eye svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7 }

.lock-card .btn.primary{ margin-top:14px }

.lock-back{
  display:inline-block; margin-top:18px;
  color:var(--faint); font-size:.8rem; text-decoration:none;
}
.lock-back:hover{ color:var(--dim) }

/* hesapla giriş düğmeleri (kilit ekranı) */
.lock-prov{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px }
.prov{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 12px; border-radius:11px; text-decoration:none;
  border:1px solid var(--stroke-2); background:rgba(255,255,255,.04); color:var(--ink);
  font-weight:600; font-size:.9rem; transition:background .18s, border-color .18s;
}
.prov:hover{ background:rgba(255,255,255,.09); border-color:var(--accent) }
.prov svg{ width:18px; height:18px }
.prov.dc svg{ fill:#5865f2 }
.prov.gg svg path:nth-child(1){ fill:#4285f4 } .prov.gg svg path:nth-child(2){ fill:#34a853 }
.prov.gg svg path:nth-child(3){ fill:#fbbc05 } .prov.gg svg path:nth-child(4){ fill:#ea4335 }
.lock-sep{ display:flex; align-items:center; gap:10px; margin:12px 0 8px; color:var(--faint); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase }
.lock-sep::before, .lock-sep::after{ content:''; flex:1; height:1px; background:var(--stroke) }
.lock-card.user-mode .field.pw, .lock-card.user-mode #lockBtn{ display:none }

/* ============ panel iskeleti ============ */

.app{ max-width:940px; margin:0 auto; padding:22px 20px 110px }

.top{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:20px;
  border-bottom:1px solid var(--stroke);
}
.brand{ display:flex; align-items:center; gap:8px; font-size:.95rem }
.brand strong{ font-weight:650; letter-spacing:-.01em }
.brand .sep{ color:var(--faint) }
.brand .dot{
  width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 10px var(--ok);
}
.top-act{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap }

/* sekmeler */
.tabs{
  display:flex; gap:4px; margin-bottom:20px;
  padding:4px; border-radius:12px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.025);
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none }

.tab{
  font:inherit; font-weight:500; white-space:nowrap;
  padding:9px 15px; border-radius:9px;
  border:0; background:transparent; color:var(--dim); cursor:pointer;
  transition:background .18s, color .18s;
}
.tab:hover{ color:var(--ink); background:rgba(255,255,255,.05) }
.tab.on{ color:#08080e; background:linear-gradient(135deg,var(--accent-2),var(--accent)); font-weight:600 }
.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* sayfa gövdesi */
.sheet{
  padding:26px 24px;
  border-radius:18px; border:1px solid var(--stroke);
  background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8);
}

.pane{ display:none }
.pane.on{ display:block; animation:fade .3s ease }
@keyframes fade{ from{ opacity:0; transform:translateY(6px) } }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.span2{ grid-column:span 2 }

.sub{
  margin:28px 0 14px; padding-top:20px;
  border-top:1px solid var(--stroke);
  font-size:.76rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}

/* ============ tekrarlanan satırlar ============ */

.rows{ display:flex; flex-direction:column; gap:10px }

.row{
  display:flex; align-items:center; gap:9px;
  padding:11px; border-radius:12px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.028);
  transition:border-color .18s, background .18s, opacity .18s;
}
.row:hover{ border-color:var(--stroke-2) }
.row.dragging{ opacity:.4 }
.row.over{ border-color:var(--accent); background:rgba(124,92,255,.09) }
.row.off{ opacity:.45 }

.row input{ padding:8px 10px }
.row .f-label{ flex:0 0 148px; min-width:0 }
.row .f-url{ flex:1 1 auto; min-width:0 }
.row .f-half{ flex:1 1 0; min-width:0 }

/* hazır kısayol satırı */
.f-preset-name{
  flex:0 0 148px; min-width:0;
  font-size:.86rem; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.f-preset-url{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:stretch;
  border:1px solid var(--stroke-2); border-radius:10px;
  background:#0c0c13; overflow:hidden;
}
.f-base{
  flex:none; display:flex; align-items:center;
  padding:8px 8px 8px 10px;
  font-family:var(--mono); font-size:.72rem; color:var(--faint);
  background:rgba(255,255,255,.04);
  border-right:1px solid var(--stroke);
  user-select:none; cursor:not-allowed; white-space:nowrap;
}
.f-handle{
  flex:1 1 auto; min-width:0;
  border:0 !important; border-radius:0 !important; background:transparent !important;
}
.icobox:disabled{ cursor:default; opacity:1 }
.icobox:disabled:hover{ color:var(--dim); border-color:var(--stroke-2); background:#0c0c13 }

/* hazır kısayol seçme ızgarası */
.addrow{ display:flex; gap:10px }
.addrow .btn.add{ flex:1 1 0 }

.preset-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px; margin-top:12px;
  padding:12px; border-radius:12px;
  border:1px dashed var(--stroke-2); background:rgba(255,255,255,.02);
}
.preset-grid[hidden]{ display:none }
.preset-opt{
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:10px; cursor:pointer;
  font:inherit; font-size:.84rem; font-weight:500; color:var(--dim);
  border:1px solid var(--stroke); background:#0c0c13;
  transition:border-color .15s, color .15s, background .15s;
}
.preset-opt:hover{ color:var(--ink); border-color:var(--c, var(--accent)); background:rgba(255,255,255,.04) }
.preset-opt svg{
  flex:none; width:17px; height:17px;
  fill:none; stroke:var(--c, currentColor); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.preset-opt svg [data-filled]{ fill:var(--c, currentColor); stroke:none }
.preset-opt span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.grip{
  flex:none; width:22px; height:32px; cursor:grab;
  display:grid; place-items:center; color:var(--faint);
  border:0; background:transparent;
}
.grip:active{ cursor:grabbing }
.grip svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
.grip:hover{ color:var(--ink) }

/* ikon önizleme düğmesi */
.icobox{
  flex:none; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--stroke-2); background:#0c0c13; color:var(--dim);
  transition:border-color .18s, color .18s, background .18s;
}
.icobox:hover{ color:var(--ink); border-color:var(--accent); background:rgba(124,92,255,.1) }
.icobox svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }
.icobox svg [data-filled]{ fill:currentColor; stroke:none }
.icobox img{ width:19px; height:19px; object-fit:contain }
.icobox .emo{ font-size:1.15rem; line-height:1 }

.swatch{
  flex:none; width:34px; height:34px; padding:2px;
  border-radius:9px; cursor:pointer; border:1px solid var(--stroke);
  background:#0c0c13;
}

.rbtn{
  flex:none; width:32px; height:32px; border-radius:8px;
  border:0; background:transparent; color:var(--faint);
  cursor:pointer; display:grid; place-items:center;
  transition:color .18s, background .18s;
}
.rbtn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }
.rbtn:hover{ color:var(--ink); background:rgba(255,255,255,.07) }
.rbtn.del:hover{ color:var(--bad); background:rgba(255,84,112,.12) }
.rbtn.on{ color:var(--accent-2) }

/* -- şarkı satırı: üstte ad + sanatçı, altta ince adres satırı -- */

.row.song{ flex-direction:column; align-items:stretch; gap:10px }

.song-top{ display:flex; align-items:flex-end; gap:9px }
.song-top .field{ flex:1 1 0; min-width:0 }
.song-top .grip,
.song-top .rbtn{ margin-bottom:5px }

.song-num{
  flex:none; width:20px; text-align:right;
  margin-bottom:12px;
  font-family:var(--mono); font-size:.78rem; color:var(--faint);
}

.field.song-src input{
  font-family:var(--mono); font-size:.76rem; color:var(--dim);
  padding:7px 10px;
}

.empty{
  padding:30px 16px; text-align:center;
  color:var(--faint); font-size:.88rem;
  border:1px dashed var(--stroke); border-radius:12px;
}

/* ============ şarkı yükleme alanı ============ */

.drop{
  margin-bottom:16px; padding:28px 18px;
  border:1.5px dashed var(--stroke-2); border-radius:14px;
  text-align:center; color:var(--dim); cursor:pointer;
  background:rgba(255,255,255,.02);
  transition:border-color .2s, background .2s, color .2s;
}
.drop:hover,.drop:focus-visible{
  border-color:var(--accent); color:var(--ink);
  background:rgba(124,92,255,.06); outline:none;
}
.drop.over{
  border-color:var(--accent-2); color:var(--ink);
  background:rgba(34,211,238,.09);
  border-style:solid;
}
.drop.busy{ pointer-events:none; opacity:.85 }

.drop svg{
  width:26px; height:26px; margin-bottom:8px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.drop p{ margin:0 0 4px; font-size:.9rem }
.drop strong{ color:var(--ink); font-weight:600 }
.drop-note{ font-size:.74rem; color:var(--faint) }
.drop-busy{
  margin-top:10px; font-family:var(--mono); font-size:.8rem;
  color:var(--accent-2);
}

/* ============ arka plan seçenekleri ============ */

.bgopts{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:10px; margin-bottom:14px;
}

.bgopt{
  position:relative; height:68px;
  border-radius:12px; border:1px solid var(--stroke-2);
  padding:0; cursor:pointer; overflow:hidden;
  background:#0c0c13; background-size:cover; background-position:center;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.bgopt:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.3) }
.bgopt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.bgopt.on{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(124,92,255,.45), 0 8px 22px -10px var(--accent);
}

.bgopt > span{
  position:absolute; left:0; right:0; bottom:0;
  padding:4px 6px; font-size:.68rem; font-weight:500;
  color:var(--ink); background:rgba(5,5,10,.62); backdrop-filter:blur(4px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.bgopt .bx{  /* özel arka planı kaldırma düğmesi */
  position:absolute; top:5px; right:5px;
  width:20px; height:20px; border-radius:6px; border:0;
  display:grid; place-items:center;
  background:rgba(5,5,10,.72); color:var(--dim);
  font-size:.72rem; line-height:1; cursor:pointer;
}
.bgopt .bx:hover{ color:#fff; background:rgba(255,84,112,.75) }

/* hazır seçeneklerin küçük önizlemeleri */
.bgopt[data-m="aurora"]{
  background:
    radial-gradient(60% 70% at 25% 30%, rgba(124,92,255,.7), transparent 65%),
    radial-gradient(55% 60% at 78% 25%, rgba(34,211,238,.5), transparent 60%),
    radial-gradient(60% 65% at 60% 90%, rgba(255,77,141,.45), transparent 65%),
    #07070b;
}
.bgopt[data-m="yildizlar"]{
  background:
    radial-gradient(1.5px 1.5px at 18% 28%, #dfe4ff 40%, transparent 60%),
    radial-gradient(1px 1px at 62% 18%, #dfe4ff 40%, transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 55%, #dfe4ff 40%, transparent 60%),
    radial-gradient(1px 1px at 38% 68%, #dfe4ff 40%, transparent 60%),
    radial-gradient(1px 1px at 50% 40%, #dfe4ff 40%, transparent 60%),
    #080810;
}
.bgopt[data-m="gradyan"]{
  background:linear-gradient(140deg, #16103a 0%, #071a2b 45%, #2a0b2e 100%);
}
.bgopt[data-m="duz"]{ background:#0a0a10 }
.bgopt[data-m="video"]::before{
  content:'▶'; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:1.15rem; color:var(--ink-dim, #9a9db4);
}

/* profil sekmesindeki ince yükleme kutusu */
.drop-slim{ padding:16px 14px }
.drop-slim p{ font-size:.84rem }

/* ============ özelleştirilebilir renkler ============ */

/* sekme sayacı (Kalp: seni yazan sayısı) */
.tab .tab-n{
  display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px;
  border-radius:999px; background:#ff5fb2; color:#1a0410; font-size:.68rem; font-weight:700; line-height:1;
}

/* sekmenin ilk başlığı üstte boşluk/çizgi bırakmaz */
.pane > .sub:first-child{ margin-top:0; padding-top:0; border-top:0 }

/* ============ Kalp — aşık alanı ============ */
.loverow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.lovepre{ font-family:var(--mono); color:var(--faint); font-size:.85rem }
.loverow input{ flex:1 1 180px; min-width:0 }
.love-state{ margin:10px 0 0; font-size:.88rem; color:var(--dim) }
.love-state.lovers{ color:#ff5fb2 }
.love-state.crush{ color:#ff8fb8 }
.love-state.sap{ color:var(--faint) }
.fanrow{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.02);
}
.fanrow a{ color:var(--ink); font-weight:600; text-decoration:none }
.fanrow a:hover{ text-decoration:underline }
.fanrow .fan-tag{ color:var(--dim); font-size:.82rem; margin-right:auto }
.fanrow.mutual{ border-color:rgba(255,95,178,.35); background:rgba(255,95,178,.05) }
.fanrow.mutual .fan-tag{ color:#ff5fb2 }
.love-empty{
  margin:0; padding:16px; text-align:center;
  color:var(--faint); font-size:.85rem;
  border:1px dashed var(--stroke); border-radius:10px;
}

/* ============ alanın sağındaki küçük renk kutuları ============ */
.inrow{ display:flex; flex-wrap:nowrap; align-items:center; gap:8px; min-width:0 }
.inrow.tall{ align-items:flex-start }
.inrow > input, .inrow > textarea, .inrow > select, .inrow > .glassrow{ flex:1 1 auto; min-width:0 }
.inrow.tall .cpicks{ padding-top:8px }
.cpicks{ display:flex; align-items:center; gap:6px; flex:none }
.cpicks:empty{ display:none }
.cpick{ display:flex; align-items:center; gap:1px }
.cpick input[type=color]{
  width:28px; height:28px; padding:2px; border-radius:8px; cursor:pointer;
  border:1px solid var(--stroke); background:#0c0c13;
  transition:opacity .15s, border-color .15s;
}
.cpick input[type=color]::-webkit-color-swatch-wrapper{ padding:0 }
.cpick input[type=color]::-webkit-color-swatch{ border:0; border-radius:5px }
.cpick input[type=color]::-moz-color-swatch{ border:0; border-radius:5px }
.cpick:not(.set) input[type=color]{ opacity:.5; border-style:dashed }
.cpick input[type=color]:hover{ opacity:1; border-color:var(--accent) }
.cpick .cx{
  width:18px; height:20px; border-radius:6px; border:0; padding:0;
  background:transparent; color:var(--faint); cursor:pointer; font-size:.62rem;
  display:grid; place-items:center;
}
.cpick .cx:hover{ color:var(--bad); background:rgba(255,84,112,.12) }
.cpick:not(.set) .cx{ display:none }
.factcolors{ margin:-6px 0 14px }
.factcolors .inrow{ justify-content:flex-start }
.linkish{
  background:none; border:0; padding:0; margin-left:6px; font:inherit;
  color:var(--accent-2); cursor:pointer; text-decoration:underline dotted;
}
.linkish:hover{ color:var(--ink) }
.chk-grid .chk-label svg.sb{ width:18px; height:18px; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* ============ Discord rozet kutucukları ============ */

.hint.tight{ margin:0 0 8px; font-size:.82rem }
.chk-grid{ display:flex; flex-wrap:wrap; gap:8px }
.chk-grid .chk-label{
  padding:7px 11px 7px 9px; border-radius:10px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.028);
  transition:border-color .18s, background .18s;
}
.chk-grid .chk-label:hover{ border-color:var(--stroke-2) }
.chk-grid .chk-label.on{ border-color:var(--accent); background:rgba(124,92,255,.09); color:var(--ink) }
.chk-grid .chk-label.nitro select{ padding:4px 8px; font-size:.8rem; margin-left:2px }
.chk-grid .chk-label.nitro.on{ border-color:var(--bc); background:color-mix(in srgb, var(--bc) 12%, transparent) }
.chk-grid .chk-label.locked{ opacity:.62; cursor:default }
.chk-grid .chk-label.locked img{ filter:grayscale(1) }
.chk-grid .chk-label.locked select{ opacity:.7 }
.chk-grid .chk-label img{ width:18px; height:18px; object-fit:contain }
.chk-grid .chk-label img.nitro-img{ width:22px; height:16px }
.chk-grid .chk-label svg{ width:15px; height:15px; fill:none; stroke:var(--bc, #fff); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* ============ fare imleci seçenekleri ============ */

.curopts{ grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)) }
.curopt{
  display:grid; place-items:center;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(255,255,255,.05), transparent 70%),
    #0c0c13;
}
.curopt img{ width:32px; height:32px; margin-bottom:14px; image-rendering:auto; pointer-events:none }
/* özel imleç önizlemesi gerçek boyutunda görünsün (en fazla 32 px) */
.curopt.ozel img{ max-width:32px; max-height:32px; width:auto; height:auto }
.curopt.default::before{
  content:''; position:absolute; left:50%; top:38%;
  width:12px; height:18px; transform:translate(-50%,-50%);
  background:#eceef7; clip-path:polygon(0 0, 0 82%, 30% 64%, 48% 100%, 62% 94%, 45% 58%, 78% 58%);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.8));
}
#curHotWrap{ max-width:360px; margin-top:12px }

/* ============ kart yoğunluğu kaydırıcısı ============ */

.glassrow{ display:flex; align-items:center; gap:12px; height:42px }
.glassrow input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:5px; border-radius:4px; padding:0;
  background:linear-gradient(90deg, transparent, var(--accent));
  border:1px solid var(--stroke); cursor:pointer;
}
.glassrow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px rgba(124,92,255,.3);
}
.glassrow input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; border:0;
  background:#fff; box-shadow:0 0 0 3px rgba(124,92,255,.3);
}
.glass-val{
  font-family:var(--mono); font-size:.8rem; color:var(--dim);
  width:30px; text-align:right;
}

/* ============ not satırları ============ */

.row.note-admin{ flex-wrap:nowrap }
.row.note-admin.sel{ border-color:rgba(255,84,112,.4); background:rgba(255,84,112,.06) }

/* not araç çubuğu: tümünü seç + seçilenleri sil */
.note-tools{
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px; padding:8px 11px;
  border:1px solid var(--stroke); border-radius:12px;
  background:rgba(255,255,255,.02);
}
.chk-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; color:var(--dim); cursor:pointer; user-select:none;
}
.chk-label:hover{ color:var(--ink) }

.note-chk{
  flex:none; width:17px; height:17px; margin:0;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  border:1px solid var(--stroke-2); border-radius:5px; background:#0c0c13;
  display:grid; place-items:center;
  transition:border-color .15s, background .15s;
}
.note-chk:hover{ border-color:var(--accent) }
.note-chk:checked{ background:var(--accent); border-color:var(--accent) }
.note-chk:indeterminate{ background:rgba(124,92,255,.35); border-color:var(--accent) }
.note-chk::after{
  content:""; width:9px; height:5px;
  border:2px solid #fff; border-top:0; border-right:0;
  transform:rotate(-45deg) translate(1px,-1px); opacity:0;
  transition:opacity .12s;
}
.note-chk:checked::after{ opacity:1 }
.note-chk:indeterminate::after{ width:8px; height:0; border-width:0 0 2px; transform:none; opacity:1 }
.note-chk:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px }

.note-badge{
  flex:none; padding:3px 9px; border-radius:999px;
  font-size:.66rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ok); background:rgba(51,209,122,.12); border:1px solid rgba(51,209,122,.3);
}
.note-badge.wait{
  color:var(--warn); background:rgba(255,176,32,.12); border-color:rgba(255,176,32,.35);
}

.note-acts{ display:flex; gap:6px; flex:none; margin-left:auto }
.btn.tiny.approve{
  background:linear-gradient(135deg, #33d17a, #1f9d5c);
  border-color:transparent; color:#06130b; font-weight:600;
}
.btn.tiny.approve:hover{ filter:brightness(1.1) }

.note-row-text{ flex:1; min-width:0; font-size:.86rem; line-height:1.5; word-break:break-word }
.note-row-meta{
  flex:none; text-align:right;
  font-family:var(--mono); font-size:.68rem; color:var(--faint);
  display:flex; flex-direction:column; gap:2px;
}
.note-row-meta b{ color:var(--accent-2); font-weight:500 }

/* ============ şarkı kapağı ============ */

.cover-btn{
  flex:none; width:40px; height:40px; border-radius:9px;
  padding:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--stroke-2); background:#0c0c13;
  display:grid; place-items:center; color:var(--faint);
  margin-bottom:5px;
  transition:border-color .18s, color .18s;
}
.cover-btn:hover{ border-color:var(--accent); color:var(--ink) }
.cover-btn img{ width:100%; height:100%; object-fit:cover }
.cover-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }

/* ============ avatar satırı ============ */

.avarow{
  display:flex; align-items:center; gap:10px;
  border-radius:12px; transition:box-shadow .18s;
}
.avarow.over{ box-shadow:0 0 0 2px var(--accent-2); }
.avarow input{ flex:1; min-width:0 }
.avarow .btn{ flex:none }

.ava-prev{
  flex:none; width:42px; height:42px; border-radius:50%;
  object-fit:cover; cursor:pointer;
  border:1px solid var(--stroke-2); background:#0c0c13;
  transition:border-color .18s, transform .18s;
}
.ava-prev:hover{ border-color:var(--accent); transform:scale(1.06) }

/* Discord modu seçiliyken yükleme satırı devre dışı */
.avarow.dim{ opacity:.4; pointer-events:none }

/* profil resmi seçenekleri */
.ava-modes{ display:grid; gap:8px }
.ava-mode{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.025);
  cursor:pointer; transition:border-color .18s, background .18s;
}
.ava-mode:hover{ border-color:var(--stroke-2) }
.ava-mode.on{ border-color:var(--accent); background:rgba(124,92,255,.08) }
.ava-mode.off{ opacity:.5 }
.ava-mode.off, .ava-mode.off *{ cursor:not-allowed }
.ava-mode input[type=radio]{   /* genel input kuralını (width:100%, padding, kenarlık) ez */
  width:16px; height:16px; flex:0 0 16px; margin:12px 0 0;
  padding:0; border:0; background:none; box-shadow:none;
  accent-color:var(--accent); cursor:pointer;
}
.ava-mode .ava-prev.sm{ width:40px; height:40px; margin-top:2px }
.ava-mode-txt{ display:grid; gap:4px; flex:1; min-width:0 }
.ava-mode-txt b{ font-size:.9rem; color:var(--ink) }
.ava-mode-txt small{ font-size:.74rem; color:var(--dim); line-height:1.5 }
.ava-mode-txt small.ok{ color:var(--ok) }
.ava-mode-txt small a{ color:var(--accent-2) }
.ava-mode .avarow{ margin-top:6px; flex-wrap:wrap }
.ava-mode .avarow input{ flex:1 1 160px; font-size:.8rem; padding:7px 10px }
.ava-mode .avarow .btn{ padding:7px 12px; font-size:.8rem }

/* kırpma ekranı */
.crop-back{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; padding:16px;
  background:rgba(4,4,10,.78); backdrop-filter:blur(6px);
}
.crop-box{
  width:min(420px, 100%); padding:20px;
  background:var(--panel); border:1px solid var(--stroke-2); border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.crop-box h3{ margin:0 0 6px; font-size:1.05rem }
.crop-stage{ display:grid; place-items:center; margin:8px 0 12px }
.crop-stage canvas{
  width:320px; height:320px; max-width:100%; aspect-ratio:1;
  border-radius:14px; background:#08080e; touch-action:none; cursor:grab;
  user-select:none; -webkit-user-select:none;
}
.crop-stage canvas.drag{ cursor:grabbing }
.crop-zoom{ display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--dim) }
.crop-zoom input{ flex:1; accent-color:var(--accent) }
.crop-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px }
.ava-note{ font-size:.72rem; color:var(--warn); margin-top:6px }
.ava-note[hidden]{ display:none !important }
.field input:disabled, .field select:disabled{ opacity:.4; cursor:not-allowed }

/* görünen ad yazı tipi öngösterimi */
.font-prev{
  margin-top:2px; padding:10px 14px;
  font-size:1.6rem; line-height:1.25; font-weight:700;
  color:var(--ink);
  background:#0c0c13;
  border:1px dashed var(--stroke-2); border-radius:10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* içerideki yazı rumuzun 3 rengiyle boyanır (gradyan JS'ten background-image olarak gelir) */
.font-prev > span{
  color:transparent; -webkit-background-clip:text; background-clip:text;
  padding-right:2px;
  user-select:none;
}

/* ============ kaydetme çubuğu ============ */

.savebar{
  position:fixed; left:0; right:0; bottom:0; z-index:15;
  display:flex; align-items:center; gap:12px;
  max-width:940px; margin:0 auto;
  padding:13px 20px;
  border-top:1px solid var(--stroke);
  background:rgba(10,10,16,.9); backdrop-filter:blur(16px);
}
.grow{ flex:1 }

.save-state{ font-size:.83rem; color:var(--faint); display:flex; align-items:center; gap:7px }
.save-state::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 8px var(--ok);
}
.save-state.dirty{ color:var(--warn) }
.save-state.dirty::before{ background:var(--warn); box-shadow:0 0 8px var(--warn) }
.save-state.busy{ color:var(--accent-2) }
.save-state.busy::before{ background:var(--accent-2); box-shadow:0 0 8px var(--accent-2) }

/* ============ ikon seçici ============ */

.picker{
  position:fixed; inset:0; z-index:40;
  display:grid; place-items:center; padding:20px;
  background:rgba(4,4,8,.72); backdrop-filter:blur(8px);
}
.picker[hidden]{ display:none }

.picker-box{
  width:100%; max-width:436px;
  padding:20px; border-radius:18px;
  border:1px solid var(--stroke-2); background:var(--panel);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.picker-box header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.picker-search{ margin-bottom:12px }

.picker-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  gap:7px; max-height:270px; overflow-y:auto;
  padding:3px; margin-bottom:16px;
  scrollbar-width:thin; scrollbar-color:var(--stroke-2) transparent;
}
.picker-grid::-webkit-scrollbar{ width:6px }
.picker-grid::-webkit-scrollbar-thumb{ background:var(--stroke-2); border-radius:3px }

.pick{
  aspect-ratio:1; border-radius:10px;
  display:grid; place-items:center; gap:3px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.03);
  color:var(--dim); cursor:pointer; padding:5px;
  transition:border-color .16s, color .16s, background .16s, transform .16s;
}
.pick:hover{ color:var(--ink); border-color:var(--stroke-2); background:rgba(255,255,255,.07);
  transform:translateY(-2px) }
.pick.on{ color:#fff; border-color:var(--accent); background:rgba(124,92,255,.2) }
.pick svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }
.pick svg [data-filled]{ fill:currentColor; stroke:none }
.pick small{ font-size:.54rem; opacity:.65; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }

.picker-box .field{ margin-bottom:14px }

/* ============ bildirim ============ */

.toast{
  position:fixed; left:50%; bottom:78px; transform:translateX(-50%) translateY(14px);
  z-index:50; padding:11px 20px; border-radius:11px;
  border:1px solid var(--stroke-2); background:#16161f;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.9);
  font-size:.88rem; opacity:0; transition:opacity .25s, transform .25s;
}
.toast[hidden]{ display:none }
.toast.show{ opacity:1; transform:translateX(-50%) }
.toast.ok{  border-color:rgba(51,209,122,.45) }
.toast.bad{ border-color:rgba(255,84,112,.5); color:#ffd7de }

/* ============ küçük ekran ============ */

@media (max-width:680px){
  .app{ padding:16px 14px 116px }
  .sheet{ padding:20px 16px }
  .grid2,.grid3{ grid-template-columns:1fr }
  .span2{ grid-column:span 1 }

  .row{ flex-wrap:wrap }
  .row.note-admin{ flex-wrap:wrap }
  .row.note-admin .note-row-text{ flex:1 1 100%; order:5 }
  .row.note-admin .note-row-meta{ text-align:left; margin-right:auto }
  .row .f-label{ flex:1 1 100% }
  .row .f-url{ flex:1 1 100% }

  .song-top{ flex-wrap:wrap }
  .song-top .field{ flex:1 1 100% }
  .song-num{ margin-bottom:0 }
  .song-top .grip,
  .song-top .rbtn{ margin-bottom:0 }

  .top-act{ width:100%; margin-left:0 }
  .top-act .btn{ flex:1 }
  .savebar{ padding:11px 14px }
  .save-state{ display:none }
}

/* ---------- not istekleri (kabul / reddet / engelle) ---------- */
.note-req-box{ margin:0 0 14px; padding:10px 11px 11px; border:1px solid rgba(124,92,255,.35); border-radius:14px; background:rgba(124,92,255,.06) }
.note-req-head{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dim) }
.note-req-head b{ min-width:20px; padding:1px 7px; border-radius:999px; text-align:center; font-size:.72rem; color:#fff; background:var(--accent) }
.row.note-req{ flex-wrap:wrap }
.row.note-req .note-row-text{ flex:1 1 220px }
.note-acts{ display:flex; gap:6px; flex:none }
.btn.ok{ color:var(--ok); border-color:rgba(51,209,122,.35) }
.btn.ok:hover{ background:rgba(51,209,122,.1) }
.note-blocked-box{ margin-top:16px; padding:10px 11px; border:1px dashed var(--stroke); border-radius:14px }
.note-blocked{ display:flex; flex-wrap:wrap; gap:8px }
.note-blk{ display:inline-flex; align-items:center; gap:8px; padding:5px 6px 5px 10px; border-radius:999px; border:1px solid var(--stroke); font-size:.8rem; color:var(--ink) }
.note-blk button{ font:inherit; font-size:.72rem; padding:3px 8px; border-radius:999px; border:1px solid var(--stroke); background:transparent; color:var(--dim); cursor:pointer }
.note-blk button:hover{ color:var(--ink); border-color:var(--stroke-2) }

/* ============ sıralama sekmesi (yalnız site sahibi) ============ */

.rank2{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
@media (max-width:760px){ .rank2{ grid-template-columns:1fr } }
.rank2 .sub{ margin-top:0 }

.rank-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.rank-list li{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:12px;
  border:1px solid var(--stroke); background:var(--panel-2);
}
.rank-list .rk{
  width:22px; flex:none; text-align:center;
  font-family:var(--mono); font-weight:600; color:var(--accent-2);
}
.rank-list img{
  width:32px; height:32px; flex:none; border-radius:50%;
  object-fit:cover; border:1px solid var(--stroke-2); background:var(--panel);
}
.rank-list .who{ min-width:0; flex:1 }
.rank-list .who b{ display:block; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rank-list .who a{ font-family:var(--mono); font-size:.7rem; color:var(--faint); text-decoration:none }
.rank-list .who a:hover{ color:var(--accent-2); text-decoration:underline }
.rank-list .n{ font-family:var(--mono); font-size:.95rem; font-weight:600 }
.rank-list .n.up{ color:var(--ok) }
.rank-list .n.down{ color:var(--bad) }
.rank-empty{
  padding:14px 16px; border:1px dashed var(--stroke-2); border-radius:12px;
  color:var(--faint); font-size:.84rem;
}
.rank-foot{ display:flex; align-items:center; gap:12px; margin-top:22px }
.rank-foot .muted{ color:var(--faint); font-size:.8rem }

/* Discord ile bağlı hesapta kimlik alanı kilitli (sunucudan gelir) */
.field input.locked{ opacity:.7; cursor:not-allowed; border-style:dashed }
.ava-note.ok{ color:var(--ok, #3ecf6a) }
.ava-note a{ color:inherit; text-decoration:underline }

/* Discord sunucusuna katılma şeridi (sekmelerin altında) */
.banner{ display:flex; align-items:center; gap:14px; margin:12px auto 0; max-width:1100px; padding:12px 16px;
  border-radius:12px; background:linear-gradient(135deg, rgba(124,92,255,.18), rgba(244,127,255,.12));
  border:1px solid rgba(244,127,255,.35); color:var(--ink); font-size:.86rem; line-height:1.4 }
.banner[hidden]{ display:none }
.banner-ico{ font-size:1.3rem }
.banner-text{ flex:1; min-width:0 }
.banner .btn{ white-space:nowrap }
@media (max-width:640px){ .banner{ flex-wrap:wrap } .banner-text{ flex-basis:100% } }

/* Discord bölümü — belirgin katılma çağrısı */
.dc-cta{ display:flex; align-items:center; gap:16px; margin:10px 0 14px; padding:14px 16px; border-radius:12px;
  background:linear-gradient(135deg, rgba(88,101,242,.22), rgba(244,127,255,.14)); border:1px solid rgba(88,101,242,.5);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 8px 28px rgba(88,101,242,.18) }
.dc-cta-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; font-size:.84rem; line-height:1.45 }
.dc-cta-text b{ font-size:.98rem; color:var(--ink) }
.dc-cta-text span{ color:var(--ink-dim) }
.dc-cta-text em{ font-style:normal; color:var(--ok); font-weight:600 }
.dc-cta-text em[hidden]{ display:none }
.dc-cta .btn{ white-space:nowrap }
.dc-cta.in-server{ border-color:rgba(51,209,122,.45); background:linear-gradient(135deg, rgba(51,209,122,.14), rgba(88,101,242,.12)) }
/* sunucudayken: katıl düğmesi ve çağrı metni gider, sağda yeşil tik */
.dc-cta .in-only{ display:none }
.dc-cta.in-server .join-only{ display:none }
.dc-cta.in-server .in-only{ display:initial }
.dc-cta-tick{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:none; place-items:center; color:#fff;
  background:linear-gradient(135deg, #33d17a, #1fb765);
  box-shadow:0 0 0 4px rgba(51,209,122,.18), 0 6px 18px rgba(51,209,122,.35);
}
.dc-cta.in-server .dc-cta-tick{ display:grid }
@media (max-width:640px){ .dc-cta{ flex-wrap:wrap } .dc-cta .btn{ width:100% ; text-align:center } }