/* ==========================================================================
   Groyt Dashboard — 🌟 Yıldız Panosu + 📝 Başvurular (20 Ekim 2026)
   İtiraf sekmesinin kart düzenini (hp-* / cf-*) kullanır; yıldız kehribar,
   başvuru mavi vurgulu.
   ========================================================================== */
#dashSettings .sbd .hp-hero {
  background: linear-gradient(120deg, rgba(255, 193, 7, 0.09), rgba(255, 193, 7, 0.01) 55%), var(--k-bg-2, #111318);
  border-color: rgba(255, 193, 7, 0.28);
  box-shadow: 0 24px 60px -40px rgba(255, 193, 7, 0.45);
}
#dashSettings .sbd .hp-card-icon { background: rgba(255, 193, 7, 0.08); border-color: rgba(255, 193, 7, 0.25); }
#dashSettings .sbd .hp-stat-num.is-on { color: #ffd54f; }
#dashSettings .sbd .hp-check:has(input:checked) { border-color: rgba(255, 193, 7, 0.45); background: rgba(255, 193, 7, 0.06); }
#dashSettings .sbd .hp-check input { accent-color: #ffc107; }
#dashSettings .sbd .cf-item-body { border-left-color: rgba(255, 193, 7, 0.5); }
#dashSettings .sbd #sbPreview { border-left-color: #ffc107; }
#dashSettings .sb-emoji-field { display: flex; gap: 8px; align-items: stretch; }
#dashSettings .sb-emoji-field .form-input { flex: 1; min-width: 0; }
#dashSettings .sb-emoji-current {
  flex: none; width: 44px; display: grid; place-items: center; border-radius: 10px; cursor: var(--c-link);
  border: 1px solid var(--k-line, #22252D); background: rgba(255, 255, 255, 0.03); font-size: 20px; color: inherit;
}
#dashSettings .sb-emoji-current:hover, #dashSettings .sb-emoji-current[aria-expanded="true"] { border-color: rgba(255, 193, 7, 0.55); background: rgba(255, 193, 7, 0.08); }
#dashSettings .sb-emoji-current img.hp-emo { width: 22px; height: 22px; }
#dashSettings .sb-emoji-box {
  display: grid; gap: 8px; padding: 10px; border-radius: 12px; margin-bottom: 14px;
  background: #1e1f22; border: 1px solid rgba(255, 255, 255, 0.1);
}
#dashSettings .sb-emoji-box[hidden] { display: none; }
#dashSettings .sb-emoji-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#dashSettings .sb-emoji-search { flex: 1 1 200px; margin: 0; }
#dashSettings .sb-emoji-tabs { display: flex; gap: 4px; }
#dashSettings .sb-emoji-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--k-line, #22252D); background: transparent; color: var(--k-text-2, #B8BDC8); font: inherit; font-size: 13px; cursor: var(--c-link); }
#dashSettings .sb-emoji-tab.is-active { border-color: #ffc107; color: #fff; background: rgba(255, 193, 7, 0.12); }
#dashSettings .sb-emoji-body { max-height: 260px; overflow-y: auto; display: grid; gap: 6px; align-content: start; }
#dashSettings .sb-emoji-title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #b5bac1; margin-top: 2px; }
#dashSettings .sb-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; }
#dashSettings .sb-emoji-cell { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 22px; cursor: var(--c-link); }
#dashSettings .sb-emoji-cell:hover { background: rgba(255, 255, 255, 0.08); }
#dashSettings .sb-emoji-cell.is-selected { border-color: #ffc107; background: rgba(255, 193, 7, 0.12); }
#dashSettings .sb-emoji-cell:focus-visible { outline: 2px solid #ffc107; outline-offset: 1px; }
#dashSettings .sb-emoji-cell img { width: 26px; height: 26px; object-fit: contain; }
#dashSettings .sb-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--k-line, #22252D); }
#dashSettings .sb-top-rank { min-width: 28px; font-weight: 700; }
#dashSettings .sb-top-name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--k-text, #F5F6F8); font-weight: 600; }
#dashSettings .sbd #sbAlert[data-tone="error"], #dashSettings .apd #apAlert[data-tone="error"] { border-color: rgba(237, 66, 69, 0.45); color: #ffb3b4; }
#dashSettings .sbd #sbAlert[data-tone="success"], #dashSettings .apd #apAlert[data-tone="success"] { border-color: rgba(59, 165, 93, 0.45); color: #a6e3b8; }

/* Başvurular */
#dashSettings .apd .hp-hero {
  background: linear-gradient(120deg, rgba(88, 101, 242, 0.1), rgba(88, 101, 242, 0.01) 55%), var(--k-bg-2, #111318);
  border-color: rgba(88, 101, 242, 0.3);
  box-shadow: 0 24px 60px -40px rgba(88, 101, 242, 0.5);
}
#dashSettings .apd .hp-card-icon { background: rgba(88, 101, 242, 0.08); border-color: rgba(88, 101, 242, 0.25); }
#dashSettings .apd .hp-stat-num { font-variant-numeric: tabular-nums; }
#dashSettings .apd .hp-check:has(input:checked) { border-color: rgba(88, 101, 242, 0.45); background: rgba(88, 101, 242, 0.06); }
#dashSettings .apd .hp-check input { accent-color: #5865f2; }
#dashSettings .apd .cf-item-body { border-left-color: rgba(88, 101, 242, 0.5); }
#dashSettings .apd #apPanelPreview { border-left-color: #5865f2; }

#dashSettings .ap-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; margin-bottom: 12px; }
#dashSettings .ap-form-card {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; text-align: left; cursor: var(--c-link);
  border: 1px solid var(--k-line, #22252D); background: rgba(255, 255, 255, 0.015); color: inherit; font: inherit; min-width: 0;
  transition: border-color .15s, background .15s;
}
#dashSettings .ap-form-card:hover { border-color: rgba(88, 101, 242, 0.4); }
#dashSettings .ap-form-card.is-active { border-color: #5865f2; background: rgba(88, 101, 242, 0.08); }
#dashSettings .ap-form-card:focus-visible { outline: 2px solid #5865f2; outline-offset: 2px; }
#dashSettings .ap-form-emoji { font-size: 22px; line-height: 1; }
#dashSettings .ap-form-emoji img.hp-emo { width: 24px; height: 24px; }
#dashSettings .ap-form-main { display: grid; gap: 2px; min-width: 0; }
#dashSettings .ap-form-main strong { color: var(--k-text, #F5F6F8); overflow-wrap: anywhere; }
#dashSettings .ap-form-main small { color: var(--k-text-3, #8A90A0); font-size: 12px; }
#dashSettings .ap-new { width: auto; min-width: 220px; flex: 1 1 220px; max-width: 360px; }

#dashSettings .ap-editor { display: grid; gap: 16px; }
#dashSettings .ap-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 8px; z-index: 5; backdrop-filter: blur(8px); }
#dashSettings .ap-savebar strong { font: 700 16px var(--k-display, sans-serif); color: var(--k-text, #F5F6F8); }
#dashSettings .ap-savebar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#dashSettings #apDirty.is-dirty { color: #ffd54f; }

#dashSettings .ap-questions { display: grid; gap: 10px; align-content: start; min-width: 0; }
#dashSettings .ap-q { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--k-line, #22252D); background: rgba(255, 255, 255, 0.015); }
#dashSettings .ap-q-head { display: flex; align-items: center; gap: 8px; }
#dashSettings .ap-q-head .form-input { flex: 1; min-width: 0; font-weight: 600; }
#dashSettings .ap-q-no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(88, 101, 242, 0.14); color: #c7ccff; font-weight: 700; font-size: 13px; flex: none; }
#dashSettings .ap-q-tools { display: flex; gap: 2px; flex: none; }
#dashSettings .ap-q-tools .btn { padding: 2px 4px; min-width: 0; font-size: 13px; }
#dashSettings .ap-q-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-left: 34px; }
#dashSettings .ap-q-line .form-select { width: auto; flex: 1 1 160px; max-width: 220px; }
#dashSettings .ap-q-req { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--k-text-2, #B8BDC8); cursor: var(--c-link); }
#dashSettings .ap-q-req input { accent-color: #5865f2; }
#dashSettings .ap-q-more { padding-left: 34px; }
#dashSettings .ap-q-more summary { cursor: var(--c-link); font-size: 12px; color: var(--k-text-3, #8A90A0); }
#dashSettings .ap-q-more[open] { display: grid; gap: 8px; }
#dashSettings .ap-qsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 260px); gap: 16px; align-items: start; }
#dashSettings .ap-qsplit .hp-split-preview { position: sticky; top: 72px; }
#dashSettings .apd .hp-hero { grid-template-columns: minmax(0, 1fr); }
#dashSettings .apd .hp-stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
#dashSettings .sbd .hp-hero { grid-template-columns: minmax(0, 1fr); }
#dashSettings .sbd .hp-hero-toggle { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--k-line, #22252D); }
#dashSettings .sbd .hp-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
#dashSettings .apd .hp-split, #dashSettings .sbd .hp-split { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
#dashSettings .apd .hp-split-preview, #dashSettings .sbd .hp-split-preview { position: static; }
@media (max-width: 900px) { #dashSettings .ap-qsplit { grid-template-columns: minmax(0, 1fr); } #dashSettings .ap-qsplit .hp-split-preview { position: static; } }
#dashSettings .ap-page-sep { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-3, #8A90A0); padding-top: 4px; }

#dashSettings .ap-image { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#dashSettings .ap-image-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--k-line, #22252D); }
#dashSettings .ap-prev-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; }

/* Discord penceresi önizlemesi */
#dashSettings .ap-modal { background: #313338; border-radius: 10px; overflow: hidden; color: #dbdee1; box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 0.8); }
#dashSettings .ap-m-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; font-weight: 700; color: #f2f3f5; }
#dashSettings .ap-m-head img { width: 22px; height: 22px; border-radius: 50%; }
#dashSettings .ap-m-x { margin-left: auto; color: #b5bac1; font-weight: 400; }
#dashSettings .ap-m-body { display: grid; gap: 14px; padding: 10px 16px 16px; }
#dashSettings .ap-m-label { font-size: 13px; font-weight: 600; color: #f2f3f5; margin-bottom: 6px; overflow-wrap: anywhere; }
#dashSettings .ap-m-req { color: #f23f43; margin-left: 3px; }
#dashSettings .ap-m-input, #dashSettings .ap-m-select { background: #1e1f22; border-radius: 6px; padding: 9px 10px; font-size: 13px; color: #87898c; min-height: 18px; overflow-wrap: anywhere; }
#dashSettings .ap-m-input.is-tall { min-height: 60px; }
#dashSettings .ap-m-select { display: flex; justify-content: space-between; gap: 8px; }
#dashSettings .ap-m-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; background: #2b2d31; font-size: 13px; font-weight: 600; }
#dashSettings .ap-m-cancel { padding: 8px 14px; color: #f2f3f5; }
#dashSettings .ap-m-submit { padding: 8px 16px; border-radius: 4px; background: #5865f2; color: #fff; }
#dashSettings .ap-modal-pager { display: flex; justify-content: space-between; margin-top: 8px; }

/* Gelen kutusu */
#dashSettings .ap-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#dashSettings .ap-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--k-line, #22252D); background: transparent; color: var(--k-text-2, #B8BDC8); font: inherit; font-size: 13px; cursor: var(--c-link); }
#dashSettings .ap-tab.is-active { border-color: #5865f2; color: #fff; background: rgba(88, 101, 242, 0.14); }
#dashSettings .ap-details summary { cursor: var(--c-link); color: var(--k-text-2, #B8BDC8); font-size: 13px; margin-bottom: 6px; }
#dashSettings .ap-ans { display: grid; gap: 4px; margin: 8px 0; }
#dashSettings .ap-ans b { font-size: 13px; color: var(--k-text, #F5F6F8); }
#dashSettings .ap-notes { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--k-text-2, #B8BDC8); }
#dashSettings .apd .hp-rec-act.is-ok, #dashSettings .sbd .hp-rec-act.is-ok { border-color: rgba(59, 165, 93, 0.4); background: rgba(59, 165, 93, 0.08); color: #8fe0a9; }

@media (max-width: 640px) {
  #dashSettings .ap-savebar { position: static; }
  #dashSettings .ap-new { max-width: none; }
  #dashSettings .ap-q-head { flex-wrap: wrap; }
}