/* Category + channel image posters — every dark card carries a real visual. */
.category-list{
  display:grid;
  gap:8px;
  border-top:0;
}
.category-list .system-row,
.category-list .system-row[data-title="Çocuk & Aile"]{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:158px;
  border:0;
  border-radius:2px;
  padding:22px 18px;
  color:#fff;
  background-image:
    linear-gradient(90deg,rgba(20,8,28,.88) 0%,rgba(25,9,34,.64) 48%,rgba(12,8,17,.22) 100%),
    linear-gradient(0deg,rgba(7,5,9,.62),transparent 62%),
    var(--category-poster);
  background-position:center,center,center 43%;
  background-size:cover,cover,106%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
  transition:background-size .9s cubic-bezier(.2,.7,.2,1),background-position .9s cubic-bezier(.2,.7,.2,1),transform .35s,filter .35s,padding .35s;
}
.category-list .system-row::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(110deg,transparent 8%,rgba(208,170,237,.20) 43%,transparent 68%);
  transform:translateX(-110%);
  transition:transform .85s cubic-bezier(.2,.7,.2,1);
}
.category-list .system-row::after,
.category-list .system-row[data-title="Çocuk & Aile"]::after{
  content:"DINAMO / PRODUCT UNIVERSE";
  position:absolute;
  right:16px;
  bottom:13px;
  z-index:2;
  font:7px "DM Mono",monospace;
  letter-spacing:.15em;
  color:rgba(255,255,255,.55);
}
.category-list .system-row:hover,
.category-list .system-row.active,
.category-list .system-row.concept:hover,
.category-list .system-row.concept.active,
.category-list .system-row[data-title="Çocuk & Aile"]:hover,
.category-list .system-row[data-title="Çocuk & Aile"].active{
  padding-left:26px;
  padding-right:20px;
  background-image:
    linear-gradient(90deg,rgba(70,21,91,.90) 0%,rgba(61,17,81,.62) 48%,rgba(20,8,27,.16) 100%),
    linear-gradient(0deg,rgba(7,5,9,.56),transparent 62%),
    var(--category-poster);
  background-position:center,center,center 49%;
  background-size:cover,cover,112%;
  filter:saturate(1.06) contrast(1.03);
}
.category-list .system-row:hover::before,
.category-list .system-row.active::before{transform:translateX(110%)}
.category-list .system-row span,
.category-list .system-row b,
.category-list .system-row i,
.category-list .system-row em{
  position:relative;
  z-index:2;
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.58);
}
.category-list .system-row i{color:rgba(255,255,255,.78)}
.category-list .system-row em{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  backdrop-filter:blur(8px);
}

.channel-track article,
.channel-track article:nth-child(n){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background-image:
    linear-gradient(0deg,rgba(12,6,16,.88) 0%,rgba(28,9,36,.34) 60%,rgba(9,5,12,.18) 100%),
    var(--channel-poster);
  background-position:center,center;
  background-size:cover,cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background-size .9s cubic-bezier(.2,.7,.2,1),transform .35s;
}
.channel-track article::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(218,180,240,.19) 46%,transparent 70%);
  transform:translateX(-110%);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.channel-track article:hover{background-size:cover,108%;transform:translateY(-5px)}
.channel-track article:hover::before{transform:translateX(110%)}
.channel-track article span,.channel-track article h3,.channel-track article p{
  position:relative;
  z-index:2;
  text-shadow:0 2px 24px rgba(0,0,0,.64);
}
.channel-track article span{color:rgba(255,255,255,.75)}
.channel-track article p{color:rgba(255,255,255,.86)}

@media(max-width:760px){
  .category-list{gap:7px}
  .category-list .system-row,
  .category-list .system-row[data-title="Çocuk & Aile"]{
    min-height:126px;
    grid-template-columns:34px 1fr 25px;
    padding:17px 12px;
    background-size:cover,cover,118%;
  }
  .category-list .system-row i{display:none}
  .category-list .system-row:hover,
  .category-list .system-row.active,
  .category-list .system-row.concept:hover,
  .category-list .system-row.concept.active,
  .category-list .system-row[data-title="Çocuk & Aile"]:hover,
  .category-list .system-row[data-title="Çocuk & Aile"].active{
    padding-left:17px;
    padding-right:12px;
    background-size:cover,cover,125%;
  }
  .category-list .system-row::after,
  .category-list .system-row[data-title="Çocuk & Aile"]::after{right:12px;bottom:9px;font-size:6px}
  .channel-track article,.channel-track article:nth-child(n){min-height:440px}
}

@media(prefers-reduced-motion:reduce){
  .category-list .system-row,
  .channel-track article{transition:none}
  .category-list .system-row::before,
  .channel-track article::before{display:none}
}