:root {
    --qt-shell-pad: 12px;
    --qt-shell-max: 1320px;
    --qt-hero-ic-box: 52px;
    --qt-hero-ic: 23px;
    --qt-pack-ic-box: 46px;
    --qt-pack-ic: 21px;
    --qt-btn-ic: 15px;
    --qt-ic-stroke: 1.8
}

@media (max-width: 560px) {
    :root {
        --qt-shell-pad:10px;
        --qt-hero-ic-box: 44px;
        --qt-hero-ic: 20px;
        --qt-pack-ic-box: 42px;
        --qt-pack-ic: 19px
    }
}

#kategori-header.wow,#packlist.wow {
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important
}

#kategori-header i,#packlist i {
    display: none !important
}

body:where(header,#header,.site-header,.main-header,nav,.topbar,.navbar) .qt-ic {
    fill: currentColor !important;
    stroke: none !important;
    vector-effect: initial
}

:where(#kategori-header,#packlist,#qt-rel):where(svg.qt-ic,.qt-ic) {
    width: 1em;
    height: 1em;
    display: block;
    flex: 0 0 auto;
    line-height: 0;
    color: currentColor;
    overflow: visible
}

:where(#kategori-header,#packlist,#qt-rel) .qt-ic use {
    pointer-events: none
}

:where(#kategori-header,#qt-rel) .qt-ic {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--qt-ic-stroke);
    stroke-linecap: round;
    stroke-linejoin: round
}

:where(#kategori-header,#qt-rel) .qt-ic.is-solid {
    fill: currentColor;
    stroke: none
}

:where(#kategori-header,#qt-rel) .qt-ic * {
    vector-effect: non-scaling-stroke
}

#packlist .qt-ic {
    fill: currentColor;
    stroke: none
}

#packlist .qt-ic.is-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--qt-ic-stroke);
    stroke-linecap: round;
    stroke-linejoin: round
}

#packlist .qt-ic.is-stroke * {
    vector-effect: non-scaling-stroke
}

#kategori-header.cat-hero {
    --ink: #0f172a;
    --muted: #64748b;
    --ac: var(--accent,#5c6cff);
    --be-accent: var(--ac,#6a7eff);
    --be-ink: #0f172a;
    --be-muted: #64748b;
    --be-bd: rgba(15,23,42,.10);
    --be-radius-lg: 24px;
    --qt-cat-ink: #0f172a;
    --qt-cat-muted: #64748b;
    --qt-cat-surface: rgba(255,255,255,.96);
    --qt-cat-soft: rgba(248,250,255,.88);
    --qt-cat-radius: 24px;
    --qt-cat-shadow: 0 10px 26px rgba(15,23,42,.075);
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--ink);
    background: transparent;
    font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

#kategori-header.cat-hero,#kategori-header.cat-hero * {
    box-sizing: border-box
}

#kategori-header.cat-hero:where(h1,h2,h3,p,ul,li) {
    margin: 0;
    padding: 0
}

#kategori-header.cat-hero:where(ul) {
    list-style: none
}

#kategori-header.cat-hero:where(.hero>.row,.hero .ico,.hero .txt) {
    all: unset
}

#kategori-header.cat-hero .hero-bleed {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: visible
}

#kategori-header.cat-hero .hero-bleed::before {
    content: none !important
}

#kategori-header.cat-hero .hero {
    width: min(var(--qt-shell-max),calc(100% - (var(--qt-shell-pad) * 2)));
    max-width: min(var(--qt-shell-max),calc(100% - (var(--qt-shell-pad) * 2)));
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1
}

#kategori-header.cat-hero .qtbe2-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 14px;
    margin: 12px 0 10px;
    padding: 16px;
    border: 1px solid color-mix(in srgb,var(--ac) 18%,rgba(148,163,184,.36));
    border-radius: var(--qt-cat-radius);
    background: radial-gradient(620px 220px at 0% 0%,color-mix(in srgb,var(--ac) 10%,transparent),transparent 62%),radial-gradient(520px 190px at 100% 0%,rgba(255,255,255,.72),transparent 62%),linear-gradient(180deg,var(--qt-cat-surface),var(--qt-cat-soft));
    box-shadow: var(--qt-cat-shadow),inset 0 0 0 1px rgba(255,255,255,.82)
}

#kategori-header.cat-hero .qtbe2-hero::after {
    content: "";
    position: absolute;
    right: -44px;
    top: -58px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient( 135deg,color-mix(in srgb,var(--ac) 18%,transparent),rgba(255,255,255,.12) );
    pointer-events: none;
    opacity: .88
}

#kategori-header.cat-hero .qtbe2-hero__icon {
    position: relative;
    z-index: 1;
    width: var(--qt-hero-ic-box);
    height: var(--qt-hero-ic-box);
    flex: 0 0 var(--qt-hero-ic-box);
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient( 135deg,var(--ac),color-mix(in srgb,var(--ac) 62%,#fff) );
    box-shadow: 0 14px 30px color-mix(in srgb,var(--ac) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.20)
}

#kategori-header.cat-hero .qtbe2-hero__icon .qt-ic {
    width: var(--qt-hero-ic);
    height: var(--qt-hero-ic);
    display: block;
    color: #fff;
    fill: currentColor;
    stroke: none
}

#kategori-header.cat-hero .qtbe2-hero__icon .qt-ic use {
    fill: currentColor;
    stroke: none
}

#kategori-header.cat-hero .qtbe2-hero__icon .qt-ic [fill]:not([fill="none"]) {
    fill: currentColor
}

#kategori-header.cat-hero .qtbe2-hero__icon .qt-ic [stroke] {
    stroke: none
}

#kategori-header.cat-hero .qtbe2-hero__icon .qt-ic * {
    vector-effect: non-scaling-stroke
}

#kategori-header.cat-hero .qtbe2-hero__text,.qtbe2-hero__text {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column
}

#kategori-header.cat-hero .qtbe2-hero__title,.qtbe2-hero__title {
    margin: 0 0 5px;
    color: var(--qt-cat-ink,#0f172a);
    font-size: 23px;
    line-height: 1.12;
    letter-spacing: -.035em;
    font-weight: 1000;
    overflow-wrap: anywhere;
    word-break: break-word
}

#kategori-header.cat-hero .qtbe2-hero__desc {
    margin: 0;
    max-width: 76ch;
    color: var(--qt-cat-muted,#64748b);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 750;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important
}

#kategori-header.cat-hero:is( .qt-cat-hero-band,.qt-cat-hero-inner,.qt-cat-badge,.qt-cat-hero-txt,.qt-cat-hero-line,.qt-cat-hero-inline-ic ) {
    display: none !important
}

.qtbe2-breadcrumb {
    margin: 0 0 6px
}

.qtbe2-breadcrumb--hero {
    max-width: 100%
}

.qtbe2-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none
}

.qtbe2-breadcrumb__item,.qtbe2-breadcrumb__sep {
    font-size: 12px;
    line-height: 1.35
}

.qtbe2-breadcrumb__item {
    color: rgba(15,23,42,.52)
}

.qtbe2-breadcrumb__item a {
    color: rgba(15,23,42,.52);
    text-decoration: none;
    font-weight: 750;
    transition: color .18s ease,opacity .18s ease
}

.qtbe2-breadcrumb__item a:hover {
    color: var(--qt-buy-accent,var(--accent))
}

.qtbe2-breadcrumb__sep {
    color: rgba(15,23,42,.30);
    user-select: none
}

.qtbe2-breadcrumb__item.is-current {
    color: color-mix(in srgb,var(--qt-buy-accent,var(--accent)) 72%,#0f172a);
    font-weight: 850
}

#packlist {
    margin-top: -2px;
    padding-top: 8px;
    background: transparent;
    position: relative;
    z-index: 1;
    --qt-ac: var(--accent,var(--qt-platform-default))
}

#packlist,#packlist * {
    box-sizing: border-box
}

#packlist .container {
    width: min(var(--qt-shell-max),calc(100% - (var(--qt-shell-pad) * 2)));
    max-width: min(var(--qt-shell-max),calc(100% - (var(--qt-shell-pad) * 2)));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    position: relative;
    z-index: 1
}

#packlist .packList {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    padding: 0;
    justify-content: stretch;
    position: relative;
    z-index: 1;
    overflow: visible
}

@supports (content-visibility:auto) {
    #packlist .packList {
        content-visibility: auto;
        contain-intrinsic-size: 1100px
    }
}

@media (min-width: 1200px) {
    #packlist .packList {
        gap:12px;
        grid-template-columns: repeat(4,minmax(0,1fr))
    }
}

@media (min-width: 900px) and (max-width:1199px) {
    #packlist .packList {
        gap:11px;
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media (min-width: 768px) and (max-width:899px) {
    #packlist .packList {
        gap:10px;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 767px) {
    #packlist .packList {
        gap:10px;
        grid-template-columns: 1fr
    }
}

#packlist.qt-theme-instagram {
    --qt-ac: var(--qt-platform-instagram)
}

#packlist.qt-theme-twitter,#packlist.qt-theme-x {
    --qt-ac: var(--qt-platform-twitter)
}

#packlist.qt-theme-youtube {
    --qt-ac: var(--qt-platform-youtube)
}

#packlist.qt-theme-facebook {
    --qt-ac: var(--qt-platform-facebook)
}

#packlist.qt-theme-telegram {
    --qt-ac: var(--qt-platform-telegram)
}

#packlist.qt-theme-tiktok {
    --qt-ac: var(--qt-platform-tiktok)
}

#packlist.qt-theme-linkedin {
    --qt-ac: var(--qt-platform-linkedin)
}

#packlist.qt-theme-spotify {
    --qt-ac: var(--qt-platform-spotify)
}

#packlist.qt-theme-soundcloud {
    --qt-ac: var(--qt-platform-soundcloud)
}

#packlist.qt-theme-twitch {
    --qt-ac: var(--qt-platform-twitch)
}

#packlist.qt-theme-whatsapp {
    --qt-ac: var(--qt-platform-whatsapp)
}

#packlist.qt-theme-pinterest {
    --qt-ac: var(--qt-platform-pinterest)
}

#packlist.qt-theme-kick {
    --qt-ac: var(--qt-platform-kick)
}

#packlist.qt-theme-snapchat {
    --qt-ac: var(--qt-platform-snapchat)
}

#packlist.qt-theme-apple {
    --qt-ac: var(--qt-platform-apple)
}

#packlist.qt-theme-android {
    --qt-ac: var(--qt-platform-android)
}

#packlist.qt-theme-ios {
    --qt-ac: var(--qt-platform-ios)
}

#packlist.qt-theme-audiomack {
    --qt-ac: var(--qt-platform-audiomack)
}

#packlist.qt-theme-bigo {
    --qt-ac: var(--qt-platform-bigo)
}

#packlist.qt-theme-bluesky {
    --qt-ac: var(--qt-platform-bluesky)
}

#packlist.qt-theme-boomplay {
    --qt-ac: var(--qt-platform-boomplay)
}

#packlist.qt-theme-chzzk {
    --qt-ac: var(--qt-platform-chzzk)
}

#packlist.qt-theme-clubhouse {
    --qt-ac: var(--qt-platform-clubhouse)
}

#packlist.qt-theme-coinhunt {
    --qt-ac: var(--qt-platform-coinhunt)
}

#packlist.qt-theme-coinmarketcap {
    --qt-ac: var(--qt-platform-coinmarketcap)
}

#packlist.qt-theme-coinsniper {
    --qt-ac: var(--qt-platform-coinsniper)
}

#packlist.qt-theme-coinvote {
    --qt-ac: var(--qt-platform-coinvote)
}

#packlist.qt-theme-coub {
    --qt-ac: var(--qt-platform-coub)
}

#packlist.qt-theme-dailymotion {
    --qt-ac: var(--qt-platform-dailymotion)
}

#packlist.qt-theme-datpiff {
    --qt-ac: var(--qt-platform-datpiff)
}

#packlist.qt-theme-discord {
    --qt-ac: var(--qt-platform-discord)
}

#packlist.qt-theme-dribbble {
    --qt-ac: var(--qt-platform-dribbble)
}

#packlist.qt-theme-fansly {
    --qt-ac: var(--qt-platform-fansly)
}

#packlist.qt-theme-fiverr {
    --qt-ac: var(--qt-platform-fiverr)
}

#packlist.qt-theme-freshcoins {
    --qt-ac: var(--qt-platform-freshcoins)
}

#packlist.qt-theme-goodfirms {
    --qt-ac: var(--qt-platform-goodfirms)
}

#packlist.qt-theme-google {
    --qt-ac: var(--qt-platform-google)
}

#packlist.qt-theme-imdb {
    --qt-ac: var(--qt-platform-imdb)
}

#packlist.qt-theme-kwai {
    --qt-ac: var(--qt-platform-kwai)
}

#packlist.qt-theme-lazada {
    --qt-ac: var(--qt-platform-lazada)
}

#packlist.qt-theme-lemon8 {
    --qt-ac: var(--qt-platform-lemon8)
}

#packlist.qt-theme-likee {
    --qt-ac: var(--qt-platform-likee)
}

#packlist.qt-theme-medium {
    --qt-ac: var(--qt-platform-medium)
}

#packlist.qt-theme-mixcloud {
    --qt-ac: var(--qt-platform-mixcloud)
}

#packlist.qt-theme-napster {
    --qt-ac: var(--qt-platform-napster)
}

#packlist.qt-theme-onlyfans {
    --qt-ac: var(--qt-platform-onlyfans)
}

#packlist.qt-theme-opensea {
    --qt-ac: var(--qt-platform-opensea)
}

#packlist.qt-theme-pandora {
    --qt-ac: var(--qt-platform-pandora)
}

#packlist.qt-theme-provenexpert {
    --qt-ac: var(--qt-platform-provenexpert)
}

#packlist.qt-theme-quora {
    --qt-ac: var(--qt-platform-quora)
}

#packlist.qt-theme-rarible {
    --qt-ac: var(--qt-platform-rarible)
}

#packlist.qt-theme-reddit {
    --qt-ac: var(--qt-platform-reddit)
}

#packlist.qt-theme-rednote {
    --qt-ac: var(--qt-platform-rednote)
}

#packlist.qt-theme-reverbnation {
    --qt-ac: var(--qt-platform-reverbnation)
}

#packlist.qt-theme-reviewsio,#packlist.qt-theme-reviews-io {
    --qt-ac: var(--qt-platform-reviewsio)
}

#packlist.qt-theme-rumble {
    --qt-ac: var(--qt-platform-rumble)
}

#packlist.qt-theme-shazam {
    --qt-ac: var(--qt-platform-shazam)
}

#packlist.qt-theme-shopee {
    --qt-ac: var(--qt-platform-shopee)
}

#packlist.qt-theme-snackvideo {
    --qt-ac: var(--qt-platform-snackvideo)
}

#packlist.qt-theme-social-media {
    --qt-ac: var(--qt-platform-social-media)
}

#packlist.qt-theme-social-signals {
    --qt-ac: var(--qt-platform-social-signals)
}

#packlist.qt-theme-threads {
    --qt-ac: var(--qt-platform-threads)
}

#packlist.qt-theme-tidal {
    --qt-ac: var(--qt-platform-tidal)
}

#packlist.qt-theme-trovo {
    --qt-ac: var(--qt-platform-trovo)
}

#packlist.qt-theme-tumblr {
    --qt-ac: var(--qt-platform-tumblr)
}

#packlist.qt-theme-vimeo {
    --qt-ac: var(--qt-platform-vimeo)
}

#packlist.qt-theme-vk {
    --qt-ac: var(--qt-platform-vk)
}

#packlist.qt-theme-website-traffic {
    --qt-ac: var(--qt-platform-website-traffic)
}

#packlist.qt-theme-yellow-pages {
    --qt-ac: var(--qt-platform-yellow-pages)
}

#packlist.qt-theme-default {
    --qt-ac: var(--qt-platform-default)
}

#packlist .qt-card {
    --qt-border: var(--qt-ac,var(--qt-platform-default));
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 306px;
    min-height: 306px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.10);
    background: linear-gradient(180deg,rgba(255,255,255,.94),rgba(250,252,255,.90));
    box-shadow: 0 8px 18px -14px rgba(15,23,42,.22),0 0 0 1px rgba(255,255,255,.56) inset;
    transition: transform .16s ease,box-shadow .16s ease,border-color .16s ease
}

#packlist .qt-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--qt-border);
    opacity: .22;
    pointer-events: none
}

#packlist .qt-fade {
    display: none !important
}

#packlist .qt-card__detail::before,
#packlist .qt-card__detail::after {
    content: none !important;
    display: none !important;
    background: none !important
}

#packlist .qt-card:focus-within {
    border-color: color-mix(in srgb,var(--qt-ac) 28%,rgba(15,23,42,.14));
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--qt-ac) 12%,transparent),0 12px 22px -16px rgba(15,23,42,.26),0 0 0 1px rgba(255,255,255,.74) inset
}

@media (hover: hover) {
    #packlist .qt-card:hover {
        transform:translateY(-2px);
        border-color: rgba(15,23,42,.14);
        box-shadow: 0 12px 22px -16px rgba(15,23,42,.28),0 0 0 1px rgba(255,255,255,.74) inset;
        z-index: 2
    }
    #packlist .qt-card:hover .qt-card__detail .qt-scroll {
    height: 108px;
    max-height: 108px !important
}
}

#packlist .qt-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    padding: 9px 10px;
    border-radius: 12px;
    background: linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,253,.84));
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 4px 10px rgba(15,23,42,.03)
}

#packlist .qt-card__icon {
    width: var(--qt-pack-ic-box);
    height: var(--qt-pack-ic-box);
    flex: 0 0 auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: var(--qt-ac,var(--qt-platform-default));
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 4px 10px rgba(15,23,42,.04)
}

#packlist .qt-card__icon .qt-ic,#packlist .qt-card__icon .qt-ic--pack {
    width: var(--qt-pack-ic);
    height: var(--qt-pack-ic);
    display: block;
    color: var(--qt-ac,var(--qt-platform-default));
    fill: currentColor;
    stroke: none;
    stroke-width: 0;
    overflow: visible;
    transition: transform .18s ease
}

#packlist .qt-card__icon .qt-ic use,#packlist .qt-card__icon .qt-ic--pack use {
    fill: currentColor;
    stroke: none;
    pointer-events: none
}

#packlist .qt-card__icon .qt-ic [fill]:not([fill="none"]),#packlist .qt-card__icon .qt-ic--pack [fill]:not([fill="none"]) {
    fill: currentColor
}

#packlist .qt-card__icon .qt-ic [stroke],#packlist .qt-card__icon .qt-ic--pack [stroke] {
    stroke: none
}

#packlist .qt-card__icon .qt-ic.is-stroke,#packlist .qt-card__icon .qt-ic--pack.is-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--qt-ic-stroke);
    stroke-linecap: round;
    stroke-linejoin: round
}

#packlist .qt-card__icon .qt-ic.is-stroke use,#packlist .qt-card__icon .qt-ic--pack.is-stroke use {
    fill: none;
    stroke: currentColor
}

@media (hover: hover) {
    #packlist .qt-card:hover .qt-card__icon .qt-ic,#packlist .qt-card:hover .qt-card__icon .qt-ic--pack {
        transform:scale(1.04)
    }
}

#packlist .qt-card__title {
    color: #0b1225;
    font-size: 1rem;
    line-height: 1.18;
    font-weight: 850;
    letter-spacing: -.015em
}

#packlist .qt-card__title span {
    display: block;
    margin-bottom: 2px;
    opacity: .72;
    font-size: .68rem;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em
}

#packlist .qt-card__detail {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 6px;
    overflow: hidden
}

#packlist .qt-scroll-hint {
    position: absolute;
    right: 8px;
    bottom: 9px;
    z-index: 4;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
    color: color-mix(in srgb,var(--qt-ac,#6A7EFF) 86%,#0f172a);
    background: color-mix(in srgb,var(--qt-ac,#6A7EFF) 11%,#fff);
    border: 1px solid color-mix(in srgb,var(--qt-ac,#6A7EFF) 24%,rgba(15,23,42,.10));
    box-shadow: 0 8px 18px rgba(15,23,42,.10);
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.01em
}

#packlist .qt-scroll-hint .qt-ic {
    width: 11px;
    height: 11px;
    flex: 0 0 11px
}

#packlist .qt-card__detail.is-open.has-scroll-hint .qt-scroll-hint {
    display: inline-flex;
    animation: qtScrollHintPulse 1.35s ease-in-out infinite
}

@keyframes qtScrollHintPulse {
    0%,100% {
        transform: translateY(0);
        opacity: .92
    }

    50% {
        transform: translateY(3px);
        opacity: 1
    }
}

#packlist .qt-card__detail .qt-scroll {
    position: relative;
    height: 118px;
    max-height: 118px !important;
    overflow: hidden !important;
    padding-right: 2px;
    scrollbar-gutter: stable;
    border-radius: 9px
}

#packlist .qt-card__detail .qt-scroll::after,
#packlist .qt-card__detail .qt-scroll:not(.is-open)::after {
    content: none !important;
    display: none !important;
    background: none !important
}


#packlist .qt-card__detail .qt-scroll.is-open {
    height: 118px;
    max-height: 118px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px;
    padding-bottom: 14px;
    scroll-padding-bottom: 18px;
    border: 1px solid color-mix(in srgb,var(--qt-ac,#6A7EFF) 15%,rgba(15,23,42,.08));
    background: color-mix(in srgb,var(--qt-ac,#6A7EFF) 3%,transparent)
}

#packlist .qt-card__detail .qt-scroll.is-open::-webkit-scrollbar {
    width: 7px
}

#packlist .qt-card__detail .qt-scroll.is-open::-webkit-scrollbar-track {
    background: color-mix(in srgb,var(--qt-ac,#6A7EFF) 10%,rgba(15,23,42,.06));
    border-radius: 999px
}

#packlist .qt-card__detail .qt-scroll.is-open::-webkit-scrollbar-thumb {
    background: color-mix(in srgb,var(--qt-ac,#6A7EFF) 70%,rgba(15,23,42,.28));
    border-radius: 999px;
    border: 2px solid color-mix(in srgb,var(--qt-ac,#6A7EFF) 8%,#fff)
}

#packlist .qt-card__detail .qt-scroll.is-open {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb,var(--qt-ac,#6A7EFF) 34%,rgba(15,23,42,.18)) transparent
}

#packlist .qt-card__detail ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0 0 16px;
    list-style: none
}

#packlist .qt-card__detail .qt-scroll.is-open ul {
    padding-bottom: 24px
}

#packlist .qt-card__detail li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #0b1225;
    opacity: .92;
    font-size: .855rem;
    line-height: 1.24
}

#packlist .qt-card__detail li::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin-top: .42rem;
    border-radius: 999px;
    background: var(--qt-ac,var(--qt-platform-default));
    opacity: .34
}

#packlist .qt-more {
    min-height: 28px;
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

#packlist .qt-more button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 13px;
    border-radius: 999px;
    color: color-mix(in srgb,var(--qt-ac,#6A7EFF) 82%,#334155);
    background: color-mix(in srgb,var(--qt-ac,#6A7EFF) 7%,#fff);
    border: 1px solid color-mix(in srgb,var(--qt-ac,#6A7EFF) 10%,rgba(15,23,42,.06));
    font-size: .82rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .14s ease,transform .12s ease,border-color .14s ease
}

#packlist .qt-more button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--qt-ac,#6A7EFF) 14%,transparent)
}

@media (hover: hover) {
    #packlist .qt-more button:hover {
        transform:translateY(-1px);
        background: color-mix(in srgb,var(--qt-ac,#6A7EFF) 10%,#fff);
        border-color: color-mix(in srgb,var(--qt-ac,#6A7EFF) 15%,rgba(15,23,42,.08))
    }
}

#packlist .qt-card__bottom {
    margin-top: auto;
    padding-top: 10px;
    display: grid;
    grid-template-columns: minmax(106px,124px) minmax(0,1fr);
    align-items: center;
    gap: 9px;
    border-top: 1px solid rgba(15,23,42,.08)
}

#packlist .qt-card__price {
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left
}

#packlist .qt-card__price .now {
    width: 100%;
    min-height: 39px;
    padding: 0 11px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #071126;
    background: linear-gradient(180deg,#fff 0%,#f8faff 100%);
    border: 1px solid rgba(15,23,42,.095);
    box-shadow: 0 6px 14px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88);
    font-size: clamp(.90rem,1.55vw,.98rem);
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: none !important
}

#packlist .qt-btn {
    width: 100%;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient( 135deg,color-mix(in srgb,var(--qt-ac,#6A7EFF) 94%,#fff),color-mix(in srgb,var(--qt-ac,#6A7EFF) 78%,#111827) );
    box-shadow: 0 9px 16px -13px color-mix(in srgb,var(--qt-ac,#6A7EFF) 48%,#111827),inset 0 1px 0 rgba(255,255,255,.18);
    font-size: .895rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.015em;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: filter .14s ease,transform .08s ease,box-shadow .14s ease
}

#packlist .qt-btn .qt-ic--btn {
    width: var(--qt-btn-ic);
    height: var(--qt-btn-ic);
    flex: 0 0 var(--qt-btn-ic);
    color: currentColor;
    fill: currentColor;
    stroke: none
}

#packlist .qt-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--qt-ac,#6A7EFF) 14%,transparent),0 9px 16px -13px color-mix(in srgb,var(--qt-ac,#6A7EFF) 48%,#111827)
}

#packlist .qt-btn:active {
    transform: translateY(1px);
    box-shadow: 0 6px 12px -12px color-mix(in srgb,var(--qt-ac,#6A7EFF) 46%,#111827),inset 0 1px 0 rgba(255,255,255,.16)
}

@media (hover: hover) {
    #packlist .qt-btn:hover {
        filter:brightness(1.025);
        transform: translateY(-1px);
        box-shadow: 0 11px 18px -13px color-mix(in srgb,var(--qt-ac,#6A7EFF) 54%,#111827),inset 0 1px 0 rgba(255,255,255,.20)
    }

    #packlist .qt-card:hover .qt-card__price .now {
        transform: none !important;
        box-shadow: 0 6px 14px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88)
    }
}

#packlist .qt-theme-soundcloud .qt-btn {
    background: rgba(255,85,0,0.12);
    color: #f50;
    border: 1px solid rgba(255,85,0,0.38)
}

@media (hover: hover) {
    #packlist .qt-theme-soundcloud .qt-btn:hover {
        background:#f50;
        color: #fff;
        border-color: transparent
    }
}

@media (max-width: 768px) {
    #packlist {
        margin-top: -2px;
        padding-top: 6px
    }

    #packlist .qt-card {
    height: 294px;
    min-height: 294px;
    padding: 11px;
    border-radius: 13px
}

    #packlist .qt-card__top {
        gap: 8px;
        margin-bottom: 7px;
        padding: 8px 9px
    }

    #packlist .qt-card__title {
        font-size: .95rem;
        line-height: 1.16
    }

    #packlist .qt-card__title span {
        margin-bottom: 1px;
        font-size: .66rem
    }

    #packlist .qt-card__detail {
        margin-top: 5px
    }

    #packlist .qt-card__detail .qt-scroll {
    height: 112px;
    max-height: 112px !important;
    overflow: hidden !important
}

    #packlist .qt-card__detail .qt-scroll.is-open {
    height: 112px;
    max-height: 112px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 14px;
    scroll-padding-bottom: 18px
}

    #packlist .qt-card__detail li {
        font-size: .835rem;
        line-height: 1.23
    }

    #packlist .qt-more {
        min-height: 27px;
        margin-top: 6px
    }

    #packlist .qt-more button {
        min-height: 27px;
        padding: 0 12px;
        font-size: .805rem
    }

    #packlist .qt-card__bottom {
        grid-template-columns: minmax(102px,118px) minmax(0,1fr);
        gap: 8px;
        padding-top: 9px
    }

    #packlist .qt-card__price .now {
        min-height: 37px;
        padding: 0 9px;
        font-size: .93rem
    }

    #packlist .qt-btn {
        min-height: 38px;
        padding: 0 11px;
        border-radius: 12px;
        font-size: .875rem
    }

    #packlist .qt-btn .qt-ic--btn {
        width: 14px;
        height: 14px;
        flex-basis: 14px
    }

    .qtbe2-breadcrumb {
        margin: 0 0 5px
    }

    .qtbe2-breadcrumb__item,
    .qtbe2-breadcrumb__sep {
        font-size: 11.5px;
        line-height: 1.3
    }
    
#packlist .qt-card:hover .qt-card__detail .qt-scroll {
    height: 112px;
    max-height: 112px !important
}
    
#packlist .qt-scroll-hint {
    right: 8px;
    bottom: 9px;
    min-height: 25px;
    padding: 0 10px;
    font-size: 11.5px
}

#packlist .qt-scroll-hint .qt-ic {
    width: 12px;
    height: 12px;
    flex-basis: 12px
}

}

@media (max-width: 640px) {
    #kategori-header.cat-hero .qtbe2-hero {
        margin:10px 0 8px;
        padding: 12px;
        gap: 12px;
        border-radius: 22px
    }

    #kategori-header.cat-hero .qtbe2-hero__icon {
        border-radius: 14px
    }

    #kategori-header.cat-hero .qtbe2-hero__title {
        margin-bottom: 4px;
        font-size: 20px;
        line-height: 1.15
    }

    #kategori-header.cat-hero .qtbe2-hero__desc {
        font-size: 13px;
        line-height: 1.5
    }
}

@media (max-width: 430px) {
    #kategori-header.cat-hero .qtbe2-hero {
        grid-template-columns:auto minmax(0,1fr)
    }

    #kategori-header.cat-hero .qtbe2-hero__title {
        font-size: 19px
    }

    #kategori-header.cat-hero .qtbe2-hero__desc {
        font-size: 12.7px
    }
}

@media (max-width: 380px) {
    #packlist .qt-card {
        height: 304px;
        min-height: 304px
    }

    #packlist .qt-card__bottom {
        grid-template-columns: minmax(94px,108px) minmax(0,1fr);
        gap: 8px
    }

    #packlist .qt-card__price .now {
        min-height: 36px;
        padding: 0 8px;
        font-size: .86rem
    }

    #packlist .qt-btn {
        min-height: 37px;
        padding: 0 9px;
        font-size: .84rem
    }
}

@media (max-width: 330px) {
    #packlist .qt-card {
        height: 324px;
        min-height: 324px
    }

#packlist .qt-card__detail .qt-scroll {
    height: 104px;
    max-height: 104px !important
}

#packlist .qt-card__detail .qt-scroll.is-open {
    height: 104px;
    max-height: 104px !important;
    padding-bottom: 14px;
    scroll-padding-bottom: 18px
}
    

    #packlist .qt-card__bottom {
        grid-template-columns: 1fr
    }

    #packlist .qt-card__price .now {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    #packlist .qt-card,
    #packlist .qt-btn,
    #packlist .qt-more button,
    #kategori-header.cat-hero .qtbe2-hero,
    #packlist .qt-card__price .now,
    #packlist .qt-card__icon .qt-ic,
    #packlist .qt-card__icon .qt-ic--pack,
    #packlist .qt-scroll-hint {
        transition: none !important;
        animation: none !important
    }
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

#packlist[class*="qt-theme-"] {
    --be-accent: var(--accent,var(--qt-buy-accent,#6A7EFF));
    --be-ink: #0b1220;
    --be-muted: rgba(15,23,42,.58);
    --be-focus: 0 0 0 4px color-mix(in srgb,var(--be-accent) 22%,transparent)
}

.qtbe2-fBar,.qtbe2-dBar {
    display: none
}

#packlist .qt-card.is-packbar-selected {
    border-color: color-mix(in srgb,var(--qt-ac,var(--be-accent,#6A7EFF)) 46%,rgba(15,23,42,.14));
    outline: 2px solid color-mix(in srgb,var(--qt-ac,var(--be-accent,#6A7EFF)) 46%,transparent);
    outline-offset: 2px;
    box-shadow: 0 16px 34px -20px rgba(2,6,23,.26),0 0 0 6px color-mix(in srgb,var(--qt-ac,var(--be-accent,#6A7EFF)) 9%,transparent),0 0 0 1px rgba(255,255,255,.80) inset
}

@media (max-width: 820px) {
    #packlist.qtbe2,#packlist[class*="qt-theme-"] {
        padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))
    }

    .qtbe2-fBar {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2147483647 !important;
        display: block;
        pointer-events: none !important;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .18s ease,transform .18s ease;
        will-change: opacity,transform;
        isolation: isolate !important
    }

    .qtbe2-fBar.is-visible {
        opacity: 1;
        transform: translateY(0)
    }

    .qtbe2-fBar[hidden] {
        display: none !important
    }

    .qtbe2-fBar__btn {
        position: relative !important;
        z-index: 2147483647 !important;
        width: 100%;
        margin: 0;
        border: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom,0px));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        pointer-events: auto !important;
        cursor: pointer;
        text-align: left;
        font: inherit;
        color: var(--be-ink,#0b1220);
        opacity: 1 !important;
        background: radial-gradient(720px 180px at 8% 0%,rgba(255,255,255,.92),transparent 58%),radial-gradient(720px 180px at 100% 0%,color-mix(in srgb,var(--be-accent,#6A7EFF) 8%,transparent),transparent 60%),linear-gradient(180deg,#fff,#f8fafc) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-top: 1px solid rgba(15,23,42,.08);
        box-shadow: 0 -10px 28px rgba(2,6,23,.085)
    }

    .qtbe2-fBar__main {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: minmax(112px,auto) minmax(0,1fr);
        align-items: center;
        gap: 10px
    }

    .qtbe2-fBar__priceCol {
        min-width: 96px;
        display: grid;
        gap: 2px
    }

    .qtbe2-fBar__k {
        font-size: 10.5px;
        line-height: 1.05;
        letter-spacing: .11em;
        text-transform: uppercase;
        font-weight: 950;
        color: var(--be-muted,rgba(15,23,42,.58))
    }

    .qtbe2-fBar__p {
        font-size: clamp(19px,5vw,24px);
        line-height: 1.02;
        letter-spacing: -.035em;
        font-weight: 950;
        color: #0b1220;
        white-space: nowrap
    }

    .qtbe2-fBar__save {
        font-size: 12px;
        line-height: 1.05;
        font-weight: 950;
        color: #16a34a;
        white-space: nowrap
    }

    .qtbe2-fBar__meta {
        min-width: 0;
        display: grid;
        justify-items: end;
        align-content: center;
        gap: 2px
    }

    .qtbe2-fBar__qty {
        max-width: min(50vw,260px);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        text-align: right;
        font-size: 12.5px;
        line-height: 1.12;
        font-weight: 950;
        letter-spacing: -.01em;
        color: rgba(15,23,42,.76)
    }

    .qtbe2-fBar__hint {
        font-size: 11px;
        line-height: 1.05;
        letter-spacing: .10em;
        text-transform: uppercase;
        font-weight: 950;
        color: color-mix(in srgb,var(--be-accent,#6A7EFF) 78%,#111)
    }

    .qtbe2-fBar__cta {
        position: relative !important;
        z-index: 2147483647 !important;
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto !important;
        opacity: 1 !important;
        color: #fff;
        -webkit-text-fill-color: #fff;
        font-size: 26px;
        font-weight: 950;
        line-height: 1;
        text-shadow: 0 1px 0 rgba(0,0,0,.16);
        background: radial-gradient(140px 70px at 30% 20%,rgba(255,255,255,.22),rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0)),var(--be-accent,#6A7EFF) !important;
        box-shadow: 0 10px 26px color-mix(in srgb,var(--be-accent,#6A7EFF) 22%,transparent),0 6px 16px rgba(2,6,23,.16)
    }

    .qtbe2-fBar__btn:focus-visible {
        outline: none;
        box-shadow: var(--be-focus,0 0 0 4px rgba(106,126,255,.22)),0 -14px 36px rgba(2,6,23,.10)
    }
}

@media (max-width: 560px) {
    .qtbe2-fBar__main {
        grid-template-columns:minmax(96px,auto) minmax(0,1fr);
        gap: 9px
    }

    .qtbe2-fBar__priceCol {
        min-width: 92px
    }

    .qtbe2-fBar__p {
        font-size: 20px
    }

    .qtbe2-fBar__qty {
        max-width: 48vw;
        font-size: 12px;
        line-height: 1.1
    }

    .qtbe2-fBar__cta {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 25px
    }
}

@media (max-width: 420px) {
    .qtbe2-fBar__btn {
        padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
        gap: 9px
    }

    .qtbe2-fBar__main {
        grid-template-columns: minmax(88px,auto) minmax(0,1fr);
        gap: 8px
    }

    .qtbe2-fBar__priceCol {
        min-width: 86px
    }

    .qtbe2-fBar__p {
        font-size: 19px
    }

    .qtbe2-fBar__qty {
        max-width: 45vw;
        font-size: 11.5px;
        line-height: 1.08
    }

    .qtbe2-fBar__hint {
        font-size: 10px
    }

    .qtbe2-fBar__cta {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 24px
    }
}

@media (min-width: 821px) {
    .qtbe2-dBar {
        position:fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2147483647 !important;
        display: block;
        pointer-events: none !important;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .20s ease,transform .20s ease;
        isolation: isolate !important
    }

    .qtbe2-dBar[hidden] {
        display: none !important
    }

    .qtbe2-dBar.is-visible {
        opacity: 1;
        transform: translateY(0)
    }

    .qtbe2-dBar__shell {
        position: relative !important;
        z-index: 2147483647 !important;
        width: min(760px,calc(100% - 44px));
        margin: 0 auto 14px;
        pointer-events: none !important
    }

    .qtbe2-dBar__btn {
        position: relative !important;
        z-index: 2147483647 !important;
        width: 100%;
        min-height: 64px;
        margin: 0;
        padding: 10px 12px;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 20px;
        display: grid;
        grid-template-columns: minmax(128px,170px) minmax(0,1fr) auto;
        align-items: center;
        gap: 12px;
        pointer-events: auto !important;
        cursor: pointer;
        text-align: left;
        font: inherit;
        color: var(--be-ink,#0b1220);
        opacity: 1 !important;
        background: radial-gradient(720px 150px at 8% 0%,rgba(255,255,255,.92),transparent 58%),radial-gradient(720px 150px at 100% 0%,color-mix(in srgb,var(--be-accent,#6A7EFF) 8%,transparent),transparent 60%),linear-gradient(180deg,#fff,#f8fafc) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 16px 34px rgba(2,6,23,.12),0 6px 16px rgba(2,6,23,.06)
    }

    .qtbe2-dBar__main {
        min-width: 0;
        display: contents
    }

    .qtbe2-dBar__priceCol {
        min-width: 0;
        display: grid;
        align-content: center;
        gap: 2px;
        padding-right: 0
    }

    .qtbe2-dBar__k {
        font-size: 9px;
        line-height: 1;
        letter-spacing: .13em;
        text-transform: uppercase;
        font-weight: 900;
        color: var(--be-muted,rgba(15,23,42,.58))
    }

    .qtbe2-dBar__p {
        font-size: clamp(24px,2.2vw,30px);
        line-height: .95;
        letter-spacing: -.045em;
        font-weight: 1000;
        color: #0b1220;
        white-space: nowrap
    }

    .qtbe2-dBar__save {
        font-size: 11px;
        line-height: 1.05;
        font-weight: 900;
        color: #16a34a;
        white-space: nowrap
    }

    .qtbe2-dBar__meta {
        min-width: 0;
        align-self: center;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 12px;
        border-left: 1px solid rgba(15,23,42,.08)
    }

    .qtbe2-dBar__qty {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        font-size: clamp(14px,1.1vw,17px);
        line-height: 1.08;
        letter-spacing: -.02em;
        font-weight: 900;
        color: rgba(15,23,42,.82)
    }

    .qtbe2-dBar__hint {
        display: none !important
    }

    .qtbe2-dBar__cta {
        position: relative !important;
        z-index: 2147483647 !important;
        flex: 0 0 auto;
        min-width: 170px;
        height: 44px;
        padding: 0 16px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        pointer-events: auto !important;
        opacity: 1 !important;
        color: #fff;
        white-space: nowrap;
        align-self: center;
        background: radial-gradient(150px 70px at 30% 20%,rgba(255,255,255,.24),rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0)),var(--be-accent,#6A7EFF) !important;
        box-shadow: 0 12px 26px color-mix(in srgb,var(--be-accent,#6A7EFF) 24%,transparent),0 6px 14px rgba(2,6,23,.14);
        transition: transform .18s ease
    }

    .qtbe2-dBar__ctaTxt {
        color: #fff;
        font-size: 14px;
        line-height: 1;
        font-weight: 1000;
        letter-spacing: .01em
    }

    .qtbe2-dBar__ctaArrow {
        color: #fff;
        font-size: 21px;
        line-height: 1;
        transform: translateY(-1px)
    }

    .qtbe2-dBar__btn:hover .qtbe2-dBar__cta {
        transform: translateY(-1px)
    }
}

@media (min-width: 821px) and (max-width:1120px) {
    .qtbe2-dBar__shell {
        width:min(720px,calc(100% - 28px))
    }

    .qtbe2-dBar__btn {
        min-height: 62px;
        grid-template-columns: minmax(112px,154px) minmax(0,1fr) auto;
        gap: 10px
    }

    .qtbe2-dBar__p {
        font-size: clamp(22px,2.4vw,28px)
    }

    .qtbe2-dBar__qty {
        font-size: 13.5px;
        line-height: 1.08
    }

    .qtbe2-dBar__cta {
        min-width: 158px;
        height: 42px;
        padding: 0 14px
    }

    .qtbe2-dBar__ctaTxt {
        font-size: 13px
    }
}

@media (prefers-reduced-motion:reduce) {
    .qtbe2-fBar,.qtbe2-fBar__btn,.qtbe2-fBar__cta,.qtbe2-dBar,.qtbe2-dBar__btn,.qtbe2-dBar__cta {
        transition: none !important
    }
}