/* =========================================================
   IYS tema.css - Bootstrap 5.3.7 Uyumlu (Navbar'a dokunmaz)
   Hedef: profesyonel dark/light, siyah arka plan, clean UI
   ========================================================= */

/* 1) Genel kalite */
:root{
  --radius: 14px;
  --line-dark: rgba(255,255,255,.10);
  --line-light: rgba(15,23,42,.14);
  --shadow-1: 0 6px 18px rgba(0,0,0,.22);
  --shadow-2: 0 12px 30px rgba(0,0,0,.30);
}

/* 2) Scrollbar (minimal) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.35); }
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.10); }

/* =========================================================
   DARK (Bootstrap token override)
   Bootstrap 5.3: html[data-bs-theme="dark"] esas alınır
   ========================================================= */
html[data-bs-theme="dark"]{
  --bs-body-bg: #0b0d10;         /* gerçek siyah */
  --bs-body-color: #e7eaf0;

  --bs-border-color: var(--line-dark);
  --bs-secondary-color: rgba(255,255,255,.66);

  --surface-1: #10141a;          /* kart/tablo yüzeyi */
  --surface-2: #141a22;
  --surface-3: #1b2430;

  --muted: rgba(255,255,255,.60);
  --muted-2: rgba(255,255,255,.48);
}

/* Arka plan: mavi yok, siyah + hafif doku */
html[data-bs-theme="dark"] body{
  background:
    var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* =========================================================
   LIGHT (temiz beyaz/grimsi)
   ========================================================= */
html[data-bs-theme="light"]{
  --bs-body-bg: #f5f7fb;
  --bs-body-color: #0f172a;

  --bs-border-color: var(--line-light);
  --bs-secondary-color: rgba(15,23,42,.65);

  --surface-1: #ffffff;
  --surface-2: #fbfcfe;
  --surface-3: #f1f5f9;

  --muted: rgba(15,23,42,.62);
  --muted-2: rgba(15,23,42,.48);
}

html[data-bs-theme="light"] body{
  background:
    radial-gradient(1200px 700px at 0% 0%, rgba(15,23,42,.04), transparent 55%),
    radial-gradient(900px 520px at 100% 10%, rgba(15,23,42,.03), transparent 60%),
    var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* =========================================================
   Bootstrap bileşenleri - NAVBAR HARİÇ
   (navbar'a dokunmamak için .navbar* seçicisi yok)
   ========================================================= */

/* Kartlar */
.card{
  border-radius: var(--radius) !important;
  border: 1px solid var(--bs-border-color) !important;
  background: var(--surface-1) !important;
  box-shadow: var(--shadow-1);
}
.card-header{
  border-bottom: 1px solid var(--bs-border-color) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important;
}

/* Alert */
.alert{
  border-radius: var(--radius) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
html[data-bs-theme="dark"] .alert-light{
  background: rgba(255,255,255,.06) !important;
  color: var(--bs-body-color) !important;
}



/* Formlar */
.form-control, .form-select{
  border-radius: 12px !important;
  border: 1px solid var(--bs-border-color) !important;
  background: var(--surface-1) !important;
  color: var(--bs-body-color) !important;
}
.form-control::placeholder{ color: var(--muted-2) !important; }
.form-control:focus, .form-select:focus{
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.08) !important;
  outline: none !important;
}

/* Input group */
.input-group-text{
  border-radius: 12px !important;
  border: 1px solid var(--bs-border-color) !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
}

/* Butonlar: Bootstrap default renkleri kalsın, sadece premium radius */
.btn{
  border-radius: 12px !important;
}
.btn:focus{
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.10) !important;
}

/* Tablolar */
.table{
  color: var(--bs-body-color) !important;
}
.table tr:hover {
  background: var(--surface-2) !important;
}



html[data-bs-theme="dark"] .table-light{
  --bs-table-bg: rgba(255,255,255,.06);
  --bs-table-color: var(--bs-body-color);
}

/* List group */
.list-group-item{
  background: var(--surface-1) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.list-group-item-action:hover{
  background: var(--surface-2) !important;
}

/* Dropdown (Bootstrap dropdown) */
.dropdown-menu{
  border-radius: 14px !important;
  border: 1px solid var(--bs-border-color) !important;
  
  box-shadow: var(--shadow-2);
}
.dropdown-item{
  border-radius: 10px !important;
}

/* Badge daha modern */
.badge{ border-radius: 999px !important; }

/* Genel yardımcılar */
hr{ border-color: var(--bs-border-color) !important; opacity: 1 !important; }
.shadow, .shadow-sm{ box-shadow: var(--shadow-1) !important; }
.text-muted{ color: var(--muted) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border-radius: 12px !important;
  border: 1px solid var(--bs-border-color) !important;
  background: var(--surface-1) !important;
  color: var(--bs-body-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius: 10px !important;
}


/* === İYS PROFESYONEL SATIR DURUMLARI === */
.row-state-beklemede td,
.row-state-seçildi td,
.row-state-seçilmedi td,
.row-state-iptal td{
  background: transparent !important;
  border-bottom: 1px solid var(--bs-border-color);
}



/* =========================================================
   İYS - Anlamlı Durum Renkleri (Dark/Light Uyumlu)
   Class isimleri aynı kalır:
   - btn-beklemede / btn-secilmedi / btn-iptal
   - row-state-beklemede / row-state-seçildi / row-state-seçilmedi / row-state-iptal
   - badge-state + badge-*
   ========================================================= */

/* 1) Varsayılan palet (LIGHT) */
:root{
  --st-beklemede-bg: rgba(255,193,7,.22);
  --st-beklemede-fg: #111;
  --st-beklemede-br: rgba(255,193,7,.45);

  --st-secildi-bg: rgba(25,135,84,.16);
  --st-secildi-fg: #111;
  --st-secildi-br: rgba(25,135,84,.40);

  --st-secilmedi-bg: rgba(255,153,0,.22);
  --st-secilmedi-fg: #111;
  --st-secilmedi-br: rgba(255,153,0,.42);

  --st-iptal-bg: rgba(220,53,69,.16);
  --st-iptal-fg: #111;
  --st-iptal-br: rgba(220,53,69,.40);
}

/* 2) DARK palet (Bootstrap 5.3 data-bs-theme) */
html[data-bs-theme="dark"]{
  --st-beklemede-bg: rgba(255,193,7,.12);
  --st-beklemede-fg: var(--bs-body-color);
  --st-beklemede-br: rgba(255,193,7,.28);

  --st-secildi-bg: rgba(25,135,84,.14);
  --st-secildi-fg: var(--bs-body-color);
  --st-secildi-br: rgba(25,135,84,.26);

  --st-secilmedi-bg: rgba(255,153,0,.14);
  --st-secilmedi-fg: var(--bs-body-color);
  --st-secilmedi-br: rgba(255,153,0,.26);

  --st-iptal-bg: rgba(220,53,69,.14);
  --st-iptal-fg: var(--bs-body-color);
  --st-iptal-br: rgba(220,53,69,.26);
}

/* 3) Butonlar (senin mevcut class’ların BOZULMADAN) */
.btn-beklemede {background: #fff3cd;}
.btn-secilmedi,
.btn-iptal{
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  font-weight: 600;
}

.btn-beklemede{
  background: var(--st-beklemede-bg) !important;
  color: var(--st-beklemede-fg) !important;
  border-color: var(--st-beklemede-br) !important;
}
.btn-secilmedi{
  background: var(--st-secilmedi-bg) !important;
  color: var(--st-secilmedi-fg) !important;
  border-color: var(--st-secilmedi-br) !important;
}
.btn-iptal{
  background: var(--st-iptal-bg) !important;
  color: var(--st-iptal-fg) !important;
  border-color: var(--st-iptal-br) !important;
}

/* hover - premium */
.btn-beklemede:hover,
.btn-secilmedi:hover,
.btn-iptal:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  transition: .12s ease;
}

/* 4) Satır renklendirme (anlam aynı, dark’ta patlamaz) */
.row-state-beklemede td{ background: var(--st-beklemede-bg) !important; }
.row-state-seçildi  td{ background: var(--st-secildi-bg)  !important; }
.row-state-seçilmedi td{ background: var(--st-secilmedi-bg) !important; }
.row-state-iptal    td{ background: var(--st-iptal-bg)    !important; }

/* tablo border premium */
.table-bordered > :not(caption) > *{
  border-color: var(--bs-border-color) !important;
}

/* 5) Legend badge’leri (inline style’ı çöpe at, class ile yönet) */

.badge-beklemede{
  background: var(--st-beklemede-bg);
  color: var(--st-beklemede-fg);
  border-color: var(--st-beklemede-br);
}
.badge-secildi{
  background: var(--st-secildi-bg);
  color: var(--st-secildi-fg);
  border-color: var(--st-secildi-br);
}
.badge-secilmedi{
  background: var(--st-secilmedi-bg);
  color: var(--st-secilmedi-fg);
  border-color: var(--st-secilmedi-br);
}
.badge-iptal{
  background: var(--st-iptal-bg);
  color: var(--st-iptal-fg);
  border-color: var(--st-iptal-br);
}
/* === DEFAULT SATIRLAR NÖTR KALSIN === */
#iscilerTablosu tbody tr td{
  color: #000 !important;
  border: 1px solid #ccc !important;
}
html[data-bs-theme="light"] .table-light{
  --bs-table-bg: var(--surface-3);
  --bs-table-color: var(--bs-body-color);
}
/* =========================================
   İYS - Düzenleme Modu Input Okunurluğu Fix
   (Dark/Light uyumlu)
========================================= */

/* Düzenleme modunda açılan inputlar */
.duzenleme-aktif input.form-control,
.duzenleme-aktif input.form-control-sm,
.duzenleme-aktif .form-control,
.duzenleme-aktif .form-control-sm{
  background-color: #fff3cd !important;   /* senin edit sarın */
  color: #111 !important;                /* yazı her zaman koyu */
  border: 1px dashed rgba(0,0,0,.35) !important;
  caret-color: #111 !important;
}

/* Placeholder da okunur olsun */
.duzenleme-aktif input::placeholder{
  color: rgba(0,0,0,.55) !important;
}

/* Focus olunca da beyaza dönmesin */
.duzenleme-aktif input:focus{
  background-color: #fff3cd !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(255,193,7,.25) !important;
}

/* Dark temada bootstrap'in otomatik renklerini ez */
body.tema-dark .duzenleme-aktif input,
body.tema-dark .duzenleme-aktif .form-control{
  -webkit-text-fill-color: #111 !important; /* Chrome autofill/tema saçmalığı için */
}

/* Eğer td içine input gelince td'nin text rengi beyaza dönüyorsa: */
#iscilerTablosu td.duzenleme-aktif{
  color: #111 !important;
}
.siyah {color: #000;}

/* Table arka plan zorlamalarını iptal et */
table.table, .table{
  --bs-table-bg: transparent !important;
}

/* Dark tema için referans dropdown okunurluk fix */
.ref-dd{
  background: #0f172a !important;      /* koyu zemin */
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
}

.ref-item{
  color: #e5e7eb !important;           /* açık yazı */
}

.ref-item:hover{
  background: rgba(255,255,255,.10) !important;
}

.ref-item:active{
  background: rgba(255,255,255,.16) !important;
}
/* =========================
   DataTables Pagination Fix
   "Previous1Next" yapışmasını düzeltir
   Dark/Light uyumlu
========================= */

.dataTables_wrapper .dataTables_paginate{
  margin-top: .75rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  display: inline-block !important;
  margin: 0 .18rem !important;            /* boşluk */
  padding: .28rem .6rem !important;       /* buton gibi */
  border-radius: 10px !important;
  border: 1px solid var(--bs-border-color) !important;
  background: var(--surface-2) !important;
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: var(--surface-3) !important;
  filter: brightness(1.03);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: rgba(13,110,253,.16) !important;
  border-color: rgba(13,110,253,.35) !important;
  font-weight: 800 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* =========================================
   ANALIZ.PHP - Tema Uyumlu (Dark + Light)
   Bootstrap 5.3: html[data-bs-theme] ile
   tema.css tokenlarını kullanır
========================================= */

/* ortak */
:root{
  --radius: 16px;
  --shadow: 0 14px 34px rgba(0,0,0,.10);
}

/* ---------- DARK ---------- */
html[data-bs-theme="dark"]{
  --bg: var(--bs-body-bg);
  --card: var(--surface-1);
  --card-2: var(--surface-2);
  --soft: rgba(255,255,255,.03);
  --br: var(--bs-border-color);
  --br-2: rgba(255,255,255,.14);

  --txt: var(--bs-body-color);
  --muted: var(--muted);
  --muted2: rgba(255,255,255,.78);

  --brand:#3b82f6;
  --danger:#ef4444;
  --warn:#f59e0b;
  --ok:#22c55e;

  --shadow: 0 14px 34px rgba(0,0,0,.55);
}

/* ---------- LIGHT ---------- */
html[data-bs-theme="light"]{
  --bg: var(--bs-body-bg);
  --card: var(--surface-1);
  --card-2: var(--surface-2);
  --soft: rgba(15,23,42,.03);
  --br: var(--bs-border-color);
  --br-2: rgba(15,23,42,.14);

  --txt: var(--bs-body-color);
  --muted: rgba(15,23,42,.62);
  --muted2: rgba(15,23,42,.78);

  --brand:#0d6efd;
  --danger:#dc3545;
  --warn:#fd7e14;
  --ok:#16a34a;

  --shadow: 0 10px 26px rgba(15,23,42,.10);
}

/* Sayfa genel */
.wrap{max-width:1140px;margin:0 auto}
.thin{font-weight:400}
.semibold{font-weight:800}
.small-muted{font-size:.85rem;color:var(--muted)}

/* Üst kart */
.card-lite{
  border:1px solid var(--br);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background: linear-gradient(180deg, var(--card-2), var(--card));
}

.avatar{
  width:80px;height:80px;border-radius:14px;object-fit:cover;
  border:1px solid var(--br-2);
  background: var(--card-2);
}

.chip{
  display:inline-block;padding:.20rem .55rem;border-radius:999px;
  border:1px solid var(--br);
  background: var(--soft);
  font-size:.80rem;color:var(--muted2)
}

/* Loading */
.skel{
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border:1px solid var(--br);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}
.sk-step{display:flex;align-items:center;gap:.55rem;margin:.35rem 0}
.sk-dot{width:8px;height:8px;border-radius:50%;background:rgba(148,163,184,.55);flex:0 0 8px}
.sk-done .sk-dot{background:var(--ok)}
.sk-bar{height:8px;background:rgba(0,0,0,.08);border-radius:6px;overflow:hidden}
html[data-bs-theme="dark"] .sk-bar{background:rgba(255,255,255,.08)}
.sk-bar > div{height:8px;background:var(--brand);width:0%;transition:width .35s ease}

/* Badges */
.b{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;padding:.15rem .55rem;
  font-size:.78rem;border:1px solid var(--br);
  background: var(--soft);
  color:var(--muted2);
  margin-right:.25rem;margin-bottom:.25rem;
  white-space:nowrap;
}
.b-danger{
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
  font-weight:900;
}
html[data-bs-theme="dark"] .b-danger{ color:#fecaca; }

.b-warn{
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
  color: var(--warn);
  font-weight:800;
}
html[data-bs-theme="dark"] .b-warn{ color:#fde68a; }

.b-ok{
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border-color: color-mix(in srgb, var(--ok) 28%, transparent);
  color: var(--ok);
  font-weight:800;
}
html[data-bs-theme="dark"] .b-ok{ color:#bbf7d0; }

.b-strong{
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  border-color: color-mix(in srgb, var(--warn) 38%, transparent);
  color: var(--warn);
  font-weight:900;
}
html[data-bs-theme="dark"] .b-strong{ color:#ffedd5; }

/* HR Step UI */
.hr-steps{display:flex;flex-direction:column;gap:14px}
.hr-step{
  position:relative;
  border:1px solid var(--br);
  border-radius:18px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hr-step::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 95%, transparent), color-mix(in srgb, var(--brand) 12%, transparent));
}
.hr-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 14px 10px 16px;
}
.hr-left{display:flex;align-items:flex-start;gap:12px}
.hr-ico{
  width:38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--brand);
  font-weight:900;
  flex:0 0 38px;
}
html[data-bs-theme="dark"] .hr-ico{ color:#bfdbfe; }

.hr-titlewrap{display:flex;flex-direction:column;gap:3px}
.hr-title{
  font-size:1.03rem;font-weight:900;color:var(--txt);
  line-height:1.15;margin:0;
}
.hr-sub{margin:0;color:var(--muted);font-size:.86rem}

/* “Analiz edilen veri” mini kart */
.hr-analyzed{
  margin-top:8px;
  border:1px dashed color-mix(in srgb, var(--txt) 18%, transparent);
  background: var(--soft);
  border-radius:14px;
  padding:10px 10px;
}
.hr-an-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.hr-an-k{font-size:.80rem;color:var(--muted);font-weight:900}
.hr-an-v{font-size:.90rem;color:var(--txt);font-weight:900}
.hr-an-v code{font-size:.80rem}

/* Pills */
.hr-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:.28rem .62rem;border-radius:999px;
  background: var(--soft);
  border:1px solid var(--br);
  font-size:.80rem;color:var(--muted2);white-space:nowrap;
}
.pill strong{font-weight:900}
.pill-warn{background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--warn)}
.pill-ok{background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 28%, transparent); color: var(--ok)}
.pill-danger{background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger)}
.pill-strong{background: color-mix(in srgb, var(--warn) 18%, transparent); border-color: color-mix(in srgb, var(--warn) 38%, transparent); color: var(--warn); font-weight:900}

.hr-sep{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--br), transparent);
  margin:0 14px 10px 16px;
}

/* Table look */
.hr-tablewrap{padding:0 14px 14px 16px}
.hr-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--br);
  border-radius:14px;
  overflow:hidden;
  background: var(--card);
}
.hr-table thead th{
  background: var(--card-2);
  border-bottom:1px solid var(--br);
  font-weight:900;
  padding:.62rem .60rem;
  font-size:.88rem;
  color: var(--muted2);
}
.hr-table tbody td{
  padding:.55rem .60rem;
  border-bottom:1px solid color-mix(in srgb, var(--br) 80%, transparent);
  font-size:.92rem;
  vertical-align:middle;
  color: var(--txt);
}
.hr-table tbody tr:last-child td{border-bottom:0}
.hr-table tbody tr:hover td{background: var(--soft)}
.hr-row-strong td{background: color-mix(in srgb, var(--warn) 10%, transparent)!important}
.hr-row-kacak td{border-left:4px solid color-mix(in srgb, var(--danger) 55%, transparent)}

/* Collapsible */
.hr-toggle{
  border:1px solid var(--br);
  background: var(--soft);
  color: var(--muted2);
  border-radius:999px;
  padding:.34rem .72rem;
  font-size:.85rem;font-weight:900;
}
.hr-toggle:hover{filter:brightness(1.03)}
.hr-body{display:none}
.hr-body.open{display:block}

.eslesmeler{
  padding:10px;
  border-left:6px solid color-mix(in srgb, var(--brand) 35%, transparent);
  background: var(--soft);
  border-radius:14px;
}

/* Debug */
.dbg-wrap{margin-top:10px}
.dbg-body{
  display:none;
  margin-top:8px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--br);
  background: var(--soft);
  color:var(--muted2);
  font-size:.85rem;
}
.dbg-k{color:var(--muted);font-weight:900}
.dbg-v{color:var(--txt);font-weight:700}

/* Buton override: SADECE DARK'ta iyileştir */
html[data-bs-theme="dark"] .btn-outline-secondary{border-color:rgba(255,255,255,.18);color:var(--muted2)}
html[data-bs-theme="dark"] .btn-outline-secondary:hover{background:rgba(255,255,255,.06)}
html[data-bs-theme="dark"] .btn-outline-primary{border-color:rgba(59,130,246,.55);color:#bfdbfe}
html[data-bs-theme="dark"] .btn-outline-primary:hover{background:rgba(59,130,246,.12)}

@media (max-width:576px){
  .avatar{width:68px;height:68px}
  .hr-ico{width:34px;height:34px;border-radius:12px}
}

.cizgi {
  border-bottom: 10px solid #343a40;
}

/* =========================================
   IYS - MOBIL DRAWER + RESPONSIVE NAV (TEK KAYNAK)
   Dark/Light uyumlu | Bootstrap 5.3 tokens
========================================= */

/* Scroll lock */
html.no-scroll, body.no-scroll { overflow: hidden !important; }

/* Drawer temel */
#drawer{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: min(86vw, 340px) !important;
  background: var(--surface-1) !important;
  color: var(--bs-body-color) !important;
  border-right: 1px solid var(--bs-border-color) !important;
  transform: translateX(-110%) !important;
  transition: transform .22s ease !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  visibility: visible !important;
  will-change: transform;
}
#drawer.open{
  transform: translateX(0) !important;
}

/* Backdrop */
#backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.65) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
  z-index: 999998 !important;
  display: block !important;
}
#backdrop.show{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hamburger buton */
#hambBtn{
  appearance:none;
  border:1px solid var(--bs-border-color) !important;
  background: color-mix(in srgb, var(--bs-body-color) 6%, transparent) !important;
  color: var(--bs-body-color) !important;
  border-radius: 10px !important;
  padding: .35rem .55rem !important;
  line-height: 1 !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

/* Drawer içi */
#drawer .d-head{
  padding: 14px 14px;
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky;
  top: 0;
  background: var(--surface-1);
  z-index: 1;
}
#drawer .d-links{ padding: 10px 12px 18px; }
#drawer .d-section{
  margin-top: 10px;
  font-size: .82rem;
  opacity: .78;
  font-weight: 800;
  letter-spacing: .2px;
}
#drawer .d-link{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--bs-border-color);
  margin-top: 8px;
  background: color-mix(in srgb, var(--bs-body-color) 4%, transparent);
}
#drawer .d-link:hover{
  background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
}
#drawer .d-link.active{
  outline: 2px solid color-mix(in srgb, #0d6efd 35%, transparent);
}
#drawer .d-link.logout{
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
  background: color-mix(in srgb, #ef4444 12%, transparent);
}

/* Mobilde üst nav linklerini kapat, drawer kullan */
@media (max-width: 991.98px){
  .nav-left{ display:none !important; }
}

/* Desktop’ta drawer/backdrop/hamb kapat */
@media (min-width: 992px){
  #drawer, #backdrop, #hambBtn{ display:none !important; }
}
/* =========================================
   MOBIL DRAWER - STYLE.CSS ÇAKIŞMA OVERRIDE (KESİN)
========================================= */
#drawer{
  position: fixed !important;
  inset: 0 auto 0 0 !important;   /* sağdan gelen inset'i öldür, sola sabitle */
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;

  width: min(86vw, 340px) !important;
  height: 100vh !important;

  background: var(--surface-1, #10141a) !important;
  color: var(--bs-body-color, #e7eaf0) !important;
  border-right: 1px solid var(--bs-border-color, rgba(255,255,255,.12)) !important;

  transform: translateX(-110%) !important;
  transition: transform .22s ease !important;

  z-index: 999999 !important;
  overflow-y: auto !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#drawer.open{
  transform: translateX(0) !important;
}

/* Backdrop (hem .show hem .open destekle) */
#backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.65) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
  z-index: 999998 !important;
  display: block !important;
}
#backdrop.show,
#backdrop.open{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Scroll lock */
html.no-scroll, body.no-scroll{ overflow:hidden !important; }