/* ============================================================
   accent.css  Tema + Vurgu rengi secim paneli (Discord "Gorunum")
   Bagimsiz; sadece kendi .accent-pop kapsaminda kurallar.
   Renkler tema degiskenlerini kullanir (koyu/aydinlik otomatik).
   ============================================================ */
.accent-pop{
  position:fixed; width:320px; max-width:calc(100vw - 16px);
  background:var(--popout-bg,#161922);
  border:1px solid var(--border,rgba(255,255,255,.06));
  border-radius:var(--radius-md,14px);
  box-shadow:var(--shadow-pop,0 12px 38px rgba(0,0,0,.46));
  z-index:9000; display:none;
  padding:16px; box-sizing:border-box;
  color:var(--text,#c8cdd6);
  font-family:var(--font-sans,system-ui,sans-serif);
}
.accent-pop.open{ display:block; animation:accPopIn .16s cubic-bezier(.2,.7,.3,1); }
@keyframes accPopIn{ from{opacity:0;transform:scale(.96) translateY(8px);} to{opacity:1;} }

.acc-head{
  font-size:16px; font-weight:700; color:var(--head,#f0f2f5);
  margin:0 0 12px;
}
.acc-sec-title{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted,#7d8593); margin:0 0 8px;
}

/* ---- Tema modu satiri ---- */
.acc-theme-row{ display:flex; gap:8px; margin-bottom:16px; }
.acc-theme-opt{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--panel2,#161922); border:1px solid var(--border,rgba(255,255,255,.06));
  border-radius:var(--radius-sm,10px); padding:10px 6px; cursor:pointer;
  color:var(--text); transition:border-color .12s, background .12s, transform .08s;
}
.acc-theme-opt:hover{ background:var(--hover,rgba(255,255,255,.04)); }
.acc-theme-opt:active{ transform:scale(.97); }
.acc-theme-opt.sel{ border-color:var(--accent,#6c8cff); box-shadow:0 0 0 1px var(--accent,#6c8cff) inset; }
.acc-theme-sw{
  width:100%; height:34px; border-radius:6px;
  border:1px solid var(--border,rgba(255,255,255,.08));
}
.acc-theme-lbl{ font-size:12px; font-weight:600; color:var(--text); }
.acc-theme-opt.sel .acc-theme-lbl{ color:var(--head,#fff); }

/* ---- Swatch izgarasi ---- */
.acc-sw-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:14px;
}
.acc-sw{
  position:relative; width:100%; aspect-ratio:1/1; min-height:38px;
  border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
  transition:transform .1s, box-shadow .12s;
}
.acc-sw:hover{ transform:scale(1.08); }
.acc-sw:active{ transform:scale(.96); }
.acc-sw .acc-sw-check{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
}
.acc-sw.sel{ box-shadow:0 0 0 2px var(--popout-bg,#161922), 0 0 0 4px currentColor; }
.acc-sw.sel .acc-sw-check{ display:flex; }

/* ---- Ozel renk + sifirla ---- */
.acc-custom-row{ display:flex; align-items:center; gap:10px; }
.acc-custom{
  flex:1; display:flex; align-items:center; gap:10px;
  background:var(--input-bg,#161922); border:1px solid var(--border,rgba(255,255,255,.06));
  border-radius:var(--radius-sm,10px); padding:8px 10px; cursor:pointer; position:relative;
  min-width:0;
}
.acc-custom-chip{
  width:26px; height:26px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(#f04747,#f0b232,#3ba55d,#00a8fc,#9b59ff,#eb459e,#f04747);
}
.acc-custom-chip.sel{ box-shadow:0 0 0 2px var(--input-bg,#161922), 0 0 0 3px var(--accent,#6c8cff); }
.acc-custom-lbl{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; }
/* gizli native color input (chip'in uzerine bindirilir) */
.acc-custom input[type=color]{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; opacity:0; cursor:pointer; border:none; padding:0; background:none;
}
.acc-hex{
  margin-left:auto; width:78px; flex-shrink:0;
  background:var(--panel2,#0e1016); border:1px solid var(--border,rgba(255,255,255,.08));
  border-radius:6px; color:var(--text); font-size:12px; font-weight:600;
  padding:5px 8px; text-align:center; outline:none; font-family:ui-monospace,monospace;
}
.acc-hex:focus{ border-color:var(--accent,#6c8cff); }
.acc-reset{
  flex-shrink:0; background:none; border:1px solid var(--border,rgba(255,255,255,.08));
  border-radius:var(--radius-sm,8px); color:var(--muted,#7d8593);
  font-size:12px; font-weight:600; padding:8px 10px; cursor:pointer;
  transition:color .12s, border-color .12s, background .12s;
}
.acc-reset:hover{ color:var(--head,#fff); border-color:var(--accent,#6c8cff); background:var(--hover,rgba(255,255,255,.04)); }

/* ---- Mobil: tam genislik bottom-sheet ---- */
@media(max-width:640px){
  .accent-pop{
    width:100% !important; max-width:100% !important;
    left:0 !important; right:0 !important;
    top:auto !important; bottom:0 !important;
    transform:none !important;
    border-radius:18px 18px 0 0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    z-index:10002 !important;
  }
  .acc-sw-grid{ grid-template-columns:repeat(5,1fr); gap:14px; }
  .acc-sw{ min-height:44px; }
}