html, body { height: 100%; }
    body{
      margin: 0;
      background: #232227;
      color: rgba(245,246,250,.92);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    }

    .pc-topbar{
      height: 64px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      background: linear-gradient(90deg, rgba(40,40,45,.95), rgba(25,25,28,.95));
      border-bottom: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    .pc-brand{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 260px;
    }

    .pc-logo{
      width: 36px; height: 36px;
      border-radius: 999px;
      background: linear-gradient(135deg, #403E8F, rgba(120,70,255,.85));
      display: grid;
      place-items: center;
      font-weight: 800;
      color: #fff;
      user-select: none;
    }

    .pc-brand-title{ line-height: 1.1; }
    .pc-brand-title b{
      display: block;
      font-size: 14px;
      letter-spacing: .2px;
    }
    .pc-brand-title small{
      display: block;
      color: rgba(245,246,250,.60);
      font-size: 12px;
      margin-top: 2px;
    }

    .pc-wrap{
      display: flex;
      height: calc(100vh - 64px);
    }

    .pc-sidebar{
      width: 360px;
      background: linear-gradient(180deg, rgba(25,25,28,.95), rgba(22,22,26,.98));
      border-right: 1px solid rgba(255,255,255,.08);
      padding: 0;
      position: relative; /* flyout z-index için */
    }

    .pc-menu-box{
      position: relative;
     overflow: visible; /* panel dışarı taşacak */
    }

    .pc-menu-title{
      padding: 10px 10px;
      font-size: 14px;
      color: rgba(245,246,250,.90);
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
    }

    .pc-nav{
      display: flex;
      flex-direction: column;
      padding: 8px;
      gap: 8px;
    }

    /* normal link */
    .pc-link{
      font-size:14px;
      display: block;
      padding: 10px 12px;
      border-radius: 4px;
      color: rgba(245,246,250,.88);
      text-decoration: none;
      border: 1px solid transparent;
      background: transparent;
      transition: background .15s ease, border-color .15s ease, transform .10s ease;
    }

    .pc-link:hover{
      background: linear-gradient(90deg, rgba(64,62,143,.70), rgba(64,62,143,.35));
      border-color: rgba(64,62,143,.55);
      transform: translateY(0);
      color: #fff;
    }

    /* SAĞ içerik */
    .pc-main{
      flex: 1;
      padding: 18px;
      background: rgba(0,0,0,.08);
    }

    .pc-content{
      height: 100%;
      border-radius: 6px;
      background: linear-gradient(180deg, rgba(44,43,50,.95), rgba(34,33,38,.98));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
      padding: 18px;
      color: rgba(245,246,250,.92);
    }

    /* =========
       SAĞA AÇILAN DROPDOWN (FLYOUT)
       ========= */

    .pc-item{
      position: relative; /* submenu anchoring */
    }

    /* Menü satırı: sağ ok göstermek için wrapper */
    .pc-link.has-sub{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .pc-chevron{
      font-size: 12px;
      color: rgba(245,246,250,.65);
      transition: transform .15s ease, color .15s ease;
    }
    .pc-flyout{
      position: absolute;
      top: 52px;                 /* <-- HER ZAMAN aynı yükseklik (istersen değiştir) */
      left: calc(100% + 10px);   /* sağ tarafta sabit */
      width: 240px;

      background: rgba(28,28,32,.98);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 10px;
      box-shadow: 0 18px 50px rgba(0,0,0,.55);
      padding: 8px;
      z-index: 60;

      opacity: 0;
      visibility: hidden;
      transform: translateX(-6px);
      transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    }
    
    .pc-flyout.show{
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }

    .pc-flyout .pc-subtitle{
      padding: 6px 10px 8px;
      color: rgba(245,246,250,.55);
      font-size: 12px;
    }

    .pc-flyout a{
      display: block;
      padding: 10px 10px;
      border-radius: 8px;
      color: rgba(245,246,250,.88);
      text-decoration: none;
      border: 1px solid transparent;
      font-size:13px;
    }
    .pc-flyout a:hover{
      background: rgba(64,62,143,.22);
      border-color: rgba(64,62,143,.35);
      color: #fff;
    }

    /* 2. seviye panel (flyout'un sağında) */
.pc-flyout2{
  position: absolute;
  top: 52px;                  /* hep aynı yerde */
  left: calc(100% + 260px);    /* flyout1'in sağına */
  width: 240px;

  background: rgba(28,28,32,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 8px;
  z-index: 61;

  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.pc-flyout2.show{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.pc-flyout2 a{
  display: block;
  padding: 10px 10px;
  border-radius: 8px;
  color: rgba(245,246,250,.88);
  text-decoration: none;
  border: 1px solid transparent;
  font-size:13px;
}

.pc-flyout2 a:hover{
  background: rgba(64,62,143,.22);
  border-color: rgba(64,62,143,.35);
  color: #fff;
}

/* Flyout içindeki "alt menülü" satır */
.pc-flyout .has-sub2{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

    /* Hover/aktif olduğunda ok hafif canlansın */
    .pc-item:hover .pc-chevron,
    .pc-item:focus-within .pc-chevron{
      color: rgba(245,246,250,.92);
      transform: translateX(0px);
    }

    /* Submenu panel */
    .pc-submenu{
      position: absolute;
      top: 0;
      left: calc(100% + 10px); /* SAĞA AÇILIR */
      width: 240px;

      background: rgba(28,28,32,.98);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 10px;
      box-shadow: 0 18px 50px rgba(0,0,0,.55);

      padding: 8px;
      z-index: 50;

      opacity: 0;
      visibility: hidden;
      transform: translateX(-6px);
      transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    }

    /* Hover veya klavye focus ile aç */
    .pc-item:hover > .pc-submenu,
    .pc-item:focus-within > .pc-submenu{
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }

    /* Submenu linkleri */
    .pc-submenu a{
      display: block;
      padding: 10px 10px;
      border-radius: 8px;
      color: rgba(245,246,250,.88);
      text-decoration: none;
      border: 1px solid transparent;
    }
    .pc-submenu a:hover{
      background: rgba(64,62,143,.22);
      border-color: rgba(64,62,143,.35);
      color: #fff;
    }

    /* küçük ayraç */
    .pc-subtitle{
      padding: 6px 10px 8px;
      color: rgba(245,246,250,.55);
      font-size: 12px;
    }
    /* Kullanım: <div class="gc-scroll"> ... </div> */

.gc-scroll{
  overflow-y: auto;
  overflow-x: hidden;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #3f3e8f44 #1f1e24; /* thumb / track */
}

/* Chrome, Edge, Safari */
.gc-scroll::-webkit-scrollbar{
  width: 10px;
}

.gc-scroll::-webkit-scrollbar-track{
  background: #1f1e24;                 /* koyu track */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}

.gc-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(63, 62, 143, 0.26), rgba(64,62,143,.55));
  border-radius: 999px;
  border: 2px solid #1f1e24;           /* thumb etrafında boşluk hissi */
  box-shadow: 0 8px 18px rgba(64,62,143,.20);
}

.gc-scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgb(15, 15, 15), rgba(119, 70, 255, 0.199));
}

.gc-scroll::-webkit-scrollbar-thumb:active{
  background: rgba(64,62,143,1);
}

.gc-scroll::-webkit-scrollbar-corner{
  background: transparent;
}
.main-container{
  border:0px solid red;
  padding: 5px;
  width: 100% !important;
  overflow-x: auto;
}
.sidebar-support a{ 
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:12px 14px;
  color:#FFF;
  background-color: #064b17;
  border-radius: 0;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}