* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Georgia', 'Garamond', serif;
            background-color: #fafafa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        h1 {
            font-size: 2.5em;
            font-weight: normal;
            margin-bottom: 50px;
            color: #1a1a1a;
        }

        .main-content {
            display: flex;
            gap: 40px;
        }

        /* Sidebar Index */
        .sidebar {
            flex-shrink: 0;
            width: 200px;
        }

        .sidebar-title {
            font-size: 0.85em;
            font-weight: bold;
            color: #1e5a96;
            letter-spacing: 1px;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

          .alphabet-grid {
              display: grid;
              grid-template-columns: repeat(6, 1fr);
              gap: 6px;
              margin-bottom: 25px;
          }
        .alphabet-grid {
            display: grid;
            grid-template-columns: repeat(7, auto);
            gap: 8px 18px;
            font-family: var(--font-cormorant-garamond);
        }
    
        .letter-link {
            font-size: 14px;
            font-weight: 400;
            color: #163e6f;
            text-decoration: none;
            transition: 0.2s ease;
        }
    
        .letter-link:hover {
            color: #0c2c4d;
        }
    
        .letter-link.active {
            color: #c89b3c;
        }
    
        .semua-link {
            display: inline-block;
            margin-top: 15px;
            font-size: 14px;
            color: #c89b3c;
            text-decoration: none;
            letter-spacing: 0.5px;
        }
        
    
        .semua-link:hover {
            text-decoration: underline;
        }
    
        .sidebar-title {
            font-weight: 600;
            margin-bottom: 15px;
        }
          .letter-btn {
              padding: 6px 4px;
              /* lebih kecil */
              font-size: 14px;
                letter-spacing: 0.5px;
              /* diperkecil */
              font-weight: 400;
              /* jangan terlalu bold */
              background: transparent;
              border: none;
              color: #1e5a96;
              cursor: pointer;
              border-radius: 3px;
              line-height: 1.2;
          }

        .letter-btn:hover {
            background-color: #e8f0f7;
            color: #0d3a5c;
        }

        .letter-btn.active {
            background-color: #1e5a96;
            color: white;
        }

        .semua-btn {
            width: 100%;
            padding: 12px;
            border: none;
            background-color: #d4a574;
            color: white;
            font-family: 'Georgia', serif;
            font-size: 0.95em;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .semua-btn:hover {
            background-color: #c99660;
        }

        .semua-btn.active {
            background-color: #c99660;
        }

        /* Divider */
        .divider {
            width: 3px;
            background-color: #1e5a96;
            min-height: 600px;
        }

        /* Contributors Section */
        .contributors-wrapper {
            flex: 1;
        }

        .letter-heading {
            font-size: 1.3em;
            color: #999;
            margin-bottom: 30px;
            font-weight: normal;
            padding-left: 20px;
        }

        .contributors-columns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .contributor-list {
            list-style: none;
        }

        .contributor-item {
            padding: 12px 0;
            font-size: 1.1em;
            color: #333;
            border-bottom: 1px solid transparent;
            transition: all 0.2s ease;
        }

        .contributor-item:hover {
            color: #1e5a96;
            padding-left: 8px;
        }

        .contributor-item a {
            color: inherit;
            text-decoration: none;
        }

        .contributor-item a:hover {
            color: #1e5a96;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .main-content {
                flex-direction: column;
                gap: 30px;
            }

            .divider {
                width: 100%;
                height: 3px;
                min-height: auto;
            }

            .contributors-columns {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }

            .sidebar {
                width: 100%;
            }

            .alphabet-grid {
                grid-template-columns: repeat(8, 1fr);
            }
        }

        @media (max-width: 640px) {
            h1 {
                font-size: 2em;
            }

            .container {
                padding: 20px 15px;
            }

            .contributors-columns {
                grid-template-columns: 1fr;
            }

            .alphabet-grid {
                grid-template-columns: repeat(5, 1fr);
            }

            .letter-btn {
                font-size: 0.9em;
                padding: 8px;
            }
        }