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

:root{
--qt-shell-pad:12px;
--qt-shell-max:100%;
--qt-shell-inner:calc(var(--qt-shell-max) - (var(--qt-shell-pad) * 2));
--aura-1:rgba(155,176,255,.26);
--aura-2:rgba(93,120,255,.18);
--c-instagram:#E1306C;
--c-twitter:#1DA1F2;
--c-youtube:#FF0000;
--c-facebook:#3b5998;
--c-telegram:#0088cc;
--c-tiktok:#000000;
--c-linkedin:#0077B5;
--c-spotify:#1DB954;
--c-soundcloud:#FF5500;
--c-twitch:#9146FF;
--c-whatsapp:#25D366;
--c-pinterest:#E60023;
--c-kick:#16965f;
--c-default:#6a7eff;
}
@media (min-width:576px){:root{--qt-shell-max:540px}}
@media (min-width:768px){:root{--qt-shell-max:720px}}
@media (min-width:992px){:root{--qt-shell-max:960px}}
@media (min-width:1200px){:root{--qt-shell-max:1140px}}
@media (min-width:1400px){:root{--qt-shell-max:1320px}}
@media (max-width:560px){:root{--qt-shell-pad:10px}}

body:has(#kategori-header.cat-hero){background:transparent!important;position:relative}
body:has(#kategori-header.cat-hero) #page,
body:has(#kategori-header.cat-hero) #content,
body:has(#kategori-header.cat-hero) #main,
body:has(#kategori-header.cat-hero) .site,
body:has(#kategori-header.cat-hero) .site-content,
body:has(#kategori-header.cat-hero) .content,
body:has(#kategori-header.cat-hero) .content-area,
body:has(#kategori-header.cat-hero) .content-wrapper,
body:has(#kategori-header.cat-hero) .page-wrapper,
body:has(#kategori-header.cat-hero) main{background:transparent!important}
body:has(#kategori-header.cat-hero)::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:
radial-gradient(900px 480px at 8% -10%,var(--aura-1),transparent 70%),
radial-gradient(780px 420px at 92% 0%,var(--aura-2),transparent 72%),
radial-gradient(1000px 360px at 50% -240px,color-mix(in srgb,var(--accent,#5c6cff) 12%,transparent),transparent 74%),
linear-gradient(180deg,var(--bg-top,#eef2ff),var(--bg-bottom,#f6f8ff));
}
body:has(#kategori-header.cat-hero) footer,
body:has(#kategori-header.cat-hero) #footer,
body:has(#kategori-header.cat-hero) .footer{position:relative;z-index:1}

#kategori-header.cat-hero{
--ink:#0f172a;
--muted:#6a7398;
--ac:var(--accent,#5c6cff);
--ac2:color-mix(in srgb,var(--ac) 45%,#ffffff);
--bg-top:#eef2ff;
--bg-bottom:#f6f8ff;
--max:1320px;
--card-bd:rgba(15,23,42,.10);
--card-bd-soft:rgba(15,23,42,.07);
--qc-qlogo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='aurora' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%239BB0FF'/%3E%3Cstop offset='100%25' stop-color='%235D78FF'/%3E%3C/linearGradient%3E%3Cfilter id='soft'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='1.8' result='b'/%3E%3CfeColorMatrix in='b' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3CfeOffset dy='1'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cmask id='qInnerCut'%3E%3Crect x='0' y='0' width='120' height='120' fill='white'/%3E%3Cline x1='60' y1='60' x2='78' y2='78' stroke='black' stroke-width='13' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='url(%23aurora)' stroke-width='3.2' opacity='.75'/%3E%3Ccircle cx='60' cy='60' r='24' fill='none' stroke='url(%23aurora)' stroke-width='7.5' stroke-linecap='round' filter='url(%23soft)' mask='url(%23qInnerCut)'/%3E%3Cline x1='68' y1='68' x2='84' y2='84' stroke='url(%23aurora)' stroke-width='7' stroke-linecap='round' filter='url(%23soft)'/%3E%3C/svg%3E");
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--ink);
}
#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 .hero-bleed{
width:100vw;
max-width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
padding:6px 0 12px;
position:relative;
overflow-x:hidden;
overflow-x:clip;
background:transparent;
}
#kategori-header.cat-hero .hero-bleed::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
background:transparent;
border:0;
box-shadow:none;
}

#kategori-header.cat-hero .hero{
width:min(var(--max),100%);
margin:0 auto;
padding:0 12px;
position:relative;
z-index:1;
isolation:isolate;
}
@media (max-width:560px){#kategori-header.cat-hero .hero{padding:0 10px}}

#kategori-header.cat-hero .hero > .row{
position:relative;
border-radius:18px;
overflow:hidden;
margin:0;
background:
radial-gradient(900px 240px at 12% 0%,color-mix(in srgb,var(--ac) 12%,transparent),transparent 62%),
linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,255,.86));
backdrop-filter:blur(12px) saturate(150%);
-webkit-backdrop-filter:blur(12px) saturate(150%);
border:1px solid color-mix(in srgb,var(--ac) 22%,rgba(15,23,42,.08));
box-shadow:
0 0 0 1px color-mix(in srgb,var(--ac) 26%,transparent),
0 16px 38px rgba(15,23,42,.10),
0 0 0 1px rgba(255,255,255,.70) inset;
display:flex!important;
align-items:center!important;
gap:12px!important;
padding:16px 16px!important;
flex-wrap:nowrap!important;
isolation:isolate;
}
#kategori-header.cat-hero .hero > .row:where(:hover,:focus-within){
box-shadow:
0 0 0 1px color-mix(in srgb,var(--ac) 32%,transparent),
0 0 14px color-mix(in srgb,var(--ac) 9%,transparent),
0 18px 44px rgba(15,23,42,.12),
0 0 0 1px rgba(255,255,255,.74) inset;
}

#kategori-header.cat-hero .hero > .row::before{
content:"";
position:absolute;
right:-26px;
top:-24px;
width:clamp(140px,22vw,220px);
height:clamp(140px,22vw,220px);
opacity:.20;
background:var(--qc-qlogo) center/100% 100% no-repeat;
filter:drop-shadow(0 18px 45px rgba(0,0,0,.10)) drop-shadow(0 0 14px rgba(155,176,255,.08));
animation:qt-q-breathe 4.2s ease-in-out infinite;
pointer-events:none;
z-index:0;
}
#kategori-header.cat-hero .hero > .row::after{
content:"";
position:absolute;
right:-26px;
top:-24px;
width:clamp(140px,22vw,220px);
height:clamp(140px,22vw,220px);
border-radius:999px;
opacity:.15;
background:
radial-gradient(circle at 52% 12%,color-mix(in srgb,var(--ac) 52%,#fff) 0 5px,rgba(255,255,255,.16) 6px,transparent 8px),
radial-gradient(circle at 94% 50%,color-mix(in srgb,var(--ac) 48%,#fff) 0 5px,rgba(255,255,255,.14) 6px,transparent 8px),
radial-gradient(circle at 48% 92%,color-mix(in srgb,var(--ac) 44%,#fff) 0 5px,rgba(255,255,255,.12) 6px,transparent 8px),
radial-gradient(circle at 6% 44%,color-mix(in srgb,var(--ac) 40%,#fff) 0 5px,rgba(255,255,255,.14) 6px,transparent 8px);
filter:drop-shadow(0 0 12px rgba(167,186,255,.10));
transform-origin:50% 50%;
animation:qt-q-orbit 7.2s linear infinite;
will-change:transform;
pointer-events:none;
z-index:0;
}

#kategori-header.cat-hero .hero .ico{
width:50px;
height:50px;
border-radius:14px;
display:grid;
place-items:center;
flex:0 0 50px;
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,247,255,.90));
color:var(--ac);
box-shadow:0 10px 20px -16px rgba(15,23,42,.40),inset 0 0 0 1px color-mix(in srgb,var(--ac) 18%,rgba(15,23,42,.08));
position:relative;
isolation:isolate;
z-index:1;
}
#kategori-header.cat-hero .hero .ico i{font-size:21px;line-height:1;margin:0!important;opacity:1!important;color:var(--ac)!important;text-shadow:none!important}
#kategori-header.cat-hero .hero .ico::before{
content:"";
position:absolute;
inset:-10px;
border-radius:18px;
background:conic-gradient(from 0deg,rgba(110,125,255,0),color-mix(in srgb,var(--ac) 58%,transparent),rgba(170,180,255,.18),rgba(110,125,255,0));
opacity:.80;
filter:blur(.15px) drop-shadow(0 10px 18px color-mix(in srgb,var(--ac) 18%,transparent));
-webkit-mask:radial-gradient(circle,transparent 62%,#000 64%);
mask:radial-gradient(circle,transparent 62%,#000 64%);
animation:qt-badge-orbit 5.8s linear infinite;
pointer-events:none;
z-index:-1;
}

#kategori-header.cat-hero .hero .txt{
flex:1 1 auto;
min-width:0;
max-width:72ch;
position:relative;
z-index:1;
}
#kategori-header.cat-hero h1{
font-size:clamp(19px,2.6vw,27px)!important;
font-weight:900!important;
letter-spacing:-.02em!important;
line-height:1.12!important;
color:var(--ink)!important;
text-shadow:0 2px 10px rgba(15,23,42,.08)!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
word-break:break-word!important;
}
#kategori-header.cat-hero p{
margin-top:4px!important;
color:color-mix(in srgb,var(--ink) 72%,#ffffff)!important;
line-height:1.42!important;
max-width:62ch!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
overflow-wrap:anywhere!important;
word-break:break-word!important;
}

#kategori-header.cat-hero .qt-guide-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:5px 10px;
border-radius:999px;
background:rgba(255,255,255,.84);
border:1px solid rgba(15,23,42,.10);
box-shadow:0 10px 22px rgba(16,24,52,.10);
white-space:nowrap;
vertical-align:middle;
}
#kategori-header.cat-hero .qt-guide-pill__a{
display:inline-flex;
align-items:center;
gap:8px;
color:#0b1225!important;
font-weight:800;
letter-spacing:.02em;
text-decoration:none;
line-height:1;
}
#kategori-header.cat-hero .qt-guide-pill__dot{
width:8px;
height:8px;
border-radius:99px;
background:var(--ac);
box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 18%,transparent);
}
#kategori-header.cat-hero .qt-guide-pill__t{font-size:12.5px;opacity:.95}
#kategori-header.cat-hero .qt-guide-pill__arr{font-size:14px;opacity:.9;transform:translateY(-.5px)}

@media (max-width:560px){
#kategori-header.cat-hero .hero > .row{padding:14px 14px!important;gap:10px!important}
#kategori-header.cat-hero .hero .ico{width:46px;height:46px;flex-basis:46px}
#kategori-header.cat-hero h1{font-size:clamp(18px,5.2vw,21px)!important;line-height:1.16!important;letter-spacing:-.014em!important}
#kategori-header.cat-hero p{font-size:.95rem!important;line-height:1.40!important;max-width:52ch!important}
#kategori-header.cat-hero .hero > .row::before,
#kategori-header.cat-hero .hero > .row::after{right:-70px;top:-52px}
#kategori-header.cat-hero .hero > .row::before{opacity:.16}
#kategori-header.cat-hero .hero > .row::after{opacity:.12}
}

@keyframes qt-q-orbit{to{transform:rotate(360deg)}}
@keyframes qt-q-breathe{0%,100%{transform:scale(1);opacity:.20}50%{transform:scale(1.03);opacity:.16}}
@keyframes qt-badge-orbit{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
#kategori-header.cat-hero .hero > .row::before,
#kategori-header.cat-hero .hero > .row::after,
#kategori-header.cat-hero .hero .ico::before{animation:none!important}
}
/* =========================
   CAT HERO — watermark accent fix
   (data-uri SVG renkleri sabitti -> mask ile accentten boyuyoruz)
   ========================= */

#kategori-header.cat-hero{
  /* eski --qc-qlogo yerine mask */
  --qc-qmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cfilter id='soft'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='1.8' result='b'/%3E%3CfeColorMatrix in='b' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3CfeOffset dy='1'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cmask id='qInnerCut'%3E%3Crect width='120' height='120' fill='white'/%3E%3Cline x1='60' y1='60' x2='78' y2='78' stroke='black' stroke-width='13' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%23000' stroke-width='3.2' opacity='.9'/%3E%3Ccircle cx='60' cy='60' r='24' fill='none' stroke='%23000' stroke-width='7.5' stroke-linecap='round' filter='url(%23soft)' mask='url(%23qInnerCut)'/%3E%3Cline x1='68' y1='68' x2='84' y2='84' stroke='%23000' stroke-width='7' stroke-linecap='round' filter='url(%23soft)'/%3E%3C/svg%3E");
}

#kategori-header.cat-hero .hero > .row::before{
  /* artık background image değil: accent ile boyanan bir layer */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ac) 35%, #fff),
    var(--ac)
  );
  -webkit-mask: var(--qc-qmask) center/100% 100% no-repeat;
  mask: var(--qc-qmask) center/100% 100% no-repeat;

  /* eski görünümü koru */
  opacity:.18;
  filter:
    drop-shadow(0 18px 45px rgba(0,0,0,.10))
    drop-shadow(0 0 14px color-mix(in srgb, var(--ac) 18%, transparent));
}

/* =========================================================
   BUY HERO: cat-hero efektlerini kapat + clean hero
   (Üstteki gri kapsül / daireler / blur garipliği buradan geliyor)
========================================================= */

/* Buy sayfasında hero'yu özel sınıfla yakalıyoruz:
   platform-buy-engine.php'de: class="cat-hero qt-cat-hero qt-buy-hero ..."
*/
.cat-hero.qt-buy-hero{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}

/* cat-hero'nun dekor pseudo elementleri genelde burada */
.cat-hero.qt-buy-hero::before,
.cat-hero.qt-buy-hero::after,
.cat-hero.qt-buy-hero .hero-bleed::before,
.cat-hero.qt-buy-hero .hero-bleed::after{
  content: none !important;
  display: none !important;
}

/* hero-bleed’in eski gradient/overlay’ini kapat */
.cat-hero.qt-buy-hero .hero-bleed{
  background: transparent !important;
  padding: 10px 0 12px !important;
}

/* hero kutusunu, alttaki grid estetiğiyle aynı hizaya al */
.cat-hero.qt-buy-hero .hero{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 45px rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
}

/* içerik hizalama */
.cat-hero.qt-buy-hero .row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-hero.qt-buy-hero .ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--qt-buy-accent-soft);
  border: 1px solid rgba(15,23,42,.08);
  color: var(--qt-buy-accent);
  flex: 0 0 auto;
}

.cat-hero.qt-buy-hero .ico i{ font-size: 18px; }

.cat-hero.qt-buy-hero h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--qt-buy-ink);
  letter-spacing: -0.02em;
}

.cat-hero.qt-buy-hero .qt-hero-desc{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--qt-buy-muted);
}

/* mobil */
@media (max-width: 640px){
  .cat-hero.qt-buy-hero .hero{ border-radius: 16px; padding: 12px 14px; }
  .cat-hero.qt-buy-hero h1{ font-size: 22px; }
  .cat-hero.qt-buy-hero .qt-hero-desc{ font-size: 13px; }
  .cat-hero.qt-buy-hero .ico{ width: 42px; height: 42px; border-radius: 13px; }
}


#qt-rel.qt-rel--bare,
.qt-rel.qt-rel--bare{
--qt-accent-safe: var(--qt-accent, var(--accent, #6a7eff));
width:100%;
max-width: var(--qt-shell-max, 1200px);
padding-left: var(--qt-shell-pad, 12px);
padding-right: var(--qt-shell-pad, 12px);
margin: 4px auto 8px !important;
}
#qt-rel.qt-rel--bare .qt-rel__chips,
.qt-rel.qt-rel--bare .qt-rel__chips{
display:flex;
flex-wrap:nowrap;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
padding:2px 0 6px;
max-width:100%;
margin:0;
justify-content:center;
-ms-overflow-style:none;
scrollbar-width:none;
}
#qt-rel.qt-rel--bare .qt-rel__chips::-webkit-scrollbar,
.qt-rel.qt-rel--bare .qt-rel__chips::-webkit-scrollbar{
height:0 !important;
display:none;
}
#qt-rel.qt-rel--overflow .qt-rel__chips,
.qt-rel.qt-rel--overflow .qt-rel__chips{
justify-content:flex-start;
}
#qt-rel.qt-rel--bare .qt-rel__chip,
.qt-rel.qt-rel--bare .qt-rel__chip{
scroll-snap-align:start;
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.65);
border:1px solid rgba(15,18,36,.10);
color:rgba(15,18,36,.92);
font-weight:800;
font-size:12.5px;
line-height:1;
white-space:nowrap;
flex:0 0 auto;
min-width:max-content;
transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
#qt-rel.qt-rel--bare .qt-rel__chip i,
.qt-rel.qt-rel--bare .qt-rel__chip i{
color:var(--qt-accent-safe);
opacity:.95;
}
#qt-rel.qt-rel--bare .qt-rel__chip:hover,
.qt-rel.qt-rel--bare .qt-rel__chip:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.9);
border-color:rgba(15,18,36,.16);
}
#qt-rel + #packlist{
margin-top:0 !important;
padding-top:4px !important;
}
@media (max-width:560px){
#qt-rel.qt-rel--bare,
.qt-rel.qt-rel--bare{
padding-left: var(--qt-shell-pad, 10px);
padding-right: var(--qt-shell-pad, 10px);
margin: 3px auto 6px !important;
}
#qt-rel.qt-rel--bare .qt-rel__chips,
.qt-rel.qt-rel--bare .qt-rel__chips{
gap:7px;
padding:2px 0 5px;
justify-content:flex-start;
}
#qt-rel.qt-rel--bare .qt-rel__chip,
.qt-rel.qt-rel--bare .qt-rel__chip{
padding:7px 9px;
font-size:12px;
}
#qt-rel + #packlist{ padding-top:3px !important; }
}



#packlist{
margin-top:-8px;
padding-top:8px;
background: transparent !important;
position:relative;
isolation:isolate;
z-index:1;
--qt-ac: var(--accent, var(--c-default));
}
#packlist .container{
background: transparent !important;
max-width: var(--qt-shell-max) !important;
padding-left: var(--qt-shell-pad) !important;
padding-right: var(--qt-shell-pad) !important;
position:relative;
z-index:1;
}
#packlist .packList{
display:grid;
gap:18px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
padding:0 !important;
justify-content:stretch !important;
position:relative;
z-index:1;
overflow:visible !important;
}
@supports (content-visibility:auto){
#packlist .packList{
content-visibility:auto;
contain-intrinsic-size:1200px;
}
}
#packlist .qt-theme-instagram{ --qt-ac: var(--c-instagram); }
#packlist .qt-theme-twitter{   --qt-ac: var(--c-twitter); }
#packlist .qt-theme-youtube{   --qt-ac: var(--c-youtube); }
#packlist .qt-theme-facebook{  --qt-ac: var(--c-facebook); }
#packlist .qt-theme-telegram{  --qt-ac: var(--c-telegram); }
#packlist .qt-theme-tiktok{    --qt-ac: var(--c-tiktok); }
#packlist .qt-theme-linkedin{  --qt-ac: var(--c-linkedin); }
#packlist .qt-theme-spotify{   --qt-ac: var(--c-spotify); }
#packlist .qt-theme-soundcloud{--qt-ac: var(--c-soundcloud); }
#packlist .qt-theme-twitch{    --qt-ac: var(--c-twitch); }
#packlist .qt-theme-whatsapp{  --qt-ac: var(--c-whatsapp); }
#packlist .qt-theme-pinterest{ --qt-ac: var(--c-pinterest); }
#packlist .qt-theme-kick{      --qt-ac: var(--c-kick); }
#packlist .qt-theme-default{   --qt-ac: var(--c-default); }
#packlist .qt-card{
--qt-border: var(--qt-ac, var(--c-default));
--qt-glow: rgba(15,23,42,.14);
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
border-radius:16px;
border:1px solid color-mix(in srgb, var(--qt-border) 40%, rgba(15,23,42,.12));
padding:18px;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
min-height:310px;
box-shadow:
0 10px 18px -16px rgba(15,23,42,.38),
0 0 0 1px rgba(255,255,255,.70) inset;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
z-index:1;
}
#packlist .qt-card::before{
content:"";
position:absolute;
inset:-1px;
border-radius:inherit;
pointer-events:none;
z-index:-1;
background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.22));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
padding:1px;
opacity:.40;
box-shadow:0 0 0 1px color-mix(in srgb, var(--qt-border) 10%, rgba(15,23,42,.08));
}
#packlist .qt-card:hover{
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--qt-border) 55%, rgba(15,23,42,.14));
box-shadow:
0 16px 26px -18px rgba(15,23,42,.48),
0 0 18px color-mix(in srgb, var(--qt-border) 10%, transparent),
0 0 0 1px rgba(255,255,255,.78) inset;
background: radial-gradient(circle at 0 0, rgba(248,250,252,.92), #ffffff);
z-index:50;
}
#packlist .qt-card:hover::before{
opacity:.62;
box-shadow:0 0 0 1px color-mix(in srgb, var(--qt-border) 14%, rgba(15,23,42,.09));
}
#packlist .qt-card__top{
display:flex;
align-items:center;
gap:12px;
margin:-4px -4px 14px;
padding:12px 14px;
position:relative;
border-radius:14px;
background:
radial-gradient(circle at 0 0,
color-mix(in srgb, var(--qt-border) 18%, #ffffff 82%),
transparent 60%);
border:1px solid color-mix(in srgb, var(--qt-border) 22%, rgba(15,23,42,.08));
box-shadow:
0 8px 18px rgba(15,23,42,.06),
0 0 0 1px rgba(255,255,255,.70) inset;
z-index:1;
}
#packlist .qt-card:hover .qt-card__top{
box-shadow:
0 10px 24px rgba(15,23,42,.10),
0 0 0 1px rgba(255,255,255,.76) inset;
}
#packlist .qt-card__icon{
width:46px;
height:46px;
border-radius:14px;
display:grid;
place-items:center;
background: rgba(255,255,255,.95);
border:1px solid color-mix(in srgb, var(--qt-border) 28%, rgba(15,23,42,.08));
box-shadow: 0 8px 18px rgba(15,23,42,.10);
flex:0 0 auto;
backdrop-filter: blur(6px);
}
#packlist .qt-card__icon i{
font-size:22px;
transition: transform .25s ease;
color: var(--qt-ac, var(--c-default)) !important;
}
#packlist .qt-card:hover .qt-card__icon i{ transform: scale(1.12); }
#packlist .qt-card__title{
font-weight:800;
line-height:1.25;
color:#0b1225;
letter-spacing:-.2px;
}
#packlist .qt-card__title span{
display:block;
font-weight:700;
opacity:.75;
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.08em;
margin-bottom:2px;
}
#packlist .qt-card__top::after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:-7px;
height:2px;
border-radius:999px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--qt-border) 55%, #e5e7eb 45%),
color-mix(in srgb, var(--qt-border) 10%, #ffffff 90%)
);
opacity:.55;
}
#packlist .qt-card__detail{ position:relative; margin-top:14px; flex:1; }
#packlist .qt-card__detail .qt-scroll{ max-height:180px; overflow:hidden; }
#packlist .qt-card__detail .qt-scroll.is-open{ overflow-y:auto; padding-right:6px; }
#packlist .qt-card__detail .qt-scroll.is-open::-webkit-scrollbar{ width:8px; }
#packlist .qt-card__detail .qt-scroll.is-open::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.15); border-radius:8px; }
#packlist .qt-card__detail ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
#packlist .qt-card__detail li{
display:flex; gap:8px; align-items:flex-start;
color:#0b1225; opacity:.92; font-size:.95rem;
}
#packlist .qt-card__detail li::before{
content:"";
width:8px; height:8px; margin-top:.45rem;
border-radius:999px;
background:var(--qt-ac, var(--c-default));
opacity:.35;
flex:0 0 8px;
}
#packlist .qt-more{ margin-top:10px; text-align:center; }
#packlist .qt-more button{
all:unset;
display:inline-flex; align-items:center; gap:6px;
font-weight:800; font-size:.94rem;
padding:6px 10px; border-radius:8px;
transition: background .15s, transform .1s;
cursor:pointer;
color: var(--qt-ac, var(--c-default));
}
#packlist .qt-more button:hover{
transform:scale(1.04);
background: rgba(15,23,42,.06);
}
#packlist .qt-card__bottom{
margin-top:auto;
padding-top:14px;
display:flex;
align-items:center;
gap:10px;
border-top:1px solid color-mix(in srgb, var(--qt-border) 22%, rgba(15,23,42,.08));
}
#packlist .qt-card__price{ margin:0; text-align:left; flex:0 0 auto; }
#packlist .qt-card__price .now{
display:inline-flex;
align-items:flex-end;
justify-content:center;
gap:4px;
padding:4px 12px;
border-radius:999px;
background: radial-gradient(circle at 50% 0, rgba(255,255,255,1), rgba(248,250,252,.96));
border:1px solid color-mix(in srgb, var(--qt-border) 55%, #e2e8f0 45%);
box-shadow:
0 0 0 1px rgba(255,255,255,.85),
0 12px 22px var(--qt-glow);
font-size:1.1rem;
font-weight:900;
letter-spacing:-.25px;
color:#0b1225;
text-shadow:0 0 3px rgba(0,0,0,.04);
transition: transform .18s ease, box-shadow .18s ease;
}
#packlist .qt-card:hover .qt-card__price .now{
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(255,255,255,1),
0 16px 26px var(--qt-glow);
}
#packlist .qt-btn{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
width:100%;
padding:12px 16px;
border-radius:12px;
font-weight:800;
color:#fff;
text-decoration:none;
transition: filter .15s, transform .08s, box-shadow .15s;
box-shadow:0 10px 18px -16px rgba(15,23,42,.55);
flex:1 1 auto;
background: var(--qt-ac, var(--c-default));
}
@supports (color: color-mix(in srgb, #000 50%, #fff)){
#packlist .qt-btn{
background: linear-gradient(135deg,
var(--qt-ac, var(--c-default)),
color-mix(in srgb, var(--qt-ac, var(--c-default)) 42%, #ffffff)
);
}
}
#packlist .qt-btn:hover{ filter:brightness(1.07); box-shadow:0 14px 22px -16px rgba(15,23,42,.65); }
#packlist .qt-btn:active{ transform:translateY(1px); box-shadow:0 8px 16px -16px rgba(15,23,42,.60); }
#packlist .qt-theme-soundcloud .qt-btn{
background: rgba(255,85,0,0.12) !important;
color:#ff5500 !important;
border:1px solid rgba(255,85,0,0.45);
backdrop-filter: blur(6px) saturate(180%);
transition: all .2s ease;
}
#packlist .qt-theme-soundcloud .qt-btn:hover{
background: linear-gradient(135deg,#ff6a1a,#ff5500) !important;
color:#fff !important;
border-color: transparent !important;
}
#packlist .qt-theme-soundcloud .qt-card__icon i{
color:#ff5500 !important;
opacity:1 !important;
}
@media(max-width:768px){
#packlist .qt-card{ min-height:280px; padding:14px; border-radius:12px; }
#packlist .qt-card__icon{ width:42px; height:42px; }
#packlist .qt-card__price .now{ font-size:1.05rem; }
}
.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;
}