/* ============================================================
   SIDEBAR-UXUI-2 (2026-08-10): Ana Navigasyon 2.0
   Genişlik DEĞİŞMEDİ (--v33-sidebar-width: 280px, demo-theme.css).
   Üç kesin katman: .v33-sidebar (tam yükseklik arka plan, grid hücresi) >
   .v33-sidebar__viewport (sticky, 100vh, flex column) >
     .v33-sidebar__top (SABİT: logo+arama)
     .v33-sidebar__nav (TEK scroll eden alan)
     .v33-sidebar__bottom (SABİT: durum+çıkış)
   ============================================================ */

/* SIDEBAR-FULLHEIGHT-1 (2026-08-10): `.v33-sidebar` (grid hücresinin
   kendisi) `align-self: stretch` ile ana içerik ne kadar UZUN olursa
   olsun grid satırının TAM yüksekliğine gerilir -- koyu arka plan sayfa
   boyunca KESİNTİSİZ devam eder. Bu, `.v33-sidebar__viewport`'un kendi
   `position`'undan TAMAMEN BAĞIMSIZ (arka plan `.v33-sidebar`'ın kendi
   grid gerilmesinden geliyor) -- bu yüzden SIDEBAR-SCROLLWITHPAGE-1
   aşağıda `position:sticky`'i kaldırdığında bu davranış BOZULMADI. */
.v33-sidebar { z-index: 40; align-self: stretch; color: #ecf5ff; background: linear-gradient(180deg, var(--v33-sidebar), #0b1b2d); min-width: 0; overflow: hidden; }

/* SIDEBAR-SCROLLWITHPAGE-1 (2026-08-20): Kullanıcı bildirimi -- uzun modül
   sayfalarında (Elektrik Şebekesi, Abone Lokasyon vb.) aşağı kaydırınca
   sidebar YERİNDE SABİT kalıyordu, kullanıcı sayfayla BİRLİKTE kaymasını
   istiyor. Kök neden: `position:sticky; top:0; height:100vh` -- tam olarak
   "viewport'a sabitlen, sayfa kayarken hep aynı yerde kal" demekti (üstteki
   SIDEBAR-FULLHEIGHT-1 için BİLİNÇLİ eklenmişti, ama o zamanki gerekçe artık
   geçerli değil, kullanıcı farklı davranış istiyor). `position:relative`
   korunuyor çünkü `.v33-sidebar__collapse-btn`'ün `position:absolute`
   konumlandırma bağlamı BUYDU (bkz. aşağıdaki SIDEBAR-COLLAPSE-1 yorumu) --
   `position:static`e düşürseydik centik düğmesi yanlış öğeye göre
   konumlanırdı. `height:100vh` kaldırıldı: artık sabit bir yüksekliğe
   sıkıştırılmadığı için `.v33-sidebar__nav`'ın `overflow-y:auto` iç
   scroll'u sadece menü GERÇEKTEN 100vh'den uzunsa devreye girer (normalde
   girmez, menü tek ekrana sığar) -- doğal davranış, ayrı bir kural
   gerekmedi. */
.v33-sidebar__viewport {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden; /* yatay taşma güvenlik ağı -- madde 4/40 */
}

.v33-sidebar__top { flex: 0 0 auto; padding: 20px 16px 10px; }
.v33-sidebar__bottom { flex: 0 0 auto; padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,.1); }

.v33-sidebar__brand { display: flex; align-items: center; gap: 12px; padding: 2px 2px 16px; border-bottom: 1px solid rgba(255,255,255,.12); min-width: 0; }
.v33-sidebar__brand > span:last-child { min-width: 0; overflow: hidden; }
.v33-sidebar__brand b { display: block; letter-spacing: .12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v33-sidebar__brand small { display: block; margin-top: 3px; color: #a9bfd3; font-size: .7rem; }

.v33-sidebar__mark--logo { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: #fff !important; padding: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.v33-sidebar__mark--logo img { width: 100%; height: 100%; object-fit: contain; }

/* --- Arama (madde 19/20) --- */
.v33-sidebar__search { margin-top: 12px; }
/* [hidden] için AÇIK öncelik -- `.v33-sidebar__search-toggle`/`-input-wrap`
   üzerindeki `display:flex` kuralı, tarayıcının UA stylesheet'indeki
   düşük öncelikli `[hidden]{display:none}` kuralını YAZAR-SEVİYESİ aynı
   özgüllükte (0,1,0) EZER (kaynak sırası: yazar > UA) -- bu, JS'in
   `element.hidden = true` YAZDIĞI halde elemanın GÖRÜNÜR KALMASINA yol
   açan gerçek bir hataydı (arama açılınca hem düğme hem input aynı anda
   görünüyordu). Aşağıdaki iki kural özgüllüğü YÜKSELTİP `hidden`
   niteliğinin HER ZAMAN kazanmasını garanti eder.
   */
.v33-sidebar__search-toggle[hidden], .v33-sidebar__search-input-wrap[hidden] { display: none; }
.v33-sidebar__search-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.04);
  color: #a9bfd3; font: inherit; font-size: .82rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.v33-sidebar__search-toggle:hover { color: #ecf5ff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.v33-sidebar__search-toggle svg { flex: 0 0 auto; opacity: .85; }
.v33-sidebar__search-input-wrap {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 11px;
  border: 1px solid var(--v33-focus); border-radius: 10px; background: rgba(255,255,255,.07); color: #a9bfd3;
}
.v33-sidebar__search-input-wrap svg { flex: 0 0 auto; }
.v33-sidebar__search-input-wrap input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: #ecf5ff; font: inherit; font-size: .84rem;
  padding: 8px 0; outline: none;
}
.v33-sidebar__search-input-wrap input::placeholder { color: #6d84a0; }
.v33-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Scroll eden orta menü alanı --- */
.v33-sidebar__nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 16px 14px; min-width: 0; }
/* SIDEBAR-UXUI-2 (madde 30): ince, tema uyumlu, tamamen gizlenmeyen scrollbar. */
.v33-sidebar__nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.v33-sidebar__nav::-webkit-scrollbar { width: 7px; }
.v33-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.v33-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 999px; }
.v33-sidebar__nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }

/* --- Gruplar (madde 7/8) --- */
.v33-sidebar__group { display: grid; gap: 3px; margin-bottom: 14px; }
.v33-sidebar__group:last-child { margin-bottom: 0; }
.v33-sidebar__group-label {
  margin: 0; padding: 0 10px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #64809e;
}
/* Bir grubun TÜM linkleri gizlenirse (modül kapatma/arama/permission) grup
   başlığı da OTOMATİK gizlenir -- "boş kutu" başlığı görünmesin. `:has()`
   desteklemeyen çok eski tarayıcılarda başlık her zaman görünür kalır
   (zararsız kozmetik geri düşüş, işlevsellik etkilenmez). */
.v33-sidebar__group:not(:has(.v33-sidebar__link:not([hidden]):not([data-search-hidden]))) { display: none; }

.v33-sidebar__link {
  position: relative; display: flex; width: 100%; align-items: center; gap: 11px; min-height: 46px;
  padding: 9px 12px 9px 14px; border-radius: 10px; color: #c7d7ea; background: transparent;
  text-align: left; text-decoration: none; cursor: pointer; min-width: 0;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.v33-sidebar__link[hidden], .v33-sidebar__link[data-search-hidden] { display: none; }
/* madde 28: uzun etiketler EN FAZLA 2 satır, ikon hizası bozulmasın. */
.v33-sidebar__link b { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: .87rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.v33-sidebar__link:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(2px); }
.v33-sidebar__link:focus-visible { outline: 2px solid var(--v33-focus); outline-offset: -1px; }

/* madde 11: rafine aktif öğe -- büyük düz blok yerine hafif yüzey + sol
   accent çizgi + güçlü ama kaba olmayan his. */
.v33-sidebar__link.is-active {
  color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--v33-brand) 30%, transparent), color-mix(in srgb, var(--v33-brand) 8%, transparent));
  box-shadow: inset 3px 0 0 var(--v33-accent);
}
.v33-sidebar__link.is-active::before {
  content: ''; position: absolute; inset: 6px auto 6px -1px; width: 3px; border-radius: 3px;
  background: var(--v33-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--v33-accent) 70%, transparent);
}
.v33-sidebar__link.is-active .v33-sidebar__menu-icon { box-shadow: 0 0 0 2px color-mix(in srgb, var(--v33-accent) 45%, transparent), 0 6px 16px rgba(0,0,0,.22); }

/* SIDEBAR-UXUI-2-FIX1 (2026-08-10): footer YENİDEN tasarlandı -- ÖNCEKİ
   sürümde durum rozeti KENDİ kenarlığı/arka planıyla bir kutu, "Çıkış Yap"
   da (menü linkleriyle AYNI stil miras alındığı için) KENDİ kenarlığı
   olası bir başka kutuydu -- ikisi "iki bağımsız büyük kutu" gibi
   duruyordu. Artık durum satırı KUTUSUZ/şeffaf, ince bir metin satırı;
   "Çıkış Yap" tek, hafif vurgulu satır -- ikisi TEK bir bütünleşik
   footer bloğu gibi okunuyor. */
.v33-sidebar__logout { margin-top: 2px; padding-top: 9px; padding-bottom: 9px; font: inherit; color: #ffb4ac; }
.v33-sidebar__logout:hover { background: rgba(239,83,80,.12); color: #ffd4cf; }
.v33-sidebar__logout .v33-sidebar__menu-icon { background: linear-gradient(145deg,#d74444,#8f1d1d); color: #fff; width: 30px; height: 30px; }

/* --- Durum alanı (madde 23/24) -- adopte edilen .it-offline-indicator --- */
.v33-sidebar__status { min-height: 0; }
.v33-sidebar__status:empty { display: none; }
.v33-sidebar__status .it-offline-indicator.v33-sidebar__status-indicator {
  position: static; width: 100%; margin: 0; box-shadow: none;
  background: transparent; border: 0; color: #a9bfd3;
  border-radius: 0; justify-content: flex-start; gap: 8px;
  padding: 8px 10px; min-height: auto; font-size: .78rem; font-weight: 700;
}
.v33-sidebar__status .it-offline-indicator.v33-sidebar__status-indicator b {
  background: rgba(255,255,255,.1); color: #ecf5ff; font-size: 10px; min-width: 18px; height: 18px; padding: 0 5px;
}
/* Durum metni ("Çevrim içi" vb.) rengi -- accent yeşil tonuyla hafif
   ayrışsın (dot zaten renkli ama metin çok soluk kalıyordu). */
.v33-sidebar__status .it-offline-indicator.v33-sidebar__status-indicator span:not(.it-offline-dot) { color: #dce9f5; }

/* ============================================================
   İKON SİSTEMİ -- standardize edilmiş TEK kaynak (2026-08-10 öncesi
   bu bölüm 3 kez üst üste yazılmış, çoğu ölü CSS'ti -- bkz.
   SIDEBAR-UXUI-2-SONUC.md "İkon sistemi" bölümü). Her ikon AYNI
   boyut/radius/border/gölge mantığını paylaşır, yalnız arka plan
   gradyanı (renk kategorisi) modüle göre değişir.
   ============================================================ */
.v33-sidebar__menu-icon {
  position: relative; display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  background: linear-gradient(145deg,#35554a,#173b30); color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.2), 0 5px 12px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.v33-sidebar__menu-icon svg { display: block; width: 18px; height: 18px; color: inherit; filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
.v33-sidebar__link:hover .v33-sidebar__menu-icon { transform: translateY(-1px) scale(1.03); filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 17px rgba(0,0,0,.23); }

.v33-sidebar__menu-icon--home { background: linear-gradient(145deg,#2f80ed,#1559aa); }
.v33-sidebar__menu-icon--orders { background: linear-gradient(145deg,#00a88f,#087565); }
.v33-sidebar__menu-icon--create { background: linear-gradient(145deg,#43b85b,#237b36); }
.v33-sidebar__menu-icon--electric_grid { background: linear-gradient(145deg,#ffd84d,#ee9f00); color: #3d2b00; border-color: #ffe788; }
.v33-sidebar__menu-icon--subscriber { background: linear-gradient(145deg,#19aeb8,#087985); }
.v33-sidebar__menu-icon--inventory { background: linear-gradient(145deg,#667eea,#3d4fa8); }
.v33-sidebar__menu-icon--maintenance { background: linear-gradient(145deg,#ff9d2f,#d86000); }
.v33-sidebar__menu-icon--protocols { background: linear-gradient(145deg,#a855d1,#6c2b91); }
/* SIDEBAR-UXUI-2: bu 4 modül (meter_reading/temp_acceptance/lighting_map/
   health) daha ÖNCE hiç kendi rengi olmayan, sessizce varsayılan koyu
   yeşile düşen ikonlardı -- gerçek bir tutarsızlıktı, şimdi düzeltildi. */
.v33-sidebar__menu-icon--meter_reading { background: linear-gradient(145deg,#0ea5e9,#0369a1); }
.v33-sidebar__menu-icon--temp_acceptance { background: linear-gradient(145deg,#22c55e,#15803d); }
.v33-sidebar__menu-icon--lighting_map { background: linear-gradient(145deg,#f59e0b,#b45309); }
.v33-sidebar__menu-icon--health { background: linear-gradient(145deg,#14b8a6,#0f766e); }
.v33-sidebar__menu-icon--plans { background: linear-gradient(145deg,#20bdd1,#087c93); }
.v33-sidebar__menu-icon--documents { background: linear-gradient(145deg,#778d99,#43555f); }
.v33-sidebar__menu-icon--electric_calc { background: linear-gradient(145deg,#ffca28,#e28c00); color: #3d2b00; border-color: #ffe082; }
.v33-sidebar__menu-icon--manager { background: linear-gradient(145deg,#8b69d8,#5433a3); }
.v33-sidebar__menu-icon--reports { background: linear-gradient(145deg,#27c2dc,#087eaa); }
.v33-sidebar__menu-icon--shift { background: linear-gradient(145deg,#78909c,#455a64); }
.v33-sidebar__menu-icon--field { background: linear-gradient(145deg,#ef5350,#b91f25); }
.v33-sidebar__menu-icon--sync { background: linear-gradient(145deg,#66bb6a,#2d8436); }
.v33-sidebar__menu-icon--admin { background: linear-gradient(145deg,#9a7668,#60453c); }

/* Eski sembol anahtarları kullanılıyorsa geriye uyumluluk. */
.v33-sidebar__menu-icon--ϟ { background: linear-gradient(145deg,#ffd84d,#ee9f00); color: #3d2b00; }
.v33-sidebar__menu-icon--⌖ { background: linear-gradient(145deg,#19aeb8,#087985); }
.v33-sidebar__menu-icon--▣ { background: linear-gradient(145deg,#667eea,#3d4fa8); }
.v33-sidebar__menu-icon--⚙ { background: linear-gradient(145deg,#ff9d2f,#d86000); }
.v33-sidebar__menu-icon--▤ { background: linear-gradient(145deg,#a855d1,#6c2b91); }
.v33-sidebar__menu-icon--△ { background: linear-gradient(145deg,#20bdd1,#087c93); }
.v33-sidebar__menu-icon--▧ { background: linear-gradient(145deg,#778d99,#43555f); }
.v33-sidebar__menu-icon--∑ { background: linear-gradient(145deg,#ffca28,#e28c00); color: #3d2b00; }
.v33-sidebar__menu-icon--◫ { background: linear-gradient(145deg,#8b69d8,#5433a3); }
.v33-sidebar__menu-icon--▥ { background: linear-gradient(145deg,#27c2dc,#087eaa); }
.v33-sidebar__menu-icon--◷ { background: linear-gradient(145deg,#78909c,#455a64); }
.v33-sidebar__menu-icon--◎ { background: linear-gradient(145deg,#ef5350,#b91f25); }
.v33-sidebar__menu-icon--⟳ { background: linear-gradient(145deg,#66bb6a,#2d8436); }
.v33-sidebar__menu-icon--⛭ { background: linear-gradient(145deg,#9a7668,#60453c); }

/* --- Daraltılmış mod (collapsed) tooltip -- madde 16, custom (native
   title'ın klavye odağında GÖRÜNMEME sorunu için, bkz. demo-sidebar.js). --- */
.v33-sidebar__tooltip {
  position: fixed; z-index: 200; transform: translateY(-50%);
  padding: 7px 11px; border-radius: 8px; background: #0b1b2d; color: #ecf5ff;
  font: 700 12.5px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.08);
  pointer-events: none; white-space: nowrap;
}
.v33-sidebar__tooltip[hidden] { display: none; }

/* SIDEBAR-COLLAPSE-1 (2026-08-05): daraltilabilir sidebar -- kenarda bir
   "centik" (notch) dugmesiyle acilip kapanir, kapaninca ana icerik alani
   (.v33-shell__main, grid: minmax(0,1fr)) otomatik buyur -- ayri bir
   main-genisletme kurali GEREKMEZ, tek yapilan --v33-sidebar-width
   degiskenini kucultmek. Tercih localStorage'da kalici, sayfalar arasi
   (bu bir SPA degil, coklu sayfa) korunur -- demo-sidebar.js'in EN
   basinda, DOMContentLoaded'dan once uygulanir ki ilk boyamada "once
   genis sonra kucul" cakmasi olmasin.
   `.v33-sidebar__collapse-btn`'ün `position:absolute` konumlandırma
   bağlamı `.v33-sidebar__viewport` (kendisi SIDEBAR-SCROLLWITHPAGE-1'den
   itibaren `position:relative` -- eskiden `sticky`'ydi, `sticky` da bir
   konumlandırma bağlamıdır ama `relative`'e düşürülünce de bağlam
   BOZULMADI, bilinçli olarak korundu). */
.v33-sidebar__collapse-btn {
  position: absolute; top: 22px; right: -6px; z-index: 45;
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  background: var(--v33-sidebar-soft, #16324d); color: #dce9f5;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: background-color .15s ease, color .15s ease;
}
.v33-sidebar__collapse-btn:hover { background: var(--v33-brand); color: #fff; }
.v33-sidebar__collapse-btn:focus-visible { outline: 2px solid var(--v33-accent, #fff); outline-offset: 2px; }
.v33-sidebar__collapse-btn svg { width: 15px; height: 15px; transition: transform .2s ease; }
html.v33-sidebar-collapsed .v33-sidebar__collapse-btn svg { transform: rotate(180deg); }
/* .v33-sidebar__top artık position:relative DEĞİL (üstteki .v33-sidebar__brand
   ile aynı öğe içinde konumlanıyordu) -- .v33-sidebar__viewport zaten
   positioned (relative) olduğu için centik ona göre konumlanır, ekstra
   position:relative gerekmez. */

/* Genislik degisimi + etiket gizleme YALNIZCA masaustunde -- mobilde
   sidebar zaten ayri bir cekmece (drawer) mekanizmasi kullaniyor
   (bkz. demo-mobile.css), bu masaustu tercihinin mobili etkilemesi
   YANLIS olurdu (bkz. asagidaki demo-mobile.css'teki centigi gizleme). */
@media (min-width: 961px) {
  html.v33-sidebar-collapsed { --v33-sidebar-width: 76px; }
  html.v33-sidebar-collapsed .v33-sidebar__top,
  html.v33-sidebar-collapsed .v33-sidebar__nav,
  html.v33-sidebar-collapsed .v33-sidebar__bottom { padding-left: 10px; padding-right: 10px; }
  html.v33-sidebar-collapsed .v33-sidebar__brand { justify-content: center; }
  html.v33-sidebar-collapsed .v33-sidebar__brand > span:not(.v33-sidebar__mark) { display: none; }
  html.v33-sidebar-collapsed .v33-sidebar__search { display: none; } /* madde 16: daraltılmışken arama gizli, açılınca otomatik genişler (bkz. openSearch()) */
  html.v33-sidebar-collapsed .v33-sidebar__group-label { display: none; }
  html.v33-sidebar-collapsed .v33-sidebar__link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  html.v33-sidebar-collapsed .v33-sidebar__link b { display: none; }
  html.v33-sidebar-collapsed .v33-sidebar__link.is-active::before { inset: 6px auto 6px 2px; }
  html.v33-sidebar-collapsed .v33-sidebar__status { display: none; } /* ikon-only modda durum metni sığmaz, tooltip yeterli değil -- backlog: ikon-only durum rozeti */
  html.v33-sidebar-collapsed .v33-sidebar__logout b { display: none; }
  html.v33-sidebar-collapsed .v33-sidebar__logout { justify-content: center; }
}