:root {
    --color-primary: oklch(20% .02 290.65);
    --card-width: 150px;
    --card-height: 300px;
}

body {
  color: #fff;
}

.swiper {
  width: 100%;
  padding-bottom: 40px; /* ruang untuk pagination */
}

.bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
}

.from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.to-primary {
    --tw-gradient-to: var(--color-primary);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.card {
    width: var(--card-width);
    height: var(--card-height);
    margin-inline: calc(var(--spacing) * 2.5);
    margin-block: calc(var(--spacing) * 0);
    padding: calc(var(--spacing) * 0);
    padding-inline: calc(var(--spacing) * 2.5);
    justify-content: safe center;
    align-items: safe flex-end;
    display: flex;
    position: relative;
}

.tab-button[data-selected="true"] [data-slot="tabContent"] {
            color: rgb(59 130 246) !important;
            /* blue-500 */
        }

        .tab-button[data-selected="true"] svg {
            color: rgb(59 130 246) !important;
            /* blue-500 */
            stroke: rgb(59 130 246) !important;
            /* blue-500 */
        }

        .tab-button[data-selected="false"] [data-slot="tabContent"] {
            color: rgb(113 113 122) !important;
            /* zinc-500 */
        }

        .tab-button[data-selected="false"] svg {
            color: rgb(113 113 122) !important;
            /* zinc-500 */
            stroke: rgb(113 113 122) !important;
            /* zinc-500 */
        }

        .indicator {
            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
        }
#show-more-btn {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            outline: none !important;
        }

        #show-more-icon {
            transition: transform 0.3s ease;
        }

        #show-more-btn.expanded #show-more-icon {
            transform: rotate(180deg);
        }

        .hidden {
            display: none;
        }
#search-chapter::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        #search-chapter:focus {
            border-color: white;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
        }

        #search-chapter {
            background: transparent !important;
            border: 1px solid #3b82f6 !important;
            color: white !important;
        }

        #search-chapter:focus {
            border-color: white !important;
        }
#chapter-list>div {
            transition: all 0.3s ease;
        }