/* ===== Sol Sidebar – İki bölüm, iki ayrı scroll ===== */
:root{
    --brand: rgb(30,129,176);
    --page-bg: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #eaeaea;
    --header-h: 88px;      /* header yüksekliğin farklıysa güncelle */
    --split: 1fr 1fr;      /* üst/alt yükseklik oranı: 1fr 1fr → 50/50, 3fr 2fr vb. yapabilirsin */
  }
  
  html, body { background: var(--page-bg); color: var(--text); }
  
  /* ---------- LAYOUT ---------- */
  .sidebar{
    position: fixed;
    top: var(--header-h);
    left: 20px;
    width: 260px;
    bottom: 16px;                 /* toplam yükseklik kilitlenir */
    display: grid;                /* iki kartın yüksekliğini grid ile bölüyoruz */
    grid-template-rows: var(--split);
    gap: 12px;                    /* kartlar arası boşluk */
    background: var(--page-bg);   /* aradaki boşluk sayfa ile aynı (siyah yok) */
    overflow: hidden;             /* dışarıda scroll YOK → scroll’lar kartların içinde */
  }
  
  @media (max-width: 1024px){
    .sidebar{ display: none; }
  }
  
  /* Ana içerik sidebar’a çarpmasın (main’e bu class ver) */
  .main-with-sidebar{ margin-left: 300px; }
  
  /* ---------- KART ---------- */
  .sidecard{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
    display: flex;                /* header + body → dikey */
    flex-direction: column;
    min-height: 0;                /* flex/grid içinde taşmayı engeller */
  }
  
  /* ---------- BAŞLIK BAR (brand renkli ve ortalı) ---------- */
  .sidecard__header{
    display: flex;
    align-items: center;
    justify-content: center;      /* metin ortalı */
    padding: 10px 12px;
    background: var(--brand);     /* (30,129,176) */
    color: #fff;
    border-bottom: 1px solid transparent;
    flex: 0 0 auto;               /* sabit yükseklik */
  }
  .sidecard__dot{ display: none; }
  .sidecard__title{
    margin: 0;
    text-align: center;
    font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
  }
  
  /* ---------- İKİ AYRI SCROLL: body içinde scroll ---------- */
  .sidecard__body{
    flex: 1 1 auto;               /* kalan alanın tamamı */
    min-height: 0;                /* scroll’un çalışması için kritik */
    padding: 8px;
    overflow: auto;               /* ← ayrı scroll burada */
    overscroll-behavior: contain; /* trackpad ile taşmayı engeller */
    scrollbar-width: thin;        /* Firefox ince scrollbar */
  }
  /* Açık tonlu scrollbar (Chrome/Safari) */
  .sidecard__body::-webkit-scrollbar{ width: 8px; }
  .sidecard__body::-webkit-scrollbar-track{ background: var(--page-bg); }
  .sidecard__body::-webkit-scrollbar-thumb{
    background: rgba(30,129,176,.28);
    border-radius: 8px;
  }
  
  /* Liste – düz linkler, buton hissi yok */
  .sidecard__list{
    list-style: none; margin: 0; padding: 0; display: grid; gap: 4px;
  }
  .sidecard__item a{
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
  }
  .sidecard__item a:hover{
    background: #f8fafc;
    border-color: #ececec;
  }
  
  /* Aktif öğe: ince sol şerit + çok hafif arka plan */
  .sidecard__item[data-current="true"] a{
    border-color: var(--brand);
    box-shadow: inset 2px 0 0 var(--brand);
    background: #f0f7fb; /* çok hafif */
  }
  
  /* Boş durum */
  .sidecard__empty{ padding: 8px 10px; color: var(--muted); font-size: 14px; }

  /* --------- DARK THEME --------- */
  .dark :root{ /* vars are not scoped, keep as overrides below */ }
  .dark html, .dark body{ background: #0b1220; color: #e5e7eb; }
  .dark .sidebar{ background: transparent; }
  .dark .sidecard{ background: #0f172a; border-color: #1f2937; }
  .dark .sidecard__header{ background: #1e81b0; color: #e5e7eb; border-bottom-color: transparent; }
  .dark .sidecard__title{ color: #e5e7eb; }
  .dark .sidecard__body{ scrollbar-color: rgba(30,129,176,.5) transparent; }
  .dark .sidecard__body::-webkit-scrollbar-track{ background: #0b1220; }
  .dark .sidecard__body::-webkit-scrollbar-thumb{ background: rgba(30,129,176,.45); }
  .dark .sidecard__item a{ color: #e5e7eb; }
  .dark .sidecard__item a:hover{ background: #0b1220; border-color: #334155; }
  .dark .sidecard__item[data-current="true"] a{ background: #0b1220; border-color: #1e81b0; box-shadow: inset 2px 0 0 #1e81b0; }
  
  /* ---- Global dark overrides (no Tailwind rebuild) ---- */
  .dark header{ background: rgba(15,23,42,0.9) !important; }
  .dark .ring-neutral-200{ --tw-ring-color: #334155 !important; }
  .dark .border-neutral-200{ border-color: #334155 !important; }
  .dark .border-neutral-300{ border-color: #334155 !important; }
  .dark .bg-white{ background-color: #0f172a !important; }
  .dark .bg-white\/90{ background-color: rgba(15,23,42,0.9) !important; }
  .dark .bg-white\/95{ background-color: rgba(15,23,42,0.95) !important; }
  .dark .bg-neutral-50{ background-color: #0b1220 !important; }
  .dark .text-neutral-900, .dark .text-neutral-800, .dark .text-neutral-700{ color: #e5e7eb !important; }
  .dark .text-neutral-600, .dark .text-neutral-500{ color: #94a3b8 !important; }
  .dark .hover\:bg-neutral-50:hover{ background-color: #0b1220 !important; }
  .dark .hover\:text-neutral-800:hover{ color: #e5e7eb !important; }
  
  /* Forms */
  .dark input[type="text"],
  .dark input[type="search"],
  .dark input[type="email"],
  .dark input[type="password"],
  .dark textarea,
  .dark select{
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
  }
  .dark input::placeholder, .dark textarea::placeholder{ color: #64748b !important; }