/* ==== apps/modules/web/0000/20_kullanicilar.php dosyasindan tasindi ==== */
#kul-wrap { min-height: 100%; background: #fff; padding-bottom: 2rem; }

/* Toolbar */
#kul-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:.6rem; }
#kul-search-box { position:relative; flex:1; min-width:220px; max-width:320px; }
#kul-search-box i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:13px; }
#kul-search { width:100%; box-sizing:border-box; padding:8px 12px 8px 34px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; }
#kul-search:focus { border-color:#4f46e5; }
.kul-select { padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:12.5px; background:#fff; cursor:pointer; color:#374151; }
.kul-tarih-btn { display:inline-flex; align-items:center; gap:6px; }
.kul-tarih-btn.active { border-color:#4f46e5; color:#4f46e5; background:#eef2ff; }

#kul-tarih-panel { display:flex; gap:14px; align-items:flex-end; background:#f8faff; border:1px solid #e5e7eb; border-radius:8px; padding:.7rem .9rem; margin-bottom:.8rem; }
#kul-tarih-panel label { display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:#6b7280; font-weight:600; }
#kul-tarih-panel input { padding:6px 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:12.5px; }

#kul-count-bar { font-size:12px; color:#9ca3af; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #f0f0f0; }

.kul-btn { background:none; border:1px solid #e5e7eb; border-radius:6px; padding:.4rem 1rem; font-size:12.5px; color:#374151; cursor:pointer; }
.kul-btn:hover { background:#f9fafb; }
.kul-btn.primary { background:#4f46e5; border-color:#4f46e5; color:#fff; }
.kul-btn.primary:hover { background:#4338ca; }
.kul-btn.danger { color:#dc2626; border-color:#fca5a5; }
.kul-btn.danger:hover { background:#fee2e2; }
.kul-btn:disabled { opacity:.5; cursor:not-allowed; }

.kul-loading { padding:2rem; text-align:center; color:#bbb; font-size:13px; }

/* ── Kartlar (grid) ───────────────────────────────────────────────── */
#kul-liste { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:.7rem; }
.kul-card {
  background:#fff; border:1px solid gray; border-radius:10px; padding:.85rem 1rem;
  cursor:pointer; transition:box-shadow .15s, border-color .15s;
}
.kul-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.08); border-color:#c7d2fe; }
.kul-card.pasif { opacity:.6; background:#fafafa; }

.kul-card-top { display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.kul-avatar {
  width:38px; height:38px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg,#4f46e5,#7c3aed);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;
  background-size:cover; background-position:center;
}
.kul-card-info { flex:1; min-width:0; }
.kul-card-ad { font-size:13.5px; font-weight:700; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kul-card-eposta { font-size:11px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.kul-badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.kul-badge.tip     { background:#ede9fe; color:#6d28d9; }
.kul-badge.aktif   { background:#d1fae5; color:#065f46; }
.kul-badge.pasif   { background:#fee2e2; color:#991b1b; }
.kul-badge.plan    { background:#fff7ed; color:#c2410c; }
.kul-badge.plan.free { background:#f3f4f6; color:#6b7280; }

.kul-card-badges { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:.55rem; }

.kul-card-meta { font-size:10.5px; color:#9ca3af; margin-bottom:.55rem; }
.kul-card-meta i { margin-right:3px; }

.kul-stats-row { display:flex; gap:0; border-top:1px solid #f3f4f6; padding-top:.5rem; }
.kul-stat { flex:1; text-align:center; }
.kul-stat-num { display:block; font-size:14px; font-weight:800; color:#374151; line-height:1.1; }
.kul-stat-lbl { display:block; font-size:9px; color:#9ca3af; text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }
.kul-stat.warn .kul-stat-num { color:#d97706; }
.kul-stat.ok .kul-stat-num { color:#059669; }
.kul-stat.puan .kul-stat-num { color:#7c3aed; }

/* ── Sayfalama ─────────────────────────────────────────────────────── */
#kul-sayfalama { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:1.2rem; }
#kul-sayfalama button { background:#fff; border:1px solid #e5e7eb; border-radius:6px; padding:.35rem .8rem; font-size:12.5px; cursor:pointer; color:#374151; }
#kul-sayfalama button:disabled { opacity:.4; cursor:not-allowed; }
#kul-sayfalama span { font-size:12px; color:#6b7280; }

#kul-empty { text-align:center; padding:3rem 1rem; color:#9ca3af; font-size:14px; grid-column:1/-1; }

/* ── Detay Paneli (sağdan kayan) ─────────────────────────────────── */
#kul-panel-overlay {
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:10005;
}
#kul-panel-box {
  position:absolute; top:0; right:0; height:100%; width:min(420px, 94vw); background:#fff;
  box-shadow:-8px 0 40px rgba(0,0,0,.18); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
}
#kul-panel-overlay.open #kul-panel-box { transform:translateX(0); }
#kul-panel-header {
  display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border-bottom:1px solid #e5e7eb; flex-shrink:0;
}
#kul-panel-avatar {
  width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#4f46e5,#7c3aed);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px;
  background-size:cover; background-position:center; flex-shrink:0;
}
#kul-panel-baslik { flex:1; min-width:0; }
#kul-panel-ad { font-size:14.5px; font-weight:700; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#kul-panel-takmaad { font-size:11.5px; color:#9ca3af; }
#kul-panel-kapat { background:none; border:none; font-size:16px; color:#9ca3af; cursor:pointer; padding:6px; }
#kul-panel-kapat:hover { color:#374151; }
#kul-panel-body { flex:1; overflow-y:auto; padding:1rem 1.1rem; }

.kul-detay-blok { margin-bottom:1.1rem; }
.kul-detay-baslik { font-size:10.5px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.4px; margin-bottom:.4rem; }
.kul-detay-satir { display:flex; justify-content:space-between; align-items:center; padding:.3rem 0; font-size:13px; color:#374151; border-bottom:1px solid #f9fafb; }
.kul-detay-satir span:first-child { color:#6b7280; }
.kul-detay-satir span:last-child { font-weight:600; text-align:right; }

.kul-detay-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.kul-detay-stat-card { background:#f9fafb; border-radius:8px; padding:.5rem .3rem; text-align:center; }
.kul-detay-stat-card .n { display:block; font-size:15px; font-weight:800; color:#374151; }
.kul-detay-stat-card .l { display:block; font-size:9px; color:#9ca3af; margin-top:2px; text-transform:uppercase; }

.kul-aksiyon-grid { display:flex; flex-direction:column; gap:.5rem; }
.kul-aksiyon-btn {
  display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-radius:8px; border:1px solid #e5e7eb;
  background:#fff; font-size:13px; font-weight:600; color:#374151; cursor:pointer; text-align:left;
}
.kul-aksiyon-btn:hover { background:#f9fafb; }
.kul-aksiyon-btn.danger { color:#dc2626; border-color:#fecaca; }
.kul-aksiyon-btn.danger:hover { background:#fee2e2; }
.kul-aksiyon-btn i { width:16px; text-align:center; }
.kul-aksiyon-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Plan Değiştir mini modal ─────────────────────────────────────── */
#kul-plan-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10006; align-items:center; justify-content:center;
}
#kul-plan-overlay.open { display:flex; }
#kul-plan-box { background:#fff; border-radius:12px; width:min(360px,92vw); padding:1.2rem 1.3rem; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.kul-plan-baslik { font-size:14px; font-weight:700; color:#111827; margin-bottom:.9rem; display:flex; align-items:center; gap:.4rem; }
.kul-plan-baslik i { color:#f59e0b; }
.kul-plan-footer { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
.kul-plan-secenek { display:flex; align-items:center; gap:.5rem; padding:.5rem .3rem; font-size:13px; cursor:pointer; }
.kul-plan-secenek input { cursor:pointer; }
#kul-plan-ay-wrap { margin-top:.7rem; display:flex; align-items:center; gap:.5rem; font-size:12.5px; color:#6b7280; }
#kul-plan-ay-wrap input { width:56px; padding:5px 7px; border:1px solid #e5e7eb; border-radius:6px; font-size:13px; text-align:center; }

/* ── Sanal Oturum düğmesi (kart üzerinde) ─────────────────────────── */
.kul-vs-btn {
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-bottom:.55rem; padding:.4rem; border-radius:6px; border:1px solid #c7d2fe;
  background:#eef2ff; color:#4338ca; font-size:11.5px; font-weight:700; cursor:pointer;
}
.kul-vs-btn:hover { background:#e0e7ff; }

/* ── Sanal Oturum modal ────────────────────────────────────────────── */
#kul-vs-overlay {
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.75); z-index:10010;
  align-items:center; justify-content:center;
}
#kul-vs-overlay.open { display:flex; }
#kul-vs-box {
  background:#fff; border-radius:14px; width:min(1100px,96vw); height:min(820px,92vh);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4);
}
#kul-vs-header { background:#fef3c7; padding:.7rem 1rem; border-bottom:1px solid #fde68a; flex-shrink:0; }
#kul-vs-baslik { font-size:13.5px; font-weight:800; color:#92400e; display:flex; align-items:center; gap:8px; }
#kul-vs-uyari { font-size:11.5px; color:#92400e; margin-top:3px; }
#kul-vs-iframe { flex:1; border:none; width:100%; }
#kul-vs-footer { padding:.6rem 1rem; border-top:1px solid #e5e7eb; display:flex; justify-content:flex-end; flex-shrink:0; }