/* ============================================================
   Giray — LÜKS Siyah & Altın Panel Teması
   sekreter-panel.lol · tüm iç ekranlar (admin / ajans / sekreter / qr)
   login.html ile aynı segment. Inline <style>'dan SONRA yüklenir → ezer.
   ============================================================ */
:root{
  --gold:#d9b45a; --gold-2:#f6dd93; --gold-deep:#b8923c;
  --ink:#050505; --ink-2:#0d0d0f;
  --panel:linear-gradient(180deg,rgba(20,18,14,.9),rgba(8,8,8,.94));
  --panel-solid:#111009;
  --line:rgba(217,180,90,.26); --line-2:rgba(255,255,255,.06);
  --text:#efe7d4; --muted:#8a8578;
  --success:#43d17a; --danger:#ff6b6b; --warning:#f5b544; --info:#78b6ff;
}
*{box-sizing:border-box}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif !important;
  color:var(--text) !important;
  background:radial-gradient(1200px 820px at 50% -12%, #14110a 0%, #0a0906 46%, #030303 100%) !important;
  background-attachment:fixed !important;min-height:100vh;position:relative;
}
/* dönen altın hüzmeler (lüks arka plan) */
body::before,body::after{
  content:"";position:fixed;inset:-35% -35%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 336deg,rgba(217,180,90,.11) 350deg,transparent 360deg);
  animation:gh-spin 30s linear infinite;
}
body::after{animation-duration:46s;animation-direction:reverse;opacity:.5}
@keyframes gh-spin{to{transform:rotate(360deg)}}

/* ---------- Sidebar ---------- */
.sidebar{
  background:linear-gradient(180deg,rgba(12,11,8,.97),rgba(4,4,4,.98)) !important;
  border-right:1px solid var(--line) !important;backdrop-filter:blur(10px);
}
.sidebar-header{
  border-bottom:1px solid var(--line) !important;
  background:linear-gradient(180deg,#fff,var(--gold-2) 55%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  font-weight:800 !important;letter-spacing:.7px;
}
.sidebar-overlay{background:rgba(0,0,0,.72) !important;backdrop-filter:blur(2px)}
.nav-item{color:var(--muted) !important;border-radius:11px !important;transition:.22s !important;position:relative;font-weight:500}
.nav-item:hover{background:rgba(217,180,90,.09) !important;color:var(--text) !important}
.nav-item.active{background:linear-gradient(90deg,rgba(217,180,90,.2),rgba(217,180,90,.02)) !important;color:var(--gold-2) !important}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 0 14px var(--gold)}
.logout-btn{color:var(--danger) !important}
.hamburger{color:var(--gold-2) !important}

/* ---------- Header ---------- */
.header,.header-right{color:var(--text) !important}
.header h1,.header h2,.section>h2,.section>h3,.card-header h2,.card-header h3{
  background:linear-gradient(180deg,#fff,var(--gold-2) 72%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;font-weight:800 !important;letter-spacing:.4px;
}
.agency-name,.agency-name *{color:var(--gold-2) !important}

/* ---------- Kartlar ---------- */
.card,.section,.stat-card,.modal-content,.qr-container,
.number-folder,.folder-item,.wa-qr-container{
  background:var(--panel) !important;border:1px solid var(--line-2) !important;
  border-radius:18px !important;box-shadow:0 22px 50px rgba(0,0,0,.55) !important;
  backdrop-filter:blur(12px);color:var(--text) !important;position:relative;overflow:hidden;
}
.card::before,.section::before,.stat-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8}
.card:hover,.folder-item:hover{border-color:var(--line) !important;transition:.2s}
.card-header,.modal-header{border-bottom:1px solid var(--line-2) !important;color:var(--text) !important;font-weight:700}
.card-body,.content{color:var(--text)}
.divider{border-color:var(--line-2) !important;background:var(--line-2) !important}

/* Stat kartları */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat-card{text-align:center}
.stat-card:hover{transform:translateY(-4px);transition:.2s;box-shadow:0 28px 60px rgba(0,0,0,.6),0 0 30px rgba(217,180,90,.08) !important}
.stat-card .value,.stat-card b,.stat-card h2,.stat-card h3,.stat-card .number{
  background:linear-gradient(180deg,#fff,var(--gold-2) 68%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;font-weight:800 !important;}

/* ---------- Formlar ---------- */
.form-group label,.hint,.subtitle,.instructions{color:var(--muted) !important}
.form-control,input,select,textarea{
  background:rgba(0,0,0,.5) !important;border:1px solid rgba(217,180,90,.16) !important;
  color:var(--text) !important;border-radius:11px !important;}
.form-control:focus,input:focus,select:focus,textarea:focus{
  outline:none !important;border-color:var(--gold) !important;box-shadow:0 0 0 3px rgba(217,180,90,.16) !important;background:rgba(0,0,0,.65) !important;}
input[type=checkbox]{accent-color:var(--gold)}

/* ---------- Butonlar ---------- */
.btn{border:none !important;border-radius:11px !important;font-weight:800 !important;letter-spacing:.4px;cursor:pointer;transition:all .22s !important}
.btn-primary,.copy-btn,.qr-link{background:linear-gradient(145deg,var(--gold-2),var(--gold)) !important;color:#1a1406 !important;
  box-shadow:0 12px 28px rgba(217,180,90,.32) !important;}
.btn-primary:hover,.copy-btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(217,180,90,.5) !important}
.btn-secondary{background:linear-gradient(145deg,#23211a,#141310) !important;color:var(--text) !important;border:1px solid var(--line) !important}
.btn-success{background:linear-gradient(145deg,#5fe08a,#34c759) !important;color:#06210f !important}
.btn-danger{background:linear-gradient(145deg,#ff8585,#ef4444) !important;color:#2a0606 !important}
.btn-sm{padding:7px 13px !important;font-size:.8rem !important}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.modal-close{background:none !important;color:var(--muted) !important}
.modal-close:hover{color:var(--danger) !important}

/* ---------- Tablolar ---------- */
.table-responsive{border-radius:12px;overflow:auto}
table{width:100%;border-collapse:collapse;color:var(--text)}
th{color:var(--gold-2) !important;font-weight:600;text-transform:uppercase;letter-spacing:.6px;font-size:.76rem;
  border-bottom:1px solid var(--line) !important;text-align:left;padding:13px 15px;background:rgba(217,180,90,.04)}
td{border-bottom:1px solid var(--line-2) !important;padding:13px 15px}
tr:hover td{background:rgba(217,180,90,.06)}

/* ---------- Rozetler & durumlar ---------- */
.badge{border-radius:20px !important;font-weight:700 !important;padding:4px 12px !important;font-size:.72rem}
.badge-success,.status.connected,.wa-status.connected,.folder-status.connected{
  background:rgba(67,209,122,.15) !important;color:#7be495 !important;border:1px solid rgba(67,209,122,.32) !important}
.badge-danger,.status.disconnected,.wa-status.disconnected,.folder-status.disconnected{
  background:rgba(255,107,107,.14) !important;color:var(--danger) !important;border:1px solid rgba(255,107,107,.3) !important}
.badge-info,.status.waiting,.wa-status.waiting{
  background:rgba(120,182,255,.14) !important;color:var(--info) !important;border:1px solid rgba(120,182,255,.3) !important}
.status{border-radius:20px;padding:6px 14px;font-weight:700;display:inline-block}

/* ---------- Login/giriş kartları (secretary-login vb.) ---------- */
.login-container,.login-card{
  position:relative !important;margin:40px auto !important;max-width:420px !important;padding:44px 38px 34px !important;
  background:linear-gradient(180deg,rgba(20,18,14,.92),rgba(8,8,8,.95)) !important;
  border:1px solid var(--line) !important;border-radius:22px !important;
  box-shadow:0 40px 90px rgba(0,0,0,.7),inset 0 1px 0 rgba(246,221,147,.08) !important;backdrop-filter:blur(14px);
}
.login-container::before,.login-card::before{
  content:"◆";display:flex;align-items:center;justify-content:center;
  width:66px;height:66px;margin:0 auto 18px;border-radius:18px;font-size:26px;color:#1a1406;
  background:linear-gradient(145deg,var(--gold-2),var(--gold-deep));box-shadow:0 16px 32px rgba(217,180,90,.42)}
.login-header,.login-card .logo,.logo{text-align:center;
  background:linear-gradient(180deg,#fff,var(--gold-2) 55%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;font-weight:800 !important;}

/* ---------- Sekreter / QR ---------- */
.container{color:var(--text)}
.name,.greeting{color:var(--text) !important}.greeting{font-weight:800}
.name-badge{background:linear-gradient(145deg,rgba(217,180,90,.2),rgba(217,180,90,.05)) !important;
  border:1px solid var(--line) !important;color:var(--gold-2) !important;border-radius:14px !important}
.access-code,.wa-phone{font-family:ui-monospace,monospace;color:var(--gold-2) !important;letter-spacing:1px}
.qr-container,.wa-qr-box{background:#fff !important;border-radius:16px !important;box-shadow:0 0 0 6px rgba(217,180,90,.15),0 20px 40px rgba(0,0,0,.5) !important}
.wa-qr-placeholder,.wa-status-icon,.folder-icon{color:var(--muted)}
.success-icon{color:var(--success) !important}.success-text{color:var(--text) !important}
.folder-name{color:var(--text) !important;font-weight:600}.folder-count{color:var(--muted) !important}

/* ---------- Yardımcı ---------- */
.error{color:var(--danger) !important}.success{color:var(--success) !important}
.hidden{display:none !important}
.toast{background:var(--panel-solid) !important;border:1px solid var(--line) !important;color:var(--text) !important;
  border-radius:12px !important;box-shadow:0 16px 40px rgba(0,0,0,.6) !important}
.spinner,.loader{border-top-color:var(--gold) !important}
a{color:var(--gold-2)}
::selection{background:rgba(217,180,90,.3);color:#fff}