:root{--brand:#6f5bff;--brand-2:#00d4ff;--text:#1c1f2e;--radius:1rem;--card-bg:#ffffffcc}
*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';color:var(--text)}
.bg-gradient{background:radial-gradient(1200px 600px at 20% -10%,#e6e3ff 0%,rgba(255,255,255,0) 60%),radial-gradient(1200px 600px at 120% 10%,#d0f6ff 0%,rgba(255,255,255,0) 60%)}
.hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%); position:relative; overflow:hidden;}
.hero::after{content:''; position:absolute; inset:0; background-image:var(--hero); background-size:cover; background-position:center; opacity:.18; pointer-events:none;}
.glass{background:rgba(255,255,255,.7)!important; backdrop-filter:saturate(1.2) blur(6px)}
.card{border:0;background:var(--card-bg)}
.card .card-img-top{object-fit:cover;height:160px}
.btn-primary{background-color:var(--brand);border-color:var(--brand)}
.btn-outline-primary{color:var(--brand);border-color:var(--brand)}
.btn-outline-primary:hover{background-color:var(--brand);border-color:var(--brand);color:#fff}
.rounded-4{border-radius:var(--radius)!important}
.brand-logo{height:28px;width:auto}

.cat-card{position:relative;overflow:hidden;min-height:120px}
.cat-card .half-bg{position:absolute;top:0;right:0;bottom:0;width:50%;background-image:var(--img);background-size:cover;background-position:center;opacity:.28}
.cat-logo{height:50px;width:50px;object-fit:contain}

@media(max-width:576px){
  .hero{padding:2rem!important}
  .card .card-img-top{height:140px}
  .cat-card .half-bg{width:40%;}
}

/* Hover zoom for logos */
.cat-logo,
.brand-logo {
  transition: transform .22s ease, filter .22s ease;
  transform-origin: center center;
  will-change: transform;
}

.cat-logo:hover,
.brand-logo:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}

/* Hover zoom for category background half */
.cat-card .half-bg{
  transition: transform .35s ease;
  transform-origin: center center;
}
.cat-card:hover .half-bg{
  transform: scale(1.08);
}

/* Hover zoom + de-blur + brighten on category image */
.cat-card .half-bg{
  position:absolute; top:0; right:0; bottom:0; width:50%;
  background-size:cover; background-position:center;
  opacity:.28;                                /* پیش‌فرض: کمی محو */
  transform: scale(1); transform-origin:center right;
  transition:
    transform .35s ease,
    filter .35s ease,
    opacity .35s ease;
  will-change: transform, filter, opacity;    /* روان‌تر شدن انیمیشن */
}

.cat-card:hover .half-bg{
  transform: scale(1.08);                     /* زوم نرم */
  opacity:.55;                                /* روشن‌تر شدن تصویر */
  filter: blur(0) brightness(1.06) saturate(1.08); /* ماتی برو و کمی روشن/زنده‌تر شو */
}

/* اگر می‌خوای روی موبایل هم روان‌تر باشه، عرض تصویر نصفه رو کمتر کن */
@media(max-width:576px){
  .cat-card .half-bg{ width:40%; }
}


.hero::after{
  transition: opacity .85s ease, filter .35s ease;
  filter: blur(2px) brightness(.92) saturate(.95);
}
.hero:hover::after{
  filter: blur(0) brightness(1.04) saturate(1.06);
  opacity:.26; /* کمی پررنگ‌تر */
}

/* Lock text to the left (white) half of the category card */
.cat-card .card-body,
.cat-card .row {
  position: relative;
  z-index: 2;
  padding-right: calc(50% + 16px) !important;  /* نیمه‌ی راست (عکس) + یک گپ کوچک */
}

/* موبایل: چون عرض عکس 40% شده، پدینگ متن هم 40% باشد */
@media (max-width:576px){
  .cat-card .card-body,
  .cat-card .row {
    padding-right: calc(40% + 12px) !important;
  }
}