.quicklinks{
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: var(--z-header);
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 0px; 
    }
    .ql-panel, .ql-rail{ pointer-events: auto; }

    .ql-rail{
      width: 38px;
      display: flex;
      flex-direction: column;
      gap: 4px; 
    }

    .ql-tab{
      appearance:none; border:0; cursor:pointer;
      width: 38px;
      min-height: 108px; 
      border-radius: var(--radius) 0 0 var(--radius); 
      box-shadow: var(--shadow);
      color: var(--white); background: var(--qk-blue);
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      transition: all .2s ease;
    }
    
    .ql-tab:hover{ transform: translateX(-4px); background: var(--qk-red); }
    .ql-tab[aria-selected="true"]{ background: var(--qk-red); }
    
    /* İkonun Dikey Moddan Etkilenmesini Engelleyen ve İkon Karakterini Zorlayan Sınıf */
    /* Quicklinks inline SVG icons */
    .ql-tab svg,
    .ql-title svg,
    .ql-close svg,
    .ql-footer a svg,
    .ql-ico svg {
      width: 18px;
      height: 18px;
      display: inline-flex;
      vertical-align: middle;
      fill: currentColor;
    }

    .ql-tab svg { 
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    } 
    
    .ql-tab span.ql-tab-title{
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-family: var(--font-heading);
      letter-spacing: var(--ls-tight);
      font-weight: var(--fw-bold);
      font-size: var(--text-mn); 
      text-transform: uppercase;
      opacity: .95;
      display: block;
    }

    .ql-panel{
      width: 280px;
      border-radius: var(--radius); 
      background: var(--white);
      box-shadow: var(--shadow);
      overflow: hidden;
      transform: translateX(110%);
      opacity: 0;
      transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), opacity .25s ease;
    }
    .quicklinks.is-open .ql-panel{
      transform: translateX(0);
      opacity: 1;
    }

    .ql-header{
      background: linear-gradient(90deg, var(--qk-blue), var(--qk-blue2));
      color: var(--white);
      padding: 12px; 
      display:flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 2px solid var(--qk-red); 
    }
    .ql-headtext{ min-width:0; display:flex; flex-direction:column; gap:1px; }
    
    .ql-title{
      margin:0;
      font-family: var(--font-heading);
      font-weight: var(--fw-extrabold);
      font-size: var(--text-sm); 
      letter-spacing: var(--ls-tight);
      display:flex;
      align-items:center;
      gap:8px;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      line-height: var(--lh-tight);
    }
    .ql-title svg { color: var(--qk-accent); width: 16px; height: 16px; } 
    
    .ql-subtitle{
      margin:0;
      font-size: var(--text-xs); 
      opacity:.8;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      line-height: var(--lh-tight);
    }
    .ql-close{
      width:28px; height:28px; 
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.1);
      color: var(--white);
      cursor:pointer;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      transition: background .2s;
    }
    .ql-close:hover { background: var(--qk-red); border-color: var(--qk-red); }
    .ql-close svg { width: 16px; height: 16px; }

    .ql-body{ background: var(--qk-gray); padding: 10px; }
    .ql-list{ margin:0; padding:0; list-style:none; display:grid; gap:8px; } 
    .ql-item a{
      text-decoration:none;
      color: var(--qk-text);
      background: var(--white);
      border:1px solid var(--qk-gray2);
      border-radius: var(--radius); 
      padding: 10px; 
      display:flex;
      align-items:center;
      gap: 10px;
      transition: all .2s ease;
    }
    .ql-item a:hover {
      border-color: var(--qk-accent);
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }
    .ql-ico{
      width: 28px; height: 28px; 
      border-radius: var(--radius);
      background: var(--qk-gray);
      display:grid; place-items:center;
      flex: 0 0 auto;
      transition: background .2s;
    }
    .ql-item a:hover .ql-ico { background: var(--qk-blue); }
    .ql-item a:hover .ql-ico svg { color: var(--white); }
    .ql-ico svg { width: 16px; height: 16px; color: var(--qk-blue); }
    
    .ql-text{ display:grid; gap:1px; min-width:0; }
    .ql-text strong{ font-family: var(--font-heading); font-size: var(--text-sm); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); } 
    .ql-text small{ font-size: var(--text-xs); opacity:.7; line-height: var(--lh-tight); }

    .ql-footer{
      background: var(--qk-blue); 
      color: var(--white);
      padding: 10px 12px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap:10px;
      font-size: var(--text-xs);
    }
    .ql-footer span { font-family: var(--font-heading); font-weight: var(--fw-bold); }
    .ql-footer a{ 
      color: var(--qk-accent); 
      font-weight: var(--fw-bold); 
      text-decoration:none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color .2s;
    }
    .ql-footer a:hover { color: var(--qk-red); }
    .ql-footer a svg { width: 12px; height: 12px; }

    .ql-tabpanel{ display:none; }
    .ql-tabpanel.is-active{ display:block; }

    .ql-overlay{
      position: fixed; inset:0;
      background: rgba(0, 30, 90, 0.15); 
      opacity:0; pointer-events:none;
      transition: opacity .2s ease;
      z-index: calc(var(--z-header) - 1);
    }
    .quicklinks.is-open + .ql-overlay{
      opacity:1; pointer-events:auto;
    }

    @media (max-width: 480px){
      .quicklinks,
      .ql-overlay {
        display: none;
      }

      .ql-panel{ width: min(80vw, 280px); }
    }

    @media (min-width: 481px) and (max-width: 768px) {
      .quicklinks,
      .ql-overlay {
        display: none;
      }
    }