/* =========================================================
   Unicarts64 — Products / Catalog
   Ana sayfanın tasarım sistemiyle uyumlu katalog deneyimi
   ========================================================= */

.productsPage{
  min-height:100vh;
  background:var(--uc-bg);
}

.productsHero{
  position:relative;
  overflow:hidden;
  padding:72px 0 58px;
  border-bottom:1px solid var(--uc-line);
  background:
    linear-gradient(rgba(17,18,20,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,20,.03) 1px,transparent 1px),
    var(--uc-bg);
  background-size:48px 48px;
}
.productsHero::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-210px;
  top:-280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(227,58,52,.12),transparent 69%);
  pointer-events:none;
}
.productsHero::after{
  content:"";
  position:absolute;
  width:440px;
  height:440px;
  right:-200px;
  bottom:-270px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(17,18,20,.055),transparent 70%);
  pointer-events:none;
}
.productsHeroInner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:56px;
}
.productsBreadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  color:#85878b;
  font-size:11px;
  font-weight:700;
}
.productsBreadcrumb a{transition:color .2s ease}
.productsBreadcrumb a:hover{color:var(--uc-red)}
.productsBreadcrumb span{color:#b3b4b7}
.productsKicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:15px;
  color:var(--uc-red);
  font-size:10px;
  line-height:1;
  font-weight:850;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.productsKicker::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}
.productsHero h1{
  max-width:850px;
  margin:0;
  font-size:clamp(46px,5.5vw,76px);
  line-height:.94;
  letter-spacing:-.058em;
  font-weight:850;
}
.productsHeroText{
  max-width:650px;
  margin:20px 0 0;
  color:#5f6267;
  font-size:14px;
  line-height:1.72;
}
.productsHeroStats{
  display:grid;
  grid-template-columns:repeat(2,minmax(110px,1fr));
  min-width:270px;
  border-left:1px solid var(--uc-line);
}
.productsHeroStat{
  padding:8px 0 8px 28px;
}
.productsHeroStat + .productsHeroStat{
  border-left:1px solid var(--uc-line);
}
.productsHeroStat strong{
  display:block;
  color:var(--uc-ink);
  font-size:27px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.045em;
}
.productsHeroStat span{
  display:block;
  margin-top:8px;
  color:#8a8c90;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.catalogSection{padding:52px 0 96px}
.catalogLayout{
  display:grid;
  grid-template-columns:245px minmax(0,1fr);
  align-items:start;
  gap:38px;
}

/* ---------- sidebar ---------- */
.catalogSidebar{
  position:sticky;
  top:98px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.catalogSidebarPanel{
  padding:22px 18px 18px;
  border:1px solid var(--uc-line);
  border-radius:20px;
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.catalogSidebarTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
  padding:0 5px;
}
.catalogSidebarTitle strong{
  font-size:12px;
  font-weight:800;
  letter-spacing:-.01em;
}
.catalogSidebarTitle span{
  color:#9a9ca0;
  font-size:9px;
  font-weight:800;
}
.categoryList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.categoryButton{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#595c61;
  cursor:pointer;
  text-align:left;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.categoryButton:hover{
  color:var(--uc-ink);
  background:rgba(17,18,20,.045);
  transform:translateX(2px);
}
.categoryButton.isActive{
  color:#fff;
  background:var(--uc-dark);
}
.categoryName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:680;
}
.categoryCount{
  min-width:24px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(17,18,20,.055);
  color:#8b8d91;
  font-size:8px;
  font-weight:800;
  text-align:center;
}
.categoryButton.isActive .categoryCount{
  color:#fff;
  background:rgba(255,255,255,.12);
}

.wholesaleCard{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:20px;
  background:var(--uc-dark);
  color:#fff;
}
.wholesaleCard::after{
  content:"1:64";
  position:absolute;
  right:-4px;
  top:-7px;
  color:rgba(255,255,255,.035);
  font-size:66px;
  font-weight:900;
  letter-spacing:-.08em;
  pointer-events:none;
}
.wholesaleEyebrow{
  position:relative;
  z-index:1;
  color:#ff625d;
  font-size:8px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.wholesaleCard h3{
  position:relative;
  z-index:1;
  margin:10px 0 0;
  font-size:20px;
  line-height:1.05;
  letter-spacing:-.035em;
}
.wholesaleCard p{
  position:relative;
  z-index:1;
  margin:11px 0 0;
  color:#8f949b;
  font-size:10px;
  line-height:1.55;
}
.wholesalePackages{
  position:relative;
  z-index:1;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:15px;
}
.wholesalePackages span{
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  color:#c4c7cc;
  font-size:8px;
  font-weight:750;
}
.wholesaleLink{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-size:10px;
  font-weight:800;
  transition:gap .2s ease,border-color .2s ease;
}
.wholesaleLink:hover{gap:11px;border-color:var(--uc-red)}

/* ---------- content / toolbar ---------- */
.catalogContent{min-width:0}
.catalogToolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto auto;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}
.catalogSearch{
  position:relative;
}
.catalogSearch svg{
  position:absolute;
  left:15px;
  top:50%;
  width:17px;
  height:17px;
  transform:translateY(-50%);
  color:#96989c;
  pointer-events:none;
}
.catalogSearch input,
.catalogSelect{
  width:100%;
  height:48px;
  border:1px solid var(--uc-line);
  outline:none;
  background:rgba(255,255,255,.76);
  color:var(--uc-ink);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.catalogSearch input{
  padding:0 16px 0 45px;
  border-radius:14px;
  font-size:12px;
}
.catalogSearch input::placeholder{color:#9b9da1}
.catalogSearch input:focus,
.catalogSelect:focus{
  border-color:rgba(227,58,52,.45);
  background:#fff;
  box-shadow:0 0 0 3px rgba(227,58,52,.08);
}
.catalogSelect{
  min-width:170px;
  padding:0 36px 0 14px;
  border-radius:14px;
  font-size:11px;
  font-weight:650;
  cursor:pointer;
}
.mobileCategorySelect{display:none}
.catalogClear{
  height:48px;
  padding:0 16px;
  border:1px solid var(--uc-line);
  border-radius:14px;
  background:transparent;
  color:#74777b;
  font-size:10px;
  font-weight:750;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.catalogClear:hover{
  color:var(--uc-ink);
  border-color:rgba(17,18,20,.23);
  background:rgba(255,255,255,.55);
}
.catalogMeta{
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.catalogResultText{
  color:#7a7d81;
  font-size:10px;
  font-weight:650;
}
.catalogResultText strong{color:var(--uc-ink);font-weight:800}
.catalogActiveFilter{
  display:none;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(227,58,52,.09);
  color:var(--uc-red-deep);
  font-size:9px;
  font-weight:800;
}
.catalogActiveFilter.isVisible{display:inline-flex}

/* ---------- product grid ---------- */
.productsGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
}
.productCard{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--uc-line);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .28s ease;
}
.productCard:hover{
  transform:translateY(-4px);
  border-color:rgba(17,18,20,.2);
  box-shadow:0 18px 46px rgba(17,18,20,.08);
}
.productMedia{
  position:relative;
  aspect-ratio:1 / .93;
  overflow:hidden;
  background:
    linear-gradient(rgba(17,18,20,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,20,.025) 1px,transparent 1px),
    #f8f8f6;
  background-size:32px 32px;
}
.productMedia img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:16px 16px 10px;
  object-fit:contain;
  object-position:center;
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.productMedia .productImageSecond{opacity:0}
@media (hover:hover) and (pointer:fine){
  .productCard:hover .productImageFirst{opacity:0;transform:scale(1.025)}
  .productCard:hover .productImageSecond{opacity:1;transform:scale(1.025)}
}
.productBadges{
  position:absolute;
  z-index:3;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  pointer-events:none;
}
.productBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(17,18,20,.09);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  color:#515459;
  font-size:7px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.productBadge--new::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--uc-red);
}
.productBadge--archived{
  color:#fff;
  border-color:transparent;
  background:rgba(17,18,20,.88);
}
.productCardBody{
  display:flex;
  flex-direction:column;
  min-height:176px;
  padding:16px 16px 15px;
}
.productCategory{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--uc-red);
  font-size:8px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.productName{
  margin:8px 0 0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:var(--uc-ink);
  font-size:16px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.025em;
}
.productPriceRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:11px;
}
.productPriceRow strong{
  color:var(--uc-ink);
  font-size:17px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.productPriceRow span{
  color:#989a9e;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.productActions{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:17px;
}
.productDetailLink{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  color:#55585d;
  font-size:9px;
  font-weight:800;
  transition:color .2s ease,gap .2s ease;
}
.productDetailLink:hover{color:var(--uc-red);gap:10px}
.productAddButton{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:11px;
  background:var(--uc-dark);
  color:#fff;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}
.productAddButton:hover{transform:translateY(-2px);background:#24272c}
.productAddButton svg{width:16px;height:16px}
.productAddButton.isAdded{background:var(--uc-red)}
.productAddButton:disabled{
  cursor:not-allowed;
  opacity:.34;
  transform:none;
}
.productCard.isArchived .productMedia img{filter:grayscale(.82);opacity:.55}
.productCard.isArchived .productImageSecond{display:none}

.catalogEmpty{
  grid-column:1/-1;
  display:grid;
  place-items:center;
  min-height:320px;
  padding:40px;
  border:1px dashed rgba(17,18,20,.17);
  border-radius:20px;
  color:#777a7f;
  text-align:center;
}
.catalogEmpty strong{
  display:block;
  margin-bottom:7px;
  color:var(--uc-ink);
  font-size:18px;
}
.catalogEmpty span{font-size:11px;line-height:1.6}

/* ---------- pagination ---------- */
.catalogPagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-top:34px;
}
.pageButton{
  min-width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#777a7f;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.pageButton:hover:not(:disabled){
  color:var(--uc-ink);
  background:rgba(255,255,255,.8);
  border-color:var(--uc-line);
}
.pageButton.isActive{
  color:#fff;
  background:var(--uc-dark);
}
.pageButton:disabled{opacity:.28;cursor:not-allowed}
.pageEllipsis{
  min-width:28px;
  text-align:center;
  color:#aaa;
  font-size:10px;
}

/* ---------- wholesale strip ---------- */
.wholesaleStrip{
  margin-top:70px;
  padding:0 0 96px;
}
.wholesaleStripInner{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:36px;
  padding:34px 38px;
  border-radius:24px;
  background:var(--uc-dark);
  color:#fff;
}
.wholesaleStripInner::after{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  right:-90px;
  top:-150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(227,58,52,.2),transparent 68%);
}
.wholesaleStripEyebrow{
  color:#ff615c;
  font-size:8px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.wholesaleStrip h2{
  position:relative;
  z-index:1;
  max-width:700px;
  margin:9px 0 0;
  font-size:clamp(25px,3vw,38px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.wholesaleStrip p{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:11px 0 0;
  color:#92969d;
  font-size:11px;
  line-height:1.65;
}
.wholesaleStripButton{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:0 18px;
  border-radius:13px;
  background:#fff;
  color:var(--uc-dark);
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  transition:transform .2s ease,background .2s ease;
}
.wholesaleStripButton:hover{transform:translateY(-2px);background:#f3f3f1}

@media(max-width:1120px){
  .catalogLayout{grid-template-columns:220px minmax(0,1fr);gap:26px}
  .productsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .productsHeroStats{min-width:240px}
}

@media(max-width:860px){
  .productsHero{padding:54px 0 42px}
  .productsHeroInner{grid-template-columns:1fr;gap:30px}
  .productsHeroStats{width:max-content;min-width:0;border-left:0}
  .productsHeroStat{padding:0 26px 0 0}
  .productsHeroStat + .productsHeroStat{padding-left:26px}
  .catalogSection{padding-top:34px}
  .catalogLayout{grid-template-columns:1fr}
  .catalogSidebar{display:none}
  .catalogToolbar{grid-template-columns:minmax(0,1fr) 165px}
  .mobileCategorySelect{display:block;grid-column:1/-1}
  .catalogClear{display:none}
  .wholesaleStrip{margin-top:50px;padding-bottom:70px}
}

@media(max-width:620px){
  .productsHero{padding:40px 0 34px;background-size:36px 36px}
  .productsBreadcrumb{margin-bottom:18px}
  .productsHero h1{font-size:clamp(38px,12vw,54px)}
  .productsHeroText{font-size:12px;line-height:1.65}
  .productsHeroStats{width:100%;grid-template-columns:1fr 1fr}
  .productsHeroStat strong{font-size:23px}
  .catalogSection{padding:26px 0 64px}
  .catalogToolbar{grid-template-columns:1fr;gap:8px}
  .mobileCategorySelect{grid-column:auto}
  .catalogSelect{min-width:0}
  .catalogMeta{align-items:flex-start;flex-direction:column;gap:7px;margin-bottom:13px}
  .productsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .productCard{border-radius:14px}
  .productMedia{aspect-ratio:1 / 1.02}
  .productMedia img{padding:10px 8px 6px}
  .productBadges{top:8px;left:8px;right:8px}
  .productBadge{min-height:20px;padding:0 6px;font-size:6px}
  .productCardBody{min-height:150px;padding:12px 11px 11px}
  .productCategory{font-size:6.5px}
  .productName{font-size:13px}.productPriceRow strong{font-size:15px}.productPriceRow span{font-size:6px}
  .productActions{padding-top:13px}
  .productDetailLink{font-size:8px}
  .productAddButton{width:34px;height:34px;border-radius:9px}
  .productAddButton svg{width:14px;height:14px}
  .catalogPagination{margin-top:25px;gap:3px}
  .pageButton{min-width:32px;height:32px;border-radius:9px}
  .wholesaleStripInner{grid-template-columns:1fr;gap:22px;padding:27px 24px}
  .wholesaleStripButton{width:max-content}
}

@media(max-width:390px){
  .productsGrid{grid-template-columns:1fr}
  .productMedia{aspect-ratio:1.18 / 1}
}
.catalogActiveFilter.isVisible{cursor:pointer;transition:background .2s ease,color .2s ease}
.catalogActiveFilter.isVisible:hover{background:rgba(227,58,52,.15);color:#a92b27}

/* ---------- visual-first product cards ---------- */
.productMedia{
  display:block;
  aspect-ratio:1.16 / 1;
  border-bottom:1px solid rgba(17,18,20,.055);
  background:
    radial-gradient(circle at 78% 15%, rgba(227,58,52,.055), transparent 24%),
    linear-gradient(rgba(17,18,20,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,20,.022) 1px,transparent 1px),
    #fbfbf9;
  background-size:auto,32px 32px,32px 32px,auto;
}
.productMedia img{
  padding:20px 18px 14px;
  filter:drop-shadow(0 16px 20px rgba(17,18,20,.08));
}
.productMedia .productImageSecond{opacity:0}
@media (hover:hover) and (pointer:fine){
  .productCard:hover .productImageFirst{opacity:1;transform:scale(1.025)}
  .productCard:hover .productImageSecond{opacity:0;transform:scale(1.025)}
  .productCard.hasSecondImage:hover .productImageFirst{opacity:0}
  .productCard.hasSecondImage:hover .productImageSecond{opacity:1}
}
.productImageFirst.is-image-missing{
  display:none;
}
.productMedia:has(.productImageFirst.is-image-missing)::after{
  content:"Görsel hazırlanıyor";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#a0a2a5;
  font-size:10px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- SEO / expertise close ---------- */
.decalSeoSection{
  padding:0 0 92px;
  background:var(--uc-bg);
}
.decalSeoGrid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:72px;
  padding-top:42px;
  border-top:1px solid var(--uc-line);
}
.decalSeoKicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--uc-red);
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
}
.decalSeoKicker::before{
  content:"";
  width:22px;
  height:2px;
  background:currentColor;
}
.decalSeoGrid h2{
  max-width:560px;
  margin:15px 0 0;
  font-size:clamp(28px,3.2vw,45px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.decalSeoCopy{
  align-self:end;
  max-width:680px;
}
.decalSeoCopy p{
  margin:0;
  color:#64676b;
  font-size:13px;
  line-height:1.78;
}
.decalSeoCopy p + p{margin-top:14px}

@media (max-width:760px){
  .decalSeoSection{padding-bottom:64px}
  .decalSeoGrid{grid-template-columns:1fr;gap:24px;padding-top:32px}
  .decalSeoCopy p{font-size:12px;line-height:1.7}
}

/* ---------- SEO / catalog heading ---------- */
.catalogContentHead{
  margin:0 0 20px;
  padding:0 2px;
}
.catalogContentKicker{
  display:block;
  margin-bottom:7px;
  color:var(--uc-red);
  font-size:8px;
  font-weight:850;
  letter-spacing:.15em;
}
.catalogContentHead h2{
  margin:0;
  font-size:clamp(22px,2.3vw,32px);
  line-height:1.05;
  letter-spacing:-.04em;
}
.catalogContentHead p{
  max-width:620px;
  margin:8px 0 0;
  color:#71747a;
  font-size:12px;
  line-height:1.6;
}
.categoryButton{
  text-decoration:none;
}
.pageButton{
  text-decoration:none;
}
.pageButton.isDisabled{
  opacity:.35;
  pointer-events:none;
}
.decalSeoTopics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}
.decalSeoTopics article{
  padding:15px;
  border:1px solid var(--uc-line);
  border-radius:14px;
  background:rgba(255,255,255,.46);
}
.decalSeoTopics strong{
  display:block;
  color:var(--uc-ink);
  font-size:11px;
  line-height:1.25;
}
.decalSeoTopics span{
  display:block;
  margin-top:6px;
  color:#777a80;
  font-size:9px;
  line-height:1.55;
}
@media (max-width:760px){
  .decalSeoTopics{grid-template-columns:1fr;}
}