/* 3 katmanlı menü kabuğu — L1 ray, hover flyout, L2 karo, L3 liste */

:root{
  --nav-rail:56px;
  --nav-l3:232px;
  --nav-l3-spine:38px;
  --nav-fly:214px;
  --nav-rail-bg:#2c333a;
  --nav-l3-bg:#1b3a5c;
  --sidebar:56px;
}

aside#app-sidebar{
  width:var(--sidebar);
  flex-direction:row;
  align-items:stretch;
  background:var(--nav-rail-bg);
  background-image:none;
  overflow:visible;
  border-right:1px solid rgba(255,255,255,.08);
}

/* Yalnızca dikey şerit (spine) sabit yer kaplasın; liste hover ile açılır */
body.nav-l3-open{--sidebar:calc(var(--nav-rail) + var(--nav-l3-spine));}

.nav-rail{
  width:var(--nav-rail);flex:0 0 var(--nav-rail);
  height:100%;display:flex;flex-direction:column;
  background:var(--nav-rail-bg);z-index:3;
}

.nav-rail-logo{
  width:100%;height:56px;border:none;background:transparent;
  color:#fff;font-size:18px;font-weight:800;letter-spacing:-.04em;
  cursor:pointer;font-family:var(--sans);
}
.nav-rail-logo:hover{background:rgba(255,255,255,.06);}

.nav-rail-items{flex:1;overflow-y:auto;padding:6px 0;min-height:0;}

.nav-rail-item{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:42px;margin:3px auto;padding:0;
  border:none;border-radius:8px;background:transparent;
  cursor:pointer;color:#d8dde3;
}
.nav-rail-item:hover{background:rgba(255,255,255,.1);color:#fff;}
.nav-rail-item.active{
  background:#1b3a5c;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
.nav-rail-item .gi{width:20px;height:20px;}

/* Lucide — tek stroke ailesi */
.gi{
  width:18px;height:18px;display:inline-block;vertical-align:-.2em;
  stroke:currentColor;fill:none;flex-shrink:0;
}
.gi-sm{width:16px;height:16px;}
.gi-lg{width:22px;height:22px;}
svg.lucide,svg.gi{vector-effect:non-scaling-stroke;}
.nav-rail-user{font-size:0;}
.nav-rail-user .gi,
.nav-rail-logout .gi{width:16px;height:16px;color:inherit;}
.nav-rail-logout{display:inline-flex;align-items:center;justify-content:center;}

.nav-rail-foot{
  padding:8px 0 12px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.nav-rail-lang.mi-lang-switch{
  flex-direction:column;gap:2px;padding:2px;margin:0 0 4px;
  background:rgba(255,255,255,.08);border-radius:8px;
}
.nav-rail-lang .mi-lang-btn{
  width:32px;padding:5px 0;font-size:10px;font-weight:800;
  color:rgba(255,255,255,.55);letter-spacing:.04em;
}
.nav-rail-lang .mi-lang-btn:hover{color:#fff;}
.nav-rail-lang .mi-lang-btn.active{
  background:rgba(255,255,255,.18);color:#fff;box-shadow:none;
}
.nav-rail-user{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;
}
.nav-rail-logout{
  width:36px;height:32px;border:none;border-radius:6px;
  background:transparent;color:rgba(255,255,255,.55);cursor:pointer;font-size:16px;
}
.nav-rail-logout:hover{background:rgba(255,255,255,.1);color:#fff;}

.nav-flyout{
  position:fixed;left:var(--nav-rail);top:0;bottom:0;width:var(--nav-fly);
  z-index:120;background:#eef0f3;
  box-shadow:8px 0 28px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
}
.nav-flyout[hidden]{display:none !important;}
.nav-flyout-brand{
  padding:18px 18px 14px;border-bottom:1px solid #d5d9de;
}
.nav-flyout-brand .logo-main,
.nav-flyout-brand .logo-sub{
  -webkit-text-fill-color:#1b3a5c;background:none;color:#1b3a5c;font-size:18px;
}
.nav-flyout-brand .logo-sub{font-size:11px;color:#6b7280;-webkit-text-fill-color:#6b7280;}
.nav-flyout-list{flex:1;overflow-y:auto;padding:10px 8px;}
.nav-flyout-item{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 12px;margin:2px 0;border:none;border-radius:6px;
  background:transparent;color:#24303a;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-align:left;cursor:pointer;
  font-family:var(--sans);
}
.nav-flyout-item:hover{background:#e2e6ea;}
.nav-flyout-item.active{background:#1b3a5c;color:#fff;}
.nav-flyout-ico{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#4b5563;
}
.nav-flyout-ico .gi,.nav-flyout-ico svg{width:18px;height:18px;}
.nav-flyout-empty{padding:12px;color:#8b9198;font-size:12px;}
.nav-flyout .sidebar-footer{color:#8b9198;border-top:1px solid #d5d9de;}

.nav-l3{
  flex:0 0 var(--nav-l3-spine);width:var(--nav-l3-spine);
  position:relative;height:100%;
  background:var(--nav-l3-bg);color:#fff;
}
.nav-l3[hidden]{display:none !important;}
/* Sabit dikey şerit */
.nav-l3-spine{
  width:var(--nav-l3-spine);height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:14px 0;gap:10px;cursor:pointer;
}
.nav-l3-spine::after{
  content:'›';margin-top:auto;font-size:14px;color:rgba(255,255,255,.5);
}
.nav-l3-spine-ico{font-size:16px;}
.nav-l3-spine-lbl{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
/* Hover ile açılan liste — içeriği itmez, üstüne biner */
.nav-l3-panel{
  position:absolute;top:0;left:var(--nav-l3-spine);bottom:0;
  width:calc(var(--nav-l3) - var(--nav-l3-spine));
  display:flex;flex-direction:column;padding:12px 8px;
  background:var(--nav-l3-bg);
  box-shadow:12px 0 30px rgba(0,0,0,.32);
  transform:translateX(-10px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .16s ease,opacity .16s ease,visibility .16s;
  z-index:60;
}
.nav-l3:hover .nav-l3-panel,
.nav-l3.nav-l3-pin .nav-l3-panel{
  transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;
}
.nav-l3-list{display:flex;flex-direction:column;gap:2px;}
.nav-l3-item{
  display:flex;align-items:center;width:100%;
  padding:9px 10px;border:none;border-radius:5px;
  background:transparent;color:rgba(255,255,255,.88);
  font-size:13px;font-weight:600;text-align:left;cursor:pointer;
  font-family:var(--sans);
}
.nav-l3-item:hover{background:rgba(255,255,255,.1);}
.nav-l3-item.active{background:rgba(255,255,255,.16);color:#fff;}

.nav-legacy{display:none !important;}

/* Alt menü soldaki L3'te → sayfanın kendi (ana) üst sekme barı gizlenir */
.sec-tabs.nav-l3-hidden{display:none !important;}

aside#app-sidebar .nav-close{
  position:absolute;top:8px;right:8px;z-index:5;display:none;
}

.nav-hub-grid{
  display:flex;flex-wrap:wrap;gap:14px;
  padding:8px 4px 24px;
}
.nav-hub-tile{
  width:112px;height:112px;padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:#1b3a5c;color:#fff;
  cursor:pointer;font-family:var(--sans);
  box-shadow:0 4px 14px rgba(27,58,92,.22);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.nav-hub-tile:hover{
  background:#254a72;transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(27,58,92,.28);
}
.nav-hub-tile:focus-visible{outline:2px solid #2f80ed;outline-offset:2px;}
.nav-hub-tile-ico{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;line-height:1;
  border-radius:10px;background:rgba(255,255,255,.1);
}
.nav-hub-tile-ico .gi,.nav-hub-tile-ico svg{width:26px;height:26px;}
.nav-hub-tile-lbl{font-size:11px;font-weight:700;text-align:center;line-height:1.25;color:rgba(255,255,255,.95);}
.nav-hub-empty{color:var(--ink3);font-size:13px;}
#page-nav-hub:not(.nav-hub-home) .topbar-title{color:#1b3a5c;}
#page-nav-hub:not(.nav-hub-home) .topbar-sub{color:var(--ink3);}
.nav-l3-spine-ico{
  display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);
}
.nav-l3-spine-ico .gi,.nav-l3-spine-ico svg{width:16px;height:16px;}
.nav-mobile-chip-ico{display:inline-flex;align-items:center;}
.nav-mobile-chip-ico .gi,.nav-mobile-chip-ico svg{width:14px;height:14px;}
.nav-mobile-ico-btn{display:inline-flex;align-items:center;justify-content:center;}
.nav-mobile-ico-btn .gi,.nav-mobile-ico-btn svg{width:18px;height:18px;}

.nav-mobile-strip{
  display:none;
  margin:0 0 12px;
  padding:10px 10px 12px;
  border:1px solid var(--db-line, rgba(44,67,60,.12));
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#f7f8f9 100%);
  box-shadow:var(--shadow-sm, 0 2px 10px rgba(0,0,0,.06));
}
.nav-mobile-head{
  display:flex;align-items:center;gap:8px;
  min-height:42px;
  color:var(--ink2);
}
.nav-mobile-ico-btn{
  width:38px;height:38px;border:none;border-radius:11px;
  background:#e8ebef;color:#24303a;font-size:18px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex:none;
}
.nav-mobile-ico-main{font-size:20px;}

/* Yatay kayan ikon+isim menüsü */
.nav-mobile-scroller{
  flex:1;min-width:0;
  display:flex;gap:6px;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px;
  scroll-snap-type:x proximity;
}
.nav-mobile-scroller::-webkit-scrollbar{display:none;}
.nav-mobile-chip{
  flex:0 0 auto;scroll-snap-align:center;
  width:72px;min-height:62px;
  border:none;border-radius:12px;
  background:#eef0f3;color:#3a4650;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 4px;cursor:pointer;font-family:var(--sans);
}
.nav-mobile-chip.active{
  background:#1b3a5c;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
}
.nav-mobile-chip-ico{font-size:19px;line-height:1;}
.nav-mobile-chip-lbl{
  font-size:14.25px;font-weight:700;line-height:1.1;text-align:center;
  max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

@media (max-width:900px){
  aside#app-sidebar{
    width:var(--nav-rail);
    transform:translateX(-105%);
  }
  body.nav-l3-open aside#app-sidebar{width:calc(var(--nav-rail) + var(--nav-l3));}
  body.nav-open aside#app-sidebar{transform:translateX(0);}
  body.nav-open .nav-flyout{display:flex !important;}
  aside#app-sidebar .nav-close{display:flex;}
  main{margin-left:0;}
  /* Dokunmatik: hover yok → L3 listesi sabit görünür */
  .nav-l3{flex:1 1 auto;width:auto;}
  .nav-l3-panel{
    position:static;width:auto;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;box-shadow:none;
  }
  /* Ana sayfa: küçük ikonlar, 3 sütun */
  .nav-hub-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    padding:12px 4px 32px;
  }
  .nav-hub-tile{
    width:auto;height:auto;min-height:92px;aspect-ratio:1;
    padding:10px 6px 8px;gap:6px;border-radius:12px;
  }
  .nav-hub-tile-ico .gi,.nav-hub-tile-ico svg{width:22px;height:22px;}
  .nav-hub-tile-lbl{font-size:15px;font-weight:700;line-height:1.2;max-width:100%;}
  .nav-mobile-strip{display:block;}
  .page.mobile-menu-page > .sec-tabs{display:none !important;}
  .page.mobile-menu-page > .topbar{display:none !important;}
}

@media (max-width:480px){
  .nav-mobile-strip{padding:9px 8px 10px;}
  .nav-mobile-chip{width:68px;min-height:58px;}
  .nav-mobile-chip-ico{font-size:18px;}
  .nav-mobile-chip-lbl{font-size:13.5px;}
}