:root {
      --primary: #6c5ce7;
      --primary-light: #8577f1;
      --primary-dark: #4834d4;
      --secondary: #0984e3;
      --success: #00b894;
      --danger: #ff7675;
      --warning: #fdcb6e;
      --dark: #1e272e;
      --darker: #161a1e;
      --light: #f5f6fa;
      --gray: #636e72;
      --glass: rgba(255, 255, 255, 0.15);
      --glass-dark: rgba(0, 0, 0, 0.2);
      --border: rgba(255, 255, 255, 0.18);
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #1e272e 0%, #2d3436 100%);
      color: var(--light);
      min-height: 100vh;
      overflow-x: hidden;
    }
    
    /* Particle Background */
    .particles-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }
    
    .particle {
      position: absolute;
      background: rgba(108, 92, 231, 0.4);
      border-radius: 50%;
      filter: blur(1px);
      pointer-events: none;
      animation: float-particle linear infinite;
    }
    
    @keyframes float-particle {
      0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
      }
    }
    
    
   
    /* Page Title */
    .page-title {
      text-align: center;
      padding: 120px 5% 80px;
      position: relative;
    }
    
    .page-title h1 {
      font-size: 2.8rem;
      font-weight: 800;
      margin-bottom: 20px;
      background: linear-gradient(to right, #fff 0%, var(--primary-light) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -0.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
    
    .page-title p {
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.7);
      max-width: 700px;
      margin: 0 auto 30px;
      line-height: 1.6;
    }

    

    .search-box:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 10px 30px rgba(108, 92, 231, 0.3);
    }

    .search-icon {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--primary-light);
      font-size: 1.2rem;
    }
    



    .command-category:hover::before {
      transform: scaleX(1);
    }

    .command-category:nth-child(1) { animation: fadeInUp 0.6s 0.4s forwards; }
    .command-category:nth-child(2) { animation: fadeInUp 0.6s 0.6s forwards; }
    .command-category:nth-child(3) { animation: fadeInUp 0.6s 0.8s forwards; }
    .command-category:nth-child(4) { animation: fadeInUp 0.6s 1.0s forwards; }
    .command-category:nth-child(5) { animation: fadeInUp 0.6s 1.2s forwards; }
    .command-category:nth-child(6) { animation: fadeInUp 0.6s 1.4s forwards; }

    .command-category:hover {
      transform: translateY(-8px) !important;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
      border-color: var(--primary);
    }

    .category-header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 25px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .category-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background: rgba(108, 92, 231, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
    }

    .no-results {
      text-align: center;
      padding: 50px 20px;
      grid-column: 1 / -1;
      color: rgba(255, 255, 255, 0.7);
    }
    
    .no-results i {
      font-size: 3rem;
      color: var(--primary);
      margin-bottom: 20px;
      display: block;
    }
    
    .no-results h3 {
      color: white;
      margin-bottom: 10px;
      font-size: 1.5rem;
    }
    
    .no-results p {
      font-size: 1rem;
      opacity: 0.8;
    }
    .command-item:hover {
      background: var(--primary);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
      border-color: var(--primary);
    }

    .command-item i {
      font-size: 1rem;
    }
    .command-category.hidden {
      display: none !important;
    }
    
    .command-item.hidden {
      display: none !important;
    }
 

/* İsteğe bağlı: çok küçük ekranlarda daha güvenli hizalama */
@media (max-width: 480px) {
  .command-tooltip {
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 10px 14px;
  }
}


    .command-item:hover .command-tooltip {
      visibility: visible;
      opacity: 1;
    }

    /* Copy Notification */
    .copy-notification {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary);
      color: white;
      padding: 15px 30px;
      border-radius: 50px;
      font-weight: 600;
      box-shadow: 0 10px 30px rgba(108, 92, 231, 0.5);
      z-index: 1000;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .copy-notification.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    
    /* Footer */
    .footer {
      text-align: center;
      padding: 40px 5%;
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.95rem;
      background: var(--darker);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer a {
      color: var(--primary-light);
      text-decoration: none;
      transition: all 0.3s;
      font-weight: 600;
    }
    
    .footer a:hover {
      color: var(--warning);
      text-decoration: underline;
    }
    
    /* Animations */
    @keyframes fadeInUp {
      from {
        transform: translateY(30px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }
    
    .floating {
      animation: float 4s ease-in-out infinite;
    }
    
    /* Responsive */
    @media (max-width: 1200px) {
      .page-title h1 {
        font-size: 2.5rem;
      }
    }
    
    @media (max-width: 992px) {
      .nav-links, .nav-actions {
        display: none;
      }
      
      .menu-toggle {
        display: block;
      }
      
      .page-title {
        padding: 100px 5% 60px;
      }
      
      .page-title h1 {
        font-size: 2.2rem;
      }
      
      .page-title p {
        font-size: 1.1rem;
      }
    }
    
    @media (max-width: 768px) {
      .commands-grid {
        grid-template-columns: 1fr;
      }
      
      .page-title h1 {
        font-size: 2rem;
        flex-direction: column;
        gap: 10px;
      }
      
      .command-category {
        padding: 25px;
      }
      
      .category-icon {
        width: 50px;
        height: 50px;
      }
      
      .category-icon i {
        font-size: 1.5rem;
      }
      
      .category-title {
        font-size: 1.3rem;
      }

      .search-box {
        padding: 12px 20px;
        padding-left: 50px;
      }

      .search-icon {
        left: 15px;
      }
    }
    
    @media (max-width: 576px) {
      .navbar {
        padding: 15px;
      }
      
      .page-title h1 {
        font-size: 1.8rem;
      }
      
      .page-title p {
        font-size: 1rem;
      }
      
      .command-item {
        padding: 10px 15px;
        font-size: 0.9rem;
      }
      
      .command-tooltip {
        font-size: 0.85rem;
        padding: 10px 15px;
      }
      
      .copy-notification {
        font-size: 0.9rem;
        padding: 12px 25px;
        bottom: 20px;
      }

      .category-header {
        gap: 12px;
      }

      .category-icon {
        width: 45px;
        height: 45px;
      }

      .category-title {
        font-size: 1.1rem;
      }
    }
    
    /* Modern Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: var(--darker);
    }
    
    ::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-light);
    }
    

    :root{
      --primary:#6c5ce7; --primary-light:#9d92f5; --warning:#ffd86c;
      --success:#00b894; --danger:#ff7675; --bg-1:#1e272e; --bg-2:#161a1e;
      --pane: rgba(30,39,46,.8); --pane-strong: rgba(30,39,46,.9);
      --border: rgba(108,92,231,.2); --border-strong: rgba(108,92,231,.4);
      --muted: rgba(255,255,255,.7); --text:#fff;
    }
    /* NAVBAR */
    .navbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.2rem;backdrop-filter:blur(10px);background:rgba(15,18,22,.35);border-bottom:1px solid rgba(255,255,255,.06);transition:.3s}
    .navbar.scrolled{background:rgba(15,18,22,.6);box-shadow:0 6px 30px rgba(0,0,0,.25)}
    .brand{display:flex;align-items:center;gap:.7rem;font-weight:700}
    .brand img{width:32px;height:32px;border-radius:8px}
    .nav-links{display:flex;gap:1rem}
    .nav-link{color:#fff;text-decoration:none;opacity:.85}.nav-link:hover{opacity:1}
    .menu-toggle{display:none;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;border-radius:10px;padding:.4rem .6rem}
    @media (max-width:900px){.nav-links{display:none}.menu-toggle{display:block}}


    /* PAGE TITLE */
    .page-title{text-align:center;padding:2rem 1rem;margin-top:80px;position:relative;z-index:2}
    .page-title h1{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(90deg,var(--primary-light),var(--warning));-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-flex;align-items:center;gap:1rem}
    .page-title p{color:var(--muted);max-width:700px;margin:0 auto 2rem;font-size:1.1rem}

    /* SEARCH */
    .search-container{max-width:600px;margin:2rem auto;position:relative}
    .search-box{width:100%;padding:1rem 1rem 1rem 3rem;border-radius:50px;border:1px solid var(--primary);background:var(--pane);color:#fff;font-size:1rem;backdrop-filter:blur(10px);transition:.3s}
    .search-box:focus{outline:none;box-shadow:0 0 0 3px rgba(108,92,231,.3);background:var(--pane-strong)}
    .search-icon{position:absolute;left:1.2rem;top:50%;transform:translateY(-50%);color:var(--primary-light);font-size:1.2rem}

    /* GRID */
    .commands-container{max-width:1400px;margin:0 auto;padding:1rem;position:relative;z-index:2}
    .commands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;margin-top:1rem}
    .command-category{background:var(--pane);border-radius:15px;border:1px solid var(--border);backdrop-filter:blur(10px);transition:.3s;opacity:0;transform:translateY(20px);animation:fadeIn .5s forwards;animation-delay:calc(var(--order)*.1s)}
    .command-category:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(108,92,231,.2);border-color:var(--border-strong)}
    @keyframes fadeIn{to{opacity:1;transform:translateY(0)}}
    .category-header{display:flex;align-items:center;gap:.9rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,.06)}
    .category-icon{width:38px;height:38px;border-radius:10px;background:rgba(108,92,231,.15);display:grid;place-items:center}
    .category-icon i{font-size:1.2rem;color:var(--primary-light)}
    .category-title{font-weight:600}
    .category-count{margin-left:auto;opacity:.75}
    .commands-list{display:flex;flex-wrap:wrap;gap:.6rem;padding:1rem}
    .command-item{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;padding:.5rem .75rem;border-radius:10px;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;position:relative}
    .command-item:hover{background:rgba(255,255,255,.08)}
    .command-tooltip{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);white-space:nowrap;background:#0f1216;color:#fff;border:1px solid rgba(255,255,255,.12);padding:.35rem .55rem;border-radius:8px;font-size:.85rem;box-shadow:0 8px 24px rgba(0,0,0,.35)}
    .command-item:hover .command-tooltip{display:block}

    /* INFO */
    .copy-notification{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--success);color:#fff;padding:.8rem 1.5rem;border-radius:50px;display:flex;align-items:center;gap:.7rem;font-weight:500;opacity:0;transition:opacity .3s;z-index:100;box-shadow:0 5px 20px rgba(0,184,148,.3)}
    .copy-notification.show{opacity:1}
    .no-results{text-align:center;padding:3rem 1rem;grid-column:1 / -1}
    .no-results i{font-size:3rem;color:var(--danger);margin-bottom:1rem}
    .no-results p{color:var(--muted)}
    .hidden{display:none !important}

    /* PARTICLES */
    .particles-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
    .particles-container .particle{position:absolute;background:rgba(108,92,231,.15);border-radius:50%;pointer-events:none}
    @keyframes float-particle{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(20px);opacity:0}}

    /* FOOTER */
    .footer{text-align:center;color:#fff;opacity:.8;padding:2rem 1rem}

    /* LOADING */
    .wbot-loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1e272e 0%,#161a1e 100%);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:1;transition:opacity .8s cubic-bezier(.65,0,.35,1)}
    .wbot-loading-content{text-align:center;max-width:380px;width:90%;padding:40px 30px;background:var(--pane);border-radius:20px;box-shadow:0 15px 40px rgba(0,0,0,.3);border:1px solid rgba(108,92,231,.3);backdrop-filter:blur(15px);transform:translateY(0);animation:floatUp 1.5s infinite alternate ease-in-out}
    @keyframes floatUp{0%{transform:translateY(0)}100%{transform:translateY(-15px)}}
    .wbot-loading-bar{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-bottom:15px}
    .wbot-progress{height:100%;width:0%;background:linear-gradient(90deg,#6c5ce7,#8577f1);border-radius:3px;transition:width .5s cubic-bezier(.65,0,.35,1)}
    .loading-stats{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem}
    .loading-percentage{color:var(--primary-light);font-weight:600}