/* ═══════════════════════════════════════
   MarketLens — Shared Sidebar & Mobile CSS
   includes/sidebar.css
═══════════════════════════════════════ */

/* CSS Variables — tüm sayfalarda ortak */
:root {
  --brand-25:#f2f7ff;--brand-50:#ecf3ff;--brand-100:#dde9ff;--brand-200:#c2d6ff;
  --brand-400:#7592ff;--brand-500:#465fff;--brand-600:#3641f5;--brand-700:#2a31d8;
  --gray-25:#fcfcfd;--gray-50:#f9fafb;--gray-100:#f2f4f7;--gray-200:#e4e7ec;
  --gray-300:#d0d5dd;--gray-400:#98a2b3;--gray-500:#667085;--gray-600:#475467;
  --gray-700:#344054;--gray-800:#1d2939;--gray-900:#101828;
  --success-50:#ecfdf3;--success-100:#d1fadf;--success-500:#12b76a;--success-600:#039855;--success-700:#027a48;
  --error-50:#fef3f2;--error-100:#fee4e2;--error-500:#f04438;--error-600:#d92d20;
  --warning-50:#fffaeb;--warning-100:#fef0c7;--warning-500:#f79009;--warning-700:#b54708;
  --orange-50:#fff6ed;--orange-100:#ffead5;--orange-500:#fb6514;--orange-700:#c4320a;
  --shadow-sm:0px 1px 3px 0px rgba(16,24,40,.1),0px 1px 2px 0px rgba(16,24,40,.06);
  --shadow-md:0px 4px 8px -2px rgba(16,24,40,.1),0px 2px 4px -2px rgba(16,24,40,.06);
  --shadow-lg:0px 12px 16px -4px rgba(16,24,40,.08),0px 4px 6px -2px rgba(16,24,40,.03);
  --sidebar-w:290px;--header-h:64px;--radius:16px;--radius-sm:8px;--radius-xs:6px;
  --white:#ffffff;
}

/* Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Outfit',sans-serif;background:var(--gray-100);color:var(--gray-900);height:100vh;display:flex;overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased;}

/* ── SIDEBAR ── */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:#fff;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;height:100vh;overflow-y:auto;overflow-x:hidden;}
.sidebar-header{padding:32px 20px 28px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-mark{width:32px;height:32px;border-radius:8px;background:var(--brand-500);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-mark svg{width:16px;height:16px;fill:#fff;}
.logo-text{font-size:20px;font-weight:700;color:var(--gray-900);letter-spacing:-.02em;}

/* Nav */
.nav-group{padding:0 20px;margin-bottom:8px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--gray-700);cursor:pointer;transition:all .15s;margin-bottom:2px;text-decoration:none;}
.nav-item:hover{background:var(--gray-100);color:var(--gray-700);}
.nav-item.active{background:var(--brand-50);color:var(--brand-500);}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gray-400);}
.nav-item.active .nav-icon{color:var(--brand-500);}
.nav-icon svg{width:20px;height:20px;fill:currentColor;}
.nav-badge{margin-left:auto;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;}
.nb-orange{background:var(--orange-50);color:var(--orange-700);}
.nb-blue{background:var(--brand-50);color:var(--brand-600);}

/* Favori badge */
#favCountBadge{display:none;margin-left:auto;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--error-50);color:var(--error-600);}

/* Profil footer — Claude.ai stili */
.sidebar-profile{padding:12px 16px;border-top:1px solid var(--gray-100);display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .15s;flex-shrink:0;position:relative;margin-top:auto;}
.sidebar-profile:hover{background:var(--gray-50);}
.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-500);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.user-name{font-size:13px;color:var(--gray-700);font-weight:600;line-height:1.2;}
.user-plan{font-size:12px;color:var(--gray-400);}
.profile-chevron{color:var(--gray-400);display:flex;align-items:center;flex-shrink:0;transition:transform .2s;}
.profile-chevron.open{transform:rotate(180deg);}

/* Profil dropdown menüsü */
.profile-menu{position:fixed;bottom:16px;left:16px;width:calc(var(--sidebar-w) - 32px);background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:300;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s,transform .18s;}
.profile-menu.show{opacity:1;pointer-events:all;transform:translateY(0);}
.profile-menu-item{display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:13px;font-weight:500;color:var(--gray-700);text-decoration:none;cursor:pointer;transition:background .1s;}
.profile-menu-item:hover{background:var(--gray-50);}
.profile-menu-item.danger{color:var(--error-600);}
.profile-menu-item.danger:hover{background:var(--error-50);}
.profile-menu-divider{height:1px;background:var(--gray-100);margin:2px 0;}

/* ── MOBİL HEADER ── */
.mobile-header{display:none;position:fixed;top:0;left:0;right:0;z-index:9999;height:56px;background:#fff;border-bottom:1px solid var(--gray-200);align-items:center;justify-content:space-between;padding:0 16px;}
.mobile-logo{font-size:18px;font-weight:700;color:var(--gray-900);letter-spacing:-.02em;display:flex;align-items:center;gap:8px;}
.hamburger{width:36px;height:36px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;}
.hamburger span{display:block;width:16px;height:1.5px;background:var(--gray-600);border-radius:2px;transition:all .25s;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.sidebar-overlay{display:none;position:fixed;inset:0;z-index:120;background:rgba(16,24,40,.4);backdrop-filter:blur(2px);}
.sidebar-overlay.show{display:block;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .mobile-header{display:flex;}
  body{flex-direction:column;overflow:auto;height:auto;}
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:130;width:280px;height:100vh;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);}
  .sidebar.open{transform:translateX(0);}
  .profile-menu{left:16px;width:248px;}
}