/* =========================================================
   QUANTAPS TR CATEGORY
   REFINED CARDS + MOBILE HERO FINAL V4

   Bu dosya yalnız aktif yapıyı içerir:
   - Güncel hero ve hero içindeki breadcrumb
   - Gerçek pack.loft.php kartları
   - Sabit kart yüksekliği ve kart içi detay kaydırması
   - Platform accent renkleri
   - Alt içerik accent köprüsü

   Eski selector, floating buy bar, eski hero, review ve
   kullanılmayan qtbe2 kuralları bu dosyada bulunmaz.
========================================================= */

:root{
  --qt-shell-pad:12px;
  --qt-shell-max:1320px;
  --qt-pack-ic-box:43px;
  --qt-pack-ic:20px;
  --qt-btn-ic:13px;
  --qt-ic-stroke:1.8;
}

#qtCategoryBuy.qt-catbuy{
  --qt-cat-accent:var(
    --qt-buy-accent,
    var(--accent,var(--qt-platform-default,#6573dc))
  );
  --qt-cat-ink:#0b1530;
  --qt-cat-ink-2:#263650;
  --qt-cat-text:#53637d;
  --qt-cat-muted:#71809a;
  --qt-cat-muted-2:#8792a7;
  --qt-cat-line:rgba(57,75,118,.11);
  --qt-cat-line-soft:rgba(57,75,118,.068);
  --qt-cat-accent-line:color-mix(
    in srgb,
    var(--qt-cat-accent) 19%,
    rgba(57,75,118,.10)
  );
  --qt-cat-accent-soft:color-mix(
    in srgb,
    var(--qt-cat-accent) 7%,
    transparent
  );
  --qt-cat-focus:0 0 0 4px color-mix(
    in srgb,
    var(--qt-cat-accent) 12%,
    transparent
  );

  position:relative;
  isolation:isolate;
  width:100%;
  padding:5px 0 27px;
  overflow:hidden;
  color:var(--qt-cat-ink);
  background:
    radial-gradient(
      920px 360px at 7% 0,
      color-mix(in srgb,var(--qt-cat-accent) 11%,transparent),
      transparent 70%
    ),
    radial-gradient(
      780px 300px at 96% 3%,
      color-mix(in srgb,var(--qt-cat-accent) 7%,transparent),
      transparent 73%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--qt-cat-accent) 3%,#f7f9fd) 0%,
      #f8faff 48%,
      rgba(255,255,255,.97) 100%
    );
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#qtCategoryBuy::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:112px;
  left:50%;
  width:min(1500px,112%);
  height:500px;
  border-radius:50%;
  pointer-events:none;
  opacity:.44;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb,var(--qt-cat-accent) 6.5%,transparent),
      transparent 68%
    );
  filter:blur(11px);
  transform:translateX(-50%);
}

#qtCategoryBuy,
#qtCategoryBuy *,
#qtCategoryBuy *::before,
#qtCategoryBuy *::after{
  box-sizing:border-box;
}

#qtCategoryBuy :where(h1,h2,h3,p,ul,ol,li){
  margin:0;
  padding:0;
}

#qtCategoryBuy :where(ul,ol){
  list-style:none;
}

#qtCategoryBuy :where(a){
  color:inherit;
  text-decoration:none;
}

#qtCategoryBuy :where(button){
  font:inherit;
}

.qt-catbuy__shell{
  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;
}

/* =========================================================
   HERO + BREADCRUMB
========================================================= */

#kategori-header.qt-catbuy__hero{
  position:relative;
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  grid-template-areas:
    "breadcrumb breadcrumb"
    "icon body";
  align-items:center;
  column-gap:14px;
  row-gap:6px;
  margin:0;
  padding:10px 19px 14px;
  overflow:hidden;
  border:1px solid var(--qt-cat-accent-line);
  border-radius:22px;
  color:var(--qt-cat-ink);
  background:
    radial-gradient(
      610px 190px at 0 0,
      color-mix(in srgb,var(--qt-cat-accent) 10%,transparent),
      transparent 68%
    ),
    radial-gradient(
      470px 170px at 100% 0,
      rgba(255,255,255,.84),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.84)
    );
  box-shadow:
    0 18px 48px rgba(26,40,78,.082),
    0 7px 20px color-mix(
      in srgb,
      var(--qt-cat-accent) 5.5%,
      transparent
    ),
    inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#kategori-header.qt-catbuy__hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 4%,
    color-mix(in srgb,var(--qt-cat-accent) 46%,transparent),
    rgba(255,255,255,.16),
    transparent 96%
  );
}

#kategori-header.qt-catbuy__hero::after{
  content:"";
  position:absolute;
  top:-82px;
  right:-58px;
  width:206px;
  height:206px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 33% 32%,
      rgba(255,255,255,.88),
      transparent 28%
    ),
    color-mix(
      in srgb,
      var(--qt-cat-accent) 8.5%,
      transparent
    );
}

.qt-catbuy__breadcrumb{
  grid-area:breadcrumb;
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 1px;
  overflow:hidden;
  color:var(--qt-cat-muted-2);
  font-size:10.2px;
  font-weight:650;
  line-height:1.25;
  white-space:nowrap;
}

.qt-catbuy__breadcrumb a{
  flex:0 0 auto;
  color:var(--qt-cat-muted);
  font-weight:720;
  transition:color .15s ease;
}

.qt-catbuy__breadcrumb a:hover,
.qt-catbuy__breadcrumb a:focus-visible{
  outline:none;
  color:color-mix(
    in srgb,
    var(--qt-cat-accent) 78%,
    #17203d
  );
}

.qt-catbuy__breadcrumb span[aria-hidden="true"]{
  flex:0 0 auto;
  color:color-mix(
    in srgb,
    var(--qt-cat-muted-2) 68%,
    transparent
  );
}

.qt-catbuy__breadcrumb span[aria-current="page"]{
  min-width:0;
  max-width:430px;
  overflow:hidden;
  color:color-mix(
    in srgb,
    var(--qt-cat-accent) 75%,
    #17203d
  );
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.qt-catbuy__heroIcon{
  grid-area:icon;
  position:relative;
  z-index:2;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(
    in srgb,
    var(--qt-cat-accent) 21%,
    transparent
  );
  border-radius:17px;
  color:#fff;
  background:
    radial-gradient(
      100% 100% at 25% 18%,
      rgba(255,255,255,.31),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--qt-cat-accent) 76%,#fff),
      var(--qt-cat-accent)
    );
  box-shadow:
    0 12px 25px color-mix(
      in srgb,
      var(--qt-cat-accent) 21%,
      transparent
    ),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.qt-catbuy__heroIcon .qt-ic{
  width:25px!important;
  height:25px!important;
  display:block;
  color:#fff;
  fill:currentColor!important;
  stroke:none!important;
}

.qt-catbuy__heroIcon .qt-ic use{
  fill:currentColor!important;
  stroke:none!important;
}

.qt-catbuy__heroBody{
  grid-area:body;
  position:relative;
  z-index:2;
  min-width:0;
  padding-right:118px;
}

.qt-catbuy__title{
  width:100%;
  color:var(--qt-cat-ink);
  font-size:clamp(1.58rem,1.36rem + .67vw,1.98rem);
  font-weight:1000;
  line-height:1.07;
  letter-spacing:-.043em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

.qt-catbuy__desc{
  width:100%;
  margin-top:6px!important;
  color:var(--qt-cat-text);
  font-size:13px;
  font-weight:540;
  line-height:1.5;
  text-wrap:pretty;
}

/* =========================================================
   PACKAGE GRID
========================================================= */

#qtCategoryBuy #packlist{
  --qt-ac:var(--qt-cat-accent);

  position:relative;
  z-index:2;
  width:100%;
  margin-top:-1px;
  padding-top:9px;
  background:transparent;
}

#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:0 auto;
  padding:0;
}

#packlist .packList{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
  padding:0;
}

/* =========================================================
   PACKAGE CARD — FIXED HEIGHT / INTERNAL SCROLL
========================================================= */

#packlist .qt-card{
  --qt-card-accent:var(
    --qt-ac,
    var(--qt-cat-accent,var(--qt-platform-default,#6573dc))
  );

  position:relative;
  z-index:1;
  min-width:0;
  height:282px;
  min-height:282px;
  display:flex;
  flex-direction:column;
  padding:10px;
  overflow:hidden;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 15%,
    rgba(57,75,118,.10)
  );
  border-radius:16px;
  color:var(--qt-cat-ink);
  background:
    radial-gradient(
      300px 110px at 0 0,
      color-mix(in srgb,var(--qt-card-accent) 7%,transparent),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.975),
      rgba(249,251,255,.95)
    );
  box-shadow:
    0 8px 21px rgba(27,41,76,.047),
    inset 0 1px 0 rgba(255,255,255,.94);
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

#packlist .qt-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 4%,
    color-mix(in srgb,var(--qt-card-accent) 52%,transparent),
    transparent 96%
  );
}

#packlist .qt-card::after{
  content:"";
  position:absolute;
  top:-54px;
  right:-48px;
  width:118px;
  height:118px;
  border-radius:50%;
  pointer-events:none;
  opacity:.54;
  background:color-mix(
    in srgb,
    var(--qt-card-accent) 5.5%,
    transparent
  );
}

#packlist .qt-card.overi{
  border-color:color-mix(
    in srgb,
    var(--qt-card-accent) 29%,
    rgba(57,75,118,.11)
  );
  box-shadow:
    0 10px 24px color-mix(
      in srgb,
      var(--qt-card-accent) 8%,
      rgba(27,41,76,.04)
    ),
    inset 0 1px 0 rgba(255,255,255,.95);
}

#packlist .qt-card__top{
  position:relative;
  z-index:2;
  min-width:0;
  display:grid;
  grid-template-columns:43px minmax(0,1fr);
  align-items:center;
  gap:9px;
  margin-bottom:7px;
  padding:8px 9px;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 11%,
    rgba(57,75,118,.075)
  );
  border-radius:12px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--qt-card-accent) 3.8%,#fff),
      rgba(249,251,255,.90)
    );
  box-shadow:
    0 4px 10px rgba(15,23,42,.025),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#packlist .qt-card__icon{
  width:var(--qt-pack-ic-box);
  height:var(--qt-pack-ic-box);
  display:grid;
  place-items:center;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 22%,
    transparent
  );
  border-radius:12px;
  color:#fff;
  background:
    radial-gradient(
      100% 100% at 25% 18%,
      rgba(255,255,255,.29),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--qt-card-accent) 75%,#fff),
      var(--qt-card-accent)
    );
  box-shadow:
    0 8px 17px color-mix(
      in srgb,
      var(--qt-card-accent) 16%,
      transparent
    ),
    inset 0 1px 0 rgba(255,255,255,.24);
}

#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:#fff;
  fill:currentColor;
  stroke:none;
  overflow:visible;
  transition:transform .16s ease;
}

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

#packlist .qt-card__title{
  min-width:0;
  display:-webkit-box;
  overflow:hidden;
  color:var(--qt-cat-ink);
  font-size:13.35px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.018em;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#packlist .qt-card__title span{
  display:block;
  margin-bottom:2px;
  overflow:hidden;
  color:color-mix(
    in srgb,
    var(--qt-card-accent) 76%,
    #33425c
  );
  font-size:8.8px;
  font-weight:900;
  line-height:1.12;
  letter-spacing:.075em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

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

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

#packlist .qt-card__detail .qt-scroll.is-open{
  height:92px;
  max-height:92px!important;
  padding:6px 8px 15px 7px;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-padding-bottom:18px;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 16%,
    rgba(57,75,118,.075)
  );
  background:color-mix(
    in srgb,
    var(--qt-card-accent) 3.2%,
    rgba(255,255,255,.80)
  );
}

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

#packlist .qt-card__detail ul{
  display:grid;
  gap:5px;
  margin:0;
  padding:0 0 14px;
}

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

#packlist .qt-card__detail li{
  position:relative;
  min-width:0;
  padding-left:21px;
  color:var(--qt-cat-text);
  font-size:10.45px;
  font-weight:530;
  line-height:1.38;
}

#packlist .qt-card__detail li::before{
  content:"";
  position:absolute;
  top:1px;
  left:0;
  width:14px;
  height:14px;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 21%,
    transparent
  );
  border-radius:5px;
  background:color-mix(
    in srgb,
    var(--qt-card-accent) 6%,
    #fff
  );
}

#packlist .qt-card__detail li::after{
  content:"";
  position:absolute;
  top:5px;
  left:4px;
  width:5px;
  height:3px;
  border-left:1.6px solid var(--qt-card-accent);
  border-bottom:1.6px solid var(--qt-card-accent);
  transform:rotate(-45deg);
}

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

#packlist .qt-card__detail .qt-scroll.is-open::-webkit-scrollbar-track{
  border-radius:999px;
  background:color-mix(
    in srgb,
    var(--qt-card-accent) 8%,
    rgba(57,75,118,.045)
  );
}

#packlist .qt-card__detail .qt-scroll.is-open::-webkit-scrollbar-thumb{
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 7%,
    #fff
  );
  border-radius:999px;
  background:color-mix(
    in srgb,
    var(--qt-card-accent) 52%,
    rgba(57,75,118,.20)
  );
}

#packlist .qt-card__detail .qt-scroll.is-open{
  scrollbar-width:thin;
  scrollbar-color:
    color-mix(
      in srgb,
      var(--qt-card-accent) 40%,
      rgba(57,75,118,.16)
    )
    transparent;
}

#packlist .qt-scroll-hint{
  position:absolute;
  right:7px;
  bottom:7px;
  z-index:5;
  min-height:23px;
  display:none;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0 8px;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 24%,
    rgba(57,75,118,.09)
  );
  border-radius:999px;
  color:color-mix(
    in srgb,
    var(--qt-card-accent) 83%,
    #263650
  );
  background:color-mix(
    in srgb,
    var(--qt-card-accent) 8%,
    #fff
  );
  box-shadow:0 5px 13px rgba(15,23,42,.085);
  font-size:9.5px;
  font-weight:900;
  line-height:1;
  pointer-events:none;
}

#packlist .qt-scroll-hint .qt-ic{
  width:10px;
  height:10px;
  flex:0 0 10px;
  color:currentColor;
  fill:currentColor;
  stroke:none;
}

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

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

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

#packlist .qt-more{
  position:relative;
  z-index:2;
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:5px;
}

#packlist .qt-more button{
  all:unset;
  box-sizing:border-box;
  min-height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 10px;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 13%,
    rgba(57,75,118,.07)
  );
  border-radius:8px;
  color:color-mix(
    in srgb,
    var(--qt-card-accent) 75%,
    #33425c
  );
  background:color-mix(
    in srgb,
    var(--qt-card-accent) 4.5%,
    #fff
  );
  cursor:pointer;
  font-size:9.7px;
  font-weight:850;
  line-height:1;
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease;
}

#packlist .qt-more button .qt-ic{
  width:10px;
  height:10px;
  color:currentColor;
  fill:currentColor;
  stroke:none;
}

#packlist .qt-card__bottom{
  position:relative;
  z-index:2;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 86px;
  align-items:stretch;
  gap:7px;
  margin-top:auto;
  padding-top:7px;
  border-top:1px solid var(--qt-cat-line-soft);
}

#packlist .qt-card__price{
  min-width:0;
  min-height:36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 8px 5px;
  overflow:hidden;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 10%,
    rgba(57,75,118,.07)
  );
  border-radius:9px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.94),
      color-mix(in srgb,var(--qt-card-accent) 2.3%,#f8faff)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 2px 6px rgba(15,23,42,.022);
}


#packlist .qt-card__priceLabel{
  display:block;
  margin-bottom:2px;
  overflow:hidden;
  color:var(--qt-cat-muted-2);
  font-size:7.7px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#packlist .qt-card__price .now{
  display:block;
  min-width:0;
  overflow:hidden;
  color:var(--qt-cat-ink);
  font-size:13.6px;
  font-weight:950;
  line-height:1.06;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#packlist .qt-btn{
  min-width:0;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 8px;
  border:1px solid color-mix(
    in srgb,
    var(--qt-card-accent) 46%,
    transparent
  );
  border-radius:9px;
  color:#fff!important;
  background:
    radial-gradient(
      95px 50px at 26% 12%,
      rgba(255,255,255,.22),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--qt-card-accent) 87%,#fff),
      var(--qt-card-accent)
    );
  box-shadow:
    0 8px 16px color-mix(
      in srgb,
      var(--qt-card-accent) 17%,
      transparent
    ),
    inset 0 1px 0 rgba(255,255,255,.21);
  font-size:9.9px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

#packlist .qt-btn > span{
  display:grid;
  place-items:center;
}

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

#packlist .qt-btn.noneOrder{
  border-color:var(--qt-cat-line);
  color:var(--qt-cat-muted)!important;
  background:#f0f2f7;
  box-shadow:none;
  pointer-events:none;
  cursor:not-allowed;
  font-size:9.1px;
}

/* =========================================================
   INTERACTION
========================================================= */

#packlist :where(
  .qt-more button,
  .qt-btn,
  .qt-scroll
):focus-visible{
  outline:none;
  box-shadow:var(--qt-cat-focus);
}

@media (hover:hover){
  #packlist .qt-card:hover{
    z-index:2;
    border-color:color-mix(
      in srgb,
      var(--qt-card-accent) 25%,
      rgba(57,75,118,.11)
    );
    background:
      radial-gradient(
        310px 110px at 0 0,
        color-mix(in srgb,var(--qt-card-accent) 8%,transparent),
        transparent 72%
      ),
      #fff;
    box-shadow:
      0 13px 27px rgba(27,41,76,.066),
      inset 0 1px 0 rgba(255,255,255,.96);
    transform:translateY(-1px);
  }

  #packlist .qt-card:hover .qt-card__icon .qt-ic{
    transform:scale(1.035);
  }

  #packlist .qt-more button:hover{
    border-color:color-mix(
      in srgb,
      var(--qt-card-accent) 22%,
      rgba(57,75,118,.08)
    );
    background:color-mix(
      in srgb,
      var(--qt-card-accent) 7%,
      #fff
    );
    transform:translateY(-1px);
  }

  #packlist .qt-btn:hover{
    filter:saturate(1.04) brightness(1.02);
    box-shadow:
      0 10px 20px color-mix(
        in srgb,
        var(--qt-card-accent) 21%,
        transparent
      ),
      inset 0 1px 0 rgba(255,255,255,.24);
    transform:translateY(-1px);
  }
}

/* =========================================================
   POST-FLOW ACCENT BRIDGE
========================================================= */

.qt-category-postflow{
  --qt-flow-accent:var(
    --qt-buy-accent,
    var(--accent,#6a7eff)
  );
  --ac:var(
    --qt-buy-accent,
    var(--accent,#6a7eff)
  );
  --be-accent:var(
    --qt-buy-accent,
    var(--accent,#6a7eff)
  );
  width:100%;
  margin:0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1120px){
  #packlist .packList{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  #packlist .qt-card{
    height:286px;
    min-height:286px;
  }
}

@media (max-width:860px){
  #packlist .packList{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .qt-catbuy__heroBody{
    padding-right:66px;
  }
}

@media (max-width:620px){
  :root{
    --qt-shell-pad:8px;
    --qt-pack-ic-box:39px;
    --qt-pack-ic:18px;
    --qt-btn-ic:13px;
  }

  #qtCategoryBuy.qt-catbuy{
    padding:3px 0 21px;
    background:
      radial-gradient(
        460px 210px at 8% 0,
        color-mix(in srgb,var(--qt-cat-accent) 10%,transparent),
        transparent 70%
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb,var(--qt-cat-accent) 3.4%,#f7f9fd) 0%,
        #f8faff 54%,
        rgba(255,255,255,.98) 100%
      );
  }

  #qtCategoryBuy::before{
    top:86px;
    width:118%;
    height:360px;
    opacity:.36;
  }

  #kategori-header.qt-catbuy__hero{
    grid-template-columns:45px minmax(0,1fr);
    column-gap:10px;
    row-gap:6px;
    padding:9px 11px 12px;
    border-radius:18px;
    background:
      radial-gradient(
        340px 150px at 0 0,
        color-mix(in srgb,var(--qt-cat-accent) 11%,transparent),
        transparent 68%
      ),
      radial-gradient(
        260px 130px at 100% 0,
        rgba(255,255,255,.86),
        transparent 64%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.96),
        rgba(255,255,255,.87)
      );
    box-shadow:
      0 12px 30px rgba(26,40,78,.075),
      inset 0 1px 0 rgba(255,255,255,.94);
  }

  #kategori-header.qt-catbuy__hero::after{
    top:-64px;
    right:-58px;
    width:154px;
    height:154px;
    opacity:.82;
  }

  .qt-catbuy__breadcrumb{
    gap:5px;
    padding:0;
    font-size:9.2px;
    line-height:1.2;
  }

  .qt-catbuy__breadcrumb span[aria-current="page"]{
    max-width:42vw;
  }

  .qt-catbuy__heroIcon{
    width:45px;
    height:45px;
    border-radius:14px;
    box-shadow:
      0 9px 19px color-mix(
        in srgb,
        var(--qt-cat-accent) 19%,
        transparent
      ),
      inset 0 1px 0 rgba(255,255,255,.26);
  }

  .qt-catbuy__heroIcon .qt-ic{
    width:21px!important;
    height:21px!important;
  }

  .qt-catbuy__heroBody{
    padding-right:0;
  }

  .qt-catbuy__title{
    font-size:clamp(1.28rem,6vw,1.48rem);
    line-height:1.07;
    letter-spacing:-.038em;
  }

  .qt-catbuy__desc{
    margin-top:4px!important;
    color:#5b6a83;
    font-size:11.25px;
    font-weight:540;
    line-height:1.43;
  }

  #qtCategoryBuy #packlist{
    margin-top:0;
    padding-top:8px;
  }

  #packlist .packList{
    grid-template-columns:1fr;
    gap:8px;
  }

  #packlist .qt-card{
    height:270px;
    min-height:270px;
    padding:9px;
    border-radius:15px;
  }

  #packlist .qt-card__top{
    grid-template-columns:39px minmax(0,1fr);
    gap:8px;
    margin-bottom:6px;
    padding:7px 8px;
    border-radius:11px;
  }

  #packlist .qt-card__icon{
    border-radius:11px;
  }

  #packlist .qt-card__title{
    font-size:12.75px;
    line-height:1.22;
  }

  #packlist .qt-card__title span{
    font-size:8.25px;
  }

  #packlist .qt-card__detail .qt-scroll,
  #packlist .qt-card__detail .qt-scroll.is-open{
    height:87px;
    max-height:87px!important;
  }

  #packlist .qt-card__detail li{
    padding-left:20px;
    font-size:10.1px;
    line-height:1.36;
  }

  #packlist .qt-card__detail li::before{
    width:13px;
    height:13px;
  }

  #packlist .qt-card__detail li::after{
    top:4px;
    left:4px;
  }

  #packlist .qt-more{
    min-height:25px;
    margin-top:4px;
  }

  #packlist .qt-more button{
    min-height:25px;
    padding:0 9px;
    font-size:9.35px;
  }

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

  #packlist .qt-card__price{
    min-height:41px;
    padding:5px 8px;
  }

  #packlist .qt-card__priceLabel{
    margin-bottom:2px;
    font-size:7.8px;
  }

  #packlist .qt-card__price .now{
    font-size:14px;
  }

  #packlist .qt-btn{
    min-height:41px;
    padding:0 8px;
    font-size:10.2px;
  }

  #packlist .qt-scroll-hint{
    right:6px;
    bottom:6px;
    min-height:22px;
    padding:0 7px;
    font-size:9.2px;
  }
}

@media (max-width:360px){
  #kategori-header.qt-catbuy__hero{
    grid-template-columns:42px minmax(0,1fr);
    padding:8px 9px 11px;
  }

  .qt-catbuy__heroIcon{
    width:42px;
    height:42px;
  }

  .qt-catbuy__title{
    font-size:1.23rem;
  }

  .qt-catbuy__desc{
    font-size:10.8px;
  }

  #packlist .qt-card{
    height:274px;
    min-height:274px;
  }

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

  #packlist .qt-btn{
    font-size:9.8px;
  }
}

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

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

  #packlist .qt-btn{
    min-height:38px;
  }
}

@media (prefers-reduced-motion:reduce){
  #qtCategoryBuy *,
  #qtCategoryBuy *::before,
  #qtCategoryBuy *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* =========================================================
   FINAL V6 — STABLE / READABLE PACKAGE CARDS
   Bu bölüm dosyanın sonundadır ve önceki kart ölçülerini nihai
   kurallarla geçersiz kılar.
========================================================= */

/* Masaüstünde kartlar satır içinde hizalı, içerik yüksekliği doğaldır. */
#packlist .qt-card{
  min-height:266px!important;
  height:auto!important;
}

#packlist .qt-card__title{
  font-size:14.1px;
  line-height:1.24;
}

#packlist .qt-card__detail{
  flex:0 0 auto;
  min-height:0;
  overflow:visible;
}

/* 1–4 özellik: sabit boş alan ve gereksiz detay düğmesi yoktur. */
#packlist .qt-card.has-static-details .qt-card__detail.is-static .qt-scroll{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:1px 1px 0 0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
}

/* 5+ özellik: kapalı ve açık geometrisi tamamen aynıdır. */
#packlist .qt-card.has-scrollable-details .qt-card__detail.is-scrollable{
  flex:0 0 106px!important;
  width:100%;
  height:106px!important;
  min-height:106px!important;
  max-height:106px!important;
  overflow:hidden!important;
}

#packlist .qt-card.has-scrollable-details .qt-card__detail.is-scrollable .qt-scroll,
#packlist .qt-card.has-scrollable-details .qt-card__detail.is-scrollable .qt-scroll.is-open{
  box-sizing:border-box!important;
  width:100%!important;
  height:106px!important;
  min-height:106px!important;
  max-height:106px!important;
  padding:6px 8px 15px 7px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
}

#packlist .qt-card.has-scrollable-details .qt-card__detail.is-scrollable .qt-scroll{
  overflow:hidden!important;
}

#packlist .qt-card.has-scrollable-details .qt-card__detail.is-scrollable .qt-scroll.is-open{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  border-color:color-mix(
    in srgb,
    var(--qt-card-accent) 16%,
    rgba(57,75,118,.075)
  )!important;
  background:color-mix(
    in srgb,
    var(--qt-card-accent) 3.2%,
    rgba(255,255,255,.80)
  )!important;
}

#packlist .qt-card__detail ul{
  gap:6px;
  padding:0;
}

#packlist .qt-card.has-scrollable-details .qt-card__detail ul{
  padding-bottom:22px;
}

#packlist .qt-card__detail li{
  padding-left:22px;
  font-size:11.25px;
  font-weight:560;
  line-height:1.42;
}

#packlist .qt-card__detail li::before{
  width:15px;
  height:15px;
}

#packlist .qt-card__detail li::after{
  top:5px;
  left:4px;
  border-left-width:1.7px;
  border-bottom-width:1.7px;
}

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

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

/* Alt alan masaüstünde ince kalır. */
#packlist .qt-card__bottom{
  grid-template-columns:minmax(0,1fr) 86px;
  gap:7px;
  padding-top:8px;
}

#packlist .qt-card__price,
#packlist .qt-btn{
  min-height:36px;
}

#packlist .qt-card__price{
  padding:4px 8px 5px;
}

#packlist .qt-card__priceLabel{
  margin-bottom:2px;
  font-size:7.7px;
}

#packlist .qt-card__price .now{
  font-size:13.6px;
}

#packlist .qt-btn{
  padding:0 8px;
  font-size:9.9px;
}

@media (max-width:620px){
  :root{
    --qt-pack-ic-box:47px;
    --qt-pack-ic:22px;
  }

  /* Mobilde kart boyu içerikten gelir; kısa kartta boş alan kalmaz. */
  #packlist .qt-card{
    min-height:0!important;
    height:auto!important;
    padding:11px!important;
    border-radius:16px;
  }

  #packlist .qt-card__top{
    grid-template-columns:47px minmax(0,1fr);
    gap:10px;
    margin-bottom:10px;
    padding:9px 10px;
    border-radius:13px;
  }

  #packlist .qt-card__icon{
    border-radius:13px;
  }

  #packlist .qt-card__title{
    font-size:16px;
    line-height:1.24;
    letter-spacing:-.022em;
  }

  #packlist .qt-card__title span{
    margin-bottom:3px;
    font-size:10.1px;
  }

  #packlist .qt-card__detail{
    margin-top:0;
  }

  #packlist .qt-card.has-static-details .qt-card__detail.is-static .qt-scroll{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:1px 0 0!important;
    overflow:visible!important;
  }

  #packlist .qt-card.has-scrollable-details .qt-card__detail.is-scrollable{
    flex-basis:142px!important;
    height:142px!important;
    min-height:142px!important;
    max-height:142px!important;
  }

  #packlist .qt-card.has-scrollable-details .qt-card__detail.is-scrollable .qt-scroll,
  #packlist .qt-card.has-scrollable-details .qt-card__detail.is-scrollable .qt-scroll.is-open{
    height:142px!important;
    min-height:142px!important;
    max-height:142px!important;
    padding:8px 9px 18px 8px!important;
  }

  #packlist .qt-card__detail ul{
    gap:8px;
  }

  #packlist .qt-card__detail li{
    padding-left:25px;
    color:#52627c;
    font-size:13.2px!important;
    font-weight:580;
    line-height:1.44;
  }

  #packlist .qt-card__detail li::before{
    top:1px;
    width:17px;
    height:17px;
    border-radius:6px;
  }

  #packlist .qt-card__detail li::after{
    top:6px;
    left:5px;
    width:6px;
    height:3px;
  }

  #packlist .qt-more{
    min-height:34px;
    margin-top:9px;
  }

  #packlist .qt-more button{
    min-height:34px;
    padding:0 13px;
    border-radius:10px;
    font-size:12px;
  }

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

  #packlist .qt-card__price,
  #packlist .qt-btn{
    min-height:41px;
  }

  #packlist .qt-card__price{
    padding:5px 9px 6px;
  }

  #packlist .qt-card__priceLabel{
    margin-bottom:3px;
    font-size:8.4px;
  }

  #packlist .qt-card__price .now{
    font-size:15.2px;
  }

  #packlist .qt-btn{
    padding:0 9px;
    font-size:10.5px;
  }
}

@media (max-width:360px){
  #packlist .qt-card{
    padding:10px!important;
  }

  #packlist .qt-card__title{
    font-size:15.2px;
  }

  #packlist .qt-card__detail li{
    padding-left:24px;
    font-size:12.7px!important;
  }

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