/* =====================================================================
   ASINScout Pro — PANEL TEMASI (üye paneli + admin paneli)
   ---------------------------------------------------------------------
   premium.css'ten SONRA yüklenir; aynı değişken/class isimlerini override
   eder. Gece mavisi zemin + mor→mavi→camgöbeği vurgu, cam efektli kartlar.
   ===================================================================== */

:root {
  --bg:  #070a1d;
  --bg2: #0b1027;
  --bg3: #121936;
  --bg-elev: #141b3d;

  --text:  #eef1ff;
  --text2: #9aa3c9;
  --text3: #5e6792;

  /* Eski turuncu/pembe vurgu -> mor/mavi (inline stiller de otomatik uyar) */
  --orange: #7c83ff;
  --pink:   #a855f7;
  --blue:   #3b82f6;
  --cyan:   #22d3ee;
  --violet: #8b5cf6;
  --green:  #22c55e;
  --amber:  #f59e0b;
  --red:    #f43f5e;

  --border:  rgba(120,140,255,.13);
  --border2: rgba(120,140,255,.10);

  --grad-primary: linear-gradient(100deg, #22d3ee 0%, #3b82f6 45%, #8b5cf6 80%, #a855f7 100%);
  --grad-violet:  linear-gradient(100deg, #8b5cf6 0%, #6366f1 45%, #22d3ee 100%);
  --grad-text:    linear-gradient(120deg, #c084fc, #818cf8 50%, #22d3ee);
  --grad-card:    linear-gradient(180deg, rgba(22,29,66,.82) 0%, rgba(12,17,42,.82) 100%);

  --radius: 14px;
  --radius-lg: 18px;
  --glow-orange: 0 10px 34px -10px rgba(99,102,241,.65);
  --glow-pink:   0 10px 34px -10px rgba(168,85,247,.55);
  --glow-cyan:   0 10px 34px -10px rgba(34,211,238,.5);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 88% -6%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(700px 700px at -8% 105%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(600px 400px at 50% 40%, rgba(34,211,238,.04), transparent 70%),
    var(--bg) !important;
  background-attachment: fixed !important;
}
::selection { background: rgba(99,102,241,.35); color: #fff; }
* { scrollbar-color: #26305e transparent; }
*::-webkit-scrollbar-thumb { background: #26305e; background-clip: content-box; }

/* ============================ SIDEBAR ============================ */
.sidebar {
  width: 260px !important;
  background: linear-gradient(180deg, rgba(11,16,40,.96), rgba(8,11,30,.98)) !important;
  border-right: 1px solid var(--border) !important;
  padding: 22px 16px !important;
  display: flex !important;
  flex-direction: column;
  z-index: 1000;
}
.sidebar::after { /* alttaki mor ışık huzmesi */
  content: ''; position: absolute; left: -40px; bottom: -40px; width: 260px; height: 260px;
  background: radial-gradient(closest-side, rgba(139,92,246,.22), transparent);
  pointer-events: none;
}
.sidebar-logo {
  display: block !important; margin: 4px 8px 30px !important; padding: 0 !important;
  background: none !important; box-shadow: none !important;
}
.sidebar-logo img { display: block; width: 180px; max-width: 100%; height: auto; }
.admin-badge {
  align-self: flex-start; margin: -18px 10px 20px !important;
  background: linear-gradient(100deg, #8b5cf6, #3b82f6) !important;
  font-weight: 700; letter-spacing: .08em; border-radius: 6px !important;
}
.sidebar-menu {
  flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar-menu a {
  display: flex !important; align-items: center; gap: 14px;
  padding: 12px 16px !important; margin: 0 !important;
  color: var(--text2) !important; font-size: 14.5px !important; font-weight: 500;
  border-radius: 12px !important; border: 1px solid transparent;
  position: relative; transition: background .2s, color .2s, border-color .2s;
  background: transparent !important;
}
.sidebar-menu a .nav-ic { width: 22px; height: 22px; flex-shrink: 0; opacity: .85; }
.sidebar-menu a:hover { background: rgba(99,102,241,.08) !important; color: var(--text) !important; }
.sidebar-menu a.active {
  color: #fff !important; font-weight: 600;
  background: linear-gradient(100deg, rgba(79,70,229,.42), rgba(59,130,246,.16)) !important;
  border-color: rgba(129,140,248,.45);
  box-shadow: 0 8px 30px -12px rgba(99,102,241,.8), inset 0 1px 0 rgba(255,255,255,.06);
}
.sidebar-menu a.active::before {
  content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, #22d3ee, #6366f1);
}
.sidebar-menu a.active .nav-ic { color: #60a5fa; opacity: 1; }
.sidebar-user { border-top: 1px solid var(--border) !important; position: relative; z-index: 1; }
.sidebar-user .avatar { background: var(--grad-violet) !important; color: #fff; }
.sidebar .lang-switch {
  position: static !important; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border); display: flex; gap: 6px; z-index: 1;
}
.lang-btn { flex: 1; background: rgba(255,255,255,.02) !important; border: 1px solid var(--border) !important; color: var(--text2) !important; border-radius: 8px !important; }
.lang-btn.active, .lang-btn:hover { border-color: rgba(129,140,248,.6) !important; color: #fff !important; background: rgba(99,102,241,.18) !important; }

.main { margin-left: 260px !important; padding: 28px 32px 48px !important; max-width: none; }
@media (max-width: 768px) {
  .main { margin-left: 0 !important; padding: 64px 16px 32px !important; }
  .sidebar { transform: translateX(-100%); padding-top: 70px !important; }
  .sidebar.open { transform: translateX(0); }
}
.mobile-toggle { background: var(--bg2) !important; border-color: var(--border) !important; }

/* ============================ SAYFA BAŞLIĞI ============================ */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .page-title { margin-bottom: 4px !important; }
.page-title { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.03em; color: #fff; }
.page-sub { color: var(--text2); font-size: 14px; }
.date-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 12px; font-size: 13px; color: var(--text2);
  background: rgba(15,20,48,.7); white-space: nowrap;
}
.date-chip svg { width: 16px; height: 16px; }

/* ============================ KARTLAR ============================ */
.card, .stat-card, .table-card, .chart-card, .filter-card, .modal-content,
.package-card, .user-package, .package-box, .guide-section, .announcement-popup, .auth-card {
  background: var(--grad-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
}
.card-title { color: #fff; font-weight: 700 !important; }
.stat-card .value { color: #fff !important; font-weight: 800 !important; }
.stat-card .label { color: var(--text2) !important; }

/* ============================ TABLOLAR ============================ */
table { border-collapse: separate !important; border-spacing: 0; }
th {
  color: var(--text3) !important; font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.015) !important;
  border-bottom: 1px solid var(--border) !important;
}
td { border-bottom: 1px solid rgba(120,140,255,.07) !important; color: var(--text); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(99,102,241,.06) !important; }

/* ============================ BUTONLAR ============================ */
.btn-primary, .btn-download, .announcement-btn, button.btn-primary {
  background: var(--grad-primary) !important; color: #fff !important; border: none !important;
  box-shadow: var(--glow-orange) !important;
}
.btn-primary:hover, .btn-download:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(99,102,241,.8) !important; }
.btn-outline, .btn-cancel, .guide-toggle, .announcement-close {
  background: rgba(255,255,255,.02) !important; border: 1px solid var(--border) !important; color: var(--text) !important;
}
.btn-outline:hover, .btn-cancel:hover { border-color: rgba(129,140,248,.55) !important; background: rgba(99,102,241,.1) !important; }
.btn-delete, .btn-danger { background: rgba(244,63,94,.12) !important; border: 1px solid rgba(244,63,94,.3) !important; color: #fb7185 !important; }

/* ============================ FORM ============================ */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: rgba(6,9,26,.75) !important; border: 1px solid var(--border) !important; color: var(--text) !important;
  border-radius: 10px !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important; border-color: rgba(129,140,248,.7) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}
.toggle input[type="checkbox"]:checked { background: linear-gradient(100deg, #6366f1, #22d3ee) !important; }

/* ============================ ROZETLER ============================ */
.badge { border-radius: 999px !important; font-weight: 600 !important; }
.badge.green, .badge-success, .badge.active { background: rgba(34,197,94,.12) !important; color: #4ade80 !important; border: 1px solid rgba(34,197,94,.3); }
.badge.orange, .badge-warning { background: rgba(245,158,11,.12) !important; color: #fbbf24 !important; border: 1px solid rgba(245,158,11,.3); }
.badge.red, .badge-danger { background: rgba(244,63,94,.12) !important; color: #fb7185 !important; border: 1px solid rgba(244,63,94,.3); }
.badge.blue, .badge-info { background: rgba(59,130,246,.14) !important; color: #60a5fa !important; border: 1px solid rgba(59,130,246,.3); }

/* ============================ MESAJLAR / MODAL ============================ */
.message.success { background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.3) !important; color: #4ade80 !important; }
.message.error { background: rgba(244,63,94,.1) !important; border-color: rgba(244,63,94,.3) !important; color: #fb7185 !important; }
.modal-overlay, .modal-backdrop, .announcement-overlay { background: rgba(3,5,18,.72) !important; backdrop-filter: blur(6px); }

/* Linkler */
.main a:not([class]) { color: #93a4ff; }
/* inline display:none ile gizlenen menü öğeleri (örn. Affiliate) gizli kalsın */
.sidebar-menu a[style*="display:none"], .sidebar-menu a[style*="display: none"] { display: none !important; }