/* K10 bolmesi: components.css 1/3 — kabuk, nav, dugmeler, kartlar */
@layer components {
  /* ---- uygulama kabuğu ---- */
  .shell {
    display: flex;
    /* zoom altında 100vh viewport'u aşar; --wide-zoom ile geri ölçekle */
    min-height: calc(100vh / var(--wide-zoom));
    width: 100%;
  }
  /* boot lifecycle: kabuk kromu, boot() oturum durumunu belirleyip ilk
     view'i çizene dek gizli (ilk boyamada boş sidebar/topbar flash'ı olmasın).
     app.html body.booting; boot sonunda kaldırılır. */
  body.booting .sidebar,
  body.booting .mobile-topbar,
  body.booting .company-menu-wrap,
  body.booting .nav-overlay,
  body.booting .ai-fab,
  body.booting .ai-dock { display: none; }
  .shell-main {
    flex: 1;
    min-width: 0;
    max-width: var(--content-max);
    /* Alt dolgu 90px = sağ-alt sabit AI butonunun payı (22px boşluk + 42px
       buton + nefes) — sayfa sonu içeriği (pager/foot) FAB'ın altında
       kalmasın (2026-07-30 bulgusu: eşleştirme pager'ı FAB'la çakışıyordu).
       Mobil kırılımlar zaten 90px kullanır (components-feedback.css). */
    padding: 24px 32px 90px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-panel);
  }

  /* ---- sidebar ---- */
  .sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 20px 14px 16px;
    /* sayfa uzasa da menü ekrana sabit kalır; alt blok (Ayarlar/
       Kullanıcılar/org kartı) hep görünür, uzun nav kendi içinde kayar.
       Geniş ekran zoom'unda 100vh viewport'u %20 aşıp org kartını ekran
       dışına iterdi; --wide-zoom ile gerçek görünür yüksekliğe oturur. */
    position: sticky;
    top: 0;
    height: calc(100vh / var(--wide-zoom));
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px 14px;
  }
  /* çekmece kapatma düğmesi — yalnız kompakt modda görünür */
  .drawer-close {
    display: none;
    margin-left: auto;
    width: 32px;
    height: 32px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-btn);
    border: 1px solid rgba(22, 24, 43, .08);
    color: var(--faint);
    font-size: 15px;
    cursor: pointer;
    background: transparent;
  }
  .drawer-close:hover { background: var(--surface-muted); }
  /* Fynex app icon — kendi koyu karesi var (transparan değil), app-icon.svg. */
  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--r-icon);
    background: url("/ui/assets/logo/app-icon.svg") center / cover no-repeat;
    box-shadow: var(--shadow-logo);
    flex: none;
  }
  /* "FY" monogram avatarları da app icon'a bağlanır (tek logo kuralı). */
  .avatar-sq.app-logo {
    background: url("/ui/assets/logo/app-icon.svg") center / cover no-repeat;
    color: transparent;
    font-size: 0;
  }
  .brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: -.01em;
    line-height: 1.05;
  }
  .brand-sub {
    font-size: var(--text-2xs);
    color: var(--faint);
    font-weight: 500;
  }

  .nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0; /* daralınca kendi içinde kaydırır; alttaki org kartı hep görünür */
    overflow-y: auto;
  }
  /* dikey ölçüler sıkı: uzun menü tipik laptop yüksekliğine scrollbar'sız
     sığsın (2026-07-10 — 14 öğe + 5 etiket ~754px'ti, çubuk hep görünüyordu) */
  .nav-label {
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    color: var(--label);
    padding: 8px 12px 3px;  /* 2a tasarımıyla birebir dikey aralık */
    line-height: normal;    /* 2a: gövde 1.45'ini miras alma; tasarımın sıkı satırı */
    text-transform: uppercase;
  }
  .nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 12px;  /* 2a tasarımıyla birebir (aktif 6px, aşağıda) */
    border-radius: var(--r-nav);
    color: var(--text-2);
    font-size: var(--text-base);
    line-height: normal;  /* 2a: gövde 1.45'ini miras alma → tasarımla aynı öğe yüksekliği */
    font-weight: 500;
    text-align: left;
    width: 100%;
  }
  .nav-item:hover { background: var(--surface-muted); }
  /* 2a Birleşik tasarım (DesignSync): aktif öğe gradyan pil — eski soft-bg +
     nokta yerine (beyaz metin + yumuşak gölge). */
  .nav-item.active {
    background: var(--grad-primary);
    color: #fff;
    font-weight: 600;
    padding: 6px 12px;  /* 2a: aktif pil 1px daha ferah */
    box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .7);
  }
  .nav-item.active:hover { background: var(--grad-primary); }
  .nav-item.active .nav-chevron { color: rgba(255, 255, 255, .8); }
  .nav-item .label { flex: 1; display: flex; align-items: center; gap: 10px; }
  .nav-badge {
    background: var(--chip-warn-bg);
    color: var(--chip-warn-fg);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--r-pill);
  }
  .nav-badge.info { background: var(--chip-info-bg); color: var(--chip-info-fg); }
  .nav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 1px 0 3px 19px;
    padding-left: 11px;
    border-left: 1.5px solid rgba(22, 24, 43, .09);
  }
  .nav-sub .nav-item { padding: 3px 11px; border-radius: var(--r-btn); font-size: 13px; }
  /* Ok sabit slot (8px) + satır gap'i (10px) = 18px: rozet ok'un solunda
     otururken, ok'suz satırın SON rozeti aynı 18px içeride durur — bildirim
     sayıları tüm satırlarda aynı dikey kolonda hizalanır. */
  .nav-chevron { font-size: 10px; color: var(--label); flex: none; width: 8px; }
  .nav-item > .nav-badge:last-child { margin-right: 18px; }

  .sidebar-foot {
    flex: none;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nav-foot-items { display: flex; flex-direction: column; gap: 2px; }
  /* 2a Birleşik tasarım (DesignSync): kompakt şirket satırı — avatar baş-harf +
     şirket adı + kullanıcılar/çıkış ikonları tek hizada (yer verimli). */
  .org-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
  }
  .org-avatar {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    background: var(--grad-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .org-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .org-logout,
  .org-users {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    color: var(--faint);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .org-logout:hover,
  .org-users:hover { background: var(--surface-muted); color: var(--text-2); }

  /* ── 2a daraltılabilir ikon rayı (DesignSync) ─────────────────────────
     Genişletilmiş menü salt METİN (ikon gizli); kenar tutamacıyla 64px ikon
     rayına daraltılır. YALNIZ masaüstü (≥1025px); tablet/mobil çekmecesi
     (3b/3c) etkilenmez — kurallar min-width medya bloğunda. Durum kalıcı
     (localStorage: fynex-nav-collapsed). */
  .nav-ico { display: none; flex: none; }
  .nav-collapse-toggle {
    position: absolute;
    right: -1px;
    top: 26px;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 6px 0 0 6px;
    border: 1px solid var(--line);
    border-right: none;
    background: var(--surface);
    color: var(--label);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }
  .nav-collapse-toggle:hover { color: var(--primary); }

  @media (min-width: 1025px) {
    .sidebar-collapsed .sidebar { width: 64px; padding-left: 10px; padding-right: 10px; align-items: center; }
    .sidebar-collapsed .brand { justify-content: center; padding: 0 0 14px; }
    .sidebar-collapsed .brand > div:not(.brand-mark),
    .sidebar-collapsed .nav-item .label,
    .sidebar-collapsed .nav-chevron,
    .sidebar-collapsed .org-name,
    .sidebar-collapsed .org-users,
    .sidebar-collapsed .org-logout { display: none; }
    .sidebar-collapsed .nav-sub { display: none; }        /* alt menü rayda kapalı */
    .sidebar-collapsed .nav-ico { display: flex; }
    .sidebar-collapsed .nav-item {
      position: relative;
      justify-content: center;
      padding: 8px 0;
      width: 40px;
      margin: 0 auto;
    }
    /* bölüm etiketi rayda ince ayraç çizgisine döner */
    .sidebar-collapsed .nav-label {
      height: 1px;
      width: 24px;
      padding: 0;
      margin: 6px auto;
      background: var(--line);
      font-size: 0;
      letter-spacing: 0;
      overflow: hidden;
    }
    /* rozetler rayda noktaya döner (sayı yerine renkli uyarı) */
    .sidebar-collapsed .nav-badge {
      position: absolute;
      top: 4px;
      right: 6px;
      width: 7px;
      height: 7px;
      min-width: 0;
      padding: 0;
      font-size: 0;
      line-height: 0;
      border-radius: 50%;
    }
    .sidebar-collapsed .nav-foot-items { align-items: center; }
    .sidebar-collapsed .org-row { justify-content: center; padding: 6px 0; }  /* rayda yalnız avatar */
  }

  .avatar-sq {
    width: 32px;
    height: 32px;
    border-radius: var(--r-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: none;
  }
  .avatar-sq.brand-grad { background: var(--grad-primary); color: #fff; }

  /* ---- sayfa başlığı ---- */
  .page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .page-title-row { display: flex; align-items: baseline; gap: 12px; }
  .page-title { font-size: 26px; }
  .page-count { font-size: 13px; color: var(--faint); font-weight: 500; }

  /* ---- düğmeler ---- */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--grad-primary);
    color: #fff;
    font-weight: 600;
    font-size: var(--text-base);
    padding: 10px 18px;
    border-radius: var(--r-icon);
    box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .6);
  }
  .btn-primary.sm { font-size: var(--text-sm); padding: 8px 16px; border-radius: var(--r-btn); }
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-input);
    border-radius: var(--r-btn);
    padding: 8px 16px;
  }
  .link { color: var(--primary); font-weight: 600; }

  /* ---- KPI kartları ---- */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 14px 16px 12px;
  }
  .kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; }
  .kpi-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -.02em;
    margin-top: 4px;
  }
  .kpi-note { font-size: 12px; color: var(--faint); margin-top: 2px; }
  .kpi.accent {
    background: var(--card-accent-indigo);
    border-color: var(--primary-border);
  }
  .kpi.accent .kpi-label { color: var(--primary); font-weight: 700; }
  .kpi.accent .kpi-value { color: var(--ink-strong); }
  .kpi.accent .kpi-note { color: #6B6FA3; }
  .kpi.amber {
    background: var(--card-accent-amber);
    border-color: var(--card-accent-amber-border);
  }
  .kpi.amber .kpi-label { color: var(--warn); font-weight: 700; }
  .kpi.amber .kpi-value { color: var(--amber-ink); }
  .kpi.amber .kpi-note { color: var(--amber-muted); }
  .kpi-value.pos { color: var(--success); }
  /* Fazla ödeme kartı (2026-07-20): cari fazla ödediğinde "Güncel alacak"
     kutusu yeşile döner — negatif alacak uyarı (amber) değil, carinin
     alacağıdır. */
  .kpi.green {
    background: var(--chip-green-bg);
    border-color: rgba(22, 163, 74, .25);
  }
  .kpi.green .kpi-label { color: var(--success); font-weight: 700; }
  .kpi.green .kpi-value { color: var(--success); }
  .kpi.green .kpi-note { color: var(--success); opacity: .75; }
  .kpi.danger {
    background: linear-gradient(150deg, #FDEEEE, #FFFDFD);
    border-color: rgba(220, 38, 38, .22);
  }
  .kpi.danger .kpi-label { color: #B91C1C; font-weight: 700; }
  .kpi.danger .kpi-value { color: #991B1B; }
  .kpi.danger .kpi-note { color: var(--overdue-mid); font-weight: 600; }
  .kpi.green {
    background: linear-gradient(150deg, #E9F7EE, #FDFFFE);
    border-color: rgba(22, 163, 74, .2);
  }
  .kpi.green .kpi-label { color: #15803D; font-weight: 700; }
  .kpi.green .kpi-value { color: #166534; }
  .kpi.green .kpi-note { color: #4D9A6A; }

  /* ---- panel / kart ---- */
  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(22, 24, 43, .06);
  }
  .panel-title { font-size: 14px; font-weight: 700; font-family: var(--font-sans); letter-spacing: 0; }
  .panel-meta { font-size: 12px; color: var(--faint); font-weight: 500; }

  /* ---- chip ---- */
  .chip {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--r-pill);
  }
  .chip.info   { background: var(--chip-info-bg);   color: var(--chip-info-fg); }
  .chip.amber  { background: var(--chip-amber-bg);  color: var(--chip-amber-fg); }
  .chip.violet { background: var(--chip-violet-bg); color: var(--chip-violet-fg); }
  .chip.green  { background: var(--chip-green-bg);  color: var(--chip-green-fg); }

  /* ---- AI şeridi + marka pili ---- */
  .ai-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--banner-grad);
    border: 1px solid var(--banner-border);
    border-radius: var(--r-card);
    padding: 12px 16px;
  }
  .ai-strip-text { font-size: 13px; color: var(--text-2); line-height: 1.45; }
  .ai-strip .link { margin-left: auto; flex: none; font-size: var(--text-sm); }
  .ai-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(79, 70, 229, .1);
    border-radius: var(--r-pill);
    padding: 4px 11px 4px 5px;
    flex: none;
  }
  .ai-brand-pill i {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--grad-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-style: normal;
  }
  .ai-brand-pill span {
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--primary);
  }

  /* ---- boş durum ---- */
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 44px 24px 48px;
    text-align: center;
  }
  .empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--bg);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--label);
  }
  .empty-title { font-size: 14px; font-weight: 700; }
  .empty-text {
    font-size: 13px;
    color: var(--muted);
    margin-top: 3px;
    max-width: 380px;
    line-height: 1.5;
  }
  .empty-actions { display: flex; gap: 9px; margin-top: 2px; }

  /* ---- yüzen AI pili ---- */
  .ai-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 8px 10px 8px 9px;
    box-shadow: var(--shadow-float);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .ai-fab:hover { transform: translateY(-2px) scale(1.03); }
  .ai-fab .orb {
    width: 26px;
    height: 26px;
    background: url("/ui/assets/logo/app-icon-bare.svg") center / contain no-repeat;
    flex: none;
  }
  .ai-fab .name { font-size: var(--text-base); font-weight: 700; letter-spacing: .01em; padding-right: 2px; }
  .ai-fab .count {
    min-width: 21px;
    height: 21px;
    border-radius: var(--r-pill);
    background: var(--chip-warn-bg);
    color: var(--chip-warn-fg);
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
  }
  /* Rozet 0 iken gizli — display:flex hidden attribute'unu ezdiği için açık kural. */
  .ai-fab .count[hidden] { display: none; }

  /* ---- sekmeler (alt çizgili) ---- */
  .tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid rgba(22, 24, 43, .08);
    padding-bottom: 2px;
    overflow-x: auto;          /* dar ekranda çok sekme sayfayı taşırmasın, yatay kaysın */
    scrollbar-width: none;     /* alt çizgi zaten ayraç; ayrı kaydırma çubuğu gizli */
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    padding: 8px 6px 10px;
    cursor: pointer;
    flex: none;                /* sekmeler daralmaz; taşarsa .tabs kayar */
    white-space: nowrap;
  }
  .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
  .tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn-icon); }

  /* ---- bölütlü anahtar (segmented) — kayan thumb'lı standart seçici ---- */
  /* TEK highlight kaynağı ::before "thumb"tır. Konum, tüketicinin verdiği
     `data-i` (aktif segment index'i) ile STATİK kurallar arasında seçilir ve
     `transform` geçişiyle KAYAR — var()-güdümlü transform geçişi Chromium'da
     tetiklenmez, statik değerler arası geçiş her yerde çalışır. Görünürlük
     `data-i` VARLIĞINA bağlıdır: seçim yoksa data-i yazılmaz → thumb saklı
     (boş seçimde hayalet vurgu olmaz). Genişlik `--seg-n` (segment sayısı) ile.
     K1: her .segmented aynı görseli paylaşır, kopya-çatal yok. */
  .segmented {
    position: relative;
    display: flex;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-icon);
    padding: 3px;
    gap: 3px;
    --seg-n: 2;
  }
  .segmented::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px - (var(--seg-n) - 1) * 3px) / var(--seg-n));
    transform: translateX(0);
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 4px 10px -6px rgba(79, 70, 229, .4);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .15s ease;
  }
  .segmented[data-i]::before { opacity: 1; }                                    /* seçim var → görünür */
  .segmented[data-i="1"]::before { transform: translateX(calc(100% + 3px)); }  /* thumb genişliği = 100% */
  .segmented[data-i="2"]::before { transform: translateX(calc(200% + 6px)); }
  .segmented[data-i="3"]::before { transform: translateX(calc(300% + 9px)); }
  .segmented[data-i="4"]::before { transform: translateX(calc(400% + 12px)); }
  .segmented .seg {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    border-radius: 8px;
    padding: 9px;
    cursor: pointer;
    transition: color .18s ease;
  }
  .segmented .seg.active { color: var(--primary); }
  /* FLIP kancasi: yeniden-cizen tuketicilerde (entryModal) thumb once ESKI
     index'e GECISSIZ oturtulur, reflow alinir, sonra yeni index'e animasyonla
     kayar. Bu sinif yalniz o tek karelik yerlestirme icin takilir. */
  .segmented.seg-no-anim::before { transition: none; }
  @media (prefers-reduced-motion: reduce) {
    .segmented::before { transition: opacity .12s ease; }  /* kayma kapalı, yalnız hafif solma */
  }

}