/* Kemer kategori kartları (prototip .cats/.cat) */
.cc_LwkzYoivJ1_ObFOy8mz2g .cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.cc_LwkzYoivJ1_ObFOy8mz2g .cat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 3 / 4.3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  background: linear-gradient(160deg, var(--blush) 0%, var(--lav) 100%);
  color: var(--ink);
  text-decoration: none;
}

.cc_LwkzYoivJ1_ObFOy8mz2g .cat img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.cc_LwkzYoivJ1_ObFOy8mz2g .cat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 48%, rgba(255, 250, 248, .97) 82%);
}

.cc_LwkzYoivJ1_ObFOy8mz2g .cat:hover img { transform: scale(1.08); }
.cc_LwkzYoivJ1_ObFOy8mz2g .cat h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2vw, 32px); line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
/* Üzerine gelince başlığın çevresine kalemle çizilen el yapımı halka */
.cc_LwkzYoivJ1_ObFOy8mz2g .cat-name { position: relative; display: inline-block; }
.cc_LwkzYoivJ1_ObFOy8mz2g .cat-ring {
  position: absolute;
  inset: -16px -22px -14px;
  width: calc(100% + 44px);
  height: calc(100% + 30px);
  overflow: visible;
  pointer-events: none;
}
.cc_LwkzYoivJ1_ObFOy8mz2g .cat-ring path {
  fill: none;
  stroke: var(--berry);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* With a non-scaling stroke Chrome measures the dashes on screen, so on wide titles a dash of
     the "hidden" pattern peeked through. A long gap plus opacity keeps the ring fully hidden
     until hover; the dash offset still draws it like a pen stroke. */
  stroke-dasharray: 1 3;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0s linear 0.9s;
}
.cc_LwkzYoivJ1_ObFOy8mz2g .cat:hover .cat-ring path, .cc_LwkzYoivJ1_ObFOy8mz2g .cat:focus-visible .cat-ring path {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0s;
}
@media (prefers-reduced-motion: reduce) { .cc_LwkzYoivJ1_ObFOy8mz2g .cat-ring path { transition: none; } }
.cc_LwkzYoivJ1_ObFOy8mz2g .cat .n { font-size: 13.5px; font-weight: 800; color: var(--berry); }
.cc_LwkzYoivJ1_ObFOy8mz2g .cat .sp1 { top: 16%; left: 16%; --s: 14px; --d: 2.6s; --c: var(--berry); }
.cc_LwkzYoivJ1_ObFOy8mz2g .cat .sp2 { top: 28%; right: 18%; --s: 10px; --d: 3.4s; --dl: -1s; --c: var(--rose); }

@media (max-width: 1100px) {
  .cc_LwkzYoivJ1_ObFOy8mz2g .cats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .cc_LwkzYoivJ1_ObFOy8mz2g .cats { grid-template-columns: 1fr 1fr; }
  .cc_LwkzYoivJ1_ObFOy8mz2g .cat:first-child { grid-column: span 2; aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
  .cc_LwkzYoivJ1_ObFOy8mz2g .cat h3 { font-size: 20px; }
}