/* ==========================================================================
   Groyt Özel Bot Paneli (ozelbot.html) — 5 Ekim 2026
   --------------------------------------------------------------------------
   Groyt dashboard'undan ayrı, daha "premium" bir kontrol merkezi: derin siyah
   zemin, cam yüzeyler, ince altın çizgiler, botun kendi banner'ıyla açılan
   başlık. Tek tema (koyu). Renkler token olarak burada; başka dosyaya bağımlı
   değil.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #05060a;
  --bg-2: #0a0b12;
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --gold: #f3c969;
  --gold-hi: #ffe1a3;
  --amber: #ffb300;
  --orange: #ff8f00;
  --gold-line: rgba(243, 201, 105, 0.32);
  --ink: #f3f5fa;
  --ink-2: #b4bcd0;
  --ink-3: #7f88a2;
  --ok: #22c55e;
  --warn: #fbbf24;
  --bad: #ef4444;
  --info: #60a5fa;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: 'Orbitron', 'Segoe UI', sans-serif;
  --body: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
}
@property --cbp-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body.cbp {
  min-height: 100vh; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(255, 143, 0, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(243, 201, 105, 0.07), transparent 60%);
  background-attachment: fixed;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.88em; padding: 1px 6px; border-radius: 5px; background: rgba(255, 179, 0, 0.1); color: var(--gold-hi); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ---- Düğmeler / alanlar ---- */
.cbp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px;
  font: 600 14px var(--body); color: var(--ink); background: var(--glass-2); border: 1px solid var(--line-2); cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s; white-space: nowrap;
}
.cbp-btn:hover { transform: translateY(-1px); border-color: var(--gold-line); color: var(--ink); }
.cbp-btn:disabled { opacity: 0.5; pointer-events: none; }
.cbp-btn.is-gold { color: #1a1408; border-color: transparent; background: linear-gradient(120deg, var(--gold-hi), var(--gold) 45%, var(--amber)); box-shadow: 0 10px 28px -12px rgba(255, 179, 0, 0.9); }
.cbp-btn.is-gold:hover { color: #1a1408; box-shadow: 0 14px 34px -10px rgba(255, 179, 0, 1); }
.cbp-btn.is-ghost { background: transparent; }
.cbp-btn.is-danger { color: #fecaca; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); }
.cbp-btn.is-ok { color: #bbf7d0; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.12); }
.cbp-btn.is-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.cbp-btn.is-lg { padding: 14px 26px; font-size: 16px; border-radius: 14px; }
.cbp-link { background: none; border: 0; color: var(--gold); font: 600 13px var(--body); cursor: pointer; padding: 0; }
.cbp-link:hover { color: var(--gold-hi); }
.cbp-chip-btn { background: rgba(5, 6, 10, 0.7); border: 1px solid var(--line-2); color: var(--ink-2); font: 600 12px var(--body); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.cbp-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cbp-field small { font-weight: 400; color: var(--ink-3); }
.cbp-field input, .cbp-field select, .cbp-field textarea, .cbp-inline-form input, .cbp-search, .cbp-rules input, .cbp-acts input, .cbp-acts select, .cbp-servers select {
  width: 100%; padding: 11px 13px; border-radius: 11px; font: 14px var(--body); color: var(--ink);
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-2); transition: border-color 0.2s, box-shadow 0.2s;
}
.cbp-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.cbp-field input:focus, .cbp-field select:focus, .cbp-field textarea:focus, .cbp-inline-form input:focus, .cbp-search:focus, .cbp-rules input:focus, .cbp-acts input:focus, .cbp-acts select:focus, .cbp-servers select:focus {
  outline: none; border-color: var(--gold-line); box-shadow: 0 0 0 3px rgba(243, 201, 105, 0.12);
}
input[type="range"] { accent-color: var(--amber); padding: 0 !important; background: none !important; border: 0 !important; }
.is-mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace !important; letter-spacing: 0.04em; }
.cbp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cbp-row.is-end { justify-content: flex-end; }
.cbp-msg { font-size: 13px; margin: 0; }
.cbp-msg.is-error { color: #fca5a5; }
.cbp-msg.is-ok { color: #86efac; }
.cbp-muted { color: var(--ink-2); font-size: 14px; }
.cbp-mt { margin-top: 16px; }
.cbp-fine { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.cbp-eyebrow { font: 700 11px/1 var(--display); letter-spacing: 0.24em; color: var(--gold); margin-bottom: 10px; }
.cbp-label { margin: 14px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cbp-badge { padding: 2px 9px; border-radius: 999px; font: 700 11px var(--body); color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--line-2); }
.cbp-badge.is-ok { color: #86efac; border-color: rgba(34, 197, 94, 0.4); }
.cbp-badge.is-warn { color: #fde68a; border-color: rgba(251, 191, 36, 0.4); }
.cbp-seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); flex-wrap: wrap; }
.cbp-seg button { padding: 7px 12px; border: 0; border-radius: 9px; font: 600 13px var(--body); color: var(--ink-2); background: none; cursor: pointer; }
.cbp-seg button.is-on { color: #1a1408; background: linear-gradient(120deg, var(--gold-hi), var(--gold)); }

/* ---- Kartlar ---- */
.cbp-card {
  position: relative; padding: 20px; border-radius: var(--r-l); border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -40px rgba(0, 0, 0, 0.8);
}
.cbp-card + .cbp-card { margin-top: 16px; }
.cbp-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cbp-card-h h2 { font-size: 16px; margin-right: auto; }
.cbp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.cbp-grid-2 > .cbp-card + .cbp-card { margin-top: 0; }

/* ---- Üst çubuk ---- */
.cbp-top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; display: flex; align-items: center; gap: 18px; padding: 12px 22px;
  background: rgba(5, 6, 10, 0.78); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.cbp-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.cbp-brand img { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.4)); }
.cbp-brand b { display: block; font: 800 14px/1.1 var(--display); letter-spacing: 0.12em; }
.cbp-brand small { display: block; font-size: 11px; color: var(--gold); letter-spacing: 0.04em; }
.cbp-switch select { padding: 7px 12px; border-radius: 10px; font: 600 13px var(--body); color: var(--ink); background: var(--glass-2); border: 1px solid var(--gold-line); }
.cbp-toplinks { display: flex; gap: 18px; margin-left: auto; font-size: 13.5px; }
.cbp-toplinks a { color: var(--ink-2); }
.cbp-toplinks a:hover { color: var(--ink); }
.cbp-user { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; }
.cbp-user img { width: 30px; height: 30px; border-radius: 50%; }

/* ---- Yükleniyor / giriş / boş ---- */
.cbp-loading { display: grid; place-items: center; gap: 14px; min-height: 60vh; color: var(--ink-3); text-align: center; }
.cbp-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--gold); animation: cbpSpin 0.9s linear infinite; }
@keyframes cbpSpin { to { transform: rotate(360deg); } }
.cbp-gate { max-width: 1120px; margin: 0 auto; padding: 48px 20px 64px; }
.cbp-gate-card { max-width: 520px; margin: 4vh auto 0; text-align: center; padding: 34px 28px; border-radius: 24px; border: 1px solid var(--gold-line); background: radial-gradient(120% 70% at 50% 0%, rgba(243, 201, 105, 0.18), transparent 60%), var(--bg-2); box-shadow: 0 50px 120px -50px rgba(255, 179, 0, 0.6); }
.cbp-gate-art { width: 150px; height: 150px; margin: 0 auto 18px; border-radius: 26px; box-shadow: 0 20px 50px -20px rgba(255, 179, 0, 0.9); animation: cbpFloat 4s ease-in-out infinite; }
@keyframes cbpFloat { 50% { transform: translateY(-8px); } }
.cbp-gate-card h1 { font-size: 28px; margin-bottom: 10px; }
.cbp-gate-card p { color: var(--ink-2); margin-bottom: 22px; }
.cbp-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 28px; align-items: start; }
.cbp-empty h1 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 10px; }
.cbp-empty-copy > p { color: var(--ink-2); margin-bottom: 22px; max-width: 52ch; }
.cbp-plan-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cbp-plan-row.is-col { flex-direction: column; }
.cbp-plan-mini { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 14px; color: var(--ink); background: var(--glass); border: 1px solid var(--line-2); transition: transform 0.25s var(--ease), border-color 0.25s; }
.cbp-plan-mini:hover { transform: translateY(-2px); border-color: var(--gold-line); color: var(--ink); }
.cbp-plan-mini img { width: 52px; height: 52px; border-radius: 10px; }
.cbp-plan-row.is-col .cbp-plan-mini img { width: 44px; height: 44px; }
.cbp-plan-mini span { display: flex; flex-direction: column; }
.cbp-plan-mini small { font-size: 12px; color: var(--ink-3); }
.cbp-plan-mini.is-hot { border-color: var(--gold-line); background: rgba(243, 201, 105, 0.08); }
.cbp-redeem h2 { font-size: 20px; margin-bottom: 4px; }
.cbp-redeem .cbp-muted { margin-bottom: 16px; }
.cbp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cbp-field.is-wide { grid-column: 1 / -1; }
.cbp-support-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(96, 165, 250, 0.35); background: linear-gradient(100deg, rgba(88, 101, 242, 0.14), rgba(255, 255, 255, 0.02)); }
.cbp-support-strip > span { font-size: 26px; }
.cbp-support-strip p { flex: 1 1 260px; color: var(--ink-2); font-size: 14px; }
.cbp-support-strip b { color: var(--ink); }

/* ---- Uygulama düzeni ---- */
.cbp-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 58px); }
.cbp-side { position: sticky; top: 58px; align-self: start; height: calc(100vh - 58px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(10, 11, 18, 0.9), rgba(5, 6, 10, 0.9)); }
.cbp-botcard { position: relative; overflow: hidden; padding: 14px; border-radius: 16px; border: 1px solid var(--gold-line); background: rgba(0, 0, 0, 0.35); }
.cbp-botcard::before { content: ''; position: absolute; inset: 0; background: var(--bc-banner, linear-gradient(120deg, rgba(243, 201, 105, 0.25), rgba(255, 143, 0, 0.08))) center / cover; opacity: 0.35; filter: blur(2px); }
.cbp-botcard > * { position: relative; }
.cbp-botcard-top { display: flex; align-items: center; gap: 12px; }
.cbp-ava { position: relative; flex: 0 0 auto; }
.cbp-ava img, .cbp-ava .ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.15); }
.cbp-ava .ph { display: grid; place-items: center; font: 900 20px var(--display); color: #1a1408; background: radial-gradient(circle at 30% 30%, #fff3c4, var(--gold) 45%, var(--orange)); }
.cbp-ava .dot { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #0a0b12; background: var(--ink-3); }
.dot.is-running { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.dot.is-busy { background: var(--warn); animation: cbpPulse 1.2s ease-in-out infinite; }
.dot.is-bad { background: var(--bad); }
@keyframes cbpPulse { 50% { opacity: 0.4; } }
.cbp-botcard b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbp-botcard small { color: var(--ink-2); font-size: 12px; }
.cbp-nav { display: flex; flex-direction: column; gap: 2px; }
.cbp-nav button, .cbp-nav a { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: var(--ink-2); font: 500 14px var(--body); text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s; }
.cbp-nav i { width: 22px; font-style: normal; text-align: center; }
.cbp-nav button:hover, .cbp-nav a:hover { background: var(--glass); color: var(--ink); }
.cbp-nav button.is-on { color: #fff; background: linear-gradient(90deg, rgba(243, 201, 105, 0.18), rgba(243, 201, 105, 0.02)); }
.cbp-nav button.is-on::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.cbp-nav .cbp-nav-out { margin-top: 6px; border: 1px dashed var(--gold-line); color: var(--gold-hi); }
.cbp-nav .cbp-nav-out span { margin-left: auto; }
.cbp-nav .is-attn::after { content: ''; position: absolute; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.cbp-help { margin-top: auto; padding: 14px; border-radius: 14px; border: 1px solid rgba(96, 165, 250, 0.3); background: rgba(88, 101, 242, 0.1); }
.cbp-help b { display: block; margin-bottom: 4px; }
.cbp-help p { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.cbp-main { min-width: 0; padding: 26px clamp(18px, 3vw, 40px) 60px; }
.cbp-sec { animation: cbpIn 0.45s var(--ease) both; }
@keyframes cbpIn { from { opacity: 0; transform: translateY(10px); } }
.cbp-sec-h { margin-bottom: 20px; }
.cbp-sec-h h1 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 6px; }
.cbp-sec-h .cbp-muted { max-width: 72ch; }

/* ---- Genel bakış: kahraman ---- */
.cbp-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 28px; border-radius: 24px; margin-bottom: 16px; border: 1px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, conic-gradient(from var(--cbp-a), rgba(243, 201, 105, 0.2), #ffe1a3 60deg, var(--orange) 110deg, rgba(243, 201, 105, 0.2) 170deg, rgba(243, 201, 105, 0.2)) border-box;
  animation: cbpRing 8s linear infinite; }
@keyframes cbpRing { to { --cbp-a: 360deg; } }
.cbp-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hero-banner, url('../img/ozelbot/ozelbot-aylik.webp')) center 30% / cover; opacity: 0.22; filter: saturate(1.2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000); mask-image: linear-gradient(90deg, transparent, #000 40%, #000); }
.cbp-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 0% 50%, rgba(5, 6, 10, 0.95), transparent 70%); }
.cbp-hero-ava img, .cbp-hero-ava .ph { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, 0.12); box-shadow: 0 16px 40px -14px rgba(255, 179, 0, 0.8); }
.cbp-hero-ava .ph { display: grid; place-items: center; font: 900 40px var(--display); color: #1a1408; background: radial-gradient(circle at 30% 30%, #fff3c4, var(--gold) 45%, var(--orange)); }
.cbp-hero h1 { font-size: clamp(24px, 3vw, 34px); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cbp-hero .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.cbp-hero .meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cbp-hero-actions { display: flex; flex-direction: column; gap: 8px; }
.cbp-state { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font: 700 12px var(--body); letter-spacing: 0.02em; background: var(--glass-2); border: 1px solid var(--line-2); }
.cbp-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.cbp-state.is-running { color: #86efac; border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.12); }
.cbp-state.is-running i { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.cbp-state.is-busy { color: #fde68a; border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.1); }
.cbp-state.is-busy i { background: var(--warn); animation: cbpPulse 1.2s infinite; }
.cbp-state.is-bad { color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.1); }
.cbp-state.is-bad i { background: var(--bad); }

.cbp-alerts { display: grid; gap: 10px; margin-bottom: 16px; }
.cbp-alert { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); font-size: 14px; }
.cbp-alert.is-bad { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }
.cbp-alert.is-info { border-color: rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.07); }
.cbp-alert > span { font-size: 20px; }
.cbp-alert p { flex: 1 1 260px; color: var(--ink-2); }
.cbp-alert p b { color: var(--ink); }

.cbp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cbp-kpi { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); }
.cbp-kpi small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cbp-kpi b { display: block; margin-top: 6px; font: 800 24px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cbp-kpi span { font-size: 12.5px; color: var(--ink-2); }
.cbp-meter { height: 6px; margin-top: 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cbp-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--amber)); }
.cbp-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cbp-quick a, .cbp-quick button { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); color: var(--ink); font: 500 13.5px var(--body); text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.cbp-quick a:hover, .cbp-quick button:hover { border-color: var(--gold-line); background: rgba(243, 201, 105, 0.06); color: var(--ink); }
.cbp-quick span { font-size: 18px; }
.cbp-timeline { display: flex; flex-direction: column; }
.cbp-timeline.is-long { max-height: 560px; overflow-y: auto; }
.cbp-ev { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cbp-ev:last-child { border-bottom: 0; }
.cbp-ev i { width: 8px; height: 8px; border-radius: 50%; background: var(--info); }
.cbp-ev.is-warn i { background: var(--warn); }
.cbp-ev.is-error i { background: var(--bad); }
.cbp-ev p { color: var(--ink-2); overflow-wrap: anywhere; }
.cbp-ev time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.cbp-empty-note { color: var(--ink-3); font-size: 13.5px; padding: 10px 0; }

/* ---- Kurulum adımları ---- */
.cbp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: st; }
.cbp-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.cbp-step.is-done { border-color: rgba(34, 197, 94, 0.3); }
.cbp-step.is-current { border-color: var(--gold-line); background: linear-gradient(110deg, rgba(243, 201, 105, 0.1), rgba(255, 255, 255, 0.02)); box-shadow: 0 20px 60px -40px rgba(255, 179, 0, 0.9); }
.cbp-step-n { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font: 800 18px var(--display); color: var(--gold); background: rgba(243, 201, 105, 0.08); border: 1px solid var(--gold-line); }
.cbp-step.is-done .cbp-step-n { color: #052e16; background: var(--ok); border-color: transparent; }
.cbp-step h3 { font-size: 17px; margin-bottom: 4px; }
.cbp-step p { color: var(--ink-2); font-size: 14px; margin-bottom: 12px; }
.cbp-step ul { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.cbp-intents { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.cbp-intent { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: 13px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); }
.cbp-intent.is-ok { color: #86efac; border-color: rgba(34, 197, 94, 0.4); }
.cbp-intent.is-bad { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
.cbp-token-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cbp-token-row input { flex: 1 1 280px; padding: 11px 13px; border-radius: 11px; font: 14px ui-monospace, Consolas, monospace; color: var(--ink); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line-2); }
.cbp-safe { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }

/* ---- Kimlik / durum önizlemesi ---- */
.cbp-identity { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 18px; align-items: start; }
.cbp-preview-col { position: sticky; top: 80px; }
.cbp-preview-label { margin-bottom: 10px; font: 700 11px var(--display); letter-spacing: 0.2em; color: var(--ink-3); }
.cbp-banner-edit { position: relative; height: 140px; margin: -20px -20px 0; border-radius: var(--r-l) var(--r-l) 0 0; overflow: hidden; background: linear-gradient(120deg, rgba(243, 201, 105, 0.25), rgba(255, 143, 0, 0.1)); }
.cbp-banner-edit img { width: 100%; height: 100%; object-fit: cover; }
.cbp-banner-edit .cbp-chip-btn { position: absolute; left: 12px; top: 12px; }
.cbp-upload { cursor: pointer; }
.cbp-upload.is-banner { position: absolute; right: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px; font: 600 12.5px var(--body); background: rgba(5, 6, 10, 0.75); border: 1px solid var(--line-2); }
.cbp-avatar-edit { position: relative; width: 104px; margin: -52px 0 14px 16px; }
.cbp-avatar-edit img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 6px solid var(--bg-2); background: #111; }
.cbp-upload.is-avatar { position: absolute; right: 2px; bottom: 6px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1408; border: 3px solid var(--bg-2); }

/* Discord profil kartı (önizleme) */
.dc-profile { width: 100%; max-width: 360px; border-radius: 16px; overflow: hidden; background: #111214; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); font-family: 'gg sans', 'Noto Sans', 'Segoe UI', sans-serif; }
.dc-profile .b { height: 110px; background: linear-gradient(120deg, #6b4a00, #3a2a00) center / cover; }
.dc-profile .body { position: relative; padding: 0 16px 16px; }
.dc-profile .av { position: relative; width: 84px; height: 84px; margin-top: -42px; }
.dc-profile .av img, .dc-profile .av .ph { width: 84px; height: 84px; border-radius: 50%; border: 6px solid #111214; object-fit: cover; }
.dc-profile .av .ph { display: grid; place-items: center; font: 900 30px var(--display); color: #1a1408; background: radial-gradient(circle at 30% 30%, #fff3c4, var(--gold) 45%, var(--orange)); }
.dc-profile .av .st { position: absolute; right: 2px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #111214; }
.st-online { background: #23a55a; } .st-idle { background: #f0b232; } .st-dnd { background: #f23f43; } .st-invisible { background: #80848e; }
.dc-profile .bubble { position: absolute; left: 108px; top: 8px; max-width: calc(100% - 124px); padding: 8px 12px; border-radius: 14px; font-size: 12.5px; color: #dbdee1; background: #232428; overflow-wrap: anywhere; }
.dc-profile .bubble::before { content: ''; position: absolute; left: -6px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #232428; }
.dc-profile .nm { margin-top: 10px; font-size: 19px; font-weight: 700; color: #f2f3f5; display: flex; align-items: center; gap: 8px; }
.dc-profile .tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #5865f2; color: #fff; }
.dc-profile .hd { font-size: 13px; color: #b5bac1; }
.dc-profile .sep { height: 1px; margin: 12px 0; background: #2e3035; }
.dc-profile .lb { margin: 10px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: #b5bac1; }
.dc-profile .ab { font-size: 13.5px; color: #dbdee1; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-profile .act { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: #1e1f22; }
.dc-profile .act .ic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; border-radius: 10px; background: #2b2d31; }
.dc-profile .act b { display: block; font-size: 13.5px; color: #f2f3f5; overflow-wrap: anywhere; }
.dc-profile .act small { font-size: 12px; color: #b5bac1; }

/* Durum öğeleri */
.cbp-status-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cbp-status-pick button { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; font: 600 13px var(--body); color: var(--ink-2); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); cursor: pointer; }
.cbp-status-pick button i { width: 12px; height: 12px; border-radius: 50%; }
.cbp-status-pick button.is-on { color: var(--ink); border-color: var(--gold-line); background: rgba(243, 201, 105, 0.1); }
.cbp-acts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cbp-act { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.cbp-act.is-current { border-color: var(--gold-line); }
.cbp-act .url { grid-column: 2 / 3; }
.cbp-act .tools { display: flex; gap: 4px; }
.cbp-act .tools button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--glass); color: var(--ink-2); cursor: pointer; }
.cbp-act .tools button:hover { color: var(--ink); border-color: var(--gold-line); }

/* Özelleştirme */
.cbp-colors { display: grid; gap: 10px; margin-bottom: 14px; }
.cbp-color { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); cursor: pointer; }
.cbp-color input { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.cbp-color span { display: flex; flex-direction: column; }
.cbp-color small { color: var(--ink-3); font-size: 12px; }
.cbp-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0; font-size: 12.5px; color: var(--ink-3); }
.cbp-presets button { padding: 5px 10px; border-radius: 999px; font: 600 12px var(--body); color: var(--ink-2); background: var(--glass); border: 1px solid var(--line-2); cursor: pointer; }
.cbp-presets button:hover { color: var(--ink); border-color: var(--gold-line); }
.cbp-rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cbp-rule { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.cbp-rule .arrow { text-align: center; color: var(--gold); }
.cbp-rule .scopes { display: flex; gap: 4px; flex-wrap: wrap; }
.cbp-rule .scopes label, .cbp-checks label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; font-size: 12px; color: var(--ink-2); background: var(--glass); border: 1px solid var(--line); cursor: pointer; user-select: none; }
.cbp-rule .scopes input, .cbp-checks input { accent-color: var(--amber); margin: 0; }
.cbp-rule .del { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08); color: #fca5a5; cursor: pointer; }
.cbp-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cbp-savebar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 12px; width: fit-content; max-width: 100%; margin: 16px 0 0 auto; padding: 10px 12px; border-radius: 16px; background: rgba(10, 11, 18, 0.92); border: 1px solid var(--gold-line); backdrop-filter: blur(12px); }

/* Discord mesajı (renk önizlemesi) */
.dc-msg { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: #313338; font-family: 'gg sans', 'Noto Sans', 'Segoe UI', sans-serif; }
.dc-msg .head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #f2f3f5; font-weight: 600; }
.dc-msg .head img, .dc-msg .head .ph { width: 32px; height: 32px; border-radius: 50%; }
.dc-msg .head .ph { display: grid; place-items: center; font: 800 13px var(--display); color: #1a1408; background: var(--gold); }
.dc-msg .tag { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; }
.dc-msg .content { font-size: 14px; color: #dbdee1; }
.dc-embed { display: grid; gap: 4px; padding: 10px 14px; border-radius: 4px; background: #2b2d31; border-left: 4px solid var(--emb, #ffc107); font-size: 13.5px; color: #dbdee1; }
.dc-embed b { color: #f2f3f5; }
.dc-embed small { color: #949ba4; font-size: 12px; }

/* Emoji stüdyosu */
.cbp-search { margin-bottom: 14px; }
.cbp-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cbp-emoji { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.cbp-emoji img { width: 40px; height: 40px; object-fit: contain; }
.cbp-emoji code { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbp-emoji label { font-size: 12px; color: var(--gold); cursor: pointer; }
.cbp-emoji.is-missing { opacity: 0.6; }

/* Sunucular */
.cbp-servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.cbp-server { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.cbp-server-top { display: flex; align-items: center; gap: 12px; }
.cbp-server-top img, .cbp-server-top .ph { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.cbp-server-top .ph { display: grid; place-items: center; font: 800 16px var(--display); color: #1a1408; background: linear-gradient(135deg, var(--gold-hi), var(--amber)); }
.cbp-server-top b { display: block; font-size: 15px; }
.cbp-server-top small { color: var(--ink-3); font-size: 12.5px; }
.cbp-server .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cbp-server.is-empty { align-items: center; justify-content: center; text-align: center; min-height: 220px; border-style: dashed; border-color: var(--gold-line); }
.cbp-server.is-empty span { font-size: 30px; }
.cbp-server.is-empty p { color: var(--ink-2); font-size: 14px; }
.cbp-server .groyt-warn { padding: 9px 11px; border-radius: 10px; font-size: 12.5px; color: #fde68a; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.3); }

/* Paket */
.cbp-plan-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; }
.cbp-plan-card img { width: 120px; height: 120px; border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(255, 179, 0, 0.9); }
.cbp-plan-card h2 { font: 800 24px var(--display); }
.cbp-plan-card .left { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.cbp-plan-card .left b { color: var(--ink); }
.cbp-plan-card .bar { height: 8px; margin-top: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cbp-plan-card .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--gold), var(--orange)); }
.cbp-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.cbp-inline-form input { flex: 1 1 160px; width: auto; }
.cbp-or { font-size: 12px; color: var(--ink-3); }

/* Bildirim + onay */
.cbp-toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; max-width: min(420px, calc(100vw - 40px)); padding: 13px 16px; border-radius: 14px; font-size: 14px; background: #0f1119; border: 1px solid var(--gold-line); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9); animation: cbpIn 0.3s var(--ease); }
.cbp-toast.is-error { border-color: rgba(239, 68, 68, 0.5); }
.cbp-toast.is-ok { border-color: rgba(34, 197, 94, 0.5); }
.cbp-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 10, 0.75); backdrop-filter: blur(6px); }
.cbp-modal-card { width: min(460px, 100%); display: grid; gap: 14px; padding: 22px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--gold-line); }
.cbp-modal-card #cbpModalText { color: var(--ink-2); font-size: 14px; }
.cbp-modal-card #cbpModalText b { color: var(--ink); }

/* ---- Duyarlı ---- */
@media (max-width: 1100px) {
  .cbp-identity { grid-template-columns: minmax(0, 1fr); }
  .cbp-preview-col { position: static; }
  .cbp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cbp-toplinks { display: none; }
  .cbp-app { grid-template-columns: minmax(0, 1fr); }
  .cbp-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .cbp-nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .cbp-nav button, .cbp-nav a { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .cbp-nav button.is-on::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 3px; }
  .cbp-help { display: none; }
  .cbp-grid-2, .cbp-empty { grid-template-columns: minmax(0, 1fr); }
  .cbp-hero { grid-template-columns: auto minmax(0, 1fr); }
  .cbp-hero-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .cbp-top { padding: 10px 14px; gap: 10px; }
  .cbp-user span { display: none; }
  .cbp-main { padding: 18px 16px 48px; }
  .cbp-hero { padding: 18px; gap: 14px; }
  .cbp-hero-ava img, .cbp-hero-ava .ph { width: 72px; height: 72px; }
  .cbp-kpis, .cbp-quick, .cbp-fields, .cbp-status-pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cbp-act { grid-template-columns: minmax(0, 1fr); }
  .cbp-act .url { grid-column: auto; }
  .cbp-rule { grid-template-columns: minmax(0, 1fr); }
  .cbp-rule .arrow { display: none; }
  .cbp-plan-card { grid-template-columns: 80px minmax(0, 1fr); }
  .cbp-plan-card img { width: 80px; height: 80px; }
  .cbp-step { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cbp-hero, .cbp-gate-art, .cbp-spinner, .dot.is-busy, .cbp-state.is-busy i { animation: none; }
  .cbp-sec, .cbp-toast { animation: none; }
}