/* ═══════════════════════════════════════════════════════════════════════
   UYGULAMA KABUĞU — kabuk.css
   `uygulama-kabugu-redesign.html` prototipinin portu. Topbar + sidebar +
   sayfa başlık bandı; TÜM sayfalarda tek kaynak (partials/kabuk_*.html).

   SINIF ADLARI `sh-` ÖNEKLİ: prototipteki `.btn`, `.badge`, `.menu`, `.search`,
   `.content` gibi adlar Bootstrap'te de var; öneksiz kopyalamak uygulamanın
   geri kalanını bozardı (DESIGN_RULES.md §B4).

   ESKİ KABUK KURALLARI DEVREDE KALMASIN: eski yerleşim `#main{margin-left:300px}`
   ve `.sidebar{position:fixed;width:300px}` ile çalışıyordu. Yeni kabuk ID'leri
   `shTop/shSide/shMain` olduğu için o kurallar hiç eşleşmez — iki yerleşim
   birbirine karışmaz.
   ═══════════════════════════════════════════════════════════════════════ */

.sh-top, .sh-side, .sh-content, .sh-drop, .sh-menu {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
}

/* ---------- TOPBAR ---------- */
.sh-top {
  position: sticky; top: 0; z-index: 1030;
  background: var(--card); border-bottom: 1px solid var(--line);
  height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 18px;
  box-shadow: 0 1px 3px rgba(19, 26, 38, .04);
}
/* Marka alanı yan menü genişliğini kaplar → arama kutusu tam içerik sütununun
   üstünde başlar (kullanıcı kararı 2026-08-11). */
.sh-logo {
  display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap;
  width: 260px; flex: none;
}
.sh-logo img { height: 46px; width: auto; }
.sh-hamb {
  border: 0; background: transparent; font-size: 1.15rem; cursor: pointer;
  color: var(--muted); padding: 6px; border-radius: 8px; line-height: 1;
}
.sh-hamb:hover { color: var(--ink); background: #F2F4F8; }
.sh-hamb { font-size: 1.3rem; margin-left: -2px; }

/* arama */
.sh-searchwrap { position: relative; flex: 1; max-width: 480px; }
.sh-search {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 12px; height: 38px;
  margin: 0;
}
.sh-search:focus-within { border-color: var(--select-line); background: var(--card); }
.sh-search input { border: 0; outline: 0; font: inherit; font-size: .9rem; width: 100%; background: transparent; }
.sh-search .sh-clear { border: 0; background: transparent; color: var(--faint); cursor: pointer; display: none; padding: 0 2px; }
.sh-search.hasval .sh-clear { display: block; }
.sh-searchwrap .bi-search { color: var(--faint); font-size: .95rem; }

.sh-drop {
  display: none; position: absolute; top: 44px; left: 0; right: 0; z-index: 1040;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(19, 26, 38, .16); overflow: hidden;
}
.sh-drop.open { display: block; }
.sh-drop-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.sh-drop-head label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; margin: 0; }
.sh-drop-head span { margin-left: auto; color: var(--faint); font-size: .78rem; }
.sh-drop-list { max-height: 300px; overflow: auto; }
.sh-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; font-size: .86rem; margin: 0; }
.sh-item:hover { background: #FAFBFD; }
.sh-item input { accent-color: var(--primary); width: 15px; height: 15px; flex: none; }
.sh-item .sh-pi { width: 32px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #D8DCE3, #B9BFC9); flex: none; object-fit: cover; }
.sh-item .sh-nm { min-width: 0; }
.sh-item .sh-nm b { font-weight: 600; display: block; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-item .sh-nm span { font-size: .74rem; color: var(--faint); }
.sh-item .sh-pr { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.sh-drop-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: #FAFBFD; font-size: .84rem; }
.sh-drop-foot .sh-cnt { color: var(--muted); }
.sh-drop-foot .sh-acts { margin-left: auto; display: flex; gap: 8px; }
.sh-bos { padding: 14px; font-size: .86rem; color: var(--muted); text-align: center; }

/* düğmeler (kabuk içi) */
.sh-btn {
  font-family: inherit; font-size: .88rem; font-weight: 600; border-radius: 8px;
  padding: 0 13px; height: 36px; cursor: pointer; border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.sh-btn:hover { background: #F7F9FC; color: var(--ink); }
.sh-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.sh-btn-primary:hover { background: #1C2C4F; color: #fff; }
.sh-btn-sm { font-size: .8rem; height: 30px; padding: 0 10px; }

/* topbar sağ */
.sh-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sh-iconbtn {
  position: relative; border: 1px solid var(--line-strong); background: var(--card);
  border-radius: 8px; width: 36px; height: 36px; cursor: pointer; color: var(--muted);
  font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
}
.sh-iconbtn:hover { color: var(--ink); background: #F7F9FC; }
.sh-badge {
  position: absolute; top: -6px; right: -6px; background: var(--loss); color: #fff;
  font-size: .62rem; font-weight: 700; border-radius: 99px; padding: 1px 5px;
  border: 2px solid var(--card); font-variant-numeric: tabular-nums;
}
.sh-usermenu { position: relative; }
.sh-userbtn {
  display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong);
  background: var(--card); border-radius: 9px; padding: 4px 11px 4px 4px; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink); height: 36px;
}
.sh-userbtn .sh-av {
  width: 28px; height: 28px; border-radius: 7px; background: var(--select); color: var(--select-line);
  display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700;
}
.sh-menu {
  display: none; position: absolute; right: 0; top: 44px; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 11px;
  box-shadow: 0 16px 44px rgba(19, 26, 38, .16); min-width: 260px; overflow: hidden; z-index: 1045;
}
.sh-menu.open { display: block; }
.sh-menu .sh-mh { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.sh-menu .sh-mh b { display: block; }
.sh-menu .sh-mh span { font-size: .74rem; color: var(--faint); }
.sh-menu a {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 14px; font-size: .88rem;
  color: var(--ink); text-decoration: none; line-height: 1.4;
}
.sh-menu a:hover { background: #FAFBFD; }
/* Kırmızı yalnız zarar/olumsuz DEĞER içindir, menü öğesi rengi değil:
   çıkış yıkıcı bir işlem değil (2026-08-13 renk disiplini). */
.sh-menu a.sh-danger { color: var(--ink); }
.sh-menu .sh-sep { border-top: 1px solid var(--line); }
.sh-menu .sh-zaman { display: block; font-size: .74rem; color: var(--faint); }
.sh-menu .sh-hepsi { justify-content: center; color: var(--select-line); font-weight: 600; }

/* ---------- YERLEŞİM ---------- */
.sh-layout { display: flex; min-height: calc(100vh - 60px); background: var(--surface); }
.sh-side {
  width: 278px; flex: none; background: var(--card); border-right: 1px solid var(--line);
  padding: 12px 10px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto;
}
.sh-side.collapsed { width: 68px; overflow: visible; }
.sh-side.collapsed .sh-nl, .sh-side.collapsed .sh-chev,
.sh-side.collapsed .sh-beta, .sh-side.collapsed .sh-sub,
.sh-side.collapsed .sh-foot span { display: none; }
.sh-side.collapsed .sh-nav { justify-content: center; padding: 10px 0; position: relative; }

.sh-nav {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  /* Menü metni --muted (#68727F) ile soluk duruyordu; sidebar kendi koyu
     tonunu kullanır (gövde metniyle karışmaması için --ink değil). */
  font-size: 1.09rem; font-weight: 600; color: #2E3A4B; cursor: pointer; border: 0;
  background: transparent; width: 100%; text-align: left; font-family: inherit;
  text-decoration: none;
}
.sh-nav:hover { background: #F2F4F8; color: var(--ink); }
.sh-nav.active { background: var(--select); color: var(--select-line); font-weight: 600; box-shadow: inset 3px 0 0 var(--select-line); }
.sh-nav .sh-ic {
  width: 24px; text-align: center; flex: none; font-size: 1.18rem; line-height: 1;
  /* Emoji ikon: sistem emoji fontu zorunlu, yoksa siyah-beyaz düşüyor */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.sh-nav .sh-chev { margin-left: auto; font-size: .7rem; color: var(--faint); transition: transform .15s; }
.sh-group.open > .sh-nav .sh-chev { transform: rotate(90deg); }
.sh-beta { font-size: .64rem; font-weight: 700; background: var(--warn-soft); color: var(--warn); border-radius: 5px; padding: 1px 6px; }
.sh-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 4px; }
.sh-group.open .sh-sub { display: flex; }
/* Daraltılmışken açık grubun alt menüsü GİZLİ kalmalı. Bu kural olmadan
   `.sh-group.open .sh-sub` (aynı ağırlıkta ama dosyada sonra) kazanıyor ve
   alt sayfa adları 68px'e sıkışıp katlanıyordu. Uçan menü kuralı bundan
   sonra geldiği için hover yine çalışır. */
.sh-side.collapsed .sh-group.open .sh-sub { display: none; }
.sh-sub a { display: block; font-size: 1.02rem; font-weight: 600; color: #46536A; text-decoration: none; padding: 8px 11px 8px 48px; border-radius: 8px; }
.sh-sub a:hover { background: #F2F4F8; color: var(--ink); }
.sh-sub a.active { color: var(--select-line); font-weight: 700; background: var(--select); }
.sh-foot { margin-top: auto; padding: 10px 11px; border-top: 1px solid var(--line); font-size: .81rem; color: var(--faint); }

/* daraltılmış modda uçan alt menü */
.sh-side.collapsed .sh-group { position: relative; }
.sh-side.collapsed .sh-group:hover .sh-sub,
.sh-side.collapsed .sh-group.open:hover .sh-sub {
  display: flex; position: absolute; left: 64px; top: 0; z-index: 1035; min-width: 226px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(19, 26, 38, .16); padding: 6px; margin: 0;
}
.sh-side.collapsed .sh-sub a { padding: 8px 12px; }

/* Daraltılmışken tek satırlık öğelerin adı hover'da yan balonda görünür —
   ikon tek başına hangi sayfa olduğunu söylemiyor (grupların adı zaten
   uçan alt menüde). Yerel `title` kullanılmaz: tarayıcı balonu tasarımın
   dışında kalıyor. */
.sh-side.collapsed a.sh-nav:hover .sh-nl {
  display: block; position: absolute; left: 54px; top: 50%; transform: translateY(-50%);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 7px 12px; white-space: nowrap; z-index: 1036; color: var(--ink);
  font-size: 1.02rem; font-weight: 600; box-shadow: 0 12px 32px rgba(19, 26, 38, .16);
}

/* ---------- İÇERİK ---------- */
.sh-content { flex: 1; min-width: 0; padding: 20px 24px 40px; }

/* sayfa başlık bandı */
.sh-pagehead {
  position: sticky; top: 60px; z-index: 1020;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); padding: 12px 0 14px; margin-bottom: 4px;
}
.sh-pagehead h1 { font-size: 1.35rem; font-weight: 700; margin: 0 auto 0 0; letter-spacing: -.01em; }
.sh-pagehead .sh-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-help {
  border: 1px solid var(--line-strong); background: var(--card); border-radius: 8px;
  width: 34px; height: 34px; cursor: pointer; color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.sh-help:hover { color: var(--select-line); border-color: var(--select-line); }

/* ═══════════════════════════════════════════════════════════════════════
   ⓘ BİLGİ İKONU — CSS-ÇİZİMLİ, TEK BİLEŞEN
   Unicode ⓘ / emoji / raster ikon KULLANILMAZ: düşük çözünürlükte bulanık
   çıkıyor ve yazı tipine göre boyu kayıyor. Daire + italik "i" ile çizilir,
   `currentColor` kullandığı için bulunduğu metnin rengini alır.
   Kullanım:  <i class="info" data-bs-toggle="tooltip" title="…">i</i>

   Burada duruyor çünkü SİTE GENELİNDE kullanılıyor; eskiden tool-page.css'te
   tanımlıydı ve o dosyayı yüklemeyen sayfalarda daire hiç çizilmiyordu.
   ═══════════════════════════════════════════════════════════════════════ */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: none;
  border: 1.4px solid currentColor; border-radius: 50%;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 700; font-size: .62rem; line-height: 1;
  vertical-align: -2px; opacity: .8; cursor: help; user-select: none;
}
.info:hover { opacity: 1; }

/* seçili ürün filtresi pill'i */
.sh-filtrepill {
  display: inline-flex; align-items: center; gap: 8px; background: var(--select);
  color: var(--select-line); border: 1px solid #CBD9F3; border-radius: 99px;
  padding: 5px 12px; font-size: .84rem; font-weight: 600;
}
.sh-filtrepill button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0; }

/* ---------- MOBİL ---------- */
.sh-backdrop { display: none; position: fixed; inset: 60px 0 0 0; background: rgba(19,26,38,.35); z-index: 1025; }
@media (max-width: 900px) {
  .sh-logo { width: auto; font-size: 1.2rem; }
  .sh-logo img { height: 36px; }
  .sh-side { position: fixed; left: -240px; top: 60px; bottom: 0; z-index: 1030; transition: left .2s; height: auto; }
  .sh-side.mobile-open { left: 0; }
  .sh-side.collapsed { width: 232px; }
  .sh-side.collapsed .sh-nl, .sh-side.collapsed .sh-chev, .sh-side.collapsed .sh-beta { display: inline; }
  .sh-side.collapsed .sh-sub { display: none; }
  .sh-side.mobile-open ~ .sh-backdrop { display: block; }
  .sh-searchwrap { max-width: none; }
  .sh-content { padding: 16px 14px 32px; }
  .sh-logo span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-side, .sh-nav .sh-chev { transition: none; }
}

/* Demo şeridi ile birlikte: şerit `position:fixed; top:0` olduğu için yapışkan
   topbar onun ALTINA giriyordu. Şerit varsa yapışma noktaları aşağı kayar. */
body:has(#demoBanner) .sh-top { top: 29px; }
body:has(#demoBanner) .sh-side { top: 89px; height: calc(100vh - 89px); }
body:has(#demoBanner) .sh-pagehead { top: 89px; }
body:has(#demoBanner) .sh-backdrop { top: 89px; }

/* Eski `.pagetitle` kabı yeni banda çevrildi: eski stiller (margin/padding) yeni
   yapışkan bantla çakışmasın diye sıfırlanır. */
.sh-pagehead.pagetitle { margin: 0 0 4px; padding: 12px 0 14px; }
.sh-pagehead h1 { font-size: 1.35rem; font-weight: 700; margin: 0 auto 0 0; letter-spacing: -.01em; }
/* Eski `.pagetitle` kabı flex değildi; bant tek satırda hizalansın. */
.sh-pagehead.pagetitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sh-pagehead .breadcrumb { display: none; }   /* kırıntı yolu bantta yer kaplıyordu */

/* ---- Renk disiplini (DESIGN_RULES §A2) ----
   Yeşil YALNIZ kâr/olumlu durum içindir; yeşil DÜĞME yoktur. Excel aktarma gibi
   nötr eylemler bu sınıfa çevrildi (`btn-success` → `btn-notr`). Birincil eylem
   tek renktir: lacivert. */
.btn-notr {
  background: var(--card); border: 1px solid var(--line-strong); color: var(--ink);
  font-weight: 600;
}
.btn-notr:hover { background: #F7F9FC; border-color: var(--line-strong); color: var(--ink); }
.btn-notr:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-notr .bi { color: var(--muted); }