/* =========================================================
   CATEGORY.CSS (QT) — SVG Icon System + Cat Hero + Packlist
   - Inline CSS yok
   - FontAwesome kalıntısı yok
   - SVG ikonlar FA gibi tek merkezden yönetilir
   ========================================================= */

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

/* =========================================================
   TOKENS / ROOT
   ========================================================= */
: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;

  /* =========================
     SVG ICON SYSTEM TOKENS
     (tek yerden boyut yönetimi)
     ========================= */
  --qt-hero-ic-box: 62px;
  --qt-hero-ic:     30px;

  --qt-pack-ic-box: 54px;
  --qt-pack-ic:     26px;

  --qt-btn-ic:      18px;

  /* stroke ikonlarda kalınlık */
  --qt-ic-stroke: 1.8;
}

/* shell max */
@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;

    /* mobil ikonlar */
    --qt-hero-ic-box: 56px;
    --qt-hero-ic:     28px;
    --qt-pack-ic-box: 48px;
    --qt-pack-ic:     24px;
  }
}

/* =========================================================
   SVG ICON SYSTEM (CATEGORY SCOPE)
   - Category.css yalnızca kategori alanını etkiler
   - Header/Nav ikonları ezilmez
   - Varsayılan: stroke ikon
   - .is-solid ile fill ikon
   ========================================================= */

/* FA kalıntıları (kategori alanında varsa) */
#kategori-header i,
#packlist i{
  display:none !important;
}

/* Header/Nav gibi alanlarda .qt-ic varsa, solid kalsın (kategori CSS’i ezmesin) */
body :where(header, #header, .site-header, .main-header, nav, .topbar, .navbar) .qt-ic{
  fill: currentColor !important;
  stroke: none !important;
  vector-effect: initial;
}

/* Kategori alanı scope */
:where(#kategori-header, #packlist, #qt-rel){

  /* baseline/inline derdi yok */
  :where(svg.qt-ic, .qt-ic){
    width:1em;
    height:1em;
    display:block;
    flex:0 0 auto;
    line-height:0;
  }

  /* sprite use güvenli */
  .qt-ic use{ pointer-events:none; }

  /* Default: stroke tabanlı ikon */
  .qt-ic{
    fill:none;
    stroke:currentColor;
    stroke-width:var(--qt-ic-stroke);
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* Solid ikon istenirse */
  .qt-ic.is-solid{
    fill:currentColor;
    stroke:none;
  }

  /* stroke ölçeklenmesin */
  .qt-ic *{ vector-effect: non-scaling-stroke; }
}
/* =========================================================
   CAT HERO PAGE BACKGROUND
   ========================================================= */
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;
}

/* =========================================================
   CAT HERO BASE
   ========================================================= */
#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);

  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);

  /* watermark mask token */
  --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,
#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; }

/* bleed */
#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;
}

/* container */
#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; }
}

/* row card */
#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;
  align-items:center;
  gap:12px;
  padding:16px 16px;
  flex-wrap:nowrap;
  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;
}

/* watermark layers */
#kategori-header.cat-hero .hero > .row::before{
  content:"";
  position:absolute;
  right:-26px;
  top:-24px;
  width:clamp(140px,22vw,220px);
  height:clamp(140px,22vw,220px);

  /* accent boyalı mask */
  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;

  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));

  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;
}

/* HERO ICON BOX (SVG system ile boyut) */
#kategori-header.cat-hero .hero .ico{
  width:var(--qt-hero-ic-box);
  height:var(--qt-hero-ic-box);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--qt-hero-ic-box);

  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;
  line-height:0;
}
#kategori-header.cat-hero .hero .ico .qt-ic--hero{
  width:var(--qt-hero-ic);
  height:var(--qt-hero-ic);
  color:var(--ac);
}
#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;
}

/* TEXT */
#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);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--ink);
  text-shadow:0 2px 10px rgba(15,23,42,.08);
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#kategori-header.cat-hero p{
  margin-top:4px;
  color:color-mix(in srgb,var(--ink) 72%,#ffffff);
  line-height:1.42;
  max-width:62ch;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* guide pill */
#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;
  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); }

/* mobile adjustments */
@media (max-width:560px){
  #kategori-header.cat-hero .hero > .row{ padding:14px 14px; gap:10px; }
  #kategori-header.cat-hero h1{ font-size:clamp(18px,5.2vw,21px); line-height:1.16; letter-spacing:-.014em; }
  #kategori-header.cat-hero p{ font-size:.95rem; line-height:1.40; max-width:52ch; }
  #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; }
}

/* animations */
@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;
  }
}

/* =========================================================
   RELATED CHIPS
   ========================================================= */
#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;
}
#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: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;
  padding-top:4px;
}
@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;
  }
  #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; }
}

/* =========================================================
   PACKLIST
   ========================================================= */
#packlist{
  margin-top:-8px;
  padding-top:8px;
  background:transparent;
  position:relative;
  isolation:isolate;
  z-index:1;
  --qt-ac: var(--accent, var(--c-default));
}
#packlist .container{
  background:transparent;
  max-width:var(--qt-shell-max);
  padding-left:var(--qt-shell-pad);
  padding-right:var(--qt-shell-pad);
  position:relative;
  z-index:1;
}
#packlist .packList{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 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:1200px;
  }
}

/* theme helpers */
#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); }

/* card */
#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));
}

/* top */
#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;
}

/* icon box (SVG system) */
#packlist .qt-card__icon{
  width:var(--qt-pack-ic-box);
  height:var(--qt-pack-ic-box);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content: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);
  line-height:0;
}
#packlist .qt-card__icon .qt-ic--pack{
  width:var(--qt-pack-ic);
  height:var(--qt-pack-ic);
  color: var(--qt-ac, var(--c-default));
  transition: transform .25s ease;
}
#packlist .qt-card:hover .qt-card__icon .qt-ic--pack{
  transform: scale(1.12);
}

/* title */
#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;
}

/* detail */
#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;
}

/* more */
#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);
}

/* bottom */
#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);
}

/* button */
#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);
}

/* button icon sizing */
#packlist .qt-btn .qt-ic--btn{
  width:var(--qt-btn-ic);
  height:var(--qt-btn-ic);
  color:currentColor;
}

/* soundcloud special */
#packlist .qt-theme-soundcloud .qt-btn{
  background: rgba(255,85,0,0.12);
  color:#ff5500;
  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);
  color:#fff;
  border-color: transparent;
}

/* responsive card */
@media(max-width:768px){
  #packlist .qt-card{ min-height:280px; padding:14px; border-radius:12px; }
  #packlist .qt-card__price .now{ font-size:1.05rem; }
}

/* sr-only */
.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;
}