/* Creator Network UI Kit - Premium Dark */
:root{
  --bg:#0b0b10;
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --border:rgba(255,255,255,.10);
  --accent:#7c5cff;
  --accent2:#35d0ff;
  --radius:20px;
  --shadow:0 12px 50px rgba(0,0,0,.45);
  --danger:#ff4d6d;
  --ok:#20c997;
  --warn:#ffd166;
  --card:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(53,208,255,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:14px;font-weight:700;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  transition:.25s; cursor:pointer;
}
.btn:hover{transform:translateY(-1px);background: rgba(255,255,255,.06)}
.btn.primary{
  border:none;
  background: linear-gradient(135deg, var(--accent), #5a7dff);
  box-shadow: 0 16px 50px rgba(124,92,255,.25);
}
.btn.danger{border:1px solid rgba(255,77,109,.35);background:rgba(255,77,109,.08)}
.btn.ghost{background:transparent}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  font-size:12px;color:var(--muted);
  white-space:nowrap;
}
.tag{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  font-size:12px;color:#fff;
  white-space:nowrap;
}
.tag.ok{border-color: rgba(32,201,151,.35); background: rgba(32,201,151,.10)}
.tag.warn{border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.10)}
.tag.danger{border-color: rgba(255,77,109,.35); background: rgba(255,77,109,.10)}

.dot{width:10px;height:10px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent2))}

.field label{font-size:13px;color:var(--muted2)}
.field input,.field textarea,.field select{
  width:100%;
  padding:12px 12px;border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:#fff; outline:none;
  margin-top:8px;
}
.field textarea{min-height:110px;resize:vertical}
.hint{font-size:12px;color:var(--muted2);margin-top:8px}

/* App shell */
.app{display:grid;grid-template-columns:290px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;align-self:start;height:100vh;
  border-right:1px solid var(--border);
  background: rgba(11,11,16,.55);
  backdrop-filter: blur(10px);
  padding:18px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px;padding:10px 10px;margin-bottom:10px}
.nav{display:grid;gap:8px;margin-top:12px}
.nav a{
  padding:12px 12px;border-radius:14px;
  color:var(--muted);
  border:1px solid transparent;
  background: rgba(255,255,255,.01);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.nav a:hover{background: rgba(255,255,255,.03);color:#fff}
.nav a.active{background: rgba(124,92,255,.14);border-color: rgba(124,92,255,.22);color:#fff}
.count{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.mini{color:var(--muted2);font-size:12px;margin:10px 10px 16px}
.main{padding:18px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:10px 0 18px;
}
.search{
  flex:1;max-width:720px;
  display:flex;gap:10px;align-items:center;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius:14px;
  padding:10px 12px;
}
.search input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:14px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:14px}
.grid.kpis{grid-template-columns:repeat(4, minmax(0,1fr))}
.grid.two{grid-template-columns: 1.25fr .75fr}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
@media(max-width:1120px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .grid.kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
}

.kpi h3{font-size:12px;color:var(--muted2);font-weight:800;margin-bottom:8px}
.kpi .value{font-size:26px;font-weight:900;letter-spacing:-.6px}
.kpi .meta{margin-top:8px;color:var(--muted);font-size:13px}

.sectionTitle{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.sectionTitle h2{font-size:18px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.select{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius:14px;
  padding:10px 12px;
  color:#fff; outline:none;
  font-size:14px;
}

table{width:100%;border-collapse:separate;border-spacing:0 10px}
th{text-align:left;font-size:12px;color:var(--muted2);font-weight:800;padding:0 12px 6px}
td{
  padding:14px 12px;
  background: rgba(255,255,255,.02);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:14px;
}
tr td:first-child{border-left:1px solid var(--border);border-radius:16px 0 0 16px;color:#fff}
tr td:last-child{border-right:1px solid var(--border);border-radius:0 16px 16px 0}
.status{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;color:#fff;background: rgba(255,255,255,.02);
  white-space:nowrap;
}
.status.ok{border-color: rgba(32,201,151,.35); background: rgba(32,201,151,.10)}
.status.warn{border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.10)}
.status.danger{border-color: rgba(255,77,109,.35); background: rgba(255,77,109,.10)}

.list{display:grid;gap:10px;margin-top:10px}
.item{
  padding:14px;border-radius:16px;border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;
}
.item b{display:block}
.item small{display:block;color:var(--muted);margin-top:4px}

/* Auth pages */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.authWrap{width:min(980px, 100%);display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}
@media(max-width:980px){ .authWrap{grid-template-columns:1fr} }
h1.big{font-size:34px;letter-spacing:-.8px;line-height:1.1}
.sub{color:var(--muted);margin-top:10px;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){ .row2{grid-template-columns:1fr} }
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);border:1px solid var(--border);background: rgba(255,255,255,.02);padding:14px;border-radius:16px}
.consent input{width:auto;margin-top:2px}
.drop{margin-top:10px;border:1px dashed rgba(255,255,255,.22);background: rgba(255,255,255,.02);border-radius:16px;padding:16px}


/* Light theme */
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --text:#0b0b10;
  --muted:rgba(11,11,16,.70);
  --muted2:rgba(11,11,16,.55);
  --border:rgba(11,11,16,.12);
  --shadow:0 12px 50px rgba(11,11,16,.14);
  --card:linear-gradient(180deg, rgba(11,11,16,.02), rgba(11,11,16,.01));
}
:root[data-theme="light"] body{
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(53,208,255,.10), transparent 55%),
    var(--bg);
}
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .topbarSticky{
  background: rgba(246,247,251,.72);
}
:root[data-theme="light"] .search input{color:#0b0b10}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select{color:#0b0b10}


/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  place-items:center;
  padding:20px;
  background: rgba(0,0,0,.55);
  z-index:1000;
}
.modal.open{display:grid}
.modalCard{
  width:min(860px, 100%);
  border-radius:22px;
  border:1px solid var(--border);
  background: var(--card);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.modalHead{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.modalHead b{font-size:15px}
.modalBody{padding:18px}
.modalFoot{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:16px 18px;border-top:1px solid var(--border);
  background: rgba(255,255,255,.02);
}


/* Mobile sidebar */
.overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none; z-index:900;
}
@media(max-width:1120px){
  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    width:min(320px, 88vw);
    transform: translateX(-110%);
    transition: transform .25s ease;
    z-index:950;
  }
  .app.sidebarOpen .sidebar{transform: translateX(0)}
  .app.sidebarOpen + .overlay,
  .overlay.show{display:block}
  .main{padding:18px}
}
.iconBtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  transition:.25s;
}
.iconBtn:hover{transform:translateY(-1px);background: rgba(255,255,255,.06)}


/* Sticky filter bar */
.stickyBar{
  position:sticky; top:0;
  z-index:60;
  backdrop-filter: blur(10px);
  background: rgba(11,11,16,.55);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px;
  margin-bottom:14px;
}
:root[data-theme="light"] .stickyBar{ background: rgba(246,247,251,.72); }

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap}
.tabBtn{
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color:var(--muted);
  font-weight:800;
}
.tabBtn.active{color:#fff;border-color: rgba(124,92,255,.26); background: rgba(124,92,255,.14)}
:root[data-theme="light"] .tabBtn.active{color:#0b0b10}
.panel{display:none;margin-top:12px}
.panel.active{display:block}

/* Pagination */
.pagination{
  display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  margin-top:12px;
}
.pageNums{display:flex;gap:8px;flex-wrap:wrap}
.pageBtn{
  width:40px;height:40px;border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);
  font-weight:900;
}
.pageBtn.active{background: rgba(124,92,255,.14); color:#fff; border-color: rgba(124,92,255,.22)}
:root[data-theme="light"] .pageBtn.active{color:#0b0b10}

/* Empty state */
.empty{
  padding:26px;border-radius:20px;border:1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.02);
  display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
}
.empty b{font-size:15px}
.empty p{color:var(--muted);font-size:14px;margin-top:6px;max-width:640px}

/* Toast */
.toastRoot{
  position:fixed; right:18px; bottom:18px;
  display:grid; gap:10px;
  z-index:1200;
}
.toast{
  width:min(360px, calc(100vw - 36px));
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(11,11,16,.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transform: translateY(8px); opacity:0;
  transition: .22s ease;
}
.toast.show{transform: translateY(0); opacity:1}
.toast b{font-size:13px}
.toastClose{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:#fff; cursor:pointer;
}
.toast.ok{border-color: rgba(32,201,151,.35); background: rgba(32,201,151,.12)}
.toast.warn{border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.12)}
.toast.danger{border-color: rgba(255,77,109,.35); background: rgba(255,77,109,.12)}
:root[data-theme="light"] .toast{background: rgba(246,247,251,.88); box-shadow: 0 18px 70px rgba(11,11,16,.18)}
:root[data-theme="light"] .toastClose{color:#0b0b10}

/* Helpers (Tailwind utility'leri yerine küçük yardımcı sınıflar) */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row-between{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.col{display:flex;flex-direction:column;gap:8px;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width: 900px){.grid2,.grid3{grid-template-columns:1fr}}
.muted{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);font-weight:700;font-size:12px;color:var(--text)}
.badge-success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#bbf7d0}
.badge-warning{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.35);color:#fde68a}
.badge-danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35);color:#fecaca}
.divider{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.prewrap{white-space:pre-wrap;word-break:break-word}

.site-logo--dark { display: none; }

:root[data-theme="dark"] .site-logo--light { display: none; }
:root[data-theme="dark"] .site-logo--dark  { display: inline-block; }

:root[data-theme="light"] .site-logo--light { display: inline-block; }
:root[data-theme="light"] .site-logo--dark  { display: none; }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0 28px;
}

.kpi-card {
    background: linear-gradient(145deg, #141417, #16181d);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    transition: transform .15s ease, box-shadow .15s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

.kpi-title {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: #f9fafb;
}

.kpi-card.warning .kpi-value {
    color: #fbbf24;
}

.kpi-card.success .kpi-value {
    color: #34d399;
}


/* ===== Notifications (Cards) ===== */
.page-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.card{
  background: rgba(20, 20, 25, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  margin-bottom: 14px;
}

.page-title{
  margin:0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
}

.page-sub{
  margin-top: 6px;
  opacity: .75;
  font-size: 13px;
}

.alert{
  padding: 12px 14px;
  border-radius: 14px;
  margin: 12px 0;
  border: 1px solid rgba(255,255,255,0.10);
}
.alert-ok{
  background: rgba(34, 197, 94, 0.12);
  color: #b9f6c8;
}

.notif-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.notif-card{
  padding: 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.notif-card.is-unread{
  border-color: rgba(99,102,241,0.35);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.15), 0 10px 30px rgba(0,0,0,0.25);
}

.notif-main{
  min-width: 0;
  flex: 1;
}

.notif-title{
  font-weight: 700;
  font-size: 15px;
}

.notif-msg{
  margin-top: 6px;
  opacity: .85;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
}

.notif-meta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
}

.notif-date{
  opacity: .65;
  font-size: 12px;
}

.notif-badge{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
}

.badge-new{
  background: rgba(99,102,241,0.18);
  color: #c7d2fe;
}

.badge-read{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
}

.notif-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

/* Buttons (minimal) */
.btn{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.btn:hover{
  background: rgba(255,255,255,0.10);
}

.btn-primary{
  background: rgba(99,102,241,0.85);
  border-color: rgba(99,102,241,0.45);
  color: white;
}

.btn-primary:hover{
  background: rgba(99,102,241,1);
}

.btn-ghost{
  background: rgba(255,255,255,0.04);
}

.empty-card{
  padding: 16px;
  opacity: .8;
}

.pagination-wrap{
  margin-top: 14px;
}