/* ============== CPN – Minimal, modern clientarea skin ==============
   Tema Renkleri
   ------------------------------------------------------------------ */
:root {
  --cpn-primary: #316fa2;
  --cpn-primary-600: #285b86;
  --cpn-primary-50: #f2f7fb;
  --cpn-bg: #ffffff;
  --cpn-text: #0f172a;
  --cpn-muted: #6b7280;
  --cpn-border: #e5e7eb;
  --cpn-shadow: 0 6px 24px rgba(3, 30, 53, .08);

  --cpn-success: #16a34a;
  --cpn-warning: #f59e0b;
  --cpn-danger:  #ef4444;
  --cpn-info:    #0369a1;
}

.cpn-skin {
  color: var(--cpn-text);
  background: var(--cpn-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cpn-skin, .cpn-skin * {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.cpn-h1, .cpn-h2, .cpn-h3 { line-height:1.2; font-weight:700; letter-spacing:-.02em; }
.cpn-h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.cpn-h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.6rem); }
.cpn-h3 { font-size: 1.125rem; font-weight:600; }
.cpn-muted { color: var(--cpn-muted); }

.cpn-container { max-width: 1140px; margin: 0 auto; padding: 16px; }
.cpn-grid { display: grid; gap: 16px; }
@media (min-width: 992px) { .cpn-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.cpn-card {
  background: #fff;
  border: 1px solid var(--cpn-border);
  border-radius: 14px;
  box-shadow: var(--cpn-shadow);
  overflow: hidden;
}
.cpn-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background: var(--cpn-primary-50);
  border-bottom:1px solid var(--cpn-border);
}
.cpn-card-title { font-weight:700; color: var(--cpn-primary-600); }
.cpn-card-content { padding:16px 18px; }

.cpn-btn {
  --cpn-btn-bg: var(--cpn-primary);
  --cpn-btn-bg-hover: var(--cpn-primary-600);
  --cpn-btn-text: #fff;
  appearance:none; border:0; outline:0; cursor:pointer;
  padding:10px 14px; border-radius:10px;
  background:var(--cpn-btn-bg); color:var(--cpn-btn-text);
  font-weight:600; line-height:1;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 6px 18px rgba(49,111,162,.25);
}
.cpn-btn:hover { background: var(--cpn-btn-bg-hover); transform: translateY(-1px); }
.cpn-btn:active { transform: translateY(0); box-shadow:0 3px 10px rgba(49,111,162,.25); }
.cpn-btn--ghost { --cpn-btn-bg:transparent; --cpn-btn-text:var(--cpn-primary); border:1px solid var(--cpn-primary); box-shadow:none; }
.cpn-btn--light { --cpn-btn-bg:#fff; --cpn-btn-text:var(--cpn-primary); border:1px solid var(--cpn-border); }

.cpn-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.78rem; border:1px solid transparent; white-space:nowrap; }
.cpn-badge--success { color:#065f46; background:#ecfdf5; border-color:#a7f3d0; }
.cpn-badge--warning { color:#78350f; background:#fffbeb; border-color:#fde68a; }
.cpn-badge--danger  { color:#7f1d1d; background:#fef2f2; border-color:#fecaca; }
.cpn-badge--info    { color:#0c4a6e; background:#f0f9ff; border-color:#bae6fd; }

.cpn-table-wrap { width:100%; overflow:auto; }
.cpn-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem; border:1px solid var(--cpn-border); border-radius:12px; overflow:hidden; }
.cpn-table thead th { position:sticky; top:0; z-index:1; background:var(--cpn-primary-50); color:#0b2540; text-align:left; padding:12px 14px; border-bottom:1px solid var(--cpn-border); }
.cpn-table tbody td { padding:12px 14px; border-bottom:1px solid var(--cpn-border); }
.cpn-table tbody tr:hover { background:#fafcff; }
.cpn-table .cpn-cell-right { text-align:right; }

.cpn-input, .cpn-select, .cpn-textarea { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--cpn-border); background:#fff; color:var(--cpn-text); transition:border-color .18s ease, box-shadow .18s ease; }
.cpn-input:focus, .cpn-select:focus, .cpn-textarea:focus { border-color:var(--cpn-primary); box-shadow:0 0 0 4px rgba(49,111,162,.15); outline:none; }
.cpn-help { font-size:.85rem; color:var(--cpn-muted); }

.cpn-alert { border-radius:12px; padding:12px 14px; border:1px solid var(--cpn-border); display:flex; gap:10px; align-items:flex-start; background:#fff; }
.cpn-alert--info    { border-color:#bae6fd; background:#f0f9ff; color:#0c4a6e; }
.cpn-alert--success { border-color:#a7f3d0; background:#ecfdf5; color:#065f46; }
.cpn-alert--warning { border-color:#fde68a; background:#fffbeb; color:#78350f; }
.cpn-alert--danger  { border-color:#fecaca; background:#fef2f2; color:#7f1d1d; }

.cpn-progress { height:10px; background:#f3f4f6; border-radius:999px; overflow:hidden; border:1px solid var(--cpn-border); }
.cpn-progress > span { display:block; height:100%; width:0; background:var(--cpn-primary); transition: width .4s ease; }

@keyframes cpn-soft-pop { 0%{ transform:scale(.98); opacity:.6 } 100%{ transform:scale(1); opacity:1 } }
.cpn-animate-pop { animation: cpn-soft-pop .18s ease-out both; }

@keyframes cpn-pulse { 0%{ box-shadow:0 0 0 0 rgba(49,111,162,.35) } 100%{ box-shadow:0 0 0 16px rgba(49,111,162,0) } }
.cpn-pulse { position:relative; }
.cpn-pulse::after { content:""; position:absolute; inset:0; border-radius:inherit; animation: cpn-pulse 1.8s ease-out infinite; }

.cpn-ribbon { position:relative; padding-left:12px; }
.cpn-ribbon::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:3px; background:linear-gradient(180deg, var(--cpn-primary), #7bb4db); }

.cpn-flex { display:flex; gap:10px; align-items:center; }
.cpn-justify-between { justify-content:space-between; }
.cpn-gap-2 { gap:8px; } .cpn-gap-3 { gap:12px; }
.cpn-mt-2 { margin-top:8px; } .cpn-mt-3 { margin-top:12px; } .cpn-mb-3 { margin-bottom:12px; }
.cpn-pill { border-radius:999px; }
.cpn-hide { display:none !important; }

.cpn-iconbtn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#eef5fb; color:var(--cpn-primary-600); border:1px solid var(--cpn-border); }

/* Legacy classes in scope */
.cpn-skin .card { background:#fff; border:1px solid var(--cpn-border); border-radius:14px; box-shadow:var(--cpn-shadow); overflow:hidden; }
.cpn-skin .card-header { padding:16px 18px; background:var(--cpn-primary-50); border-bottom:1px solid var(--cpn-border); }
.cpn-skin .card-title { color:var(--cpn-primary-600); font-weight:700; }
.cpn-skin .card-content { padding:16px 18px; }
.cpn-skin .btable { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--cpn-border); border-radius:12px; overflow:hidden; }
.cpn-skin .btable thead th { background:var(--cpn-primary-50); padding:12px 14px; border-bottom:1px solid var(--cpn-border); }
.cpn-skin .btable tbody td { padding:12px 14px; border-bottom:1px solid var(--cpn-border); }
.cpn-skin .btable tr:hover { background:#fafcff; }
.cpn-skin .btn { background:var(--cpn-primary); color:#fff; border:0; border-radius:10px; padding:10px 14px; font-weight:600; }
.cpn-skin .btn:hover { background:var(--cpn-primary-600); }

.cpn-status { font-weight:700; }